chore: bump version to v0.1.101

Permet de consulter les exercices passés (table hebdomadaire RTT) en
réutilisant le pattern de l'onglet Congés. Plage bornée par
max(début historique contrat, RTT_START_DATE). Bouton + Payer les RTT
verrouillé sur exercices clos. Onglet masqué pour FORFAIT (inchangé).

Backend : rttStartDate désormais toujours exposé sur EmployeeRttSummary
pour que le sélecteur conserve sa borne lors de la navigation vers un
exercice passé. Le masquage existant des lignes Report continue de
fonctionner (comparaison mois-à-mois).

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

.claude/settings.local.json

@@ -24,7 +24,10 @@
       "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(find:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(python3:*)"
     ]
   }
 }

.dockerignore

@@ -3,6 +3,7 @@
 .env.local
 .env.test
 docker/
+!docker/php/config/php.ini
 deploy/docker/docker-compose.prod.yml
 deploy/docker/deploy.sh
 deploy/docker/.env.example

.env

@@ -38,6 +38,9 @@ DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&ch
 
 ###> app ###
 RTT_START_DATE=2026-02-23
+# Comma-separated list of public holiday labels to exclude from the government API response
+# (typically the "journée de solidarité" worked in many companies)
+EXCLUDED_PUBLIC_HOLIDAYS="Lundi de Pentecôte"
 ###< app ###
 
 ###> nelmio/cors-bundle ###

.idea/db-forest-config.xml

@@ -1,5 +1,15 @@
 <?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>

CLAUDE.md

@@ -2,6 +2,7 @@
 
 ## Mandatory Rules
 - Any functional change MUST update `doc/` in the same intervention
+- Any functional change MUST update the in-app documentation (`frontend/data/documentation-content.ts`) 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
@@ -14,6 +15,7 @@
 ## Stack
 - Backend: Symfony + API Platform + Doctrine ORM
 - Frontend: Nuxt 4 + Vue 3 + TypeScript + Tailwind CSS
+- UI library: `@malio/layer-ui` (Nuxt layer, `extends: ['@malio/layer-ui']` dans `nuxt.config.ts`). Composants auto-importés avec préfixe `Malio*` (ex. `MalioSelectCheckbox`, `MalioInputText`…). Doc d'usage dans `node_modules/@malio/layer-ui/COMPONENTS.md`. Tokens Tailwind `m-*` (primary/muted/danger/success/…) et variables CSS `--m-*` fournies par la couche.
 
 ## Project Structure
 - `src/` — Symfony domain, API resources, state providers/processors, services
@@ -29,11 +31,29 @@
 - 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
+- **Agence d'intérim** (`InterimAgency` entity, table `interim_agencies`): optionnelle sur `EmployeeContractPeriod` quand nature = INTERIM. Pas de CRUD UI — gérée en BDD. API lecture seule `GET /interim_agencies`. Affichée "Intérim (NomAgence)" sur la liste employés et l'historique contrat.
 - Employee contract history: `employee_contract_periods`, resolved by `EmployeeContractResolver`
+- **Écrans Heures / Heures Conducteurs (vue jour)** : le libellé nature (CDI/CDD/Intérim) sous le nom de l'employé est résolu **à la date filtrée** via `WorkHourDayContext.contractNature` (alimenté par `EmployeeContractResolver::resolveNatureForEmployeeAndDate`), pas via `Employee.currentContractNature` (qui est résolu à aujourd'hui).
+- **Écran Calendrier** : un employé est affiché uniquement si au moins une de ses périodes de contrat (`employee.contractHistory`) intersecte le mois affiché (`[1er ; dernier jour]`). Filtre côté frontend dans `visibleEmployees` (`pages/calendar.vue`).
+- **Planning jours travaillés** (`EmployeeContractPeriod.workDaysHours` : JSON `{iso_day: minutes}`) : obligatoire pour tout contrat TIME **hors 35h/39h/INTERIM** (ex. 4h, 25h, 28h). Somme = `weeklyHours × 60`. Utilisé par `HolidayVirtualHoursResolver` (crédit férié) et `WorkedHoursCreditPolicy` (crédit absence) pour ne créditer que les jours effectivement travaillés. Validation : `EmployeeContractPeriodValidator::assertWorkDaysHours`.
 - 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`
 
+## Fériés
+- Source : API gouv via `PublicHolidayService` (cache 30j)
+- Exclusions : env `EXCLUDED_PUBLIC_HOLIDAYS` (CSV de libellés), défaut `"Lundi de Pentecôte"`. Le filtre s'applique après le cache, côté service, donc frontend et calculs backend voient la même liste.
+- Écrans Heures / Heures Conducteurs (vue jour) : le nom du férié est affiché en badge `#b3e5fc` avec icône `mdi:calendar-star` dans la colonne Absence (distinct du pill absence). Bouton "Modifier" absence masqué sur férié (comme pour les formations).
+- Création/édition d'absence **autorisée** sur un férié (bouton Modifier visible). En présence d'absence, le crédit d'heures suit `absence.type.countAsWorkedHours` (WorkedHoursCreditPolicy), pas le crédit virtuel férié.
+- Saisie d'heures (ou de jours de présence) autorisée sur un férié
+- **Crédit automatique des heures contractuelles** sur un férié Lun-Ven pour tout contrat hors Forfait, **uniquement en l'absence d'absence déclarée** : le total journalier = `max(saisie + credited_absence, référence_contractuelle)`. Référence : 35h→7h, 39h→8h Lun-Jeu/7h Ven, CUSTOM→weeklyHours/5, INTERIM→idem 35h/39h/custom selon weeklyHours. Aucune ligne BDD créée (crédit virtuel). Drivers : crédité en `dayHoursMinutes`. Impacte directement le total hebdo RTT (tranches 25%/50%). Dès qu'une absence est posée sur le férié, le crédit virtuel saute — c'est le `countAsWorkedHours` du type d'absence qui pilote. Services : `App\Service\WorkHours\HolidayVirtualHoursResolver` + `DailyReferenceMinutesResolver`. Doc complète : `doc/holiday-virtual-hours.md`.
+
+## Commentaires de semaine
+- Entité `EmployeeWeekComment` : commentaire libre par employé et semaine ISO (unique `(employee_id, week_start_date)`). `week_start_date` = lundi.
+- CRUD `/employee_week_comments` `ROLE_ADMIN`. Write processor audite via `AuditLogger`.
+- Picto bulle vue semaine (HoursWeekView + DriverHoursWeekView) : fond bleu/rouge. Intégré dans `WeeklySummaryRow.comment/commentId`.
+- Doc : `doc/week-comments.md`.
+
 ## Validation Rules
 - `isValid` (RH): locks line for everyone (admin can only untoggle validation)
 - `isSiteValid` (site manager): locks for non-admin, admin can still edit
@@ -47,12 +67,49 @@
 - 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.
+- **FORFAIT — jours de présence et N-1** : les congés posés et imputés sur le stock N-1 ne décrémentent **pas** les jours de présence affichés (`presenceDaysByMonth` et `presenceDaysToToday`). Implémenté dans `EmployeeLeaveSummaryProvider::computePresenceDaysByMonth` via un budget N-1 (= `previousYearTakenDays`) consommé chronologiquement avant comptage des absences. Pour les non-forfait, ce budget vaut toujours 0 → comportement inchangé.
+
+## Onglet Congés (fiche employé)
+- Calendrier annuel des congés (`frontend/components/employees/LeaveTab.vue`) — période = Janvier→Décembre pour FORFAIT, Juin(N-1)→Mai(N) pour les autres contrats. Règle pilotée par le **contrat courant** (cf. `EmployeeLeaveSummaryProvider::resolveYear`), même quand on consulte une année passée.
+- **Sélecteur d'année** en pied de calendrier (zone scrollable, à gauche). Plage : de l'exercice courant jusqu'à `max(floor_contrat, floor_data_start_date)` — `floor_contrat` = premier exercice avec contrat ouvert (`employee.contractHistory[].startDate`) ; `floor_data_start_date` = exercice contenant `RTT_START_DATE` (env, ex. `2026-02-23` → exercice 2026). Le double plancher empêche de remonter avant la mise en service du logiciel. Format : `2026` pour FORFAIT, `Juin 2025 → Mai 2026` sinon.
+- Changement d'année → recharge complète de l'onglet via `useEmployeeLeave.setSelectedLeaveYear(year)` (reload de `getEmployeeLeaveSummary?year=YYYY` + `listAbsences` + `listPublicHolidays`). Backend : filtre `?year=YYYY` validé 2000-2100, et `EmployeeLeaveSummary` expose `dataStartDate` (env `RTT_START_DATE`, injecté via `services.yaml`).
+- Sur un exercice passé (`selectedYear !== currentYear`), les boutons crayon **Jours fractionnés** et **Année N-1 payés** sont **désactivés** : pas d'édition rétroactive des stocks de report.
+- Doc : `doc/leave-tab.md`.
+
+## Onglet RTT (fiche employé)
+- Tableau hebdomadaire (`frontend/components/employees/RttTab.vue`) — exercice fixe Juin(N-1)→Mai(N). Onglet **masqué pour les FORFAIT** (`showRttTab`).
+- **Sélecteur d'année** sous le tableau dans la zone scrollable. Même mécanique que l'onglet Congés (double plancher) : `max(floor_contrat, floor_rttStartDate)`. Format unique : `Juin 2025 → Mai 2026`.
+- Changement d'année → recharge via `useEmployeeRtt.setSelectedRttYear(year)` (`getEmployeeRttSummary?year=YYYY`). `EmployeeRttSummary.rttStartDate` est déjà exposé (champ existant) — il sert à la fois au floor du sélecteur et au masquage des lignes Report avant la mise en service.
+- Sur un exercice passé, le bouton **+ Payer les RTT** est désactivé (pas de paiement rétroactif).
+- Doc : `doc/rtt-tab.md`.
+
+## Récap. congés (écran)
+- Accès via sidebar `Récap. congés`, conditionné au flag `User.hasLeaveRecapAccess` (défaut `false`) — activé au create/edit user. Le flag s'applique à tous les profils, y compris admin.
+- Scope : `ROLE_ADMIN` → tous les employés, `ROLE_USER` (chef de site) → employés de ses sites, `ROLE_SELF` → sa ligne
+- Cutoff temporel : fin de la semaine S-2 (dimanche 23:59:59). Formule : `dimanche(lundi_semaine_courante − 14j)`. Pas de gate `isValid`.
+- Helper : `App\Util\LeaveRecapCutoff::resolveCutoff()`
+- Colonnes : Nom, Prénom, Contrat, CP N-1 restant, CP N, Samedis, RTT — identiques au PDF
+- Service partagé : `LeaveRecapRowBuilder` consommé par `LeaveRecapPrintProvider` (as-of today) et `EmployeeLeaveRecapProvider` (as-of cutoff)
+- `EmployeeLeaveSummaryProvider::computeYearSummary()` accepte un `?DateTimeImmutable $asOfDate` qui cappe l'accrual et les absences sur l'année cible (`null` = comportement live inchangé)
+- Pas d'export PDF depuis cet écran
+- Doc détaillée : `doc/leave-recap-screen.md`
 
 ## 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
 
+## Formations
+- Onglet "Formation" sur la fiche employé (admin uniquement)
+- Champs : date début, date fin, justificatif PDF optionnel, commentaire
+- Validation: dates obligatoires, `endDate >= startDate`, fichier PDF uniquement
+- Justificatif stocké dans `var/uploads/formations/{année}/{mois}/{uuid}.pdf` (année/mois = startDate)
+- Suppression et remplacement du justificatif nettoient l'ancien fichier disque
+- Tri tableau par `startDate DESC`
+- Affichage écran Heures (jour) : pill "Formation" (indigo) dans la colonne Absence. Quand une formation existe, le bouton "Modifier" de la colonne Absence est masqué (lockdown complet du jour pour la gestion d'absence)
+- Affichage Calendrier : cellule "F" (indigo) si formation seule, ou icône école en coin si formation + absence. Cellules avec formation non cliquables. Légende dédiée. PDF export : code "F" indigo ou astérisque à côté du code d'absence
+- Le CRUD formation est exclusivement géré depuis la fiche employé > onglet Formation
+
 ## Frontend Patterns
 
 ### Table styling (standard across all pages)
@@ -84,6 +141,16 @@
 - Keep backend PHP DTOs aligned with frontend TS DTOs (`frontend/services/dto/*`)
 - Update unit tests when constructor/service signatures change
 
+## In-App Documentation
+- Content: `frontend/data/documentation-content.ts` — structured TypeScript data with all user-facing documentation
+- Types: `frontend/types/documentation.ts` — DocSection, DocArticle, DocBlock
+- Composable: `frontend/composables/useDocumentation.ts` — role-based filtering (employee < site_manager < admin)
+- Components: `frontend/components/documentation/` — DocumentationPage, DocumentationSection, DocumentationArticle
+- Page: `frontend/pages/documentation.vue`
+- 3 access levels: `employee` (ROLE_SELF), `site_manager` (ROLE_USER), `admin` (ROLE_ADMIN) — cumulative (admin sees everything)
+- Each section/article has a `requiredLevel` that controls visibility
+- When adding or modifying a feature, update the corresponding section in `documentation-content.ts`
+
 ## Language
 - UI is in French
 - User communicates in French

README.md

@@ -1,4 +1,5 @@
 # SIRH
+
 Application de gestion des absences employée
 
 ## Importer un dump de prod en dev
@@ -22,3 +23,5 @@ docker compose exec -T db psql -U root -d sirh < sirh.sql
 ```sql
 UPDATE users SET roles = '["ROLE_ADMIN","ROLE_SUPER_ADMIN"]' WHERE username = 'emilie';
 ```
+sudo -u postgres pg_dump --no-owner --no-privileges --clean --if-exists sirh_prod > /tmp/sirh_prod_$(date +%F).sql
+scp user@<serveur>:/tmp/sirh_prod_2026-04-14.dump ~/workspace/

config/services.yaml

@@ -25,6 +25,7 @@ services:
     App\Service\PublicHolidayService:
         arguments:
             $holidayUrl: '%env(HOLIDAY_URL)%'
+            $excludedLabels: '%env(default::EXCLUDED_PUBLIC_HOLIDAYS)%'
 
     App\Service\Rtt\RttRecoveryComputationService:
         arguments:
@@ -34,9 +35,14 @@ services:
         arguments:
             $rttStartDate: '%env(RTT_START_DATE)%'
 
+    App\State\EmployeeLeaveSummaryProvider:
+        arguments:
+            $dataStartDate: '%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\FormationReadRepositoryInterface: '@App\Repository\FormationRepository'
     App\Repository\Contract\WorkHourReadRepositoryInterface: '@App\Repository\WorkHourRepository'
     App\Service\Contracts\EmployeeContractPeriodManagerInterface: '@App\Service\Contracts\EmployeeContractPeriodManager'
 

config/version.yaml

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

deploy/docker/.env.example

@@ -23,3 +23,4 @@ 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/"
+EXCLUDED_PUBLIC_HOLIDAYS="Lundi de Pentecôte"

deploy/docker/Dockerfile.prod

@@ -45,6 +45,7 @@ RUN apt-get update && apt-get install -y \
 
 # PHP production config
 RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
+COPY docker/php/config/php.ini "$PHP_INI_DIR/conf.d/99-app.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 \
@@ -67,6 +68,9 @@ 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

deploy/docker/deploy.sh

@@ -8,6 +8,9 @@ export SIRH_IMAGE_TAG="$TAG"
 
 echo "==> Deploying sirh:${TAG}..."
 
+echo "==> Enabling maintenance mode..."
+touch maintenance.on
+
 echo "==> Pulling image..."
 docker compose pull
 
@@ -18,11 +21,14 @@ echo "==> Waiting for container to be ready..."
 sleep 3
 
 echo "==> Running migrations..."
-docker compose exec -T app php bin/console doctrine:migrations:migrate --no-interaction
+docker compose exec -T -u www-data app php bin/console doctrine:migrations:migrate --no-interaction
 
 echo "==> Clearing cache..."
-docker compose exec -T app php bin/console cache:clear --env=prod
+docker compose exec -T -u www-data app php bin/console cache:clear --env=prod
-docker compose exec -T app php bin/console cache:warmup --env=prod
+docker compose exec -T -u www-data app php bin/console cache:warmup --env=prod
+
+echo "==> Disabling maintenance mode..."
+rm -f maintenance.on
 
 VERSION=$(docker compose exec -T app cat config/version.yaml | grep 'app.version' | awk -F"'" '{print $2}')
 echo "==> Deployed v${VERSION}"

deploy/maintenance.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Maintenance en cours</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: #f3f4f6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            color: #1f2937;
+        }
+        .container {
+            text-align: center;
+            padding: 3rem;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+            max-width: 500px;
+            width: 90%;
+        }
+        .icon {
+            font-size: 4rem;
+            margin-bottom: 1.5rem;
+        }
+        h1 {
+            font-size: 1.5rem;
+            margin-bottom: 0.75rem;
+            color: #111827;
+        }
+        p {
+            font-size: 1rem;
+            color: #6b7280;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="icon">&#128736;</div>
+        <h1>Maintenance en cours</h1>
+        <p>L'application est temporairement indisponible pour mise a jour. Elle sera de retour dans quelques instants.</p>
+    </div>
+</body>
+</html>

deploy/nginx/sirh-docker.conf

@@ -2,6 +2,23 @@ server {
     listen 80;
     server_name sirh.malio-dev.fr;
 
+    root /var/www/sirh/public;
+
+    # Maintenance mode : si le fichier maintenance.on existe, renvoyer la page 503
+    if (-f /var/www/sirh/maintenance.on) {
+        return 503;
+    }
+
+    error_page 503 @maintenance;
+
+    location @maintenance {
+        rewrite ^(.*)$ /maintenance.html break;
+    }
+
+    location = /maintenance.html {
+        internal;
+    }
+
     location / {
         proxy_pass http://127.0.0.1:8080;
         proxy_set_header Host $host;

doc/deployment-docker.md

@@ -2,7 +2,7 @@
 
 ## Pre-requis
 
-Installer Docker et Docker Compose sur la machine :
+### Docker
 
 ```bash
 # Ubuntu
@@ -18,72 +18,267 @@ sudo usermod -aG docker $USER
 
 Se deconnecter/reconnecter pour que le groupe `docker` prenne effet.
 
-## Premier deploiement
+### Nginx
 
-### 1. Creer le dossier de deploiement
+```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
-```
-
-### 2. Copier les fichiers depuis le repo
-
-```bash
-cp deploy/docker/docker-compose.prod.yml /var/www/sirh/docker-compose.yml
-cp deploy/docker/deploy.sh /var/www/sirh/deploy.sh
-cp deploy/docker/.env.example /var/www/sirh/.env
-chmod +x /var/www/sirh/deploy.sh
-```
-
-### 3. Configurer l'environnement
-
-Editer `/var/www/sirh/.env` avec les vraies valeurs :
-- `APP_SECRET` : generer avec `openssl rand -hex 32`
-- `DATABASE_URL` : `postgresql://user:pass@host.docker.internal:5432/sirh?serverVersion=16&charset=utf8`
-- `JWT_PASSPHRASE` : generer avec `openssl rand -hex 32`
-
-### 4. Generer les cles JWT
-
-```bash
 cd /var/www/sirh
-mkdir -p config/jwt
-docker run --rm -v $(pwd)/config/jwt:/jwt php:8.4-cli bash -c \
-  "apt-get update -qq && apt-get install -y -qq openssl > /dev/null && \
-   openssl genpkey -algorithm RSA -out /jwt/private.pem -pkeyopt rsa_keygen_bits:4096 && \
-   openssl rsa -pubout -in /jwt/private.pem -out /jwt/public.pem"
 ```
 
-### 5. Creer le dossier uploads
+### 3. Se connecter au registry Docker de Gitea
-
-```bash
-mkdir -p /var/www/sirh/uploads
-```
-
-### 6. Configurer le login au registry Gitea
 
 ```bash
 docker login gitea.malio.fr
-# Username: ton user Gitea
-# Password: ton token Gitea
 ```
 
-### 7. Configurer Nginx systeme
+- **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
-sudo cp deploy/nginx/sirh-docker.conf /etc/nginx/sites-available/sirh.conf
+#!/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;
+
+    root /var/www/sirh/public;
+
+    # Maintenance mode
+    if (-f /var/www/sirh/maintenance.on) {
+        return 503;
+    }
+
+    error_page 503 @maintenance;
+
+    location @maintenance {
+        rewrite ^(.*)$ /maintenance.html break;
+    }
+
+    location = /maintenance.html {
+        internal;
+    }
+
+    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;
+    }
+}
+```
+
+Copier la page de maintenance et activer le site :
+
+```bash
+cp deploy/maintenance.html /var/www/sirh/public/maintenance.html
 sudo ln -sf /etc/nginx/sites-available/sirh.conf /etc/nginx/sites-enabled/sirh.conf
 sudo nginx -t && sudo systemctl reload nginx
 ```
 
-### 8. Deployer
+### 9. Deployer
 
 ```bash
-cd /var/www/sirh
 ./deploy.sh
 ```
 
-## Deployer une release
+### 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
+├── public/
+│   └── maintenance.html
+└── uploads/
+```
+
+---
+
+## Deployer une nouvelle version
+
+Quand l'app est deja installee, deployer une mise a jour :
 
 ```bash
 cd /var/www/sirh
@@ -91,6 +286,27 @@ cd /var/www/sirh
 ./deploy.sh v0.1.61   # deploie une version specifique
 ```
 
+Le script active automatiquement la maintenance pendant le deploy et la desactive a la fin.
+
+---
+
+## Maintenance manuelle
+
+Activer la maintenance (sans deployer) :
+
+```bash
+cd /var/www/sirh
+touch maintenance.on
+```
+
+Desactiver :
+
+```bash
+rm maintenance.on
+```
+
+---
+
 ## Rollback
 
 ### Image seule (pas de changement de schema BDD)
@@ -103,33 +319,45 @@ cd /var/www/sirh
 
 ```bash
 # 1. Rollback schema (pendant que la version actuelle tourne encore)
-docker compose exec -T app php bin/console doctrine:migrations:migrate prev --no-interaction
+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            # tous les logs
-docker compose logs -f --tail=100  # 100 dernieres lignes
+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 :
+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. Editer `/var/www/sirh-docker/.env` : changer `DATABASE_URL` pour utiliser `host.docker.internal` au lieu de `127.0.0.1`
+4. Creer `docker-compose.yml` et `deploy.sh` dans `/var/www/sirh-docker/` (voir etape 4 ci-dessus)
-5. Mettre a jour Nginx systeme : remplacer la conf par `deploy/nginx/sirh-docker.conf`
+5. Editer `/var/www/sirh-docker/.env` : changer `DATABASE_URL` pour utiliser `host.docker.internal` au lieu de `127.0.0.1`
-6. Arreter l'ancien PHP-FPM : `sudo systemctl stop php8.4-fpm`
+6. Se connecter au registry Gitea (voir etape 3 ci-dessus)
-7. Deployer : `cd /var/www/sirh-docker && ./deploy.sh`
+7. Mettre a jour Nginx systeme avec la conf reverse proxy (voir etape 8 ci-dessus)
-8. Verifier que tout marche, puis supprimer l'ancien dossier
+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/formations.md

@@ -0,0 +1,58 @@
+# Formations
+
+Onglet **Formation** accessible depuis la fiche employé. Permet de tracer les formations suivies par un salarié.
+
+## Accès
+
+- Réservé aux administrateurs (`ROLE_ADMIN`)
+- Invisible pour les autres rôles
+
+## Champs
+
+| Champ | Type | Obligatoire |
+| --- | --- | --- |
+| Date de début | date | oui |
+| Date de fin | date | oui |
+| Justificatif | fichier PDF | non |
+| Commentaire | texte libre | non |
+
+## Règles de validation
+
+- La date de fin doit être supérieure ou égale à la date de début
+- Seuls les fichiers PDF sont acceptés pour le justificatif
+- Un employé peut avoir plusieurs formations (aucune unicité imposée)
+
+## Stockage
+
+Les justificatifs PDF sont stockés dans `var/uploads/formations/{année}/{mois}/{uuid}.pdf`, où l'année et le mois sont ceux de la date de début de la formation. Le nom d'origine du fichier est conservé en base pour l'affichage et le téléchargement.
+
+Lors de la suppression d'une formation, le fichier associé est automatiquement supprimé du disque. Lors du remplacement d'un justificatif, l'ancien fichier est également supprimé.
+
+## Tri
+
+Les formations sont affichées dans le tableau par **date de début décroissante**.
+
+## Affichage sur les autres écrans
+
+### Écran des heures (vue jour)
+
+Dans la colonne "Absence", lorsqu'un salarié est en formation sur la date sélectionnée, une pastille indigo **Formation** est affichée sous la pastille d'absence éventuelle. Cette pastille est uniquement informative :
+
+- Le bouton **Modifier** de la colonne Absence est masqué : aucune création/modification/suppression d'absence n'est possible sur un jour en formation
+- La gestion CRUD d'une formation se fait exclusivement depuis la fiche employé, onglet **Formation**
+
+### Calendrier
+
+Dans le calendrier mensuel, les formations sont affichées de deux façons :
+
+- **Jour avec formation uniquement** : la cellule est teintée en indigo avec le code `F`
+- **Jour avec absence + formation** : la cellule garde la couleur de l'absence et une icône école est ajoutée en coin supérieur droit
+
+Une entrée "Formation" est visible dans la légende du calendrier. Les cellules contenant une formation sont **non cliquables** (aucune création/édition d'absence possible). La gestion d'une formation se fait exclusivement depuis la fiche employé, onglet **Formation**.
+
+### Export PDF du calendrier
+
+L'impression du calendrier d'absences reprend le même principe :
+
+- **Jour avec formation uniquement** : cellule indigo avec le code `F`
+- **Jour avec absence + formation** : le code de l'absence est suivi d'un astérisque (`*`)

doc/functional-rules.md

@@ -58,6 +58,9 @@ Documents complementaires:
   - 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)
+- Libellé nature de contrat (CDI/CDD/Intérim) affiché sous le nom:
+  - résolu à la date filtrée (période de contrat couvrant ce jour), pas à aujourd'hui
+  - masqué si aucun contrat à cette date (cas rarissime en vue jour puisque l'employé est alors déjà filtré)
 
 ## 4) Absences
 
@@ -71,6 +74,10 @@ Documents complementaires:
 - 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
+- Visibilité des employés dans le Calendrier:
+  - un employé est affiché si au moins une de ses périodes de contrat intersecte le mois affiché
+  - un employé dont toutes les périodes se terminent avant le 1er du mois (ou commencent après la fin du mois) est masqué
+  - même logique que l'écran Heures : « pas de contrat sur la période → masqué »
 
 ### Effet absence sur les heures
 
@@ -130,6 +137,7 @@ Documents complementaires:
   - pas de bonus 25%
   - pas de bonus 50%
   - pas de total récup
+  - agence d'intérim optionnelle (table `interim_agencies`): affichée sur la fiche employé et le détail contrat sous la forme "Intérim (NomAgence)"
 
 ## 6bis) Heures Conducteurs
 
@@ -161,10 +169,15 @@ Documents complementaires:
 ## 7) Fériés
 
 - Les jours fériés sont identifiés et affichés
+- Source: API `calendrier.api.gouv.fr/jours-feries/` via `PublicHolidayService` (cache 30j)
+- Exclusions configurables: variable d'env `EXCLUDED_PUBLIC_HOLIDAYS` (liste de libellés séparés par virgules). Par défaut `"Lundi de Pentecôte"` — journée de solidarité généralement travaillée. Le filtre s'applique à tous les consommateurs (frontend + calculs backend) en amont du retour du service.
 - Onglet congés: jours fériés affichés sur le calendrier avec fond `rgb(179, 229, 252)` et nom au survol
+- Écran Heures et Heures Conducteurs (vue jour): le nom du férié est affiché dans la colonne Absence sous forme de pill (fond `#b3e5fc`, icône `mdi:calendar-star`), distinct du pill absence
+- Écran Heures et Heures Conducteurs (vue semaine): la cellule du jour férié prend le fond `#b3e5fc` quand l'employé n'a pas d'absence ce jour-là, avec le nom du férié au survol (`title`). Si une absence est posée, la couleur de l'absence prime ; le `title` cumule les deux libellés (`Absence — Férié : Nom`).
 - Règle courante:
-  - absences bloquées sur jour férié
+  - absences autorisées sur jour férié (création/édition depuis l'écran Heures et le Calendrier). Quand une absence est posée, le crédit virtuel férié est désactivé — c'est le `countAsWorkedHours` du type d'absence qui pilote
-  - saisie d'heures autorisée
+  - saisie d'heures ou de jours de présence autorisée — les heures saisies comptent normalement dans le total hebdo et le calcul RTT
+  - la référence hebdomadaire n'est pas réduite par un férié: un salarié qui ne saisit rien sur un férié est en déficit de la journée correspondante
 
 ## 8) Impression absences (PDF)
 
@@ -245,6 +258,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
       - pour `FORFAIT`:
         - pris: basé sur toutes les absences (demi-journées incluses)
         - restants = acquis - pris (borné à 0)
+        - paiement congés N-1: saisie RH via `PATCH /employees/{id}/paid-leave-days` (body: `paidLeaveDays`, `year`). Stocké dans `employee_leave_balances.paid_leave_days`. Les jours payés réduisent le stock N-1 **avant** l'attribution des jours pris : `disponible_N-1 = max(0, acquis_N-1 - payés)`, puis `pris_N-1 = min(disponible_N-1, total_pris)`, surplus pris basculé sur N. Reste à prendre N-1 = `max(0, disponible_N-1 - pris_N-1)`. Uniquement pour les contrats forfait.
       - 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
@@ -274,8 +288,9 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
       - 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
+      - une semaine ISO qui chevauche deux mois est affichée dans **les deux mois**, avec les valeurs réparties proportionnellement aux minutes travaillées de chaque portion
-      - si le weekend tombe en début de mois suivant, c'est le mois suivant qui porte la semaine
+      - le calcul des heures supplémentaires reste hebdomadaire (seuils 35h/39h/43h appliqués sur la semaine entière), seul l'affichage est scindé
+      - exemple: S14 lundi-mardi en mars, mercredi-dimanche en avril → la S14 apparaît en mars (avec la part des heures de lun-mar) et en avril (avec la part mer-dim)
     - 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%`
@@ -299,6 +314,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
       - 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
+    - colonne Cumul (dernière colonne): solde RTT à la fin de chaque semaine = `report N-1 + somme totalMinutes des semaines jusqu'à celle-ci − paiements RTT des mois antérieurs au mois de la semaine`. Le paiement d'un mois M n'est déduit qu'à partir des semaines du mois M+1 (cohérent avec la logique de la ligne "Report mois précédent"). Permet la comparaison ligne à ligne avec un suivi RH externe (Excel)
     - 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)
@@ -321,9 +337,27 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 | 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 |
+| CP N | Forfait: restant sur quota année civile (acquis − pris depuis N, sans toucher au stock N-1). Non-forfait: en cours d'acquisition |
 | RTT | Minutes disponibles (report N-1 + acquis N - payés). Format `X h Y m`. Forfait et INTERIM: `-` |
 
+## 10bis) Écran Récap. congés (tableau)
+
+- Complément de l'export PDF : même logique de calcul, mais accessible aux employés et chefs de site
+- Endpoint: `GET /api/leave-recap`
+- Accès conditionné au flag `User.hasLeaveRecapAccess` (défaut `false`, activé au create/edit user)
+- Le flag s'applique à tous les profils, y compris admin (pas de bypass)
+- Scoping :
+  - `ROLE_ADMIN` : tous les employés
+  - `ROLE_USER` (chef de site) : employés des sites autorisés (`UserSiteRole`)
+  - `ROLE_SELF` : uniquement son employé lié
+- **Cutoff temporel** : le récap est figé à la fin de la semaine S-2 (dimanche 23:59:59)
+  - Formule : `cutoffDate = dimanche(lundi_semaine_courante − 14 jours)`
+  - Exemple : mardi 14/04/2026 (S16) → dimanche 05/04/2026 (fin S14)
+  - `isValid` n'entre PAS en compte : cutoff purement temporel
+  - Les heures et absences postérieures au cutoff sont ignorées dans les calculs
+- Colonnes identiques au PDF (voir §10)
+- Détails techniques : voir `doc/leave-recap-screen.md`
+
 ## 11) Récapitulatif Salaire (PDF mensuel)
 
 - Accessible depuis la page Employés via le bouton "Récap. Salaire" (réservé `ROLE_ADMIN`)
@@ -346,7 +380,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 | 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 - REPAS | WorkHour.hasLunch + hasDinner | Somme sur le mois : +1 par déjeuner coché et +1 par dîner coché (un jour avec les deux compte 2 repas, 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 |
@@ -410,7 +444,8 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - 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
+- Seuls les jours avec heures saisies, absence, week-end ou jour férié sont affichés
+- Les jours fériés apparaissent toujours sur une ligne dédiée (fond bleu clair) avec la mention "Férié : {nom}" dans la colonne Absence (même si aucune saisie)
 
 ### Colonnes selon le mode de suivi
 
@@ -428,6 +463,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - 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
+- Jour férié Lun-Ven (hors Forfait, sans absence) : `total = max(saisie + crédit absence, référence contractuelle)` — même règle que l'écran Heures (cf. `HolidayVirtualHoursResolver`). Pour Forfait : pas de crédit virtuel, la ligne férié affiche juste l'éventuelle présence saisie.
 
 ### Nom du fichier
 

doc/holiday-virtual-hours.md

@@ -0,0 +1,110 @@
+# Crédit automatique des heures sur jour férié (Lun-Ven)
+
+## Règle
+
+Tout jour férié du **lundi au vendredi** crédite automatiquement les **heures contractuelles attendues** pour ce jour, pour tout contrat **autre que Forfait** (`trackingMode` ≠ `PRESENCE`). Les heures ainsi créditées sont dites *virtuelles* : aucune ligne n'est créée dans `work_hours`, elles sont injectées à l'affichage et au calcul.
+
+### Référence contractuelle par jour
+
+| Contrat         | Lun-Jeu | Ven   | Sam-Dim |
+|-----------------|---------|-------|---------|
+| 35h             | 7h      | 7h    | 0       |
+| 39h             | 8h      | 7h    | 0       |
+| CUSTOM (avec planning `workDaysHours`) | minutes du jour programmé, 0 sinon | idem | 0 |
+| INTERIM 35h     | 7h      | 7h    | 0       |
+| FORFAIT         | —       | —     | —       |
+
+La référence par jour est calculée par `App\Service\WorkHours\DailyReferenceMinutesResolver`.
+
+### Planning `workDaysHours`
+
+Tout contrat TIME **hors 35h/39h/INTERIM** (ex. 4h, 25h, 28h) doit déclarer un planning précis sur sa `EmployeeContractPeriod` : colonne JSON `work_days_hours = {"1": 120, "4": 120}` (iso day → minutes). La somme doit égaler `weeklyHours × 60`.
+
+- **Sur un jour du planning** : crédit férié = minutes programmées (ex. Ewa Lun → 120 min).
+- **Sur un jour hors planning** : crédit férié = 0 (elle n'aurait pas travaillé).
+- Même logique appliquée par `WorkedHoursCreditPolicy::resolveContractDayMinutes` pour les crédits d'absence — un 4h en absence mardi (non programmée) = 0 crédit.
+
+Validation à l'écriture : `EmployeeContractPeriodValidator::assertWorkDaysHours`. Le frontend expose un bloc « Jours travaillés » (cases Lun-Ven + input `HH:MM`) sur les formulaires de création employé + d'ajout de contrat, visible uniquement quand le contrat le requiert.
+
+**Limitation actuelle** : l'édition in-place d'un schedule sur une période active existante n'est **pas exposée** via l'UI. Le drawer « Modifier le contrat » affiche le schedule en lecture seule à titre informatif. Pour corriger un schedule, la démarche est : clôturer le contrat en cours + créer un nouveau contrat avec le schedule corrigé. Si un besoin d'édition directe émerge, ajouter `workDaysHours` dans `EmployeeContractChangeRequest::hasPeriodChangeRequest()` et la logique d'update dans `EmployeeContractPeriodManager`.
+
+### Fériés exclus
+
+Les fériés listés dans l'env `EXCLUDED_PUBLIC_HOLIDAYS` (par défaut `Lundi de Pentecôte` — journée de solidarité) **ne donnent pas** de crédit virtuel : le `PublicHolidayService` les filtre en amont, donc `HolidayVirtualHoursResolver` ne les voit pas comme fériés.
+
+### Interaction avec saisie
+
+Quand l'employé saisit des heures ce jour-là :
+
+- `heures finales = max(heures saisies + crédit d'absence éventuel, heures contractuelles de référence)`
+
+Exemples avec un contrat 39h et un férié un lundi :
+
+| Saisie employé   | Total affiché | Interprétation |
+|------------------|---------------|----------------|
+| Aucune           | 8h            | Crédit 100% virtuel |
+| Matin 09:00-13:00 (4h) | 8h       | Le minimum contractuel l'emporte |
+| 09:00-12:00 + 13:00-19:00 (9h) | 9h | Les heures saisies l'emportent |
+
+### Interaction avec absences
+
+La création d'absence sur un férié Lun-Ven est **autorisée** (bouton Modifier visible). Dès qu'une absence est déclarée sur le jour (matin et/ou après-midi), le crédit virtuel férié **est désactivé** pour ce jour : c'est `absence.type.countAsWorkedHours` qui pilote le crédit d'heures, via `WorkedHoursCreditPolicy`.
+
+- `countAsWorkedHours = true` (ex. maladie payée) : crédit calculé normalement (7h/8h selon contrat × halfUnits/2). Même quantité que la référence virtuelle si journée complète, donc résultat identique — mais la source du crédit est l'absence, pas le férié.
+- `countAsWorkedHours = false` (ex. congé sans solde) : crédit = 0. Le férié ne compense pas.
+
+Cette règle évite le double-crédit (absence + férié virtuel) et respecte le paramétrage fonctionnel du type d'absence.
+
+## Impact technique
+
+### Affichage
+
+- **Écran Heures (vue jour)** : sur un férié Lun-Ven non-Forfait, la colonne Total affiche la valeur effective (référence ou saisie, selon max). Un chip "Férié : Xh comptées" apparaît sous le pill bleu du férié.
+- **Écran Heures Conducteurs (vue jour)** : idem, plus un indicateur `= Xh (férié)` sous l'input "Heures jour" pour signaler que le crédit est imputé au bucket jour.
+- **Vues semaine** : les totaux hebdomadaires intègrent les minutes virtuelles. Un marqueur `F + Xh` apparaît dans la cellule du jour férié.
+- **Onglet RTT** : les semaines contenant un férié Lun-Ven gagnent du temps crédité, ce qui peut générer des heures sup (25% / 50%) là où l'ancienne règle produisait un déficit.
+
+### Calcul RTT
+
+Le service `App\Service\WorkHours\HolidayVirtualHoursResolver` est injecté dans `RttRecoveryComputationService::computeRecoveryByWeek()`. Pour chaque jour ouvré :
+
+```
+effectiveMinutes = resolveEffectiveDailyMinutes(contract, date, metrics.totalMinutes + credited)
+weeklyTotalMinutes += effectiveMinutes
+```
+
+Le reste du calcul (tranches +25%, +50%, base 25% à partir de 35h/39h) demeure inchangé ; seul le total hebdo injecté a évolué.
+
+### Calcul hebdomadaire d'affichage
+
+`WorkHourWeeklySummaryProvider` applique la même substitution sur `weeklyDayMinutes` et `weeklyTotalMinutes`. Le DTO `WeeklyDaySummary` expose désormais un champ `virtualHolidayMinutes` utilisé par les vues semaine.
+
+### Contexte jour
+
+`WorkHourDayContextProvider` expose `virtualHolidayMinutes` dans `DayContextRow` pour permettre au frontend de calculer le total journalier en temps réel pendant la saisie (sans aller-retour).
+
+### Frontend
+
+Le composable `frontend/composables/useHolidayVirtualHours.ts` réplique la règle côté client et est consommé par `useHoursPage.ts::getRowMetrics` et `useDriverHoursPage.ts::getRowMetrics`.
+
+## Impact historique
+
+La règle est appliquée **à chaque lecture** depuis les `WorkHour` — donc l'exercice courant et tout exercice recalculé live bénéficient automatiquement de la nouvelle règle sans migration.
+
+Les reports N-1 stockés dans `employee_rtt_balances.opening_*_minutes` ont été saisis manuellement par la RH (valeurs officielles) et ne sont **pas recalculés** : ces snapshots restent la source de vérité pour les soldes d'ouverture.
+
+## Services impliqués
+
+| Composant | Rôle |
+|-----------|------|
+| `DailyReferenceMinutesResolver` | Résolution "minutes contractuelles par jour" (logique partagée, anciennement dupliquée). |
+| `HolidayVirtualHoursResolver` | Décide si la règle s'applique et renvoie le crédit virtuel ou la valeur effective. |
+| `RttRecoveryComputationService` | Applique la substitution dans le calcul hebdo RTT. |
+| `WorkHourWeeklySummaryProvider` | Applique la substitution dans les totaux hebdo UI. |
+| `WorkHourDayContextProvider` | Expose `virtualHolidayMinutes` par salarié/jour. |
+| `useHolidayVirtualHours.ts` (frontend) | Réplique la règle en live côté client. |
+
+## Tests
+
+- `tests/Service/WorkHours/HolidayVirtualHoursResolverTest.php` couvre les scénarios par contrat + jours ouvrés/chômés.
+- `make test` (PHPUnit) valide l'intégration RTT / hebdo / contexte jour.

doc/leave-recap-screen.md

@@ -0,0 +1,73 @@
+# Écran Récap. congés
+
+## Objet
+
+Vue tableau des soldes de congés par employé, figée à un cutoff temporel (fin de semaine S-2).
+Complémentaire à l'export PDF admin : mêmes colonnes, accès étendu aux employés et chefs de site.
+
+## Cutoff
+
+La formule est : `cutoffDate = dimanche de (lundi de la semaine courante − 14 jours)`.
+
+Exemple : mardi 14/04/2026 (S16) → **dimanche 05/04/2026 23:59:59** (fin S14).
+
+Le cutoff est purement temporel : l'état `isValid` des heures n'entre pas en compte. Les heures
+et absences postérieures au cutoff sont ignorées dans le calcul des soldes.
+
+Implémentation : `App\Util\LeaveRecapCutoff::resolveCutoff()` côté backend, helper `parseYmd` +
+`getIsoWeekNumber` côté frontend pour l'affichage du badge.
+
+## Colonnes
+
+Identiques au PDF :
+
+- Nom
+- Prénom
+- Contrat
+- CP N-1 restant
+- CP N
+- Samedis acquis
+- RTT
+
+Pour les admins et chefs de site, une colonne **Site** est ajoutée à gauche.
+
+## Scoping
+
+| Profil        | Données visibles                        |
+|---------------|-----------------------------------------|
+| `ROLE_ADMIN`  | Tous les employés actifs, tous sites    |
+| `ROLE_USER` (chef de site) | Employés actifs des sites autorisés via `UserSiteRole` |
+| `ROLE_SELF`   | Uniquement l'employé lié à son compte   |
+
+## Flag d'accès
+
+Le champ `User.hasLeaveRecapAccess` (boolean, défaut `false`) conditionne :
+
+- L'affichage de l'entrée "Récap. congés" dans la sidebar
+- L'accès à la route `/leave-recap` (middleware `leave-recap-access.ts`)
+- L'endpoint API `GET /api/leave-recap` (le provider renvoie `403` si le flag est faux)
+
+Le flag s'applique même aux admins : un admin sans le flag ne voit pas l'écran. Il se configure
+dans le drawer de création/édition d'un utilisateur.
+
+## Service partagé
+
+`App\Service\Leave\LeaveRecapRowBuilder::build(Employee $employee, DateTimeImmutable $asOfDate)`
+construit une ligne de récap. Il est utilisé par :
+
+- `LeaveRecapPrintProvider` (PDF admin) avec `$asOfDate = today`
+- `EmployeeLeaveRecapProvider` (écran) avec `$asOfDate = cutoff`
+
+## Propagation du cutoff dans les calculs
+
+`EmployeeLeaveSummaryProvider::computeYearSummary()` accepte un `?DateTimeImmutable $asOfDate`.
+Lorsqu'il est fourni et appliqué à l'année cible, il remplace "today" dans :
+
+- `resolveAccrualCalculationEndDate()` — la borne d'accrual devient le dernier jour du mois
+  précédant `asOfDate` (au lieu du mois précédent today).
+- `resolveTakenCalculationEndDate()` — les absences postérieures à `asOfDate` sont ignorées.
+
+Pour les années antérieures (carry forward), le comportement reste inchangé (pas de cap).
+
+Le RTT est capé via `RttRecoveryComputationService::computeTotalRecoveryForExercise(..., $limitDate)`
+qui existait déjà, en passant `cutoff` comme date de référence.

doc/leave-tab.md

@@ -0,0 +1,60 @@
+# Onglet "Congés" — fiche employé
+
+## Vue d'ensemble
+
+L'onglet **Congés** de la fiche employé (`frontend/components/employees/LeaveTab.vue`) affiche :
+- un bandeau de compteurs (acquis, pris, reste, en cours d'acquisition, N-1 ou samedis selon le contrat) ;
+- un calendrier annuel coloré des congés posés (12 mois en grille 4×3) ;
+- pour chaque mois, le nombre de jours de présence (`presenceDaysByMonth`) ;
+- un sélecteur d'année en pied de calendrier.
+
+## Période affichée
+
+La période dépend du **type de contrat actuel** de l'employé :
+
+| Type de contrat   | Période affichée               |
+|-------------------|--------------------------------|
+| FORFAIT           | Janvier → Décembre (année civile) |
+| Autres            | Juin (Y-1) → Mai (Y) (exercice CP) |
+
+Cette règle suit `EmployeeLeaveSummaryProvider::resolveYear()` côté backend : la sélection FORFAIT vs non-FORFAIT se fait toujours sur le contrat **courant**, pas sur celui qui était en vigueur à l'année consultée.
+
+## Sélecteur d'année
+
+Position : **en bas du calendrier**, à gauche, à l'intérieur de la zone scrollable. Il scrolle donc avec les mois et apparaît sous la grille.
+
+Plage proposée :
+- du plus récent (= année courante) au plus ancien ;
+- **double plancher** : l'année minimum est `max(floor_historique_contrat, floor_data_start_date)`
+  - **floor_historique_contrat** : dérivé de `employee.contractHistory[].startDate` — premier exercice où l'employé avait un contrat ouvert
+  - **floor_data_start_date** : dérivé de l'env `RTT_START_DATE` (date de mise en service du logiciel, ex. `2026-02-23` → exercice 2026 / année forfait 2026). Aucune donnée historique n'existe avant cette date, donc on ne propose pas d'années antérieures même si le contrat de l'employé est plus ancien.
+- la valeur est exposée par l'API `GET /employees/{id}/leave-summary` via le champ `dataStartDate` (peuplé depuis l'env serveur).
+- en cas d'historique manquant **et** d'env absente, la plage se réduit à l'année courante.
+
+Format des libellés :
+- FORFAIT : `2026`, `2025`, `2024`…
+- Autres : `Juin 2025 → Mai 2026`, `Juin 2024 → Mai 2025`…
+
+Comportement :
+- changer d'année recharge l'intégralité de l'onglet (`getEmployeeLeaveSummary?year=YYYY` + `listAbsences` + `listPublicHolidays`) ;
+- les compteurs du bandeau reflètent l'année sélectionnée.
+
+## Verrouillage des éditions sur années passées
+
+Quand `selectedYear !== currentYear` (consultation d'une année antérieure) :
+- le bouton crayon **Jours fractionnés** (non-FORFAIT) est désactivé ;
+- le bouton crayon **Année N-1 payés** (FORFAIT) est désactivé.
+
+Justification : modifier rétroactivement les stocks de report ou les jours fractionnés d'un exercice clos décalerait silencieusement les soldes de toutes les années postérieures. La consultation reste possible, l'édition non.
+
+## Implémentation
+
+- Composable : `frontend/composables/useEmployeeLeave.ts`
+  - État : `selectedLeaveYear`, computed `currentLeaveYear`, `availableLeaveYears`
+  - API : `setSelectedLeaveYear(year)`, `loadLeaveData()`, `resetLoaded()`
+  - `resetLoaded()` (appelé au changement d'employé) remet `selectedLeaveYear = null` pour que la valeur par défaut soit recalculée à partir du nouveau contrat.
+- Composant : `frontend/components/employees/LeaveTab.vue`
+  - Props : `selectedYear`, `availableYears`, `currentYear`
+  - Event : `update-selected-year`
+- Page : `frontend/pages/employees/[id].vue` (câble le composable au composant)
+- Backend : `EmployeeLeaveSummaryProvider` reçoit `RTT_START_DATE` via `services.yaml` (argument `$dataStartDate`) et l'expose dans la réponse `EmployeeLeaveSummary.dataStartDate`. Le filtrage `?year=YYYY` était déjà accepté (validation 2000–2100).

doc/rtt-rollover.md

@@ -32,9 +32,9 @@ Principe:
 
 ## 4) Attribution mensuelle des semaines
 
-- une semaine ISO est affichee une seule fois, dans le mois qui contient le **samedi** de cette semaine
+- une semaine ISO qui chevauche deux mois est affichee dans **les deux mois**, avec les valeurs reparties proportionnellement aux minutes travaillees de chaque portion
-- si le weekend tombe en debut du mois suivant, c'est ce mois qui porte la semaine
+- le calcul des heures supplementaires reste hebdomadaire (seuils 35h/39h/43h appliques sur la semaine entiere), seul l'affichage est scinde
-- pas de prorata: la totalite des minutes de recuperation de la semaine est comptee dans un seul mois
+- exemple: S14 lundi-mardi en mars, mercredi-dimanche en avril → la S14 apparait en mars (part lun-mar) et en avril (part mer-dim)
 
 ## 5) Table cible
 

doc/rtt-tab.md

@@ -0,0 +1,52 @@
+# Onglet "RTT" — fiche employé
+
+## Vue d'ensemble
+
+L'onglet **RTT** de la fiche employé (`frontend/components/employees/RttTab.vue`) affiche un tableau hebdomadaire détaillé des heures supplémentaires accumulées et payées sur un exercice :
+- bandeau de navigation par mois (chevrons gauche/droite) ;
+- table semaine par semaine : Heure / Base 25% / 25% / Total 25% / Base 50% / 50% / Total 50% / Total / Cumul ;
+- ligne Report (carry N-1 ou cumul mois précédents) ;
+- ligne Total mois, ligne Payé, ligne Reste ;
+- bouton « + Payer les RTT » dans le bandeau ;
+- sélecteur d'exercice en pied de tableau.
+
+L'onglet est **masqué pour les contrats FORFAIT** (filtre `showRttTab` dans `useEmployeeDetailPage`). Les FORFAIT n'accumulent pas de RTT.
+
+## Période affichée
+
+Toujours **Juin (Y-1) → Mai (Y)**. Le champ `EmployeeRttSummary.year` correspond à `Y` (année de fin d'exercice) ; ex. `year=2026` = `01/06/2025 → 31/05/2026`.
+
+## Sélecteur d'année
+
+Position : sous la table, à l'intérieur de la zone scrollable, à gauche.
+
+Plage proposée :
+- du plus récent (= exercice courant) au plus ancien ;
+- **double plancher** : `max(floor_historique_contrat, floor_data_start_date)`
+  - **floor_historique_contrat** : dérivé de `employee.contractHistory[].startDate` — premier exercice où l'employé avait un contrat ouvert
+  - **floor_data_start_date** : exercice contenant `RTT_START_DATE` (env, ex. `2026-02-23` → exercice 2026)
+- la valeur est exposée par l'API `GET /employees/{id}/rtt-summary` via le champ `rttStartDate` (déjà existant — mais peuplé uniquement quand la date tombe dans l'exercice retourné, donc le composable utilise la première réponse pour borner la plage).
+- format unique : `Juin 2025 → Mai 2026`, `Juin 2024 → Mai 2025`…
+
+Comportement :
+- changer d'exercice recharge `getEmployeeRttSummary?year=YYYY` (le backend valide 2000–2100) ;
+- la table redéploie les semaines de l'exercice sélectionné, navigation par mois conservée.
+
+## Verrouillage des édition sur exercices passés
+
+Quand `selectedYear !== currentYear` (consultation d'un exercice antérieur), le bouton **+ Payer les RTT** est désactivé. Justification : un paiement rétroactif sur un exercice clos décalerait les soldes courants et le report N-1 calculé.
+
+La consultation reste possible, l'édition non.
+
+## Implémentation
+
+- Composable : `frontend/composables/useEmployeeRtt.ts`
+  - État : `selectedRttYear`, computed `currentRttYear`, `availableRttYears`
+  - API : `setSelectedRttYear(year)`, `loadRttData()`, `resetLoaded()`
+  - `resetLoaded()` (appelé au changement d'employé) remet `selectedRttYear = null`.
+- Composant : `frontend/components/employees/RttTab.vue`
+  - Props : `selectedYear`, `availableYears`, `currentYear`
+  - Event : `update-selected-year`
+  - Renommage `currentYear` (computed local de l'année du mois affiché) → `displayedMonthYear` pour éviter la collision avec la nouvelle prop.
+- Page : `frontend/pages/employees/[id].vue`
+- Backend : aucun changement — `EmployeeRttSummaryProvider` accepte déjà `?year=YYYY` (validation 2000–2100) et expose `rttStartDate`.

docker/php/config/php.ini

@@ -1,4 +1,7 @@
 [Date]
 ; Defines the default timezone used by the date functions
 ; http://php.net/date.timezone
-date.timezone = Europe/Paris
+date.timezone = Europe/Paris
+
+[PHP]
+memory_limit = 256M

frontend/.npmrc

@@ -0,0 +1 @@
+@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/

frontend/components/AbsenceFormDrawer.vue

@@ -1,44 +1,26 @@
 <template>
     <AppDrawer v-model="drawerOpen" title="Nouvelle absence">
         <form class="space-y-4" @submit.prevent="handleSubmit">
-            <div>
+            <MalioSelect
-                <label class="text-md font-semibold text-neutral-700" for="employee">
+                :model-value="absenceForm.employeeId === '' ? null : absenceForm.employeeId"
-                    Employé <span class="text-red-600">*</span>
+                :options="employeeOptions"
-                </label>
+                label="Employé *"
-                <select
+                empty-option-label="Choisir un employé"
-                    id="employee"
+                min-width=""
-                    v-model="absenceForm.employeeId"
+                :disabled="props.lockEmployee"
-                    :class="employeeFieldClass"
+                :error="showEmployeeError ? `L'employé est obligatoire.` : ''"
-                    :disabled="props.lockEmployee"
+                @update:model-value="onEmployeeChange"
-                >
+            />
-                    <option value="" disabled>Choisir un employé</option>
-                    <option v-for="employee in employees" :key="employee.id" :value="employee.id">
-                        {{ employee.firstName }} {{ employee.lastName }}
-                    </option>
-                </select>
-                <p v-if="showEmployeeError" class="mt-1 text-sm text-red-600">
-                    L'employé est obligatoire.
-                </p>
-            </div>
 
-            <div>
+            <MalioSelect
-                <label class="text-md font-semibold text-neutral-700" for="type">
+                :model-value="absenceForm.typeId === '' ? null : absenceForm.typeId"
-                    Type d'absence <span class="text-red-600">*</span>
+                :options="typeOptions"
-                </label>
+                label="Type d'absence *"
-                <select
+                empty-option-label="Choisir un type"
-                    id="type"
+                min-width=""
-                    v-model="absenceForm.typeId"
+                :error="showTypeError ? `Le type d'absence est obligatoire.` : ''"
-                    :class="typeFieldClass"
+                @update:model-value="onTypeChange"
-                >
+            />
-                    <option value="" disabled>Choisir un type</option>
-                    <option v-for="type in absenceTypes" :key="type.id" :value="type.id">
-                        {{ type.label }} ({{ type.code }})
-                    </option>
-                </select>
-                <p v-if="showTypeError" class="mt-1 text-sm text-red-600">
-                    Le type d'absence est obligatoire.
-                </p>
-            </div>
 
             <div class="space-y-4">
                 <div>
@@ -48,17 +30,15 @@
                             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"
+                            :class="[dateInputBaseClass, absenceForm.startDate ? 'border-black' : 'border-m-muted']"
                             :disabled="props.lockDates"
                         />
-                        <select
+                        <MalioSelect
-                            v-model="absenceForm.startHalf"
+                            :model-value="absenceForm.startHalf"
-                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                            :options="halfDayOptions"
-                        >
+                            min-width=""
-                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
+                            @update:model-value="(v) => { if (v !== null) absenceForm.startHalf = v as HalfDay }"
-                                {{ half.label }}
+                        />
-                            </option>
-                        </select>
                     </div>
                 </div>
                 <div>
@@ -68,17 +48,15 @@
                             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"
+                            :class="[dateInputBaseClass, absenceForm.endDate ? 'border-black' : 'border-m-muted']"
                             :disabled="props.lockDates"
                         />
-                        <select
+                        <MalioSelect
-                            v-model="absenceForm.endHalf"
+                            :model-value="absenceForm.endHalf"
-                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                            :options="halfDayOptions"
-                        >
+                            min-width=""
-                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
+                            @update:model-value="(v) => { if (v !== null) absenceForm.endHalf = v as HalfDay }"
-                                {{ half.label }}
+                        />
-                            </option>
-                        </select>
                     </div>
                 </div>
             </div>
@@ -110,13 +88,12 @@
                 </button>
             </div>
             <div v-else class="flex justify-center pt-2">
-                <button
+                <MalioButton
                     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"
+                    label="Valider"
-                    :class="submitButtonClass"
+                    button-class="w-[200px]"
-                >
+                    :disabled="props.isSubmitting || !isFormValid"
-                    + Ajouter
+                />
-                </button>
             </div>
         </form>
     </AppDrawer>
@@ -189,20 +166,23 @@ const submitButtonClass = computed(() => {
     return ''
 })
 
-const baseSelectClass =
+const employeeOptions = computed(() =>
-    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    props.employees.map((e) => ({ label: `${e.firstName} ${e.lastName}`, value: e.id }))
-const employeeFieldClass = computed(() => {
+)
-    if (showEmployeeError.value) {
+const typeOptions = computed(() =>
-        return `${baseSelectClass} border-red-500`
+    props.absenceTypes.map((t) => ({ label: `${t.label} (${t.code})`, value: t.id }))
-    }
+)
-    return `${baseSelectClass} border-neutral-300`
+const halfDayOptions = HALF_DAYS.map((h) => ({ label: h.label, value: h.value }))
-})
+
-const typeFieldClass = computed(() => {
+const dateInputBaseClass =
-    if (showTypeError.value) {
+    'h-10 w-full rounded-md border px-3 text-md text-black outline-none focus:border-2 focus:border-m-primary'
-        return `${baseSelectClass} border-red-500`
+
-    }
+const onEmployeeChange = (value: string | number | null) => {
-    return `${baseSelectClass} border-neutral-300`
+    absenceForm.value.employeeId = value === null ? '' : Number(value)
-})
+}
+const onTypeChange = (value: string | number | null) => {
+    absenceForm.value.typeId = value === null ? '' : Number(value)
+}
 
 watch(
     () => props.modelValue,

frontend/components/AppDrawer.vue

@@ -4,13 +4,20 @@
       <div class="absolute inset-0 bg-black/40" @click="close" />
     </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="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl flex flex-col">
-        <div class="flex items-center justify-between px-[20px] pt-8 pb-8">
+        <div class="shrink-0 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-1 text-primary-500 hover:text-secondary-500"
+            @click="close"
+          >
+            <Icon name="mdi:close" size="24"/>
+          </button>
         </div>
-        <div class="overflow-y-auto px-[20px]" style="max-height: calc(100% - 65px)">
+        <div class="min-h-0 flex-1 overflow-y-auto px-[20px] pb-4 pt-1">
           <slot />
         </div>
       </div>

frontend/components/AppTopNav.vue

@@ -1,7 +1,14 @@
 <template>
-    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
+    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 px-4 py-3 text-white lg:p-5">
-        <div class="flex h-full items-center justify-end">
+        <div class="flex h-full items-center justify-between lg:justify-end">
-            <div class="flex gap-6 text-xl text-white">
+            <button
+                type="button"
+                class="rounded-md p-1 text-white hover:text-neutral-200 lg:hidden"
+                @click="$emit('toggleSidebar')"
+            >
+                <Icon name="mdi:menu" size="28"/>
+            </button>
+            <div class="flex gap-4 text-xl text-white lg:gap-6">
                 <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"/>
@@ -15,8 +22,8 @@
 
                     <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"
+                        class="fixed right-2 z-30 w-[calc(100vw-1rem)] max-w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg lg:right-[20px]"
-                        :style="{ top: `${navbarBottom + 20}px` }"
+                        :style="{ top: `${navbarBottom + 10}px` }"
                     >
                         <div class="px-3 pt-3 pb-6 text-xl font-semibold">
                             Notifications
@@ -66,7 +73,7 @@
                 <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>
+                        <p class="hidden self-center sm:block">{{ user?.username }}</p>
                     </button>
                     <div
                         v-if="isUserMenuOpen"
@@ -103,6 +110,10 @@ defineProps<{
     user?: User
 }>()
 
+defineEmits<{
+    (event: 'toggleSidebar'): void
+}>()
+
 const formatTimeAgo = (dateString: string): string => {
     const date = new Date(dateString)
     const now = new Date()

frontend/components/BulkYearlyHoursDrawer.vue

@@ -0,0 +1,108 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Export heures (tous les employés)">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="bulk-yearly-hours-year">
+                    Année <span class="text-red-600">*</span>
+                </label>
+                <select
+                    id="bulk-yearly-hours-year"
+                    v-model="selectedYear"
+                    :class="selectFieldClass"
+                >
+                    <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
+                </select>
+            </div>
+
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="bulk-yearly-hours-month">
+                    Mois <span class="text-red-600">*</span>
+                </label>
+                <select
+                    id="bulk-yearly-hours-month"
+                    v-model="selectedMonth"
+                    :class="selectFieldClass"
+                >
+                    <option value="" disabled>Sélectionner un mois</option>
+                    <option v-for="m in months" :key="m.value" :value="m.value">{{ m.label }}</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 disabled:opacity-50 disabled:cursor-not-allowed"
+                    :disabled="isLoading || selectedMonth === ''"
+                >
+                    <template v-if="isLoading">
+                        Génération en cours...
+                    </template>
+                    <template v-else>
+                        Imprimer
+                    </template>
+                </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
+    isLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit', payload: { year: number; month: number | null }): 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 months = [
+    { value: 1, label: 'Janvier' },
+    { value: 2, label: 'Février' },
+    { value: 3, label: 'Mars' },
+    { value: 4, label: 'Avril' },
+    { value: 5, label: 'Mai' },
+    { value: 6, label: 'Juin' },
+    { value: 7, label: 'Juillet' },
+    { value: 8, label: 'Août' },
+    { value: 9, label: 'Septembre' },
+    { value: 10, label: 'Octobre' },
+    { value: 11, label: 'Novembre' },
+    { value: 12, label: 'Décembre' }
+]
+const selectedYear = ref(currentYear)
+const currentMonth = new Date().getMonth() + 1
+const selectedMonth = ref<number | ''>(currentMonth)
+
+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 = () => {
+    if (selectedMonth.value === '') return
+    emit('submit', {
+        year: selectedYear.value,
+        month: selectedMonth.value
+    })
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (!isOpen) {
+            selectedYear.value = currentYear
+            selectedMonth.value = currentMonth
+        }
+    }
+)
+</script>

frontend/components/CalendarGrid.vue

@@ -45,9 +45,9 @@
                             <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' : ''"
+                                :class="getCellInfo(employee.id, day.date)?.hasFormation ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
-                                :disabled="isHolidayDate(day.date)"
+                                :disabled="getCellInfo(employee.id, day.date)?.hasFormation"
                                 @click="handleCellClick(employee, day.date)"
                             >
                                 <span v-if="!getCellInfo(employee.id, day.date)?.halfLabel">
@@ -67,15 +67,20 @@
                                         {{ getCellInfo(employee.id, day.date)?.code }}
                                     </span>
                                 </template>
+                                <Icon
+                                    v-if="getCellInfo(employee.id, day.date)?.hasFormation && getCellInfo(employee.id, day.date)?.code !== 'F'"
+                                    name="mdi:school"
+                                    size="12"
+                                    class="absolute top-0 right-0 text-indigo-600 bg-white rounded-bl-md p-0.5"
+                                    title="Formation"
+                                />
                             </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>
@@ -107,7 +112,7 @@ const props = defineProps<{
     visibleEmployees: Employee[]
     gridStyle: Record<string, string>
     getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
-    getCellInfo: (employeeId: number, date: string) => { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string } | null
+    getCellInfo: (employeeId: number, date: string) => { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string; hasFormation?: boolean } | null
     formatEmployeeName: (employee: Employee) => string
     isHolidayDate: (date: string) => boolean
 }>()

frontend/components/EmployeeNameFilterInput.vue

@@ -1,26 +0,0 @@
-<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

@@ -1,5 +1,5 @@
 <template>
-    <AppDrawer v-model="drawerOpen" title="Export heures annuelles">
+    <AppDrawer v-model="drawerOpen" title="Export heures">
         <form class="space-y-4" @submit.prevent="handleSubmit">
             <div>
                 <label class="text-md font-semibold text-neutral-700" for="yearly-hours-year">
@@ -14,6 +14,20 @@
                 </select>
             </div>
 
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="yearly-hours-month">
+                    Mois
+                </label>
+                <select
+                    id="yearly-hours-month"
+                    v-model="selectedMonth"
+                    :class="selectFieldClass"
+                >
+                    <option value="">Toute l'année</option>
+                    <option v-for="m in months" :key="m.value" :value="m.value">{{ m.label }}</option>
+                </select>
+            </div>
+
             <div class="flex justify-center pt-2">
                 <button
                     type="submit"
@@ -37,7 +51,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     (event: 'update:modelValue', value: boolean): void
-    (event: 'submit', year: number): void
+    (event: 'submit', payload: { year: number; month: number | null }): void
 }>()
 
 const drawerOpen = computed({
@@ -47,13 +61,31 @@ const drawerOpen = computed({
 
 const currentYear = new Date().getFullYear()
 const years = Array.from({ length: 6 }, (_, i) => currentYear - i)
+const months = [
+    { value: 1, label: 'Janvier' },
+    { value: 2, label: 'Février' },
+    { value: 3, label: 'Mars' },
+    { value: 4, label: 'Avril' },
+    { value: 5, label: 'Mai' },
+    { value: 6, label: 'Juin' },
+    { value: 7, label: 'Juillet' },
+    { value: 8, label: 'Août' },
+    { value: 9, label: 'Septembre' },
+    { value: 10, label: 'Octobre' },
+    { value: 11, label: 'Novembre' },
+    { value: 12, label: 'Décembre' }
+]
 const selectedYear = ref(currentYear)
+const selectedMonth = ref<number | ''>('')
 
 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)
+    emit('submit', {
+        year: selectedYear.value,
+        month: selectedMonth.value === '' ? null : selectedMonth.value
+    })
 }
 
 watch(
@@ -61,6 +93,7 @@ watch(
     (isOpen) => {
         if (!isOpen) {
             selectedYear.value = currentYear
+            selectedMonth.value = ''
         }
     }
 )

frontend/components/SiteFilterSelector.vue

@@ -1,69 +0,0 @@
-<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/documentation/DocumentationArticle.vue

@@ -0,0 +1,26 @@
+<template>
+    <article :id="`doc-${article.id}`" class="scroll-mt-6">
+        <h3 class="text-lg font-bold text-primary-500 mb-3">{{ article.title }}</h3>
+        <div class="space-y-3">
+            <template v-for="(block, idx) in article.blocks" :key="idx">
+                <p v-if="block.type === 'paragraph'" class="text-sm text-neutral-700 leading-relaxed">
+                    {{ block.content }}
+                </p>
+                <ul v-else-if="block.type === 'list'" class="list-disc list-inside space-y-1 text-sm text-neutral-700 pl-2">
+                    <li v-for="(item, i) in block.content.split('\n')" :key="i">{{ item }}</li>
+                </ul>
+                <div v-else-if="block.type === 'note'" class="bg-tertiary-500 border-l-4 border-primary-500 p-3 rounded-r-md">
+                    <p class="text-sm text-neutral-700 leading-relaxed">{{ block.content }}</p>
+                </div>
+            </template>
+        </div>
+    </article>
+</template>
+
+<script setup lang="ts">
+import type { DocArticle } from '~/types/documentation'
+
+defineProps<{
+    article: DocArticle
+}>()
+</script>

frontend/components/documentation/DocumentationPage.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="h-full flex gap-8">
+        <!-- Table des matières -->
+        <nav class="w-64 flex-shrink-0 overflow-y-auto pr-4 border-r border-neutral-200">
+            <h1 class="text-xl font-bold text-primary-500 mb-6">Documentation</h1>
+            <div v-for="section in visibleSections" :key="section.id" class="mb-4">
+                <div class="flex items-center gap-2 mb-1">
+                    <Icon :name="section.icon" size="18" class="text-neutral-500"/>
+                    <span class="text-sm font-semibold text-neutral-700">{{ section.title }}</span>
+                </div>
+                <ul class="pl-7 space-y-0.5">
+                    <li v-for="article in section.articles" :key="article.id">
+                        <button
+                            class="text-xs text-neutral-500 hover:text-primary-500 text-left w-full py-0.5 transition-colors"
+                            :class="activeArticleId === article.id ? 'text-primary-500 font-bold' : ''"
+                            @click="scrollToArticle(article.id)"
+                        >
+                            {{ article.title }}
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+
+        <!-- Contenu -->
+        <div ref="contentRef" class="flex-1 overflow-y-auto pr-4">
+            <DocumentationSection
+                v-for="section in visibleSections"
+                :key="section.id"
+                :section="section"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const { visibleSections, activeArticleId, scrollToArticle } = useDocumentation()
+const contentRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+    if (!contentRef.value) return
+
+    const observer = new IntersectionObserver(
+        (entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    const id = entry.target.id.replace('doc-', '')
+                    activeArticleId.value = id
+                    break
+                }
+            }
+        },
+        {
+            root: contentRef.value,
+            rootMargin: '-10% 0px -80% 0px',
+            threshold: 0,
+        },
+    )
+
+    nextTick(() => {
+        const articles = contentRef.value?.querySelectorAll('[id^="doc-"]')
+        articles?.forEach(el => observer.observe(el))
+    })
+
+    onUnmounted(() => observer.disconnect())
+})
+</script>

frontend/components/documentation/DocumentationSection.vue

@@ -0,0 +1,23 @@
+<template>
+    <section class="mb-10">
+        <div class="flex items-center gap-3 border-b-2 border-primary-500 pb-3 mb-6">
+            <Icon :name="section.icon" size="28" class="text-primary-500"/>
+            <h2 class="text-xl font-bold text-primary-500">{{ section.title }}</h2>
+        </div>
+        <div class="space-y-8 pl-2">
+            <DocumentationArticle
+                v-for="article in section.articles"
+                :key="article.id"
+                :article="article"
+            />
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { DocSection } from '~/types/documentation'
+
+defineProps<{
+    section: DocSection
+}>()
+</script>

frontend/components/driver-hours/DriverHoursDayView.vue

@@ -6,7 +6,7 @@
                 :style="{ gridTemplateColumns: dayGridCols }"
             >
                 <span>Nom</span>
-                <span class="pl-2">Absence</span>
+                <span class="pl-2">Statut</span>
                 <span class="pl-4">Heure de jour</span>
                 <span class="pl-2">Heure de nuit</span>
                 <span class="pl-2">Heure atelier</span>
@@ -25,19 +25,7 @@
               @change="onBulkValidationChange"
           />
         </span>
-                <span v-else-if="isSiteManager" class="inline-flex items-center gap-2">
+                <span v-else-if="!isSiteManager">Site <Icon name="mdi:check-bold" class="ml-1"/></span>
-          <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>
 
@@ -54,7 +42,9 @@
                             <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>
+                                {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
+                            </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"
@@ -68,19 +58,30 @@
                         </p>
                     </div>
                     <div class="pl-2 min-w-0 self-stretch flex flex-col gap-1 justify-between py-0.5">
-                        <p
+                        <div class="flex flex-col gap-1 min-w-0">
-                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
+                            <p
-                            :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
+                                class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
-                            :title="getRowAbsenceLabel(employee.id) || ''"
+                                :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
-                            :style="getRowAbsenceStyle(employee.id)"
+                                :title="getRowAbsenceLabel(employee.id) || ''"
-                        >
+                                :style="getRowAbsenceStyle(employee.id)"
-                            {{ getRowAbsenceLabel(employee.id) || '—' }}
+                            >
-                        </p>
+                                {{ getRowAbsenceLabel(employee.id) || '—' }}
+                            </p>
+                            <p
+                                v-if="isHoliday"
+                                class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate text-sky-900 inline-flex items-center gap-1"
+                                style="background-color: #b3e5fc"
+                                :title="holidayLabel || 'Férié'"
+                            >
+                                <Icon name="mdi:calendar-star" size="14" class="shrink-0"/>
+                                <span class="truncate">{{ holidayLabel || 'Férié' }}</span>
+                            </p>
+                        </div>
                         <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'"
+                            :class="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)"
+                            :disabled="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
                             @click="onAbsenceClick(employee.id)"
                         >
                             Modifier
@@ -91,6 +92,12 @@
                             v-model="rows[employee.id].dayHours"
                             :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id)"
                         />
+                        <p
+                            v-if="isHoliday && getRowMetrics(employee.id).virtualHolidayMinutes > 0"
+                            class="mt-1 text-xs font-semibold text-sky-700"
+                        >
+                            = {{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }} (férié)
+                        </p>
                     </div>
                     <div class="pl-2">
                         <TimeSelect
@@ -147,16 +154,8 @@
                             @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
                         />
                     </div>
-                    <div v-else class="text-right p-5">
+                    <div v-else-if="!isSiteManager" class="text-right p-5">
-                        <input
+                        <span v-if="rows[employee.id]?.isSiteValid" class="text-xs font-semibold text-neutral-700">Validé</span>
-                            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">
@@ -173,6 +172,7 @@
 import type { Employee } from '~/services/dto/employee'
 import TimeSelect from '~/components/ui/TimeSelect.vue'
 import type { DriverHourRow } from '~/services/dto/work-hour'
+import { contractNatureLabel } from '~/utils/contract'
 
 const rows = defineModel<Record<number, DriverHourRow>>('rows', { required: true })
 const bulkValidationInput = ref<HTMLInputElement | null>(null)
@@ -184,6 +184,7 @@ const props = defineProps<{
     isSiteManager: boolean
     dayGridCols: string
     isHoliday: boolean
+    holidayLabel: string
     contractLabel: (employee: Employee) => string
     isRowLocked: (employeeId: number) => boolean
     hasContractAtSelectedDate: (employeeId: number) => boolean
@@ -201,9 +202,10 @@ const props = defineProps<{
     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 }
+    getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; workshopMinutes: number; totalMinutes: number; virtualHolidayMinutes: number }
     getRowAbsenceLabel: (employeeId: number) => string
     getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
+    getRowContractNature: (employeeId: number) => 'CDI' | 'CDD' | 'INTERIM' | null
     getRowUpdatedAt: (employeeId: number) => string
     onAbsenceClick: (employeeId: number) => void
     formatMinutes: (minutes: number) => string

frontend/components/driver-hours/DriverHoursWeekView.vue

@@ -33,7 +33,12 @@
             {{ 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>
+          <p class="text-[11px] text-neutral-500 truncate inline-flex items-center gap-2">
+            <span>{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span></span>
+            <button v-if="isAdmin" type="button" class="inline-flex items-center justify-center rounded-md p-1 text-white transition-colors" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
+              <Icon name="mdi:comment-text-outline" size="12"/>
+            </button>
+          </p>
         </div>
 
         <div
@@ -42,7 +47,7 @@
           class="text-left leading-4 rounded-md px-2 py-1"
           :class="daily.hasAbsence ? 'text-white' : ''"
           :style="getDailyCellStyle(daily)"
-          :title="daily.absenceLabel ?? ''"
+          :title="cellTitle(daily)"
         >
           <div>J {{ formatMinutes(daily.dayMinutes) }}</div>
           <div>N {{ formatMinutes(daily.nightMinutes) }}</div>
@@ -89,20 +94,39 @@
 
 <script setup lang="ts">
 import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+import { contractNatureLabel } from '~/utils/contract'
+
+const HOLIDAY_BG_COLOR = '#b3e5fc'
 
 const getDailyCellStyle = (daily: {
   hasAbsence?: boolean
   absenceColor?: string | null
+  holidayLabel?: string | null
 }) => {
-  if (!daily.hasAbsence) return undefined
+  if (daily.hasAbsence) return { backgroundColor: daily.absenceColor || '#dc2626' }
-  return { backgroundColor: daily.absenceColor || '#dc2626' }
+  if (daily.holidayLabel) return { backgroundColor: HOLIDAY_BG_COLOR }
+  return undefined
+}
+
+const cellTitle = (daily: {
+  hasAbsence?: boolean
+  absenceLabel?: string | null
+  holidayLabel?: string | null
+}) => {
+  const parts: string[] = []
+  if (daily.absenceLabel) parts.push(daily.absenceLabel)
+  if (daily.holidayLabel) parts.push(`Férié : ${daily.holidayLabel}`)
+  return parts.join(' — ')
 }
 
 defineProps<{
   isWeekLoading: boolean
+  isAdmin: boolean
   weekGridCols: string
   weeklySummary: WeeklyWorkHourSummary | null
   weekDayHeaders: Array<{ date: string; weekday: string; dayDate: string }>
   formatMinutes: (minutes: number) => string
 }>()
+
+defineEmits<{ (e: 'open-comment', row: WeeklyWorkHourSummary['rows'][number]): void }>()
 </script>

frontend/components/employees/ContractTab.vue

@@ -16,7 +16,7 @@
           :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>{{ item.interimAgencyName ? `${contractNatureLabel(item.contractNature)} (${item.interimAgencyName})` : contractNatureLabel(item.contractNature) }}</p>
           <p>{{ contractHistoryLabel(item) }}</p>
           <p>{{ formatDate(item.startDate) }}</p>
           <p>{{ formatDate(item.endDate) }}</p>
@@ -108,6 +108,13 @@
           <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">La date de fin est obligatoire.</p>
         </div>
 
+        <WorkDaysHoursInput
+          v-if="contractForm.workDaysHours"
+          :model-value="contractForm.workDaysHours"
+          :contract-weekly-hours="contractForm.weeklyHours ?? null"
+          disabled
+        />
+
         <div>
           <label class="text-md font-semibold text-neutral-700" for="contract-comment">
             Commentaire
@@ -214,6 +221,22 @@
           </select>
         </div>
 
+        <div v-if="createContractForm.contractNature === 'INTERIM'">
+          <label class="text-md font-semibold text-neutral-700" for="create-interim-agency">
+            Agence d'intérim
+          </label>
+          <select
+            id="create-interim-agency"
+            v-model="createContractForm.interimAgencyId"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
+            <option value="">Aucune</option>
+            <option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
+              {{ agency.name }}
+            </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>
@@ -252,7 +275,13 @@
           </label>
         </div>
 
-        <div class="flex justify-center pt-2">
+        <WorkDaysHoursInput
+          v-if="requiresCreateWorkDaysHours"
+          v-model="createContractForm.workDaysHours"
+          :contract-weekly-hours="selectedCreateContract?.weeklyHours ?? null"
+        />
+
+        <div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex justify-center">
           <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"
@@ -269,6 +298,8 @@
 <script setup lang="ts">
 import type { Contract } from '~/services/dto/contract'
 import type { ContractHistoryItem } from '~/services/dto/employee'
+import type { InterimAgency } from '~/services/interim-agencies'
+import WorkDaysHoursInput from '~/components/employees/WorkDaysHoursInput.vue'
 
 type SuspensionForm = {
   id: number | null
@@ -286,6 +317,7 @@ type ContractForm = {
   endDate: string
   paidLeaveSettled: boolean
   comment: string
+  workDaysHours: Record<number, number> | null
 }
 
 type CreateContractForm = {
@@ -294,6 +326,8 @@ type CreateContractForm = {
   startDate: string
   endDate: string
   isDriver: boolean
+  workDaysHours: Record<number, number> | null
+  interimAgencyId: number | ''
 }
 
 const props = defineProps<{
@@ -322,6 +356,8 @@ const props = defineProps<{
   requiresCreateContractEndDate: boolean
   createContractEndDateFieldClass: string
   isCreateContractFormValid: boolean
+  requiresCreateWorkDaysHours: boolean
+  selectedCreateContract: Contract | null
   onOpenCloseContractDrawer: () => void
   onOpenCreateContractDrawer: () => void
   onUpdateContractDrawerOpen: (open: boolean) => void
@@ -333,6 +369,7 @@ const props = defineProps<{
   onSubmitSuspension: (index: number) => void
   onAddSuspensionForm: () => void
   currentContractPeriodId?: number | null
+  interimAgencies: InterimAgency[]
 }>()
 
 const drawerTab = ref<'close' | 'suspend'>('close')

frontend/components/employees/FormationTab.vue

@@ -0,0 +1,251 @@
+<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>Date de début</p>
+                <p>Date de fin</p>
+                <p>Justificatif</p>
+                <p>Commentaire</p>
+            </div>
+            <div v-if="formations.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 formation.
+            </div>
+            <div v-else class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="item in formations"
+                    :key="item.id"
+                    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 cursor-pointer hover:bg-tertiary-500"
+                    @click="onOpenEditDrawer(item)"
+                >
+                    <p>{{ formatDate(item.startDate) }}</p>
+                    <p>{{ formatDate(item.endDate) }}</p>
+                    <p class="min-w-0">
+                        <a
+                            v-if="item.justificatifPath"
+                            :href="getFormationJustificatifUrl(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.justificatifName ?? 'Télécharger' }}</span>
+                        </a>
+                        <span v-else>-</span>
+                    </p>
+                    <p class="truncate">{{ 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="Formation">
+            <form class="space-y-4" @submit.prevent="onSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="formation-start-date">
+                        Date de début <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="formation-start-date"
+                        v-model="form.startDate"
+                        type="date"
+                        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="formation-end-date">
+                        Date de fin <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="formation-end-date"
+                        v-model="form.endDate"
+                        type="date"
+                        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 v-if="isDateRangeInvalid" class="mt-1 text-sm text-red-600">La date de fin doit être postérieure ou égale à la date de début.</p>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="formation-justificatif">
+                        Justificatif
+                    </label>
+                    <div v-if="isEditing && editingItem?.justificatifName" class="mt-1 text-sm text-neutral-500">
+                        Fichier actuel : {{ editingItem.justificatifName }}
+                    </div>
+                    <input
+                        id="formation-justificatif"
+                        ref="justificatifInput"
+                        type="file"
+                        accept="application/pdf"
+                        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="onJustificatifChange"
+                    />
+                    <p v-if="justificatifError" class="mt-1 text-sm text-red-600">{{ justificatifError }}</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="formation-comment">
+                        Commentaire
+                    </label>
+                    <textarea
+                        id="formation-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 {Formation} from '~/services/dto/formation'
+import {getFormationJustificatifUrl} from '~/services/formations'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    formations: Formation[]
+    apiBase: string
+}>()
+
+const emit = defineEmits<{
+    (event: 'create', data: { startDate: string; endDate: string; comment?: string }, justificatifFile?: File): void
+    (event: 'update', id: number, data: { startDate: string; endDate: string; comment?: string }, justificatifFile?: File): void
+    (event: 'delete', id: number): void
+}>()
+
+const isDrawerOpen = ref(false)
+const isEditing = ref(false)
+const editingItem = ref<Formation | null>(null)
+const selectedJustificatif = ref<File | undefined>(undefined)
+const justificatifInput = ref<HTMLInputElement | null>(null)
+const justificatifError = ref('')
+
+const form = reactive({
+    startDate: '',
+    endDate: '',
+    comment: ''
+})
+
+const isDateRangeInvalid = computed(() => {
+    if (!form.startDate || !form.endDate) return false
+    return form.endDate < form.startDate
+})
+
+const isFormValid = computed(() => {
+    return Boolean(form.startDate) && Boolean(form.endDate) && !isDateRangeInvalid.value && !justificatifError.value
+})
+
+const formatDate = (dateStr: string): string => {
+    if (!dateStr) return '-'
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return dateStr
+    return date.toLocaleDateString('fr-FR')
+}
+
+const resetForm = () => {
+    form.startDate = ''
+    form.endDate = ''
+    form.comment = ''
+    selectedJustificatif.value = undefined
+    justificatifError.value = ''
+    if (justificatifInput.value) {
+        justificatifInput.value.value = ''
+    }
+}
+
+const onOpenCreateDrawer = () => {
+    isEditing.value = false
+    editingItem.value = null
+    resetForm()
+    isDrawerOpen.value = true
+}
+
+const onOpenEditDrawer = (item: Formation) => {
+    isEditing.value = true
+    editingItem.value = item
+    form.startDate = item.startDate
+    form.endDate = item.endDate
+    form.comment = item.comment ?? ''
+    selectedJustificatif.value = undefined
+    justificatifError.value = ''
+    if (justificatifInput.value) {
+        justificatifInput.value.value = ''
+    }
+    isDrawerOpen.value = true
+}
+
+const onJustificatifChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (file && file.type !== 'application/pdf') {
+        justificatifError.value = 'Seuls les fichiers PDF sont acceptés.'
+        selectedJustificatif.value = undefined
+        target.value = ''
+        return
+    }
+    justificatifError.value = ''
+    selectedJustificatif.value = file ?? undefined
+}
+
+const onSubmit = () => {
+    const data = {
+        startDate: form.startDate,
+        endDate: form.endDate,
+        comment: form.comment || undefined
+    }
+
+    if (isEditing.value && editingItem.value) {
+        emit('update', editingItem.value.id, data, selectedJustificatif.value)
+    } else {
+        emit('create', data, selectedJustificatif.value)
+    }
+    isDrawerOpen.value = false
+}
+
+const onDelete = () => {
+    if (!editingItem.value) return
+    const ok = window.confirm('Supprimer cette formation ?')
+    if (!ok) return
+    emit('delete', editingItem.value.id)
+    isDrawerOpen.value = false
+}
+</script>

frontend/components/employees/LeaveTab.vue

@@ -32,6 +32,20 @@
             <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">Année n-1 payés : </span>
+                    <span> {{ formatCount(summary?.previousYearPaidDays) }} Jours</span>
+                </div>
+                <button
+                    class="flex items-center"
+                    :class="isHistoricalYear ? 'opacity-40 cursor-not-allowed' : ''"
+                    :disabled="isHistoricalYear"
+                    @click="openPaidLeaveDrawer"
+                >
+                    <Icon name="mdi:edit-box" size="24"/>
+                </button>
+            </div>
             <div v-if="!isForfaitRule" class="col-start-4 p-[10px] flex gap-7 items-center">
                 <div>
                     <span class="uppercase font-semibold">Fractionné acquis : </span>
@@ -39,6 +53,8 @@
                 </div>
                 <button
                     class="flex items-center"
+                    :class="isHistoricalYear ? 'opacity-40 cursor-not-allowed' : ''"
+                    :disabled="isHistoricalYear"
                     @click="openFractionedDrawer"
                 >
                     <Icon name="mdi:edit-box" size="24"/>
@@ -78,6 +94,22 @@
                     </div>
                 </div>
             </div>
+            <div class="mt-6 flex items-center gap-3">
+                <label for="leave-year-select" class="text-md font-semibold text-primary-500 uppercase">
+                    {{ isForfaitRule ? 'Année :' : 'Exercice :' }}
+                </label>
+                <select
+                    id="leave-year-select"
+                    :value="selectedYear ?? ''"
+                    :disabled="!availableYears.length"
+                    class="border border-primary-500 rounded-md px-3 py-1 text-md font-semibold text-primary-500 bg-white focus:outline-none focus:ring-2 focus:ring-secondary-500/20 disabled:opacity-50"
+                    @change="handleYearChange"
+                >
+                    <option v-for="option in availableYears" :key="option.value" :value="option.value">
+                        {{ option.label }}
+                    </option>
+                </select>
+            </div>
         </div>
         <AppDrawer v-model="isFractionedDrawerOpen" title="Jours fractionnés">
             <form class="space-y-4" @submit.prevent="handleSubmitFractioned">
@@ -112,6 +144,39 @@
                 </div>
             </form>
         </AppDrawer>
+        <AppDrawer v-model="isPaidLeaveDrawerOpen" title="Congés N-1 payés">
+            <form class="space-y-4" @submit.prevent="handleSubmitPaidLeave">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="paid-leave-days">
+                        Nombre de jours <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="paid-leave-days"
+                        v-model="paidLeaveForm.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="isPaidLeaveDrawerOpen = 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>
 
@@ -128,19 +193,45 @@ type DayLeaveState = {
     colors: string[]
 }
 
+type LeaveYearOption = {
+    value: number
+    label: string
+}
+
 const props = defineProps<{
     absences: Absence[]
     summary: EmployeeLeaveSummary | null
     publicHolidays: Record<string, string>
+    selectedYear: number | null
+    availableYears: LeaveYearOption[]
+    currentYear: number | null
 }>()
 
 const emit = defineEmits<{
     (event: 'update-fractioned-days', days: number): void
+    (event: 'update-paid-leave-days', days: number): void
+    (event: 'update-selected-year', year: number): void
 }>()
 
+const isHistoricalYear = computed(() =>
+    props.selectedYear !== null
+    && props.currentYear !== null
+    && props.selectedYear !== props.currentYear
+)
+
+const handleYearChange = (event: Event) => {
+    const target = event.target as HTMLSelectElement
+    const value = Number(target.value)
+    if (Number.isNaN(value)) return
+    emit('update-selected-year', value)
+}
+
 const isFractionedDrawerOpen = ref(false)
 const fractionedForm = reactive({days: 0})
 
+const isPaidLeaveDrawerOpen = ref(false)
+const paidLeaveForm = reactive({days: 0})
+
 const openFractionedDrawer = () => {
     fractionedForm.days = props.summary?.fractionedDays ?? 0
     isFractionedDrawerOpen.value = true
@@ -153,6 +244,18 @@ const handleSubmitFractioned = () => {
     isFractionedDrawerOpen.value = false
 }
 
+const openPaidLeaveDrawer = () => {
+    paidLeaveForm.days = props.summary?.previousYearPaidDays ?? 0
+    isPaidLeaveDrawerOpen.value = true
+}
+
+const handleSubmitPaidLeave = () => {
+    const value = Number(paidLeaveForm.days)
+    if (Number.isNaN(value) || value < 0) return
+    emit('update-paid-leave-days', value)
+    isPaidLeaveDrawerOpen.value = false
+}
+
 const monthLabels = [
     'Janvier',
     'Fevrier',
@@ -178,6 +281,7 @@ const currentYearTakenDays = computed(() => {
 })
 
 const displayedYear = computed(() => {
+    if (props.selectedYear) return props.selectedYear
     if (props.summary?.year) return props.summary.year
     const today = new Date()
     const year = today.getFullYear()

frontend/components/employees/RttTab.vue

@@ -11,7 +11,7 @@
           <Icon name="mdi:chevron-left" size="24"/>
         </button>
         <span class="text-lg font-bold tracking-wide min-w-[170px] text-center">
-          {{ currentMonthLabel }} {{ currentYear }}
+          {{ currentMonthLabel }} {{ displayedMonthYear }}
         </span>
         <button
           class="rounded px-2 py-1 font-bold hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed flex items-center"
@@ -27,10 +27,11 @@
       </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"
+                class="rounded-md bg-primary-500 px-8 py-2 font-bold text-white hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed"
+                :disabled="isHistoricalYear"
                 @click="openPaymentDrawer"
             >
-                + Payer les RRT
+                + Payer les RTT
             </button>
         </div>
     </div>
@@ -40,14 +41,15 @@
       <table class="w-full table-fixed border-collapse text-[18px]">
         <colgroup>
           <col />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
         </colgroup>
         <thead>
           <tr>
@@ -59,7 +61,8 @@
             <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>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Total</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Cumul</th>
           </tr>
         </thead>
         <tbody>
@@ -73,6 +76,7 @@
             <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 border-r-2">{{ formatMinutes(summary!.carryFromPreviousYearMinutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryFromPreviousYearMinutes) }}</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>
 
@@ -86,6 +90,7 @@
             <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 border-r-2">{{ formatMinutes(monthReport.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total) }}</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>
 
@@ -126,10 +131,14 @@
               <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">
+            <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.totalMinutes) }}</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.cumulativeBalanceMinutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(week.cumulativeBalanceMinutes) }}</span></span>
+              <span v-else>&nbsp;</span>
+            </td>
           </tr>
 
           <!-- Total row -->
@@ -142,20 +151,22 @@
             <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>
+            <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.total) }}</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-t-2">-</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.paidBase25Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBase25Minutes : 0) }}</span></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">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus25Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBonus25Minutes : 0) }}</span></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 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase25Minutes + currentPayment.paidBonus25Minutes)) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -(currentPayment.paidBase25Minutes + currentPayment.paidBonus25Minutes) : 0) }}</span></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.paidBase50Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBase50Minutes : 0) }}</span></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">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus50Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBonus50Minutes : 0) }}</span></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 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes)) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes) : 0) }}</span></td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(paidTotal) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(paidTotal) }} <span class="text-neutral-400">/ {{ formatCentiemes(paidTotal) }}</span></td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500">-</td>
           </tr>
 
           <!-- Reste row -->
@@ -168,10 +179,27 @@
             <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>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(reste.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total) }}</span></td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500">-</td>
           </tr>
         </tbody>
       </table>
+      <div class="mt-6 flex items-center gap-3">
+        <label for="rtt-year-select" class="text-md font-semibold text-primary-500 uppercase">
+          Exercice :
+        </label>
+        <select
+          id="rtt-year-select"
+          :value="selectedYear ?? ''"
+          :disabled="!availableYears.length"
+          class="border border-primary-500 rounded-md px-3 py-1 text-md font-semibold text-primary-500 bg-white focus:outline-none focus:ring-2 focus:ring-secondary-500/20 disabled:opacity-50"
+          @change="handleYearChange"
+        >
+          <option v-for="option in availableYears" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
     </div>
 
     <!-- Payment Drawer -->
@@ -187,41 +215,41 @@
           </select>
         </div>
         <div class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Base 25% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Base 25% (centièmes)</label>
           <input
             v-model.number="paymentForm.base25Hours"
             type="number"
-            step="0.5"
+            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 class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Heures 25% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Heures 25% (centièmes)</label>
           <input
             v-model.number="paymentForm.bonus25Hours"
             type="number"
-            step="0.5"
+            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 class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Base 50% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Base 50% (centièmes)</label>
           <input
             v-model.number="paymentForm.base50Hours"
             type="number"
-            step="0.5"
+            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 class="mb-6">
-          <label class="block text-sm font-medium text-neutral-700">Heures 50% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Heures 50% (centièmes)</label>
           <input
             v-model.number="paymentForm.bonus50Hours"
             type="number"
-            step="0.5"
+            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"
           />
@@ -250,14 +278,36 @@
 import type { EmployeeRttSummary, EmployeeRttWeekSummary } from '~/services/dto/employee-rtt-summary'
 import AppDrawer from '~/components/AppDrawer.vue'
 
+type RttYearOption = {
+  value: number
+  label: string
+}
+
 const props = defineProps<{
   summary: EmployeeRttSummary | null
+  selectedYear: number | null
+  availableYears: RttYearOption[]
+  currentYear: number | null
 }>()
 
 const emit = defineEmits<{
   (event: 'submit-rtt-payment', month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number): void
+  (event: 'update-selected-year', year: number): void
 }>()
 
+const isHistoricalYear = computed(() =>
+  props.selectedYear !== null
+  && props.currentYear !== null
+  && props.selectedYear !== props.currentYear
+)
+
+const handleYearChange = (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  const value = Number(target.value)
+  if (Number.isNaN(value)) return
+  emit('update-selected-year', value)
+}
+
 // --- Last complete week number ---
 
 const lastCompleteWeek = computed(() => {
@@ -313,7 +363,7 @@ const currentMonth = computed(() => orderedMonths[currentMonthIndex.value])
 
 const currentMonthLabel = computed(() => monthLabels[currentMonth.value])
 
-const currentYear = computed(() => {
+const displayedMonthYear = computed(() => {
   if (!props.summary) return ''
   return currentMonth.value >= 6 ? props.summary.year - 1 : props.summary.year
 })
@@ -500,10 +550,10 @@ const paymentForm = reactive({
 const prefillFromExistingPayment = (month: number) => {
   const existing = props.summary?.monthPayments.find((p) => p.month === month) ?? null
   if (existing) {
-    paymentForm.base25Hours = existing.paidBase25Minutes / 60
+    paymentForm.base25Hours = Math.round(existing.paidBase25Minutes / 60 * 100) / 100
-    paymentForm.bonus25Hours = existing.paidBonus25Minutes / 60
+    paymentForm.bonus25Hours = Math.round(existing.paidBonus25Minutes / 60 * 100) / 100
-    paymentForm.base50Hours = existing.paidBase50Minutes / 60
+    paymentForm.base50Hours = Math.round(existing.paidBase50Minutes / 60 * 100) / 100
-    paymentForm.bonus50Hours = existing.paidBonus50Minutes / 60
+    paymentForm.bonus50Hours = Math.round(existing.paidBonus50Minutes / 60 * 100) / 100
   } else {
     paymentForm.base25Hours = 0
     paymentForm.bonus25Hours = 0
@@ -516,6 +566,14 @@ watch(() => paymentForm.month, (newMonth) => {
   prefillFromExistingPayment(newMonth)
 })
 
+watch(() => paymentForm.base25Hours, (value) => {
+  paymentForm.bonus25Hours = Math.round(value * 0.25 * 100) / 100
+})
+
+watch(() => paymentForm.base50Hours, (value) => {
+  paymentForm.bonus50Hours = Math.round(value * 0.50 * 100) / 100
+})
+
 const openPaymentDrawer = () => {
   paymentForm.month = currentMonth.value
   prefillFromExistingPayment(currentMonth.value)

frontend/components/employees/WorkDaysHoursInput.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3 space-y-2">
+    <div class="flex items-center justify-between">
+      <p class="text-md font-semibold text-neutral-700">
+        Jours travaillés <span v-if="!disabled" class="text-red-600">*</span>
+      </p>
+      <p class="text-sm" :class="totalIsValid ? 'text-green-700' : 'text-red-600'">
+        {{ formatTotal(totalMinutes) }} / {{ formatTotal(expectedMinutes) }}
+      </p>
+    </div>
+    <p v-if="!disabled" class="text-xs text-neutral-500">Somme requise = {{ expectedMinutes / 60 }}h (total hebdo du contrat).</p>
+    <div class="space-y-1">
+      <div v-for="day in days" :key="day.iso" class="flex items-center gap-3">
+        <label class="inline-flex items-center gap-2 min-w-[120px]">
+          <input
+            :checked="day.active"
+            type="checkbox"
+            class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
+            :disabled="disabled"
+            @change="onToggleDay(day.iso, ($event.target as HTMLInputElement).checked)"
+          />
+          <span class="text-md text-neutral-700">{{ day.label }}</span>
+        </label>
+        <input
+          :value="day.time"
+          type="time"
+          step="60"
+          class="rounded-md border border-neutral-300 bg-white px-2 py-1 text-md text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20 disabled:bg-neutral-100 disabled:text-neutral-400"
+          :disabled="disabled || !day.active"
+          @input="onChangeTime(day.iso, ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </div>
+    <p v-if="!totalIsValid" class="text-sm text-red-600">
+      La somme des heures par jour doit égaler exactement {{ expectedMinutes / 60 }}h.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: Record<number, number> | null
+  contractWeeklyHours: number | null
+  disabled?: boolean
+}>(), { disabled: false })
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<number, number>]
+}>()
+
+const DAY_LABELS: Record<number, string> = { 1: 'Lundi', 2: 'Mardi', 3: 'Mercredi', 4: 'Jeudi', 5: 'Vendredi' }
+
+const expectedMinutes = computed(() => (props.contractWeeklyHours ?? 0) * 60)
+
+const days = computed(() => {
+  const raw = props.modelValue ?? {}
+  return [1, 2, 3, 4, 5].map((iso) => {
+    const active = Object.prototype.hasOwnProperty.call(raw, iso)
+    const minutes = Number(raw[iso] ?? 0)
+    return {
+      iso,
+      label: DAY_LABELS[iso],
+      active,
+      time: active ? minutesToTime(minutes) : '00:00',
+    }
+  })
+})
+
+const totalMinutes = computed(() => {
+  const raw = props.modelValue ?? {}
+  return Object.values(raw).reduce((sum, n) => sum + (Number(n) || 0), 0)
+})
+
+const totalIsValid = computed(() => totalMinutes.value === expectedMinutes.value && expectedMinutes.value > 0)
+
+function minutesToTime(minutes: number): string {
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+}
+
+function timeToMinutes(value: string): number {
+  const [h, m] = value.split(':').map(Number)
+  return (h || 0) * 60 + (m || 0)
+}
+
+function onToggleDay(iso: number, active: boolean) {
+  const next = { ...(props.modelValue ?? {}) }
+  if (active) {
+    next[iso] = next[iso] ?? 0
+  } else {
+    delete next[iso]
+  }
+  emit('update:modelValue', next)
+}
+
+function onChangeTime(iso: number, value: string) {
+  const next = { ...(props.modelValue ?? {}) }
+  const minutes = timeToMinutes(value)
+  next[iso] = minutes
+  emit('update:modelValue', next)
+}
+
+function formatTotal(min: number): string {
+  const h = Math.floor(min / 60)
+  const m = min % 60
+  return m === 0 ? `${h}h` : `${h}h${String(m).padStart(2, '0')}`
+}
+
+defineExpose({ totalIsValid, totalMinutes })
+</script>

frontend/components/hours/HoursDayView.vue

@@ -1,12 +1,180 @@
 <template>
     <div class="bg-white overflow-hidden flex min-h-0 flex-col">
-        <div class="overflow-y-auto min-h-0">
+        <!-- Mobile card layout -->
+        <div class="overflow-y-auto min-h-0 space-y-3 lg:hidden">
+            <div
+                v-for="employee in employees"
+                :key="'m-' + employee.id"
+                class="rounded-md border border-primary-500 bg-white p-4"
+            >
+                <!-- Employee name + site -->
+                <div class="mb-3">
+                    <p class="text-md font-bold text-primary-500 truncate">
+                        {{ employee.firstName }} {{ employee.lastName }}
+                        <span class="font-normal text-neutral-600 text-sm">({{ contractLabel(employee) }})</span>
+                    </p>
+                    <p class="text-sm text-neutral-500 truncate">
+                        {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
+                    </p>
+                </div>
+
+                <!-- Absence / Holiday / Formation pills -->
+                <div class="mb-3 flex flex-col gap-1">
+                    <p
+                        v-if="getRowAbsenceLabel(employee.id)"
+                        class="rounded-md px-2 py-1 text-xs text-white truncate"
+                        :style="getRowAbsenceStyle(employee.id)"
+                    >
+                        {{ getRowAbsenceLabel(employee.id) }}
+                    </p>
+                    <p
+                        v-else
+                        class="text-xs text-neutral-400"
+                    >
+                        Aucune absence
+                    </p>
+                    <p
+                        v-if="isHoliday"
+                        class="rounded-md px-2 py-1 text-xs text-sky-900 inline-flex items-center gap-1"
+                        style="background-color: #b3e5fc"
+                    >
+                        <Icon name="mdi:calendar-star" size="14" class="shrink-0"/>
+                        <span class="truncate">{{ holidayLabel || 'Férié' }}</span>
+                    </p>
+                    <p
+                        v-if="hasRowFormation(employee.id)"
+                        class="rounded-md px-2 py-1 text-xs text-white bg-indigo-500 inline-flex items-center gap-1"
+                    >
+                        <Icon name="mdi:school-outline" size="14" class="shrink-0"/>
+                        <span class="truncate">{{ getRowFormationLabel(employee.id) }}</span>
+                    </p>
+                    <button
+                        v-if="!hasRowFormation(employee.id)"
+                        type="button"
+                        class="self-start text-xs font-semibold underline"
+                        :class="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+                        :disabled="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
+                        @click="onAbsenceClick(employee.id)"
+                    >
+                        Modifier
+                    </button>
+                </div>
+
+                <!-- Time inputs (TIME tracking) -->
+                <div v-if="isTimeTracking(employee)" class="space-y-2">
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-neutral-500">Début matin</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].morningFrom"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                            />
+                        </div>
+                        <div>
+                            <label class="text-xs text-neutral-500">Fin matin</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].morningTo"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                            />
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-neutral-500">Début après-midi</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].afternoonFrom"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                            />
+                        </div>
+                        <div>
+                            <label class="text-xs text-neutral-500">Fin après-midi</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].afternoonTo"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                            />
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-neutral-500">Début soir</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].eveningFrom"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+                            />
+                        </div>
+                        <div>
+                            <label class="text-xs text-neutral-500">Fin soir</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].eveningTo"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+                            />
+                        </div>
+                    </div>
+                    <div class="flex gap-4 pt-1 text-sm font-semibold text-primary-500">
+                        <span>Jour : {{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }}</span>
+                        <span>Nuit : {{ formatMinutes(getRowMetrics(employee.id).nightMinutes) }}</span>
+                        <span>Total : {{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}</span>
+                    </div>
+                </div>
+
+                <!-- Presence tracking -->
+                <div v-else-if="isPresenceTracking(employee)" class="space-y-2">
+                    <div class="flex items-center gap-4">
+                        <label class="flex items-center gap-2 text-sm">
+                            <input
+                                v-model="rows[employee.id].isPresentMorning"
+                                type="checkbox"
+                                class="h-4 w-4 cursor-pointer"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                            />
+                            Matin
+                        </label>
+                        <label class="flex items-center gap-2 text-sm">
+                            <input
+                                v-model="rows[employee.id].isPresentAfternoon"
+                                type="checkbox"
+                                class="h-4 w-4 cursor-pointer"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                            />
+                            Après-midi
+                        </label>
+                    </div>
+                    <p class="text-sm font-semibold text-primary-500">Total : {{ getPresenceDayValue(employee.id) }}</p>
+                </div>
+
+                <!-- Validation status (non-admin) -->
+                <div v-if="!isAdmin" class="mt-3 flex gap-4 text-xs border-t border-neutral-200 pt-2">
+                    <span v-if="!isSiteManager" class="flex items-center gap-1">
+                        <Icon name="mdi:check-circle-outline" size="14" :class="rows[employee.id]?.isSiteValid ? 'text-green-600' : 'text-neutral-400'"/>
+                        Validation site : <span :class="rows[employee.id]?.isSiteValid ? 'font-semibold text-green-600' : 'text-neutral-500'">{{ rows[employee.id]?.isSiteValid ? 'Validé' : 'En attente' }}</span>
+                    </span>
+                    <span class="flex items-center gap-1">
+                        <Icon name="mdi:check-circle-outline" size="14" :class="rows[employee.id]?.isValid ? 'text-green-600' : 'text-neutral-400'"/>
+                        Validation RH : <span :class="rows[employee.id]?.isValid ? 'font-semibold text-green-600' : 'text-neutral-500'">{{ rows[employee.id]?.isValid ? 'Validé' : 'En attente' }}</span>
+                    </span>
+                </div>
+
+                <!-- Validation checkbox (admin) -->
+                <div v-if="isAdmin" class="mt-3 flex items-center gap-2 text-sm">
+                    <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)"
+                    />
+                    <span class="text-neutral-700 font-semibold">Valider</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Desktop table layout -->
+        <div class="overflow-y-auto min-h-0 hidden lg:block">
             <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-2">Statut</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>
@@ -26,19 +194,7 @@
               @change="onBulkValidationChange"
           />
         </span>
-                <span v-else-if="isSiteManager" class="inline-flex items-center gap-2">
+                <span v-else-if="!isSiteManager">Site <Icon name="mdi:check-bold" class="ml-1"/></span>
-          <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>
 
@@ -55,7 +211,9 @@
                         <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>
+                            {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
+                        </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"
@@ -69,19 +227,39 @@
                     </p>
                 </div>
                 <div class="pl-2 min-w-0 self-stretch flex flex-col gap-1 justify-between py-0.5">
-                    <p
+                    <div class="flex flex-col gap-1 min-w-0">
-                        class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
+                        <p
-                        :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
+                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate"
-                        :title="getRowAbsenceLabel(employee.id) || ''"
+                            :class="getRowAbsenceLabel(employee.id) ? 'text-white' : 'invisible'"
-                        :style="getRowAbsenceStyle(employee.id)"
+                            :title="getRowAbsenceLabel(employee.id) || ''"
-                    >
+                            :style="getRowAbsenceStyle(employee.id)"
-                        {{ getRowAbsenceLabel(employee.id) || '—' }}
+                        >
-                    </p>
+                            {{ getRowAbsenceLabel(employee.id) || '—' }}
+                        </p>
+                        <p
+                            v-if="isHoliday"
+                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate text-sky-900 inline-flex items-center gap-1"
+                            style="background-color: #b3e5fc"
+                            :title="holidayLabel || 'Férié'"
+                        >
+                            <Icon name="mdi:calendar-star" size="14" class="shrink-0"/>
+                            <span class="truncate">{{ holidayLabel || 'Férié' }}</span>
+                        </p>
+                        <p
+                            v-if="hasRowFormation(employee.id)"
+                            class="w-full min-w-0 rounded-md px-2 py-1 text-xs truncate text-white bg-indigo-500 inline-flex items-center gap-1"
+                            :title="getRowFormationLabel(employee.id)"
+                        >
+                            <Icon name="mdi:school-outline" size="14" class="shrink-0"/>
+                            <span class="truncate">{{ getRowFormationLabel(employee.id) }}</span>
+                        </p>
+                    </div>
                     <button
+                        v-if="!hasRowFormation(employee.id)"
                         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'"
+                        :class="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)"
+                        :disabled="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
                         @click="onAbsenceClick(employee.id)"
                     >
                         Modifier
@@ -170,16 +348,8 @@
                         @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
                     />
                 </div>
-                <div v-else class="text-right p-5">
+                <div v-else-if="!isSiteManager" class="text-right p-5">
-                    <input
+                    <span v-if="rows[employee.id]?.isSiteValid" class="text-xs font-semibold text-neutral-700">Validé</span>
-                        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">
@@ -196,6 +366,7 @@
 import type {Employee} from '~/services/dto/employee'
 import TimeSelect from '~/components/ui/TimeSelect.vue'
 import type {HourRow} from './types'
+import { contractNatureLabel } from '~/utils/contract'
 
 const rows = defineModel<Record<number, HourRow>>('rows', {required: true})
 const bulkValidationInput = ref<HTMLInputElement | null>(null)
@@ -207,6 +378,7 @@ const props = defineProps<{
     isSiteManager: boolean
     dayGridCols: string
     isHoliday: boolean
+    holidayLabel: string
     contractLabel: (employee: Employee) => string
     isTimeTracking: (employee: Employee) => boolean
     isPresenceTracking: (employee: Employee) => boolean
@@ -228,9 +400,12 @@ const props = defineProps<{
     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 }
+    getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; totalMinutes: number; virtualHolidayMinutes: number }
     getRowAbsenceLabel: (employeeId: number) => string
     getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
+    hasRowFormation: (employeeId: number) => boolean
+    getRowFormationLabel: (employeeId: number) => string
+    getRowContractNature: (employeeId: number) => 'CDI' | 'CDD' | 'INTERIM' | null
     getRowUpdatedAt: (employeeId: number) => string
     getPresenceDayValue: (employeeId: number) => string
     onAbsenceClick: (employeeId: number) => void

frontend/components/hours/HoursToolbar.vue

@@ -1,17 +1,90 @@
 <template>
-  <div class="py-6 flex flex-col gap-3">
+  <div class="py-4 flex flex-col gap-3 lg:py-6">
-      <div class="flex gap-4">
+      <!-- Desktop: filters row -->
-          <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
+      <div class="hidden lg:flex lg:items-center lg:gap-4">
-          <div v-if="isAdmin" class="w-80 max-w-full">
+          <div v-if="sites.length > 0 && isAdmin" class="relative z-50 w-80">
-              <EmployeeNameFilterInput v-model="employeeFilter" />
+              <MalioSelectCheckbox
+                  v-model="selectedSiteIds"
+                  :options="siteOptions"
+                  groupClass="w-80"
+                  label="Sites"
+                  display-select-all
+              />
+          </div>
+          <div v-if="isAdmin" class="w-80">
+              <MalioInputText
+                  v-model="employeeFilter"
+                  label="Recherche d'un employé"
+                  icon-name="mdi:magnify"
+              />
           </div>
       </div>
 
-    <div class="flex justify-between items-center gap-4">
+      <!-- Mobile: search + filter button -->
-      <div class="flex gap-4 flex-wrap">
+      <div v-if="isAdmin" class="flex items-center gap-2 lg:hidden">
+          <div class="flex-1 min-w-0">
+              <MalioInputText
+                  v-model="employeeFilter"
+                  label="Recherche d'un employé"
+                  icon-name="mdi:magnify"
+              />
+          </div>
+          <button
+            type="button"
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-primary-500 bg-white text-primary-500"
+            @click="filtersDrawerOpen = true"
+          >
+              <Icon name="mdi:filter-variant" size="22"/>
+          </button>
+      </div>
+
+      <!-- Mobile filters drawer -->
+      <AppDrawer v-model="filtersDrawerOpen" title="Filtres">
+          <div class="space-y-6">
+              <div v-if="sites.length > 0 && isAdmin">
+                  <label class="text-md font-semibold text-neutral-700">Sites</label>
+                  <div class="mt-2">
+                      <MalioSelectCheckbox
+                          v-model="selectedSiteIds"
+                          :options="siteOptions"
+                          groupClass="w-80"
+                          label="Sites"
+                          display-select-all
+                      />
+                  </div>
+              </div>
+              <div v-if="isAdmin">
+                  <label class="text-md font-semibold text-neutral-700">Vue</label>
+                  <div class="mt-2 inline-flex h-10 w-full overflow-hidden rounded-md border border-primary-500 bg-white">
+                      <button
+                        type="button"
+                        class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold"
+                        :class="viewModeButtonClass('day')"
+                        @click="viewMode = 'day'; filtersDrawerOpen = false"
+                      >
+                          <Icon name="mdi:calendar-clock" />
+                          Jour
+                      </button>
+                      <button
+                        type="button"
+                        class="flex-1 inline-flex items-center justify-center gap-2 border-l border-primary-500 px-4 py-2 text-sm font-semibold"
+                        :class="viewModeButtonClass('week')"
+                        @click="viewMode = 'week'; filtersDrawerOpen = false"
+                      >
+                          <Icon name="mdi:calendar-week" />
+                          Semaine
+                      </button>
+                  </div>
+              </div>
+          </div>
+      </AppDrawer>
+
+    <!-- Date navigation -->
+    <div class="flex flex-col gap-3 lg:flex-row lg:justify-between lg:items-center lg:gap-4">
+      <div class="flex flex-col gap-3 lg:flex-row lg:flex-wrap lg:gap-4">
       <div
         v-if="viewMode === 'day'"
-        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+        class="inline-flex h-10 w-full overflow-hidden rounded-md border border-primary-500 bg-white lg:w-[320px]"
       >
         <button
           type="button"
@@ -41,7 +114,7 @@
 
       <div
         v-else
-        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+        class="inline-flex h-10 w-full overflow-hidden rounded-md border border-primary-500 bg-white lg:w-[320px]"
       >
         <button
           type="button"
@@ -70,7 +143,7 @@
       </div>
 
       <PeriodStepperPicker
-        width-class="w-[320px]"
+        width-class="w-full lg:w-[320px]"
         :label="formattedSelectedDate"
         :picker-type="viewMode === 'week' ? 'week' : 'date'"
         :picker-value="pickerValue"
@@ -82,7 +155,8 @@
       />
       </div>
 
-      <div v-if="isAdmin" class="inline-flex h-10 overflow-hidden rounded-md border border-primary-500 bg-white">
+      <!-- Desktop: view mode toggle -->
+      <div v-if="isAdmin" class="hidden lg: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"
@@ -106,7 +180,7 @@
 
     <div
       v-if="isAdmin && viewMode === 'week' && absenceTypes.length > 0"
-      class="flex flex-wrap items-center gap-6"
+      class="hidden lg: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">
@@ -120,9 +194,8 @@
 <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 AppDrawer from '~/components/AppDrawer.vue'
 import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
 
 const selectedDate = defineModel<string>('selectedDate', { required: true })
@@ -130,7 +203,7 @@ const viewMode = defineModel<'day' | 'week'>('viewMode', { required: true })
 const selectedSiteIds = defineModel<number[]>('selectedSiteIds', { required: true })
 const employeeFilter = defineModel<string>('employeeFilter', { required: true })
 
-defineProps<{
+const props = defineProps<{
   isAdmin: boolean
   sites: Site[]
   absenceTypes: AbsenceType[]
@@ -140,6 +213,8 @@ defineProps<{
   getWeekShortcutLabel: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
 }>()
 
+const siteOptions = computed(() => props.sites.map((site) => ({ label: site.name, value: site.id })))
+
 const emit = defineEmits<{
   (e: 'set-yesterday'): void
   (e: 'set-today'): void
@@ -150,6 +225,8 @@ const emit = defineEmits<{
   (e: 'shift-date', value: number): void
 }>()
 
+const filtersDrawerOpen = ref(false)
+
 const pickerValue = computed(() => {
   if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
   return selectedDate.value

frontend/components/hours/HoursWeekView.vue

@@ -1,7 +1,72 @@
 <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">
+
+    <!-- Mobile cards -->
+    <div v-else class="overflow-y-auto min-h-0 space-y-3 lg:hidden">
+      <div
+        v-for="row in weeklySummary?.rows ?? []"
+        :key="'m-' + row.employeeId"
+        class="rounded-md border border-primary-500 bg-white p-4"
+      >
+        <div class="mb-3">
+          <p class="text-md font-bold text-primary-500 truncate">
+            {{ row.firstName }} {{ row.lastName }}
+            <span class="font-normal text-neutral-600 text-sm">({{ row.contractName ?? '-' }})</span>
+          </p>
+          <p class="text-xs text-neutral-500 truncate">
+            {{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span>
+          </p>
+        </div>
+
+        <!-- Daily breakdown -->
+        <div class="mb-3 space-y-1">
+          <div
+            v-for="(daily, i) in row.daily"
+            :key="daily.date"
+            class="flex items-center justify-between rounded-md px-2 py-1 text-xs"
+            :class="daily.hasAbsence ? 'text-white' : 'text-primary-500'"
+            :style="getDailyCellStyle(daily)"
+            :title="cellTitle(daily)"
+          >
+            <span class="font-semibold">{{ weekDayHeaders[i]?.label ?? '' }}</span>
+            <span v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</span>
+            <span v-else>J {{ formatMinutes(daily.dayMinutes) }} / N {{ formatMinutes(daily.nightMinutes) }}</span>
+          </div>
+        </div>
+
+        <!-- Weekly totals -->
+        <div class="border-t border-neutral-200 pt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+          <div class="flex justify-between">
+            <span class="text-neutral-500">Total sem.</span>
+            <span class="font-bold text-primary-500">{{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">H. supp.</span>
+            <span class="font-bold text-primary-500">{{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}</span>
+          </div>
+          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
+            <span class="text-neutral-500">+25%</span>
+            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}</span>
+          </div>
+          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
+            <span class="text-neutral-500">+50%</span>
+            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}</span>
+          </div>
+          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
+            <span class="text-neutral-500">Récup.</span>
+            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}</span>
+          </div>
+          <div v-if="(row.weeklyNightBasketCount ?? 0) > 0" class="flex justify-between">
+            <span class="text-neutral-500">Panier nuit</span>
+            <span class="font-bold text-primary-500">{{ row.weeklyNightBasketCount }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop table -->
+    <div v-if="!isWeekLoading" class="overflow-y-auto min-h-0 hidden lg:block">
       <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 }"
@@ -29,7 +94,12 @@
             {{ 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>
+          <p class="text-[11px] text-neutral-500 truncate inline-flex items-center gap-2">
+            <span>{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span></span>
+            <button v-if="isAdmin" type="button" class="flex items-center text-white p-1" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
+              <Icon name="mdi:comment-text-outline" size="12"/>
+            </button>
+          </p>
         </div>
 
         <div
@@ -38,7 +108,7 @@
           class="text-left leading-4 rounded-md px-2 py-1"
           :class="daily.hasAbsence ? 'text-white' : ''"
           :style="getDailyCellStyle(daily)"
-          :title="daily.absenceLabel ?? ''"
+          :title="cellTitle(daily)"
         >
           <template v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</template>
           <template v-else>
@@ -81,24 +151,43 @@
 <script setup lang="ts">
 import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
 import { CONTRACT_TYPES, type ContractType } from '~/services/dto/contract'
+import { contractNatureLabel } from '~/utils/contract'
 
 const isInterimContract = (contractType?: ContractType | null) => {
   return contractType === CONTRACT_TYPES.INTERIM
 }
 
+const HOLIDAY_BG_COLOR = '#b3e5fc'
+
 const getDailyCellStyle = (daily: {
   hasAbsence?: boolean
   absenceColor?: string | null
+  holidayLabel?: string | null
 }) => {
-  if (!daily.hasAbsence) return undefined
+  if (daily.hasAbsence) return { backgroundColor: daily.absenceColor || '#dc2626' }
-  return { backgroundColor: daily.absenceColor || '#dc2626' }
+  if (daily.holidayLabel) return { backgroundColor: HOLIDAY_BG_COLOR }
+  return undefined
+}
+
+const cellTitle = (daily: {
+  hasAbsence?: boolean
+  absenceLabel?: string | null
+  holidayLabel?: string | null
+}) => {
+  const parts: string[] = []
+  if (daily.absenceLabel) parts.push(daily.absenceLabel)
+  if (daily.holidayLabel) parts.push(`Férié : ${daily.holidayLabel}`)
+  return parts.join(' — ')
 }
 
 defineProps<{
   isWeekLoading: boolean
+  isAdmin: boolean
   weekGridCols: string
   weeklySummary: WeeklyWorkHourSummary | null
   weekDayHeaders: Array<{ date: string; label: string }>
   formatMinutes: (minutes: number) => string
 }>()
+
+defineEmits<{ (e: 'open-comment', row: WeeklyWorkHourSummary['rows'][number]): void }>()
 </script>

frontend/components/hours/WeekCommentDrawer.vue

@@ -0,0 +1,81 @@
+<template>
+  <MalioDrawer v-model="drawerOpen" title="Commentaire">
+    <form class="space-y-4" @submit.prevent="onSave">
+      <div v-if="employeeLabel" class="text-md font-semibold text-neutral-700">{{ employeeLabel }}</div>
+      <div class="text-md font-semibold text-neutral-700">{{ formatWeekRange }}</div>
+      <MalioInputTextArea
+        v-model="content"
+        label="Commentaire"
+        :size="8"
+        :max-length="5000"
+        :show-counter="true"
+        resize="vertical"
+      />
+      <div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex justify-between gap-3">
+        <MalioButton
+          v-if="commentId"
+          label="Supprimer"
+          variant="danger"
+          :disabled="isSubmitting"
+          @click="onDelete"
+        />
+        <MalioButton
+          label="Enregistrer"
+          button-class="ml-auto"
+          :disabled="isSubmitting || !canSubmit"
+          @click="onSave"
+        />
+      </div>
+    </form>
+  </MalioDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { createWeekComment, deleteWeekComment, updateWeekComment } from '~/services/employee-week-comments'
+import { getIsoWeekNumber, parseYmd } from '~/utils/date'
+
+const props = defineProps<{
+  modelValue: boolean
+  employeeId: number | null
+  weekStart: string
+  weekEnd: string
+  initialContent: string
+  commentId: number | null
+  employeeLabel?: string
+}>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void; (e: 'saved'): void }>()
+
+const drawerOpen = computed({ get: () => props.modelValue, set: (v) => emit('update:modelValue', v) })
+const content = ref('')
+const isSubmitting = ref(false)
+
+watch(() => [props.modelValue, props.initialContent] as const, ([open, init]) => { if (open) content.value = init ?? '' }, { immediate: true })
+
+const formatWeekRange = computed(() => {
+  const fmt = (ymd: string) => { const p = ymd.split('-'); return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : ymd }
+  const start = parseYmd(props.weekStart)
+  const weekLabel = start ? `S${getIsoWeekNumber(start)}` : ''
+  return weekLabel ? `${weekLabel} du ${fmt(props.weekStart)} au ${fmt(props.weekEnd)}` : `${fmt(props.weekStart)} → ${fmt(props.weekEnd)}`
+})
+
+const canSubmit = computed(() => content.value.trim().length > 0 || props.commentId !== null)
+
+const onSave = async () => {
+  if (!props.employeeId || isSubmitting.value) return
+  const trimmed = content.value.trim()
+  isSubmitting.value = true
+  try {
+    if (trimmed === '' && props.commentId) await deleteWeekComment(props.commentId)
+    else if (trimmed !== '' && props.commentId) await updateWeekComment(props.commentId, trimmed)
+    else if (trimmed !== '') await createWeekComment({ employeeId: props.employeeId, weekStartDate: props.weekStart, content: trimmed })
+    emit('saved'); drawerOpen.value = false
+  } finally { isSubmitting.value = false }
+}
+
+const onDelete = async () => {
+  if (!props.commentId || isSubmitting.value) return
+  isSubmitting.value = true
+  try { await deleteWeekComment(props.commentId); emit('saved'); drawerOpen.value = false } finally { isSubmitting.value = false }
+}
+</script>

frontend/components/ui/TimeSelect.vue

@@ -23,7 +23,7 @@
       <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"
+        class="hidden lg: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"
@@ -149,8 +149,11 @@ const toggleOpen = () => {
   }
 }
 
+const isMobile = () => window.innerWidth < 1024
+
 const openMenu = () => {
   if (props.disabled) return
+  if (isMobile()) return
   if (!isOpen.value) {
     isOpen.value = true
     nextTick(updateMenuPosition)
@@ -165,8 +168,28 @@ const closeMenu = () => {
   isOpen.value = false
 }
 
+const snapToNearest15 = (time: string): string => {
+  const [h, m] = time.split(':').map(Number)
+  const snapped = Math.round(m / 15) * 15
+  if (snapped === 60) {
+    const newH = h + 1
+    if (newH > 23) return '23:45'
+    return `${String(newH).padStart(2, '0')}:00`
+  }
+  return `${String(h).padStart(2, '0')}:${String(snapped).padStart(2, '0')}`
+}
+
 const commitInput = () => {
-  const normalized = normalizeTypedTime(inputValue.value)
+  let value = inputValue.value
+  if (isMobile()) {
+    value = clampTime(value)
+    const normalized = normalizeTypedTime(value)
+    if (normalized !== null && normalized !== '') {
+      value = snapToNearest15(normalized)
+    }
+    inputValue.value = value
+  }
+  const normalized = normalizeTypedTime(value)
   if (normalized === null || (normalized !== '' && !timeSlots.value.includes(normalized))) {
     emit('update:modelValue', '')
     inputValue.value = ''
@@ -184,13 +207,26 @@ const onInput = (event: Event) => {
   if (masked !== inputValue.value) {
     inputValue.value = masked
   }
-  openMenu()
+  if (!isMobile()) {
+    openMenu()
+  }
+}
+
+const clampTime = (value: string): string => {
+  const normalized = normalizeTypedTime(value)
+  if (normalized === null || normalized === '') return value
+  const [h, m] = normalized.split(':').map(Number)
+  if (h > 23 || (h === 23 && m > 45)) return '23:45'
+  return normalized
 }
 
 const onInputBlur = () => {
   // Laisse le temps au click menu de passer avant fermeture.
   setTimeout(() => {
     if (menu.value?.contains(document.activeElement)) return
+    if (isMobile()) {
+      inputValue.value = clampTime(inputValue.value)
+    }
     commitInput()
   }, 50)
 }

frontend/composables/useDocumentation.ts

@@ -0,0 +1,39 @@
+import { documentationSections } from '~/data/documentation-content'
+import type { DocAccessLevel, DocSection } from '~/types/documentation'
+
+const LEVEL_HIERARCHY: Record<DocAccessLevel, number> = {
+  employee: 0,
+  site_manager: 1,
+  admin: 2,
+}
+
+function getUserLevel(roles: string[]): number {
+  if (roles.includes('ROLE_ADMIN') || roles.includes('ROLE_SUPER_ADMIN')) return 2
+  if (roles.includes('ROLE_USER')) return 1
+  return 0
+}
+
+export function useDocumentation() {
+  const auth = useAuthStore()
+  const userLevel = computed(() => getUserLevel(auth.user?.roles ?? []))
+
+  const visibleSections = computed<DocSection[]>(() => {
+    return documentationSections
+      .filter(s => LEVEL_HIERARCHY[s.requiredLevel] <= userLevel.value)
+      .map(s => ({
+        ...s,
+        articles: s.articles.filter(a => LEVEL_HIERARCHY[a.requiredLevel] <= userLevel.value),
+      }))
+      .filter(s => s.articles.length > 0)
+  })
+
+  const activeArticleId = ref<string | null>(null)
+
+  const scrollToArticle = (articleId: string) => {
+    activeArticleId.value = articleId
+    const el = document.getElementById(`doc-${articleId}`)
+    el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
+  return { visibleSections, activeArticleId, scrollToArticle }
+}

frontend/composables/useDriverHoursPage.ts

@@ -71,7 +71,7 @@ export const useDriverHoursPage = () => {
 
   const dayGridCols = computed(() => {
     const metricCol = '0.4fr'
-    const validationCols = isAdmin.value ? `${metricCol}` : `${metricCol} ${metricCol}`
+    const validationCols = isAdmin.value || isSiteManager.value ? `${metricCol}` : `${metricCol} ${metricCol}`
     return `1.2fr 0.6fr 0.8fr 0.8fr 0.8fr ${metricCol} ${metricCol} ${metricCol} ${metricCol} ${metricCol} ${validationCols}`
   })
 
@@ -368,12 +368,23 @@ export const useDriverHoursPage = () => {
 
   const getRowMetrics = (employeeId: number) => {
     const row = rows.value[employeeId] ?? emptyRow()
-    const credited = dayContextByEmployeeId.value.get(employeeId)?.creditedMinutes ?? 0
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
-    const dayMinutes = toMinutes(row.dayHours) + credited
+    const credited = dayRow?.creditedMinutes ?? 0
+    let dayMinutes = toMinutes(row.dayHours) + credited
     const nightMinutes = toMinutes(row.nightHours)
     const workshopMinutes = toMinutes(row.workshopHours)
-    const totalMinutes = dayMinutes + nightMinutes + workshopMinutes
+    let totalMinutes = dayMinutes + nightMinutes + workshopMinutes
-    return { dayMinutes, nightMinutes, workshopMinutes, totalMinutes }
+
+    // Virtual holiday credit: backend already applies the contract-period
+    // schedule and absence-override rule; consume the value as-is.
+    const virtualHolidayMinutes = dayRow?.virtualHolidayMinutes ?? 0
+    if (virtualHolidayMinutes > totalMinutes) {
+      const delta = virtualHolidayMinutes - totalMinutes
+      dayMinutes += delta
+      totalMinutes = virtualHolidayMinutes
+    }
+
+    return { dayMinutes, nightMinutes, workshopMinutes, totalMinutes, virtualHolidayMinutes }
   }
 
   const getRowAbsenceLabel = (employeeId: number) => {
@@ -381,7 +392,6 @@ export const useDriverHoursPage = () => {
     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.'
@@ -407,6 +417,10 @@ export const useDriverHoursPage = () => {
     return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
   }
 
+  const getRowContractNature = (employeeId: number): 'CDI' | 'CDD' | 'INTERIM' | null => {
+    return dayContextByEmployeeId.value.get(employeeId)?.contractNature ?? null
+  }
+
   const hasContractAtSelectedDate = (employeeId: number) => {
     const dayRow = dayContextByEmployeeId.value.get(employeeId)
     if (!dayRow) return true
@@ -467,7 +481,6 @@ export const useDriverHoursPage = () => {
 
   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
@@ -913,6 +926,15 @@ export const useDriverHoursPage = () => {
     }
   }
 
+  const isWeekCommentDrawerOpen = ref(false)
+  const weekCommentContext = ref<{ employeeId: number; employeeLabel: string; weekStart: string; weekEnd: string; content: string; commentId: number | null } | null>(null)
+  const openWeekCommentDrawer = (row: { employeeId: number; firstName: string; lastName: string; comment?: string | null; commentId?: number | null }) => {
+    if (!weeklySummary.value) return
+    weekCommentContext.value = { employeeId: row.employeeId, employeeLabel: `${row.firstName} ${row.lastName}`.trim(), weekStart: weeklySummary.value.weekStart, weekEnd: weeklySummary.value.weekEnd, content: row.comment ?? '', commentId: row.commentId ?? null }
+    isWeekCommentDrawerOpen.value = true
+  }
+  const reloadWeeklySummary = async () => { await loadWeeklySummary() }
+
   return {
     isAdmin,
     isSelfUser,
@@ -941,6 +963,7 @@ export const useDriverHoursPage = () => {
     saveButtonClass,
     formattedSelectedDate,
     isSelectedDateHoliday,
+    selectedHolidayLabel,
     weekDayHeaders,
     shortcutButtonClass,
     weekShortcutButtonClass,
@@ -972,12 +995,17 @@ export const useDriverHoursPage = () => {
     getRowMetrics,
     getRowAbsenceLabel,
     getRowAbsenceStyle,
+    getRowContractNature,
     getRowUpdatedAt,
     openAbsenceDrawer,
     submitAbsence,
     deleteAbsenceFromDrawer,
     closeAbsenceDrawer,
     formatMinutes,
-    handleSave
+    handleSave,
+    isWeekCommentDrawerOpen,
+    weekCommentContext,
+    openWeekCommentDrawer,
+    reloadWeeklySummary
   }
 }

frontend/composables/useEmployeeContract.ts

@@ -4,8 +4,9 @@ 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 { listInterimAgencies, type InterimAgency } from '~/services/interim-agencies'
 import { formatNullableYmdToFr, getTodayYmd, shiftYmd } from '~/utils/date'
-import { contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate } from '~/utils/contract'
+import { contractNatureLabel, formatWorkDaysHoursSummary, isContractNature, requiresContractEndDate, requiresWorkDaysHours, showsContractEndDate } from '~/utils/contract'
 
 type SuspensionForm = {
   id: number | null
@@ -17,6 +18,7 @@ type SuspensionForm = {
 export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
   const toast = useToast()
   const contracts = ref<Contract[]>([])
+  const interimAgencies = ref<InterimAgency[]>([])
   const isContractDrawerOpen = ref(false)
   const isContractSubmitting = ref(false)
   const isCreateContractDrawerOpen = ref(false)
@@ -32,7 +34,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     startDate: '',
     endDate: '',
     paidLeaveSettled: false,
-    comment: ''
+    comment: '',
+    workDaysHours: null as Record<number, number> | null
   })
 
   const validationTouched = reactive({
@@ -44,7 +47,9 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
     startDate: '',
     endDate: '',
-    isDriver: false
+    isDriver: false,
+    workDaysHours: null as Record<number, number> | null,
+    interimAgencyId: '' as number | ''
   })
 
   const createValidationTouched = reactive({
@@ -59,10 +64,11 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
   const formatDate = (value?: string | null) => formatNullableYmdToFr(value)
 
   const contractHistoryLabel = (item: ContractHistoryItem) => {
-    if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
+    const base = item.weeklyHours !== null && item.weeklyHours !== undefined
-      return `${item.weeklyHours} heures`
+      ? `${item.weeklyHours} heures`
-    }
+      : (item.contractName ?? '-')
-    return item.contractName ?? '-'
+    const scheduleSummary = formatWorkDaysHoursSummary(item.workDaysHours)
+    return scheduleSummary ? `${base} (${scheduleSummary})` : base
   }
 
   const currentActiveContractPeriod = computed(() => {
@@ -111,11 +117,27 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
   const isCreateContractNatureValid = computed(() => isContractNature(createContractForm.contractNature))
   const isCreateContractStartDateValid = computed(() => createContractForm.startDate !== '')
   const isCreateContractEndDateValid = computed(() => !requiresCreateContractEndDate.value || createContractForm.endDate !== '')
+  const selectedCreateContract = computed<Contract | null>(() =>
+    contracts.value.find((c) => c.id === Number(createContractForm.contractId)) ?? null
+  )
+  const requiresCreateWorkDaysHours = computed(() =>
+    requiresWorkDaysHours(selectedCreateContract.value, createContractForm.contractNature)
+  )
+  const createScheduleTotalMinutes = computed(() => {
+    const raw = createContractForm.workDaysHours ?? {}
+    return Object.values(raw).reduce((s, n) => s + (Number(n) || 0), 0)
+  })
+  const isCreateScheduleValid = computed(() => {
+    if (!requiresCreateWorkDaysHours.value) return true
+    const expected = (selectedCreateContract.value?.weeklyHours ?? 0) * 60
+    return expected > 0 && createScheduleTotalMinutes.value === expected
+  })
   const isCreateContractFormValid = computed(() =>
     isCreateContractValid.value &&
     isCreateContractNatureValid.value &&
     isCreateContractStartDateValid.value &&
-    isCreateContractEndDateValid.value
+    isCreateContractEndDateValid.value &&
+    isCreateScheduleValid.value
   )
 
   const baseInputClass =
@@ -159,6 +181,7 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     contractForm.endDate = period.endDate ?? getTodayYmd()
     contractForm.paidLeaveSettled = false
     contractForm.comment = ''
+    contractForm.workDaysHours = period.workDaysHours ?? null
   }
 
   const openCloseContractDrawer = () => {
@@ -186,6 +209,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     createContractForm.contractNature = 'CDI'
     createContractForm.endDate = ''
     createContractForm.isDriver = false
+    createContractForm.workDaysHours = null
+    createContractForm.interimAgencyId = ''
     createContractForm.startDate = editableContractPeriod.value?.endDate
       ? (shiftYmd(editableContractPeriod.value.endDate, 1) ?? editableContractPeriod.value.endDate)
       : getTodayYmd()
@@ -261,7 +286,9 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
         contractNature: createContractForm.contractNature,
         contractStartDate: createContractForm.startDate,
         contractEndDate: createContractForm.endDate || null,
-        isDriverInput: createContractForm.isDriver
+        isDriverInput: createContractForm.isDriver,
+        workDaysHoursInput: requiresCreateWorkDaysHours.value ? createContractForm.workDaysHours : null,
+        interimAgencyId: createContractForm.contractNature === 'INTERIM' && createContractForm.interimAgencyId !== '' ? Number(createContractForm.interimAgencyId) : null
       })
       isCreateContractDrawerOpen.value = false
       await reloadEmployee()
@@ -313,12 +340,28 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     contracts.value = await listContracts()
   }
 
+  const loadInterimAgencies = async () => {
+    interimAgencies.value = await listInterimAgencies()
+  }
+
+  watch(() => createContractForm.contractNature, (nature) => {
+    if (nature !== 'INTERIM') {
+      createContractForm.interimAgencyId = ''
+    }
+  })
+
   watch(showsCreateContractEndDate, (shows) => {
     if (!shows) {
       createContractForm.endDate = ''
     }
   })
 
+  watch(requiresCreateWorkDaysHours, (required) => {
+    if (!required) {
+      createContractForm.workDaysHours = null
+    }
+  })
+
   return {
     contracts,
     contractHistory,
@@ -342,6 +385,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     requiresCreateContractEndDate,
     createContractEndDateFieldClass,
     isCreateContractFormValid,
+    requiresCreateWorkDaysHours,
+    selectedCreateContract,
     contractNatureLabel,
     contractHistoryLabel,
     formatDate,
@@ -356,6 +401,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     submitSuspension,
     addSuspensionForm,
     currentActiveContractPeriodId,
-    loadContracts
+    interimAgencies,
+    loadContracts,
+    loadInterimAgencies
   }
 }

frontend/composables/useEmployeeDetailPage.ts

@@ -6,14 +6,15 @@ 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 activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage' | 'formation' | 'bonus' | 'observation'>('contract')
 
   const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
   const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
+  const isForfait = 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.type === CONTRACT_TYPES.FORFAIT) return 'Forfait - 218 jours'
     if (contract.weeklyHours !== null && contract.weeklyHours !== undefined) return `${contract.weeklyHours} heures`
     return contract.name || '-'
   })
@@ -39,6 +40,7 @@ export const useEmployeeDetailPage = () => {
       leave.resetLoaded()
       rtt.resetLoaded()
       mileage.resetLoaded()
+      formation.resetLoaded()
       bonus.resetLoaded()
       observation.resetLoaded()
 
@@ -48,10 +50,15 @@ export const useEmployeeDetailPage = () => {
         await rtt.loadRttData()
       } else if (activeTab.value === 'mileage') {
         await mileage.loadMileageData()
+      } else if (activeTab.value === 'formation') {
+        await formation.loadFormationData()
       } else if (activeTab.value === 'bonus') {
         await bonus.loadBonusData()
       } else if (activeTab.value === 'observation') {
         await observation.loadObservationData()
+      } else if (isForfait.value && showLeaveTab.value) {
+        // Eager load: needed for the "X jours restants" header label on forfait employees.
+        await leave.loadLeaveData()
       }
     } finally {
       isLoading.value = false
@@ -60,8 +67,16 @@ export const useEmployeeDetailPage = () => {
 
   const contract = useEmployeeContract(employee, loadEmployee)
   const leave = useEmployeeLeave(employee, loadEmployee)
+  const forfaitRemainingDaysLabel = computed(() => {
+    if (!isForfait.value) return ''
+    const presence = leave.leaveSummary.value?.presenceDaysToToday
+    if (presence === undefined || presence === null) return ''
+    const remaining = 218 - presence
+    return ` (${remaining} restants)`
+  })
   const rtt = useEmployeeRtt(employee, loadEmployee)
   const mileage = useEmployeeMileage(employee, loadEmployee)
+  const formation = useEmployeeFormation(employee, loadEmployee)
   const bonus = useEmployeeBonus(employee, loadEmployee)
   const observation = useEmployeeObservation(employee, loadEmployee)
 
@@ -72,6 +87,8 @@ export const useEmployeeDetailPage = () => {
       rtt.loadRttData()
     } else if (tab === 'mileage' && !mileage.mileageDataLoaded.value) {
       mileage.loadMileageData()
+    } else if (tab === 'formation' && !formation.formationDataLoaded.value) {
+      formation.loadFormationData()
     } else if (tab === 'bonus' && !bonus.bonusDataLoaded.value) {
       bonus.loadBonusData()
     } else if (tab === 'observation' && !observation.observationDataLoaded.value) {
@@ -80,7 +97,7 @@ export const useEmployeeDetailPage = () => {
   })
 
   onMounted(async () => {
-    await contract.loadContracts()
+    await Promise.all([contract.loadContracts(), contract.loadInterimAgencies()])
     await loadEmployee()
   })
 
@@ -91,10 +108,12 @@ export const useEmployeeDetailPage = () => {
     showLeaveTab,
     showRttTab,
     employeeContractWorkLabel,
+    forfaitRemainingDaysLabel,
     ...contract,
     ...leave,
     ...rtt,
     ...mileage,
+    ...formation,
     ...bonus,
     ...observation
   }

frontend/composables/useEmployeeFormation.ts

@@ -0,0 +1,73 @@
+import type { Ref } from 'vue'
+import type { Formation } from '~/services/dto/formation'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listFormations,
+  createFormation,
+  updateFormation,
+  deleteFormation,
+  uploadFormationJustificatif
+} from '~/services/formations'
+
+export const useEmployeeFormation = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const config = useRuntimeConfig()
+  const apiBase = (config.public.apiBase as string) ?? '/api'
+
+  const formations = ref<Formation[]>([])
+  const isFormationLoading = ref(false)
+  const formationDataLoaded = ref(false)
+
+  const loadFormationData = async () => {
+    if (!employee.value || isFormationLoading.value) return
+    isFormationLoading.value = true
+    try {
+      formations.value = await listFormations(employee.value.id)
+      formationDataLoaded.value = true
+    } finally {
+      isFormationLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    formationDataLoaded.value = false
+  }
+
+  const submitCreateFormation = async (data: { startDate: string; endDate: string; comment?: string }, justificatifFile?: File) => {
+    if (!employee.value) return
+    const result = await createFormation({
+      employeeId: employee.value.id,
+      startDate: data.startDate,
+      endDate: data.endDate,
+      comment: data.comment
+    })
+    if (result?.id && justificatifFile) {
+      await uploadFormationJustificatif(apiBase, result.id, justificatifFile)
+    }
+    await reloadEmployee()
+  }
+
+  const submitUpdateFormation = async (id: number, data: { startDate: string; endDate: string; comment?: string }, justificatifFile?: File) => {
+    await updateFormation(id, data)
+    if (justificatifFile) {
+      await uploadFormationJustificatif(apiBase, id, justificatifFile)
+    }
+    await reloadEmployee()
+  }
+
+  const submitDeleteFormation = async (id: number) => {
+    await deleteFormation(id)
+    await reloadEmployee()
+  }
+
+  return {
+    formations,
+    isFormationLoading,
+    formationDataLoaded,
+    formationApiBase: apiBase,
+    loadFormationData,
+    resetLoaded,
+    submitCreateFormation,
+    submitUpdateFormation,
+    submitDeleteFormation
+  }
+}

frontend/composables/useEmployeeLeave.ts

@@ -4,30 +4,94 @@ 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 { getEmployeeLeaveSummary, updateFractionedDays, updatePaidLeaveDays } from '~/services/employee-leave-summary'
 import { listPublicHolidays } from '~/services/public-holidays'
 
+export type LeaveYearOption = {
+  value: number
+  label: string
+}
+
 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 selectedLeaveYear = ref<number | null>(null)
 
-  const getLeaveYear = () => {
+  const isForfaitContract = (emp: Employee | null) =>
-    const now = new Date()
+    emp?.contract?.type === CONTRACT_TYPES.FORFAIT
-    const isForfait = employee.value?.contract?.type === CONTRACT_TYPES.FORFAIT
+
-    return isForfait
+  const computeLeaveYearForDate = (emp: Employee | null, date: Date): number => {
-      ? now.getFullYear()
+    if (isForfaitContract(emp)) return date.getFullYear()
-      : (now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear())
+    return date.getMonth() >= 5 ? date.getFullYear() + 1 : date.getFullYear()
+  }
+
+  const currentLeaveYear = computed<number | null>(() => {
+    if (!employee.value) return null
+    return computeLeaveYearForDate(employee.value, new Date())
+  })
+
+  const formatLeaveYearLabel = (year: number, isForfait: boolean): string => {
+    if (isForfait) return String(year)
+    return `Juin ${year - 1} → Mai ${year}`
+  }
+
+  const availableLeaveYears = computed<LeaveYearOption[]>(() => {
+    if (!employee.value || currentLeaveYear.value === null) return []
+    const isForfait = isForfaitContract(employee.value)
+    const current = currentLeaveYear.value
+
+    const startDates: string[] = []
+    for (const period of employee.value.contractHistory ?? []) {
+      if (period.startDate) startDates.push(period.startDate)
+    }
+    if (employee.value.entryDate) startDates.push(employee.value.entryDate)
+
+    let contractFloor = current
+    for (const raw of startDates) {
+      const date = new Date(`${raw.substring(0, 10)}T00:00:00`)
+      if (Number.isNaN(date.getTime())) continue
+      const leaveYear = computeLeaveYearForDate(employee.value, date)
+      if (leaveYear < contractFloor) contractFloor = leaveYear
+    }
+
+    // Hard floor : data-start-date (env RTT_START_DATE) — le logiciel n'a pas
+    // d'historique avant cette date, inutile de proposer des années antérieures.
+    let dataFloor: number | null = null
+    const dataStart = leaveSummary.value?.dataStartDate
+    if (dataStart) {
+      const dataStartDate = new Date(`${dataStart.substring(0, 10)}T00:00:00`)
+      if (!Number.isNaN(dataStartDate.getTime())) {
+        dataFloor = computeLeaveYearForDate(employee.value, dataStartDate)
+      }
+    }
+
+    const minYear = dataFloor !== null ? Math.max(contractFloor, dataFloor) : contractFloor
+
+    const years: LeaveYearOption[] = []
+    for (let y = current; y >= minYear; y -= 1) {
+      years.push({ value: y, label: formatLeaveYearLabel(y, isForfait) })
+    }
+    return years
+  })
+
+  const initSelectedLeaveYear = () => {
+    if (selectedLeaveYear.value !== null) return
+    if (currentLeaveYear.value !== null) {
+      selectedLeaveYear.value = currentLeaveYear.value
+    }
   }
 
   const loadLeaveData = async () => {
     if (!employee.value || isLeaveLoading.value) return
+    initSelectedLeaveYear()
+    if (selectedLeaveYear.value === null) return
     isLeaveLoading.value = true
     try {
-      const isForfait = employee.value.contract?.type === CONTRACT_TYPES.FORFAIT
+      const isForfait = isForfaitContract(employee.value)
-      const leaveYear = getLeaveYear()
+      const leaveYear = selectedLeaveYear.value
       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]
@@ -46,8 +110,16 @@ export const useEmployeeLeave = (employee: Ref<Employee | null>, reloadEmployee:
     }
   }
 
+  const setSelectedLeaveYear = async (year: number) => {
+    if (selectedLeaveYear.value === year) return
+    selectedLeaveYear.value = year
+    leaveDataLoaded.value = false
+    await loadLeaveData()
+  }
+
   const resetLoaded = () => {
     leaveDataLoaded.value = false
+    selectedLeaveYear.value = null
   }
 
   const submitFractionedDays = async (days: number) => {
@@ -57,14 +129,26 @@ export const useEmployeeLeave = (employee: Ref<Employee | null>, reloadEmployee:
     await reloadEmployee()
   }
 
+  const submitPaidLeaveDays = async (days: number) => {
+    if (!employee.value) return
+    const year = leaveSummary.value?.year ?? undefined
+    await updatePaidLeaveDays(employee.value.id, days, year)
+    await reloadEmployee()
+  }
+
   return {
     employeeAbsences,
     leaveSummary,
     publicHolidays,
     isLeaveLoading,
     leaveDataLoaded,
+    selectedLeaveYear,
+    currentLeaveYear,
+    availableLeaveYears,
+    setSelectedLeaveYear,
     loadLeaveData,
     resetLoaded,
-    submitFractionedDays
+    submitFractionedDays,
+    submitPaidLeaveDays
   }
 }

frontend/composables/useEmployeeRtt.ts

@@ -3,25 +3,94 @@ 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 type RttYearOption = {
+  value: number
+  label: string
+}
+
 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 selectedRttYear = ref<number | null>(null)
+
+  // Exercice RTT : Juin (Y-1) → Mai (Y). Toujours, peu importe le type de contrat
+  // (l'onglet RTT est masqué pour les FORFAIT côté page).
+  const computeRttYearForDate = (date: Date): number =>
+    date.getMonth() >= 5 ? date.getFullYear() + 1 : date.getFullYear()
+
+  const currentRttYear = computed<number | null>(() => {
+    if (!employee.value) return null
+    return computeRttYearForDate(new Date())
+  })
+
+  const availableRttYears = computed<RttYearOption[]>(() => {
+    if (!employee.value || currentRttYear.value === null) return []
+    const current = currentRttYear.value
+
+    const startDates: string[] = []
+    for (const period of employee.value.contractHistory ?? []) {
+      if (period.startDate) startDates.push(period.startDate)
+    }
+    if (employee.value.entryDate) startDates.push(employee.value.entryDate)
+
+    let contractFloor = current
+    for (const raw of startDates) {
+      const date = new Date(`${raw.substring(0, 10)}T00:00:00`)
+      if (Number.isNaN(date.getTime())) continue
+      const rttYear = computeRttYearForDate(date)
+      if (rttYear < contractFloor) contractFloor = rttYear
+    }
+
+    // Hard floor : rttStartDate (env RTT_START_DATE) — pas d'historique avant.
+    let dataFloor: number | null = null
+    const dataStart = rttSummary.value?.rttStartDate
+    if (dataStart) {
+      const dataStartDate = new Date(`${dataStart.substring(0, 10)}T00:00:00`)
+      if (!Number.isNaN(dataStartDate.getTime())) {
+        dataFloor = computeRttYearForDate(dataStartDate)
+      }
+    }
+
+    const minYear = dataFloor !== null ? Math.max(contractFloor, dataFloor) : contractFloor
+
+    const years: RttYearOption[] = []
+    for (let y = current; y >= minYear; y -= 1) {
+      years.push({ value: y, label: `Juin ${y - 1} → Mai ${y}` })
+    }
+    return years
+  })
+
+  const initSelectedRttYear = () => {
+    if (selectedRttYear.value !== null) return
+    if (currentRttYear.value !== null) {
+      selectedRttYear.value = currentRttYear.value
+    }
+  }
 
   const loadRttData = async () => {
     if (!employee.value || isRttLoading.value) return
+    initSelectedRttYear()
+    if (selectedRttYear.value === null) 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, selectedRttYear.value)
-      rttSummary.value = await getEmployeeRttSummary(employee.value.id, rttYear)
       rttDataLoaded.value = true
     } finally {
       isRttLoading.value = false
     }
   }
 
+  const setSelectedRttYear = async (year: number) => {
+    if (selectedRttYear.value === year) return
+    selectedRttYear.value = year
+    rttDataLoaded.value = false
+    await loadRttData()
+  }
+
   const resetLoaded = () => {
     rttDataLoaded.value = false
+    selectedRttYear.value = null
   }
 
   const submitRttPayment = async (month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number) => {
@@ -35,6 +104,10 @@ export const useEmployeeRtt = (employee: Ref<Employee | null>, reloadEmployee: (
     rttSummary,
     isRttLoading,
     rttDataLoaded,
+    selectedRttYear,
+    currentRttYear,
+    availableRttYears,
+    setSelectedRttYear,
     loadRttData,
     resetLoaded,
     submitRttPayment

frontend/composables/useHoursPage.ts

@@ -73,7 +73,7 @@ export const useHoursPage = () => {
 
   const dayGridCols = computed(() => {
     const metricCol = '0.4fr'
-    const validationCols = isAdmin.value ? `${metricCol}` : `${metricCol} ${metricCol}`
+    const validationCols = isAdmin.value || isSiteManager.value ? `${metricCol}` : `${metricCol} ${metricCol}`
     return `1.2fr 0.6fr repeat(6, 0.8fr) ${metricCol} ${metricCol} ${metricCol} ${validationCols}`
   })
 
@@ -447,10 +447,21 @@ export const useHoursPage = () => {
       nightMinutes += nightIntervalMinutes(from, to)
     }
 
-    const creditedMinutes = dayContextByEmployeeId.value.get(employeeId)?.creditedMinutes ?? 0
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    const creditedMinutes = dayRow?.creditedMinutes ?? 0
     totalMinutes += creditedMinutes
-    const dayMinutes = Math.max(0, totalMinutes - nightMinutes)
+    let dayMinutes = Math.max(0, totalMinutes - nightMinutes)
-    return { dayMinutes, nightMinutes, totalMinutes }
+
+    // Virtual holiday credit: the backend already applies the contract-period
+    // schedule (workDaysHours) and the absence-override rule, so just use the
+    // computed value instead of recomputing on the client.
+    const virtualHolidayMinutes = dayRow?.virtualHolidayMinutes ?? 0
+    if (virtualHolidayMinutes > totalMinutes) {
+      dayMinutes += virtualHolidayMinutes - totalMinutes
+      totalMinutes = virtualHolidayMinutes
+    }
+
+    return { dayMinutes, nightMinutes, totalMinutes, virtualHolidayMinutes }
   }
 
   const getRowAbsenceLabel = (employeeId: number) => {
@@ -458,7 +469,6 @@ export const useHoursPage = () => {
     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.'
@@ -476,6 +486,18 @@ export const useHoursPage = () => {
     return { backgroundColor: dayRow.absenceColor || '#dc2626' }
   }
 
+  const hasRowFormation = (employeeId: number): boolean => {
+    return dayContextByEmployeeId.value.get(employeeId)?.hasFormation === true
+  }
+
+  const getRowFormationLabel = (employeeId: number): string => {
+    return dayContextByEmployeeId.value.get(employeeId)?.formationLabel ?? ''
+  }
+
+  const getRowContractNature = (employeeId: number): 'CDI' | 'CDD' | 'INTERIM' | null => {
+    return dayContextByEmployeeId.value.get(employeeId)?.contractNature ?? null
+  }
+
   const getRowUpdatedAt = (employeeId: number): string => {
     const raw = rows.value[employeeId]?.updatedAt
     if (!raw) return ''
@@ -576,7 +598,6 @@ export const useHoursPage = () => {
 
   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
@@ -1091,6 +1112,15 @@ export const useHoursPage = () => {
     }
   }
 
+  const isWeekCommentDrawerOpen = ref(false)
+  const weekCommentContext = ref<{ employeeId: number; employeeLabel: string; weekStart: string; weekEnd: string; content: string; commentId: number | null } | null>(null)
+  const openWeekCommentDrawer = (row: { employeeId: number; firstName: string; lastName: string; comment?: string | null; commentId?: number | null }) => {
+    if (!weeklySummary.value) return
+    weekCommentContext.value = { employeeId: row.employeeId, employeeLabel: `${row.firstName} ${row.lastName}`.trim(), weekStart: weeklySummary.value.weekStart, weekEnd: weeklySummary.value.weekEnd, content: row.comment ?? '', commentId: row.commentId ?? null }
+    isWeekCommentDrawerOpen.value = true
+  }
+  const reloadWeeklySummary = async () => { await loadWeeklySummary() }
+
   return {
     isAdmin,
     isSelfUser,
@@ -1119,6 +1149,7 @@ export const useHoursPage = () => {
     saveButtonClass,
     formattedSelectedDate,
     isSelectedDateHoliday,
+    selectedHolidayLabel,
     weekDayHeaders,
     shortcutButtonClass,
     weekShortcutButtonClass,
@@ -1154,6 +1185,9 @@ export const useHoursPage = () => {
     getRowMetrics,
     getRowAbsenceLabel,
     getRowAbsenceStyle,
+    hasRowFormation,
+    getRowFormationLabel,
+    getRowContractNature,
     getRowUpdatedAt,
     getPresenceDayValue,
     openAbsenceDrawer,
@@ -1161,6 +1195,10 @@ export const useHoursPage = () => {
     deleteAbsenceFromDrawer,
     closeAbsenceDrawer,
     formatMinutes,
-    handleSave
+    handleSave,
+    isWeekCommentDrawerOpen,
+    weekCommentContext,
+    openWeekCommentDrawer,
+    reloadWeeklySummary
   }
 }

frontend/data/documentation-content.ts

@@ -0,0 +1,627 @@
+import type { DocSection } from '~/types/documentation'
+
+export const documentationSections: DocSection[] = [
+  // ============================================================
+  // EMPLOYEE LEVEL
+  // ============================================================
+  {
+    id: 'connexion',
+    title: 'Connexion et navigation',
+    requiredLevel: 'employee',
+    icon: 'mdi:login',
+    articles: [
+      {
+        id: 'login',
+        title: 'Se connecter',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'Pour accéder à l\'application, rendez-vous sur la page de connexion et saisissez vos identifiants.' },
+          { type: 'list', content: 'Saisissez votre nom d\'utilisateur\nSaisissez votre mot de passe\nCliquez sur le bouton "Connexion"' },
+          { type: 'note', content: 'Si vous ne parvenez pas à vous connecter, contactez votre administrateur RH. Votre compte a peut-être été verrouillé.' },
+        ],
+      },
+      {
+        id: 'navigation',
+        title: 'Naviguer dans la vue jour',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'La vue jour est votre écran principal. Elle affiche les heures de travail pour une date donnée.' },
+          { type: 'list', content: 'Boutons "Hier" / "Aujourd\'hui" / "Demain" pour naviguer rapidement\nSélecteur de date pour choisir une date spécifique\nFiltrage par site si vous avez accès à plusieurs sites' },
+          { type: 'paragraph', content: 'Seuls les employés ayant un contrat actif à la date sélectionnée sont affichés.' },
+          { type: 'note', content: 'Sous le nom de l\'employé, la nature du contrat (CDI / CDD / Intérim) affichée correspond à la période couvrant la date filtrée, et non à aujourd\'hui.' },
+        ],
+      },
+      {
+        id: 'perimetre',
+        title: 'Périmètre d\'accès',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'Votre accès dépend du rôle qui vous a été attribué par l\'administrateur.' },
+          { type: 'list', content: 'Employé : accès à la saisie de ses propres heures uniquement\nChef de site : accès aux heures des employés de ses sites autorisés + validation\nAdministrateur : accès complet à toutes les fonctionnalités' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'saisie-heures',
+    title: 'Saisie des heures',
+    requiredLevel: 'employee',
+    icon: 'mdi:clock-time-four-outline',
+    articles: [
+      {
+        id: 'saisie-time',
+        title: 'Mode horaire (TIME)',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'En mode horaire, vous saisissez vos heures via des créneaux matin, après-midi et soir.' },
+          { type: 'list', content: 'Matin : heure de début et heure de fin\nAprès-midi : heure de début et heure de fin\nSoir : heure de début et heure de fin' },
+          { type: 'paragraph', content: 'Le sélecteur de temps fonctionne par tranches de 15 minutes (00, 15, 30, 45). La saisie libre est possible mais sera corrigée automatiquement.' },
+          { type: 'note', content: 'Les calculs sont mis à jour automatiquement : heures de jour (06:00–21:00), heures de nuit (00:00–06:00 et 21:00–24:00) et total.' },
+          { type: 'note', content: 'Jours fériés : le nom du férié apparaît en badge bleu dans la colonne Absence. La saisie d\'heures (ou de jours de présence) et la création d\'absences sont autorisées.' },
+          { type: 'note', content: 'Crédit automatique sur jour férié Lun-Ven : pour tout contrat hors Forfait et s\'il n\'y a pas d\'absence déclarée, un jour férié compte au minimum les heures contractuelles attendues (35h → 7h, 39h → 8h Lun-Jeu / 7h Ven). Si vous saisissez des heures supérieures à cette référence, ce sont vos heures qui sont comptées ; sinon c\'est la référence. Les conducteurs reçoivent ce crédit dans leur bucket "Heures jour". **Si une absence est posée sur le férié**, c\'est le paramétrage du type d\'absence (compte les heures oui/non) qui pilote les heures comptées, le crédit virtuel férié ne s\'applique plus.' },
+          { type: 'note', content: 'Contrats non-standards (4h, 25h, 28h, etc.) : un planning par jour travaillé doit être saisi à la création/modification du contrat (bloc « Jours travaillés » avec case à cocher + horaire par jour). Le crédit férié et le crédit d\'absence ne s\'appliquent que sur les jours programmés, avec les heures programmées. Ex. un 4h Lundi 2h + Jeudi 2h : férié le lundi → +2h, férié le mardi → 0h.' },
+        ],
+      },
+      {
+        id: 'saisie-presence',
+        title: 'Mode présence (PRESENCE)',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'En mode présence (contrats forfait), vous indiquez simplement si vous étiez présent le matin et/ou l\'après-midi.' },
+          { type: 'list', content: 'Cochez "Présent matin" pour indiquer une demi-journée de travail le matin\nCochez "Présent après-midi" pour indiquer une demi-journée l\'après-midi\nChaque demi-journée cochée compte pour 0.5 jour de présence' },
+        ],
+      },
+      {
+        id: 'comprendre-calculs',
+        title: 'Comprendre les calculs affichés',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'Les colonnes de calcul sont mises à jour automatiquement en fonction de votre saisie.' },
+          { type: 'list', content: 'Jour : total des heures dans la plage 06:00–21:00\nNuit : total des heures dans les plages 00:00–06:00 et 21:00–24:00\nTotal : somme des heures de jour et de nuit' },
+        ],
+      },
+      {
+        id: 'commentaire-semaine',
+        title: 'Commentaires de semaine (admin)',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Sur la vue semaine, un picto bulle permet d\'attacher un commentaire libre sur la semaine d\'un employé.' },
+          { type: 'list', content: 'Bulle bleue : pas de commentaire\nBulle rouge : un commentaire existe\nClic : ouvre le drawer avec textarea' },
+          { type: 'note', content: 'Les commentaires n\'affectent aucun calcul. Pour supprimer, videz la textarea puis Enregistrer, ou bouton Supprimer.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'saisie-conducteurs',
+    title: 'Saisie conducteurs',
+    requiredLevel: 'employee',
+    icon: 'mdi:truck-outline',
+    articles: [
+      {
+        id: 'conducteur-heures',
+        title: 'Saisie des heures conducteur',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'Les conducteurs disposent d\'un écran dédié accessible via le menu "Heures Conducteurs". Ils n\'apparaissent pas sur l\'écran classique des heures.' },
+          { type: 'list', content: 'Heures de jour : durée au format HH:MM\nHeures de nuit : durée au format HH:MM\nHeures atelier : durée au format HH:MM\nTotal : calculé automatiquement (jour + nuit + atelier)' },
+        ],
+      },
+      {
+        id: 'conducteur-indemnites',
+        title: 'Indemnités conducteur',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'En plus des heures, vous pouvez cocher les indemnités correspondant à votre journée.' },
+          { type: 'list', content: 'Petit déjeuner\nDéjeuner\nDîner\nNuitée' },
+          { type: 'paragraph', content: 'La même logique de validation s\'applique que pour les heures classiques.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'absences-validations',
+    title: 'Absences et validations',
+    requiredLevel: 'employee',
+    icon: 'mdi:information-outline',
+    articles: [
+      {
+        id: 'comprendre-absences',
+        title: 'Comprendre les absences affichées',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'Quand une absence est posée sur votre journée, elle apparaît dans la colonne dédiée avec un fond coloré selon le type d\'absence.' },
+          { type: 'list', content: 'Absence du matin (AM) : verrouille le créneau matin\nAbsence de l\'après-midi (PM) : verrouille les créneaux après-midi et soir\nAbsence journée complète : verrouille tous les créneaux' },
+          { type: 'note', content: 'Vous ne pouvez pas modifier les créneaux horaires verrouillés par une absence. Seul un administrateur peut retirer ou modifier l\'absence.' },
+        ],
+      },
+      {
+        id: 'comprendre-validations',
+        title: 'Comprendre les validations',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'Vos heures passent par un processus de double validation avant d\'être définitivement enregistrées.' },
+          { type: 'list', content: 'Validation chef de site : votre chef de site vérifie et valide vos heures. La ligne est alors verrouillée pour vous.\nValidation RH : l\'administrateur RH valide définitivement. La ligne est complètement verrouillée.' },
+          { type: 'paragraph', content: 'Une fois validée, vous ne pouvez plus modifier la ligne. Si une correction est nécessaire, contactez votre chef de site ou l\'administrateur RH.' },
+          { type: 'note', content: 'Toute vraie modification effectuée par un administrateur remet automatiquement les deux validations à zéro.' },
+        ],
+      },
+    ],
+  },
+
+  // ============================================================
+  // SITE MANAGER LEVEL
+  // ============================================================
+  {
+    id: 'validation-site',
+    title: 'Validation de site',
+    requiredLevel: 'site_manager',
+    icon: 'mdi:check-decagram-outline',
+    articles: [
+      {
+        id: 'role-chef-site',
+        title: 'Rôle du chef de site',
+        requiredLevel: 'site_manager',
+        blocks: [
+          { type: 'paragraph', content: 'En tant que chef de site, vous êtes responsable de la vérification et de la validation des heures saisies par les employés de votre site.' },
+          { type: 'paragraph', content: 'Le workflow de validation suit un circuit en 3 étapes : l\'employé saisit ses heures → le chef de site valide → l\'admin RH valide définitivement.' },
+        ],
+      },
+      {
+        id: 'validation-individuelle',
+        title: 'Validation individuelle',
+        requiredLevel: 'site_manager',
+        blocks: [
+          { type: 'paragraph', content: 'Pour valider une ligne d\'heures individuellement :' },
+          { type: 'list', content: 'Cochez la case de validation site sur la ligne de l\'employé\nLa ligne est immédiatement verrouillée pour l\'employé\nL\'administrateur RH peut toujours corriger une ligne que vous avez validée' },
+        ],
+      },
+      {
+        id: 'validation-masse',
+        title: 'Validation en masse',
+        requiredLevel: 'site_manager',
+        blocks: [
+          { type: 'paragraph', content: 'Pour gagner du temps, vous pouvez valider toutes les lignes en une seule action.' },
+          { type: 'list', content: 'Cliquez sur le bouton de validation en masse\nToutes les lignes de la date affichée sont validées d\'un coup\nUtile quand toutes les saisies sont correctes' },
+          { type: 'note', content: 'Quand toutes les lignes de votre site sont validées pour une date donnée, les administrateurs RH reçoivent automatiquement une notification.' },
+        ],
+      },
+      {
+        id: 'difference-validations',
+        title: 'Validation site vs validation RH',
+        requiredLevel: 'site_manager',
+        blocks: [
+          { type: 'paragraph', content: 'Il est important de comprendre la différence entre les deux niveaux de validation.' },
+          { type: 'list', content: 'Validation site : verrouille la ligne pour les employés, mais l\'admin RH peut encore modifier\nValidation RH : verrouillage complet, seul l\'admin peut retirer cette validation\nLe chef de site ne voit pas et ne peut pas agir sur la validation RH' },
+        ],
+      },
+    ],
+  },
+
+  // ============================================================
+  // ADMIN LEVEL
+  // ============================================================
+  {
+    id: 'administration',
+    title: 'Administration',
+    requiredLevel: 'admin',
+    icon: 'mdi:cog-outline',
+    articles: [
+      {
+        id: 'gestion-sites',
+        title: 'Gestion des sites',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Les sites organisent les employés et les accès dans l\'application. Chaque site possède un nom et une couleur utilisée dans toute l\'interface.' },
+          { type: 'list', content: 'Créer, modifier ou supprimer un site depuis le menu "Sites"\nL\'ordre d\'affichage est modifiable par glisser-déposer\nLa couleur du site est utilisée pour identifier visuellement les employés' },
+        ],
+      },
+      {
+        id: 'gestion-types-absence',
+        title: 'Gestion des types de statut',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Les types de statut définissent les catégories disponibles lors de la pose d\'une absence.' },
+          { type: 'list', content: 'Code : identifiant court (max 10 caractères), ex: C, M, AT\nLibellé : nom affiché, ex: Congé, Maladie, Accident du travail\nCouleur : code couleur pour le calendrier et la vue jour\nOption "Compté comme travaillé" : si activé, l\'absence crédite des heures en mode TIME' },
+          { type: 'note', content: 'L\'option "Compté comme travaillé" impacte le calcul des heures supplémentaires. En mode TIME, les minutes sont créditées selon le contrat. En mode PRESENCE, aucun crédit n\'est appliqué.' },
+        ],
+      },
+      {
+        id: 'gestion-utilisateurs',
+        title: 'Gestion des utilisateurs',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Chaque personne qui se connecte à l\'application a un compte utilisateur distinct de sa fiche employé.' },
+          { type: 'list', content: 'Nom d\'utilisateur : unique, sert de login\nMot de passe : défini à la création, modifiable\nRôle : Admin (accès complet), User (chef de site), Self (employé)\nSites autorisés : pour les chefs de site, définit leur périmètre\nAssociation employé : lie le compte à une fiche employé\nVerrouillage : un compte verrouillé ne peut plus se connecter' },
+          { type: 'note', content: 'Il n\'est pas possible de supprimer un utilisateur (sécurité). Pour bloquer l\'accès, utilisez le verrouillage de compte.' },
+        ],
+      },
+      {
+        id: 'taches-automatiques',
+        title: 'Tâches automatiques (crons)',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Deux tâches automatiques s\'exécutent quotidiennement pour gérer le report des compteurs.' },
+          { type: 'list', content: 'Report congés (02h10) : déclenche le report des congés payés le 1er juin (CDI/CDD) et le 1er janvier (forfait)\nReport RTT (02h15) : déclenche le report du solde RTT le 1er juin' },
+          { type: 'note', content: 'Ces tâches sont idempotentes : si elles s\'exécutent plusieurs fois, aucun doublon n\'est créé.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'employes-contrats',
+    title: 'Employés et contrats',
+    requiredLevel: 'admin',
+    icon: 'mdi:account-group-outline',
+    articles: [
+      {
+        id: 'liste-employes',
+        title: 'Liste et recherche d\'employés',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'La page Employés affiche tous les employés sous forme de cartes.' },
+          { type: 'list', content: 'Recherche par nom\nFiltrage par site (multi-sélection)\nFiltrage par statut de contrat : "Avec contrat" (défaut), "Sans contrat", "Tous"\n"Avec contrat" = employés ayant une période de contrat active à la date du jour' },
+        ],
+      },
+      {
+        id: 'creation-employe',
+        title: 'Créer un employé',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'La création d\'un employé se fait via le drawer d\'ajout.' },
+          { type: 'list', content: 'Champs : prénom, nom, site\nNature du contrat : CDI, CDD ou INTERIM\nAgence d\'intérim (visible uniquement pour INTERIM, optionnel)\nType de contrat / temps de travail (Forfait, 35h, 39h, etc.)\nDate de début (obligatoire)\nDate de fin (obligatoire pour CDD et INTERIM)' },
+        ],
+      },
+      {
+        id: 'types-contrat',
+        title: 'Types de contrat',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Le type de contrat détermine le mode de suivi et les règles de calcul appliquées.' },
+          { type: 'list', content: 'FORFAIT : suivi en jours (mode PRESENCE), base 218 jours/an\n35 HEURES : suivi horaire (mode TIME), 35h/semaine\n39 HEURES : suivi horaire (mode TIME), 39h/semaine\nCUSTOM : heures personnalisées (ex: 4h, 20h), 1h sup = 1h récup sans bonus\nINTERIM : travail temporaire, pas de récupération ni de congés gérés' },
+          { type: 'note', content: 'Le mode de suivi (TIME ou PRESENCE) est lié au type de contrat et ne peut pas être modifié indépendamment.' },
+        ],
+      },
+      {
+        id: 'suivi-contrat',
+        title: 'Suivi contrat et historique',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'L\'onglet "Suivi contrat" sur la fiche employé affiche l\'historique complet des périodes de contrat.' },
+          { type: 'list', content: 'Chaque ligne : nature (CDI/CDD/INTERIM), type de contrat, date début, date fin ou "En cours"\nAjouter un contrat : disponible uniquement si le contrat en cours est clôturé\nClôturer un contrat : définir la date de fin + option "Solde de tout compte"\nSuspension : ajouter une période de suspension avec dates et commentaire' },
+          { type: 'note', content: 'La case "Soldé dans le solde de tout compte" remet le report des congés à 0 pour l\'exercice suivant.' },
+        ],
+      },
+      {
+        id: 'statut-conducteur',
+        title: 'Statut conducteur',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Le statut conducteur est un flag activé sur une période de contrat. Un employé peut changer de statut conducteur selon la période.' },
+          { type: 'paragraph', content: 'Un employé conducteur apparaît uniquement sur l\'écran "Heures Conducteurs" et non sur l\'écran "Heures" classique.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'double-validation',
+    title: 'Saisie et double validation',
+    requiredLevel: 'admin',
+    icon: 'mdi:shield-check-outline',
+    articles: [
+      {
+        id: 'validation-rh',
+        title: 'Validation RH',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'La validation RH est le niveau de validation le plus élevé, réservé aux administrateurs.' },
+          { type: 'list', content: 'Verrouille complètement la ligne (heures et absences)\nSeul un administrateur peut retirer cette validation\nPeut être appliquée individuellement ou en masse' },
+        ],
+      },
+      {
+        id: 'regles-reinitialisation',
+        title: 'Règles de réinitialisation',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Les validations sont automatiquement réinitialisées dans certaines conditions.' },
+          { type: 'list', content: 'Toute vraie modification d\'une ligne remet les deux validations (site et RH) à faux\nUn enregistrement sans changement réel préserve les validations existantes\nLa date de modification est mise à jour uniquement quand un employé modifie ses propres heures' },
+          { type: 'note', content: 'La date de modification est visible uniquement par les administrateurs, sous le nom de l\'employé dans la vue jour.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'vue-semaine-hs',
+    title: 'Vue semaine et heures supplémentaires',
+    requiredLevel: 'admin',
+    icon: 'mdi:calendar-week',
+    articles: [
+      {
+        id: 'vue-semaine',
+        title: 'Vue semaine',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'La vue semaine est réservée aux administrateurs. Elle affiche une synthèse hebdomadaire par employé avec les heures supplémentaires calculées.' },
+          { type: 'list', content: 'Filtrage par site et par employé\nDétail par jour avec totaux hebdomadaires\nColonnes de calcul : base, heures sup 25%, heures sup 50%, total récupération\nLes jours fériés sont signalés sur la cellule du jour : fond bleu clair quand pas d\'absence, nom du férié au survol' },
+        ],
+      },
+      {
+        id: 'calcul-hs',
+        title: 'Calcul des heures supplémentaires',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Les règles de calcul des heures supplémentaires dépendent du type de contrat.' },
+          { type: 'list', content: 'Contrats ≤ 35h : +25% de 35h à 43h, +50% au-delà de 43h\nContrats ≥ 39h : +25% de 39h à 43h, +50% au-delà de 43h\nContrats CUSTOM (4h, 25h, etc.) : 1h supplémentaire = 1h de récupération, pas de bonus\nINTERIM : aucune récupération, aucun bonus' },
+          { type: 'note', content: 'En cas de déficit hebdomadaire (heures travaillées < heures contrat), le déficit est déduit du cumul RTT : d\'abord des heures à 50%, puis des heures à 25%.' },
+        ],
+      },
+      {
+        id: 'vue-semaine-conducteurs',
+        title: 'Vue semaine conducteurs',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'La vue semaine conducteurs affiche des colonnes spécifiques.' },
+          { type: 'list', content: 'Totaux jour / nuit / atelier par jour et par semaine\nPanier de nuit (PN) : affiché quand heures nuit > heures jour OU nuit ≥ 4h\nCompteurs hebdomadaires : petit déjeuner, déjeuner, dîner, nuitée\nRTT calculé sur jour + nuit + atelier (au lieu des créneaux classiques)' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'absences-calendrier',
+    title: 'Absences et calendrier',
+    requiredLevel: 'admin',
+    icon: 'mdi:calendar-blank',
+    articles: [
+      {
+        id: 'poser-absence',
+        title: 'Poser une absence',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Les absences peuvent être posées depuis la vue jour des heures ou depuis le calendrier.' },
+          { type: 'list', content: 'Journée complète : efface toutes les plages horaires\nDemi-journée matin (AM) : efface le créneau matin\nDemi-journée après-midi (PM) : efface les créneaux après-midi et soir' },
+          { type: 'paragraph', content: 'Les absences sont stockées par jour : une absence de plusieurs jours est automatiquement découpée en entrées quotidiennes.' },
+        ],
+      },
+      {
+        id: 'effet-absences-heures',
+        title: 'Effet sur les heures',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'L\'impact d\'une absence sur les heures dépend du type d\'absence et du mode de suivi.' },
+          { type: 'list', content: 'Standard : efface les créneaux horaires correspondants\nSi "Compté comme travaillé" en mode TIME : crédite des minutes selon le contrat actif\nSi "Compté comme travaillé" en mode PRESENCE : aucun crédit (seules les cases cochées comptent)' },
+          { type: 'note', content: 'Les absences comptées comme travaillées impactent le calcul des heures supplémentaires et du RTT.' },
+        ],
+      },
+      {
+        id: 'calendrier-mensuel',
+        title: 'Calendrier mensuel',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Le calendrier offre une vue d\'ensemble mensuelle des absences de tous les employés.' },
+          { type: 'list', content: 'Code couleur par type d\'absence\nDemi-journée : affichage en dégradé diagonal\nJournée complète : fond plein\nJours fériés : fond bleu clair (cliquable pour créer une absence)\nFiltres par site et par employé\nNavigation par mois (précédent / suivant)' },
+          { type: 'note', content: 'Seuls les employés ayant au moins un jour de contrat sur le mois affiché apparaissent. Un employé dont le contrat s\'est terminé avant le 1er du mois (ou qui commence après la fin du mois) est masqué.' },
+          { type: 'note', content: 'Les absences peuvent être créées sur les jours fériés. Quand une absence est posée sur un férié, elle remplace l\'affichage « Férié » dans la cellule.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'conges-payes',
+    title: 'Congés payés',
+    requiredLevel: 'admin',
+    icon: 'mdi:umbrella-beach-outline',
+    articles: [
+      {
+        id: 'regles-cdi-cdd',
+        title: 'Règles CDI/CDD non-forfait',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Pour les contrats CDI et CDD (hors forfait), l\'exercice de congés va du 1er juin (N-1) au 31 mai (N).' },
+          { type: 'list', content: 'Acquisition annuelle : 25 jours + 5 samedis\nAcquisition mensuelle : 2,08 jours + 0,42 samedi par mois\nProratisation en cas de début/fin ou suspension en cours de mois\nContrat 4h : 10 jours annuels, 0 samedi, 0,83 jour/mois' },
+        ],
+      },
+      {
+        id: 'regles-forfait',
+        title: 'Règles FORFAIT',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Pour les contrats forfait, l\'exercice suit l\'année civile (1er janvier au 31 décembre).' },
+          { type: 'list', content: 'Calcul : jours ouvrés de l\'année − 218 + bonus weekend/férié\nBonus : 1 jour par jour travaillé un weekend ou jour férié (0.5 si demi-journée)\nPas de samedis\nPas de jours en cours d\'acquisition' },
+        ],
+      },
+      {
+        id: 'maladie-longue',
+        title: 'Arrêt maladie long',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'En cas d\'arrêt maladie de plus d\'un mois, les règles d\'acquisition sont modifiées.' },
+          { type: 'list', content: 'Premier mois de maladie : acquisition normale\nAprès le premier mois : acquisition réduite (facteur 0,80)\nDétection automatique à partir des absences MALADIE consécutives (tolérance de gap ≤ 3 jours)' },
+        ],
+      },
+      {
+        id: 'report-conges',
+        title: 'Report annuel et rollover',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Le reliquat de congés de l\'exercice précédent est automatiquement reporté dans les acquis du nouvel exercice.' },
+          { type: 'list', content: 'Report automatique le 1er juin (CDI/CDD non-forfait) ou 1er janvier (forfait)\nSi "Solde de tout compte" coché sur le contrat clôturé : report remis à 0\nJours fractionnés : saisie manuelle par la RH, ajoutés aux acquis' },
+        ],
+      },
+      {
+        id: 'consommation-conges',
+        title: 'Règle de consommation',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Les absences s\'imputent selon un ordre précis.' },
+          { type: 'list', content: 'D\'abord sur les acquis (report N-1)\nPuis sur les jours en cours d\'acquisition\nEn cours d\'acquisition peut devenir négatif temporairement (se reconstitue avec les acquisitions suivantes)' },
+          { type: 'paragraph', content: 'Compteurs visibles sur l\'onglet Congé de la fiche employé : acquis, en cours d\'acquisition, pris, restant.' },
+        ],
+      },
+      {
+        id: 'onglet-conges-fiche-employe',
+        title: 'Onglet Congés (fiche employé)',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'L\'onglet "Congés" sur la fiche employé affiche un calendrier annuel des congés posés (12 mois en grille 4×3) ainsi que les compteurs (acquis, pris, reste, en cours d\'acquisition, N-1 ou samedis selon le contrat).' },
+          { type: 'paragraph', content: 'La période affichée dépend du type de contrat actuel : Janvier → Décembre pour FORFAIT, Juin (N-1) → Mai (N) pour les autres contrats.' },
+          { type: 'paragraph', content: 'Un sélecteur d\'année est disponible en bas du calendrier (zone scrollable, à gauche). Il permet de consulter les exercices passés. La plage proposée part de l\'exercice courant et remonte jusqu\'au plus récent entre (a) le premier exercice où l\'employé avait un contrat ouvert et (b) l\'exercice de mise en service du logiciel — il est inutile de remonter plus loin, aucune donnée n\'a été saisie avant.' },
+          { type: 'note', content: 'Sur un exercice passé, les boutons d\'édition "Jours fractionnés" et "Année N-1 payés" sont désactivés. La consultation reste possible, mais on n\'autorise pas la modification rétroactive d\'un exercice clos.' },
+        ],
+      },
+      {
+        id: 'ecran-recap-conges',
+        title: 'Écran Récap. congés',
+        requiredLevel: 'employee',
+        blocks: [
+          { type: 'paragraph', content: 'L\'écran "Récap. congés" affiche un tableau figé des soldes de congés et RTT par employé. Il est accessible via la sidebar lorsque l\'accès a été activé sur le compte utilisateur.' },
+          { type: 'list', content: 'Employé : voit uniquement sa propre ligne\nChef de site : voit les employés des sites qui lui sont rattachés\nAdmin : voit tous les employés, groupés par site' },
+          { type: 'note', content: 'Le récap est arrêté à la fin de la semaine S-2 (dimanche). Exemple : un mardi en S16, les soldes sont calculés jusqu\'au dimanche de la S14 inclus. Les heures et absences postérieures ne sont pas comptées.' },
+          { type: 'paragraph', content: 'Les colonnes affichées sont identiques à l\'export PDF admin (Nom, Prénom, Contrat, CP N-1 restant, CP N, Samedis, RTT). L\'accès à cet écran est géré par un flag sur l\'utilisateur, activé depuis le drawer de création/édition d\'un utilisateur par un admin.' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'rtt',
+    title: 'RTT (Récupération de Temps de Travail)',
+    requiredLevel: 'admin',
+    icon: 'mdi:timer-sand',
+    articles: [
+      {
+        id: 'rtt-principe',
+        title: 'Principe et exercice RTT',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Le RTT correspond aux heures supplémentaires accumulées, converties en temps de récupération. L\'exercice RTT va du 1er juin (N-1) au 31 mai (N).' },
+          { type: 'paragraph', content: 'L\'onglet RTT sur la fiche employé affiche le détail hebdomadaire regroupé par mois, avec un compteur global en heures (1 jour = 7h = 420 minutes).' },
+        ],
+      },
+      {
+        id: 'rtt-compteurs',
+        title: 'Compteurs RTT',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'list', content: 'Report N-1 : solde de l\'exercice précédent\nAcquis : cumul des heures supplémentaires de l\'exercice en cours\nDisponible : report + acquis − payé\nPayé : RTT convertis en salaire (soustraits du disponible)' },
+          { type: 'note', content: 'Les contrats INTERIM et le mode PRESENCE n\'accumulent pas de RTT (affiché à 0).' },
+          { type: 'paragraph', content: 'La colonne "Cumul" affiche le solde RTT à la fin de chaque semaine : Report N-1 + somme des heures hebdomadaires jusqu\'à la semaine concernée − paiements RTT des mois précédents. Un paiement enregistré sur le mois M n\'est déduit qu\'à partir des semaines du mois M+1. Permet la comparaison ligne à ligne avec un suivi RH externe (Excel).' },
+        ],
+      },
+      {
+        id: 'rtt-paiement',
+        title: 'Paiement RTT',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'L\'administrateur RH peut enregistrer un paiement RTT depuis l\'onglet RTT de la fiche employé.' },
+          { type: 'list', content: 'Saisie : mois, nombre de minutes, taux (25% ou 50%)\nPlusieurs paiements possibles par mois\nLes heures payées sont soustraites du solde disponible' },
+        ],
+      },
+      {
+        id: 'rtt-selecteur-exercice',
+        title: 'Consulter un exercice passé',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Un sélecteur d\'exercice est disponible en bas du tableau RTT (zone scrollable, à gauche). Il permet de consulter les exercices passés (Juin → Mai). La plage proposée part de l\'exercice courant et remonte jusqu\'au plus récent entre (a) le premier exercice où l\'employé avait un contrat ouvert et (b) l\'exercice de mise en service du logiciel.' },
+          { type: 'note', content: 'Sur un exercice passé, le bouton « + Payer les RTT » est désactivé. Aucun paiement rétroactif n\'est autorisé pour préserver la cohérence du report N-1.' },
+        ],
+      },
+      {
+        id: 'rtt-semaines-mois',
+        title: 'Attribution des semaines aux mois',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Chaque semaine ISO est attribuée à un seul mois dans le tableau RTT.' },
+          { type: 'list', content: 'Une semaine est attribuée au mois qui contient son samedi\nSi le samedi tombe en début de mois suivant, la semaine est dans ce mois suivant' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'frais-primes-observations',
+    title: 'Frais, primes et observations',
+    requiredLevel: 'admin',
+    icon: 'mdi:account-cash-outline',
+    articles: [
+      {
+        id: 'frais',
+        title: 'Onglet Frais',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'L\'onglet Frais sur la fiche employé permet de saisir les frais kilométriques et les montants associés.' },
+          { type: 'list', content: 'Mois : obligatoire\nKilomètres : nombre de km (optionnel)\nMontant : en euros (optionnel)\nCommentaire : optionnel\nDeux justificatifs PDF distincts : un pour les km, un pour le montant' },
+          { type: 'note', content: 'Au moins un des deux champs (kilomètres ou montant) doit être supérieur à 0. Un seul enregistrement par mois par employé.' },
+        ],
+      },
+      {
+        id: 'formation',
+        title: 'Onglet Formation',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'L\'onglet Formation sur la fiche employé permet de tracer les formations suivies par le salarié.' },
+          { type: 'list', content: 'Date de début : obligatoire\nDate de fin : obligatoire (doit être postérieure ou égale à la date de début)\nJustificatif PDF : optionnel\nCommentaire : optionnel' },
+          { type: 'note', content: 'Les formations sont triées par date de début décroissante. Cliquer sur une ligne permet de la modifier ou la supprimer.' },
+          { type: 'paragraph', content: 'Les formations sont également affichées en consultation sur l\'écran des heures (pastille indigo "Formation" dans la colonne Absence, sans bouton Modifier) et dans le calendrier (cellule "F" indigo ou icône école si couplée à une absence, cellule non cliquable). La modification et la suppression d\'une formation se font exclusivement depuis cet onglet.' },
+        ],
+      },
+      {
+        id: 'primes',
+        title: 'Onglet Prime',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'list', content: 'Mois : obligatoire\nMontant en euros : obligatoire\nCommentaire : optionnel\nUne seule prime par mois par employé' },
+        ],
+      },
+      {
+        id: 'observations',
+        title: 'Onglet Observation',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'list', content: 'Mois : obligatoire\nTexte d\'observation : obligatoire\nUne seule observation par mois par employé\nNote libre pour le suivi RH' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'exports',
+    title: 'Exports et impressions',
+    requiredLevel: 'admin',
+    icon: 'mdi:file-pdf-box',
+    articles: [
+      {
+        id: 'export-recap-conges',
+        title: 'Export récap. congés',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Génère un PDF A4 portrait récapitulant les congés de tous les employés actifs.' },
+          { type: 'list', content: 'Accessible depuis la page Employés (bouton "Export récap. congés")\nGénère un PDF à la date du jour\nDonnées groupées par site\nColonnes : nom, contrat, CP N-1 restant, samedi restant, CP N, RTT' },
+        ],
+      },
+      {
+        id: 'export-recap-salaire',
+        title: 'Récapitulatif salaire',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Génère un PDF A4 paysage avec le détail mensuel pour la paie.' },
+          { type: 'list', content: 'Sélecteur de mois (défaut = mois courant)\nDonnées groupées par site\nColonnes : nom, base contrat, jours de présence cadre, heures de nuit, panier de nuit, heures RTT payées, congés (nombre + dates), maladie/AT (nombre + dates), primes conducteur (PDJ, repas, nuitée, samedi), observations\nColonne « Repas » chauffeur : somme déjeuner + dîner sur le mois (un jour avec les deux compte 2 repas)' },
+        ],
+      },
+      {
+        id: 'impression-absences',
+        title: 'Impression absences',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Génère un PDF A3 paysage du calendrier d\'absences avec des filtres.' },
+          { type: 'list', content: 'Filtres : période (du/au), sites, nature de contrat, type de contrat\nTous les filtres sont cochés par défaut\nCalendrier coloré par type d\'absence' },
+        ],
+      },
+      {
+        id: 'export-heures-annuelles',
+        title: 'Export heures annuelles',
+        requiredLevel: 'admin',
+        blocks: [
+          { type: 'paragraph', content: 'Génère un PDF par employé avec le détail jour par jour de ses heures sur une année.' },
+          { type: 'list', content: 'Accessible depuis la fiche employé (bouton imprimante)\nChoix de l\'année civile (janvier à décembre)\nColonnes adaptées au mode de suivi (TIME, PRESENCE, conducteur)\nSections séparées en cas de changement de contrat en cours d\'année\nLes jours fériés apparaissent toujours (ligne bleue) avec la mention « Férié : {nom} » dans la colonne Absence ; le total reprend les heures contractuelles créditées (hors Forfait)' },
+        ],
+      },
+    ],
+  },
+]

frontend/i18n/locales/fr.json

@@ -42,6 +42,11 @@
             "update": "Impossible de mettre à jour le frais kilométrique.",
             "delete": "Impossible de supprimer le frais kilométrique."
         },
+        "formation": {
+            "create": "Impossible de créer la formation.",
+            "update": "Impossible de mettre à jour la formation.",
+            "delete": "Impossible de supprimer la formation."
+        },
         "bonus": {
             "create": "Impossible de créer la prime.",
             "update": "Impossible de mettre à jour la prime.",
@@ -51,6 +56,13 @@
             "create": "Impossible de créer l'observation.",
             "update": "Impossible de mettre à jour l'observation.",
             "delete": "Impossible de supprimer l'observation."
+        },
+        "leaveRecap": {
+            "load": "Impossible de charger le récap des congés."
+        },
+        "weekComment": {
+            "save": "Impossible d'enregistrer le commentaire de semaine.",
+            "delete": "Impossible de supprimer le commentaire de semaine."
         }
     },
     "success": {
@@ -88,6 +100,11 @@
             "update": "Frais kilométrique mis à jour.",
             "delete": "Frais kilométrique supprimé."
         },
+        "formation": {
+            "create": "Formation créée.",
+            "update": "Formation mise à jour.",
+            "delete": "Formation supprimée."
+        },
         "bonus": {
             "create": "Prime créée.",
             "update": "Prime mise à jour.",
@@ -97,6 +114,10 @@
             "create": "Observation créée.",
             "update": "Observation mise à jour.",
             "delete": "Observation supprimée."
+        },
+        "weekComment": {
+            "save": "Commentaire enregistré.",
+            "delete": "Commentaire supprimé."
         }
     }
 }

frontend/layouts/default.vue

@@ -1,11 +1,40 @@
 <template>
     <div class="h-screen overflow-hidden">
         <div class="flex h-full">
-            <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
+            <!-- Mobile overlay -->
-                <div class="h-[75px]">
+            <Transition
+                enter-active-class="transition-opacity duration-300"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition-opacity duration-300"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="sidebarOpen"
+                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+                    @click="sidebarOpen = false"
+                />
+            </Transition>
+
+            <!-- Sidebar -->
+            <aside
+                :class="[
+                    'fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:translate-x-0 lg:flex-shrink-0',
+                    sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+                ]"
+            >
+                <div class="flex h-[75px] items-center justify-between">
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
+                    <button
+                        type="button"
+                        class="mr-3 rounded-md p-1 text-primary-500 hover:text-secondary-500 lg:hidden"
+                        @click="sidebarOpen = false"
+                    >
+                        <Icon name="mdi:close" size="24"/>
+                    </button>
                 </div>
-                <nav class="flex-1 px-4 pb-6">
+                <nav class="flex-1 overflow-y-auto px-4 pb-6">
                     <template v-if="isAdmin">
                         <NuxtLink
                             to="/calendar"
@@ -13,6 +42,7 @@
                             :class="route.path.startsWith('/calendar')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:calendar-blank" size="24"/>
                             <p>Calendrier</p>
@@ -26,6 +56,7 @@
                             route.path.startsWith('/hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
                             !isAdmin ? 'border-t border-secondary-500 pt-3' : ''
                         ]"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:clock-time-four-outline" size="24"/>
                         <p>Heures</p>
@@ -38,6 +69,7 @@
                             route.path.startsWith('/driver-hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
                             !isAdmin && isDriver ? 'border-t border-secondary-500 pt-3' : ''
                         ]"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:truck-outline" size="24"/>
                         <p>Heures Conducteurs</p>
@@ -49,16 +81,30 @@
                             :class="route.path.startsWith('/employees')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:account-group-outline" size="24"/>
                             <p>Employés</p>
                         </NuxtLink>
+                        <NuxtLink
+                            v-if="hasLeaveRecapAccess"
+                            to="/leave-recap"
+                            class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                            :class="route.path.startsWith('/leave-recap')
+                            ? 'bg-tertiary-500 text-primary-500 font-bold'
+                            : ''"
+                            @click="closeSidebarOnMobile"
+                        >
+                            <Icon name="mdi:beach" size="24"/>
+                            <p>Récap. congé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'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:business" size="24"/>
                             <p>Sites</p>
@@ -69,9 +115,10 @@
                             :class="route.path.startsWith('/absence-types')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:umbrella-beach-outline" size="24"/>
-                            <p>Types d'absence</p>
+                            <p>Types de statut</p>
                         </NuxtLink>
                         <NuxtLink
                             to="/users"
@@ -79,11 +126,22 @@
                             :class="route.path.startsWith('/users')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:account-outline" size="24"/>
                             <p>Utilisateurs</p>
                         </NuxtLink>
                     </template>
+                    <NuxtLink
+                        v-if="hasLeaveRecapAccess && !isAdmin"
+                        to="/leave-recap"
+                        class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 pt-3"
+                        :class="route.path.startsWith('/leave-recap') ? 'bg-tertiary-500 text-primary-500 font-bold' : ''"
+                        @click="closeSidebarOnMobile"
+                    >
+                        <Icon name="mdi:beach" size="24"/>
+                        <p>Récap. congés</p>
+                    </NuxtLink>
                     <NuxtLink
                         v-if="isSuperAdmin"
                         to="/audit-logs"
@@ -91,10 +149,22 @@
                         :class="route.path.startsWith('/audit-logs')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:clipboard-text-clock-outline" size="24"/>
                         <p>Journal</p>
                     </NuxtLink>
+                    <NuxtLink
+                        to="/documentation"
+                        class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                        :class="route.path.startsWith('/documentation')
+                            ? 'bg-tertiary-500 text-primary-500 font-bold'
+                            : ''"
+                        @click="closeSidebarOnMobile"
+                    >
+                        <Icon name="mdi:book-open-page-variant-outline" size="24"/>
+                        <p>Documentation</p>
+                    </NuxtLink>
                 </nav>
 
                 <div class="flex flex-col gap-2 items-center p-4">
@@ -102,9 +172,9 @@
                 </div>
             </aside>
 
-            <div class="h-full flex-1 overflow-hidden flex flex-col">
+            <div class="h-full flex-1 overflow-hidden flex flex-col min-w-0">
-                <AppTopNav :user="auth.user" />
+                <AppTopNav :user="auth.user" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
-                <main class="flex-1 overflow-y-auto px-8 py-12">
+                <main class="flex-1 overflow-y-auto [scrollbar-gutter:stable] px-4 py-6 lg:px-8 lg:py-12">
                     <slot/>
                 </main>
             </div>
@@ -118,5 +188,11 @@ const {version} = useAppVersion()
 const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
 const isSuperAdmin = computed(() => auth.user?.roles?.includes('ROLE_SUPER_ADMIN') ?? false)
 const isDriver = computed(() => auth.user?.isDriver ?? false)
+const hasLeaveRecapAccess = computed(() => auth.user?.hasLeaveRecapAccess ?? false)
 const route = useRoute()
+const sidebarOpen = ref(false)
+
+const closeSidebarOnMobile = () => {
+    sidebarOpen.value = false
+}
 </script>

frontend/middleware/leave-recap-access.ts

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

frontend/nuxt.config.ts

@@ -2,6 +2,7 @@ export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: false},
     ssr: false,
+    extends: ['@malio/layer-ui'],
     app: {
         baseURL: process.env.NODE_ENV === 'production'
           ? (process.env.NUXT_PUBLIC_APP_BASE || '/')

frontend/package.json

@@ -13,6 +13,7 @@
     "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.1",
+        "@malio/layer-ui": "^1.4.6",
         "@pinia/nuxt": "^0.11.3",
         "nuxt": "^4.3.0",
         "nuxt-toast": "^1.4.0",

frontend/pages/absence-types.vue

@@ -1,14 +1,13 @@
 <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">Types d'absence</h1>
+      <h1 class="text-4xl font-bold text-primary-500">Types de statut</h1>
-      <button
+      <MalioButton
-        type="button"
+        label="Ajouter un type"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        icon-name="mdi:plus"
+        icon-position="left"
         @click="openCreate"
-      >
+      />
-        + Ajouter un type
-      </button>
     </div>
 
     <div
@@ -56,60 +55,40 @@
       </div>
     </div>
 
-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+    <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
       <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
+        <MalioInputText
-          <label class="text-md font-semibold text-neutral-700" for="code">
+          v-model="form.code"
-            Code <span class="text-red-600">*</span>
+          label="Code *"
-          </label>
+          group-class="mt-2"
-          <input
+          :max-length="10"
-            id="code"
+          :error="showCodeError ? 'Le code est obligatoire.' : ''"
-            v-model="form.code"
+        />
-            type="text"
+        <MalioInputText
-            maxlength="10"
+          v-model="form.label"
-            :class="codeFieldClass"
+          label="Libellé *"
-          />
+          group-class="mt-2"
-          <p v-if="showCodeError" class="mt-1 text-sm text-red-600">
+          :error="showLabelError ? 'Le libellé est obligatoire.' : ''"
-            Le code est obligatoire.
+        />
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="label">
-            Libellé <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="label"
-            v-model="form.label"
-            type="text"
-            :class="labelFieldClass"
-          />
-          <p v-if="showLabelError" class="mt-1 text-sm text-red-600">
-            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">
+            <MalioRadioButton
-              <input
+              v-model="form.countAsWorkedHours"
-                v-model="form.countAsWorkedHours"
+              name="countAsWorkedHours"
-                type="radio"
+              :value="true"
-                class="h-4 w-4"
+              label="Oui"
-                :value="true"
+              group-class="w-auto mt-0"
-              />
+            />
-              Oui
+            <MalioRadioButton
-            </label>
+              v-model="form.countAsWorkedHours"
-            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              name="countAsWorkedHours"
-              <input
+              :value="false"
-                v-model="form.countAsWorkedHours"
+              label="Non"
-                type="radio"
+              group-class="w-auto mt-0"
-                class="h-4 w-4"
+            />
-                :value="false"
-              />
-              Non
-            </label>
           </div>
         </div>
         <div>
@@ -130,32 +109,29 @@
           </p>
         </div>
         <div v-if="editingType" class="grid grid-cols-2 gap-3 pt-2">
-          <button
+          <MalioButton
-            type="button"
+            label="Supprimer"
-            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"
+            variant="danger"
+            button-class="w-full"
             @click="confirmDelete(editingType)"
-          >
+          />
-            Supprimer
+          <MalioButton
-          </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"
+            label="Modifier"
-            :class="submitButtonClass"
+            button-class="w-full"
-          >
+            :disabled="isSubmitting || !isFormValid"
-            Modifier
+          />
-          </button>
         </div>
         <div v-else class="flex justify-center pt-2">
-          <button
+          <MalioButton
             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"
+            label="Valider"
-            :class="submitButtonClass"
+            button-class="w-[200px]"
-          >
+            :disabled="isSubmitting || !isFormValid"
-            + Ajouter
+          />
-          </button>
         </div>
       </form>
-    </AppDrawer>
+    </MalioDrawer>
   </div>
 </template>
 
@@ -164,7 +140,7 @@ import type { AbsenceType } from '~/services/dto/absence-type'
 import { createAbsenceType, deleteAbsenceType, listAbsenceTypes, updateAbsenceType } from '~/services/absence-types'
 
 useHead({
-    title: 'Types d\'absences'
+    title: 'Types de statut'
 })
 
 const isDrawerOpen = ref(false)
@@ -202,20 +178,6 @@ const showCodeError = computed(() => validationTouched.code && !isCodeValid.valu
 const showLabelError = computed(() => validationTouched.label && !isLabelValid.value)
 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-secondary-500/20'
-const codeFieldClass = computed(() => {
-  if (showCodeError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const labelFieldClass = computed(() => {
-  if (showLabelError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
 const colorFieldClass = computed(() => {
   const baseColorClass = 'h-10 w-16 cursor-pointer rounded-md border bg-white p-1'
   if (showColorError.value) {
@@ -224,13 +186,6 @@ const colorFieldClass = computed(() => {
   return `${baseColorClass} border-neutral-300`
 })
 
-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
-
 const loadAbsenceTypes = async () => {
   isLoading.value = true
   try {

frontend/pages/audit-logs.vue

@@ -44,6 +44,7 @@
           <option value="contract_suspension">Suspension</option>
           <option value="rtt_payment">Paiement RTT</option>
           <option value="fractioned_days">Jours fractionnés</option>
+          <option value="paid_leave_days">Congés N-1 payés</option>
         </select>
       </div>
       <button
@@ -241,6 +242,7 @@ const entityTypeLabel = (type: string): string => {
     contract_suspension: 'Suspension',
     rtt_payment: 'RTT',
     fractioned_days: 'Fract.',
+    paid_leave_days: 'Congés payés',
   }
   return map[type] ?? type
 }

frontend/pages/calendar.vue

@@ -5,30 +5,37 @@
         </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">
+                    <MalioSelectCheckbox
-                    <SiteFilterSelector v-model="selectedSiteIds" :sites="sites"/>
+                        v-model="selectedSiteIds"
-                </div>
+                        :options="siteOptions"
+                        label="Sites"
+                        groupClass="relative z-50 w-80 h-10"
+                        display-select-all
+                    />
                 <div class="flex gap-4">
-                    <button
+                    <MalioButton
-                        type="button"
+                        label="Ajouter une absence"
-                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        icon-name="mdi:plus"
+                        icon-position="left"
                         @click="openCreateFromToday"
-                    >
+                    />
-                        + Ajouter une absence
+                    <MalioButton
-                    </button>
+                        label="Imprimer"
-                    <button
+                        variant="secondary"
-                        type="button"
+                        icon-name="mdi:printer"
-                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        icon-position="left"
                         @click="openPrint"
-                    >
+                    />
-                        Imprimer
-                    </button>
                 </div>
             </div>
             <div class="flex justify-between">
                 <div class="flex items-center gap-4">
                     <div class="w-80">
-                        <EmployeeNameFilterInput v-model="employeeFilter"/>
+                        <MalioInputText
+                            v-model="employeeFilter"
+                            label="Recherche d'un employé"
+                            icon-name="mdi:magnify"
+                        />
                     </div>
                     <PeriodStepperPicker
                         width-class="w-[260px]"
@@ -49,6 +56,10 @@
                     <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
                     <p>{{ type.label }}</p>
                 </div>
+                <div class="flex items-center gap-2">
+                    <div class="h-4 w-4 rounded bg-indigo-500"></div>
+                    <p>FORMATION</p>
+                </div>
             </div>
         </div>
 
@@ -99,15 +110,15 @@ 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 {listFormationsByDateRange} from '~/services/formations'
+import type {Formation} from '~/services/dto/formation'
 import {listPublicHolidays} from '~/services/public-holidays'
 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'
@@ -130,6 +141,8 @@ const sites = computed(() => {
     })
 })
 
+const siteOptions = computed(() => sites.value.map((site) => ({ label: site.name, value: site.id })))
+
 // Filtres de sites (par défaut: tous sélectionnés à l'init).
 const selectedSiteIds = ref<number[]>([])
 const sitesInitialized = ref(false)
@@ -148,12 +161,27 @@ const sortedEmployees = computed(() => {
 // Employés visibles selon le filtre de sites.
 const employeeFilter = ref('')
 
+// Un employé est considéré "présent" sur le mois affiché si au moins une de ses
+// périodes de contrat intersecte [début du mois ; fin du mois]. Sinon il est masqué.
+const hasContractInSelectedMonth = (employee: Employee): boolean => {
+    const monthStart = toYmd(selectedYear.value, selectedMonth.value, 1)
+    const monthEnd = toYmd(selectedYear.value, selectedMonth.value + 1, 0)
+    const history = employee.contractHistory ?? []
+    if (history.length === 0) return false
+    return history.some((period) => {
+        const start = period.startDate
+        const end = period.endDate ?? '9999-12-31'
+        return start <= monthEnd && end >= monthStart
+    })
+}
+
 const visibleEmployees = computed(() => {
     if (selectedSiteIds.value.length === 0) return []
     const filter = employeeFilter.value.trim().toLowerCase()
     return sortedEmployees.value.filter((employee) => {
         const siteOk = employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
         if (!siteOk) return false
+        if (!hasContractInSelectedMonth(employee)) return false
         if (!filter) return true
         const first = employee.firstName?.toLowerCase() ?? ''
         const last = employee.lastName?.toLowerCase() ?? ''
@@ -163,6 +191,7 @@ const visibleEmployees = computed(() => {
 // Données de référence et absences du mois affiché.
 const absenceTypes = ref<AbsenceType[]>([])
 const absences = ref<Absence[]>([])
+const formations = ref<Formation[]>([])
 const publicHolidays = ref<Record<string, string>>({})
 
 // États UI.
@@ -384,12 +413,18 @@ const loadAbsences = async () => {
     })
 }
 
+const loadFormations = async () => {
+    const monthStart = toYmd(selectedYear.value, selectedMonth.value, 1)
+    const monthEnd = toYmd(selectedYear.value, selectedMonth.value + 1, 0)
+    formations.value = await listFormationsByDateRange(monthStart, monthEnd)
+}
+
 onMounted(async () => {
-    await Promise.all([loadEmployees(), loadAbsenceTypes(), loadPublicHolidays(), loadAbsences()])
+    await Promise.all([loadEmployees(), loadAbsenceTypes(), loadPublicHolidays(), loadAbsences(), loadFormations()])
 })
 
 watch([selectedMonth, selectedYear, selectedSiteIds], async () => {
-    await loadAbsences()
+    await Promise.all([loadAbsences(), loadFormations()])
 })
 
 watch(selectedYear, async () => {
@@ -441,14 +476,51 @@ const cellAbsenceMap = computed(() => {
     return map
 })
 
-// Jours fériés (interdit pour la création).
+// Indexation des formations par cellule pour un lookup O(1).
+const cellFormationMap = computed(() => {
+    const set = new Set<string>()
+    const monthStart = monthStartDate.value
+    const monthEnd = monthEndDate.value
+
+    for (const formation of formations.value) {
+        const employeeId = formation.employee?.id
+        if (!employeeId) continue
+        const startDate = normalizeDate(formation.startDate)
+        const endDate = normalizeDate(formation.endDate)
+        const start = parseYmd(startDate)
+        const end = parseYmd(endDate)
+        if (!start || !end) continue
+
+        const rangeStart = start < monthStart ? monthStart : start
+        const rangeEnd = end > monthEnd ? monthEnd : end
+        if (rangeEnd < rangeStart) continue
+
+        for (
+            let currentDate = new Date(rangeStart.getTime());
+            currentDate <= rangeEnd;
+            currentDate.setDate(currentDate.getDate() + 1)
+        ) {
+            const dateKey = toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+            set.add(`${employeeId}-${dateKey}`)
+        }
+    }
+
+    return set
+})
+
+const hasFormationOn = (employeeId: number, date: string): boolean => {
+    return cellFormationMap.value.has(`${employeeId}-${date}`)
+}
+
+// Jours fériés.
 const isHolidayDate = (date: string) => {
     return Boolean(publicHolidays.value[date])
 }
 
-// Renvoie l'absence effective pour une cellule (ou un "Férié").
+// Renvoie l'absence effective pour une cellule (ou un "Férié" si pas d'absence).
 const getCellAbsence = (employeeId: number, date: string) => {
-    if (isHolidayDate(date)) {
+    const absence = cellAbsenceMap.value.get(`${employeeId}-${date}`)
+    if (!absence && isHolidayDate(date)) {
         return {
             id: 0,
             code: 'Férié',
@@ -456,8 +528,16 @@ const getCellAbsence = (employeeId: number, date: string) => {
             textColor: '#0f172a'
         }
     }
-    const absence = cellAbsenceMap.value.get(`${employeeId}-${date}`)
+    if (absence) return { ...absence, hasFormation: hasFormationOn(employeeId, date) }
-    if (absence) return absence
+    if (hasFormationOn(employeeId, date)) {
+        return {
+            id: 0,
+            code: 'F',
+            color: '#6366f1',
+            textColor: '#fff',
+            hasFormation: true
+        }
+    }
     return null
 }
 
@@ -491,11 +571,6 @@ const getCellInfo = (employeeId: number, date: string) => {
 
 // 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.")
-        return
-    }
-
     const existing = absences.value.find((absence) => {
         const start = normalizeDate(absence.startDate)
         const end = normalizeDate(absence.endDate)
@@ -532,10 +607,6 @@ const openCreateFromToday = () => {
     form.typeId = ''
     const now = new Date()
     const today = toYmd(now.getFullYear(), now.getMonth(), now.getDate())
-    if (isHolidayDate(today)) {
-        window.alert("Impossible de creer une absence un jour ferie.")
-        return
-    }
     form.startDate = today
     form.endDate = today
     form.startHalf = 'AM'

frontend/pages/documentation.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocumentationPage/>
+</template>
+
+<script setup lang="ts">
+useHead({
+    title: 'Documentation',
+})
+</script>

frontend/pages/driver-hours.vue

@@ -43,6 +43,7 @@
                     :is-site-manager="isSiteManager"
                     :day-grid-cols="dayGridCols"
                     :is-holiday="isSelectedDateHoliday"
+                    :holiday-label="selectedHolidayLabel"
                     :contract-label="contractLabel"
                     :is-row-locked="isRowLocked"
                     :has-contract-at-selected-date="hasContractAtSelectedDate"
@@ -63,6 +64,7 @@
                     :get-row-metrics="getRowMetrics"
                     :get-row-absence-label="getRowAbsenceLabel"
                     :get-row-absence-style="getRowAbsenceStyle"
+                    :get-row-contract-nature="getRowContractNature"
                     :get-row-updated-at="getRowUpdatedAt"
                     :on-absence-click="openAbsenceDrawer"
                     :format-minutes="formatMinutes"
@@ -72,11 +74,13 @@
                 <DriverHoursWeekView
                     v-else-if="isAdmin && viewMode === 'week'"
                     :is-week-loading="isWeekLoading"
+                    :is-admin="isAdmin"
                     :week-grid-cols="weekGridCols"
                     :weekly-summary="filteredWeeklySummary"
                     :week-day-headers="weekDayHeaders"
                     :format-minutes="formatMinutes"
                     class="max-h-[calc(100vh-300px)]"
+                    @open-comment="openWeekCommentDrawer"
                 />
             </div>
 
@@ -107,6 +111,18 @@
             @delete="deleteAbsenceFromDrawer"
             @cancel="closeAbsenceDrawer"
         />
+
+        <HoursWeekCommentDrawer
+            v-if="weekCommentContext"
+            v-model="isWeekCommentDrawerOpen"
+            :employee-id="weekCommentContext.employeeId"
+            :employee-label="weekCommentContext.employeeLabel"
+            :week-start="weekCommentContext.weekStart"
+            :week-end="weekCommentContext.weekEnd"
+            :initial-content="weekCommentContext.content"
+            :comment-id="weekCommentContext.commentId"
+            @saved="reloadWeeklySummary"
+        />
     </div>
 </template>
 
@@ -167,6 +183,7 @@ const {
   getRowMetrics,
   getRowAbsenceLabel,
   getRowAbsenceStyle,
+  getRowContractNature,
   getRowUpdatedAt,
   openAbsenceDrawer,
   submitAbsence,
@@ -174,7 +191,12 @@ const {
   closeAbsenceDrawer,
   formatMinutes,
   isSelectedDateHoliday,
-  handleSave
+  selectedHolidayLabel,
+  handleSave,
+  isWeekCommentDrawerOpen,
+  weekCommentContext,
+  openWeekCommentDrawer,
+  reloadWeeklySummary
 } = useDriverHoursPage()
 
 useHead({

frontend/pages/employees/[id].vue

@@ -17,7 +17,7 @@
                         <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"
+                            title="Export heures"
                             @click="isYearlyHoursDrawerOpen = true"
                         >
                             <Icon name="mdi:printer" size="24" />
@@ -26,7 +26,7 @@
                     <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="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}{{ forfaitRemainingDaysLabel }}</p>
                     <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                 </div>
             </div>
@@ -74,6 +74,16 @@
                         <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 === 'formation'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'formation'"
+                    >
+                        <Icon name="mdi:school-outline" size="24" class="align-self"/>
+                        Formation
+                    </button>
                     <button
                         class="pb-2 border-b-2 flex items-center gap-3"
                         :class="activeTab === 'bonus'
@@ -125,6 +135,8 @@
                     :requires-create-contract-end-date="requiresCreateContractEndDate"
                     :create-contract-end-date-field-class="createContractEndDateFieldClass"
                     :is-create-contract-form-valid="isCreateContractFormValid"
+                    :requires-create-work-days-hours="requiresCreateWorkDaysHours"
+                    :selected-create-contract="selectedCreateContract"
                     :on-open-close-contract-drawer="openCloseContractDrawer"
                     :on-open-create-contract-drawer="openCreateContractDrawer"
                     :on-update-contract-drawer-open="setContractDrawerOpen"
@@ -136,6 +148,7 @@
                     :on-submit-suspension="submitSuspension"
                     :on-add-suspension-form="addSuspensionForm"
                     :current-contract-period-id="currentActiveContractPeriodId"
+                    :interim-agencies="interimAgencies"
                 />
                 <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">
@@ -147,14 +160,28 @@
                         :absences="employeeAbsences"
                         :summary="leaveSummary"
                         :public-holidays="publicHolidays"
+                        :selected-year="selectedLeaveYear"
+                        :available-years="availableLeaveYears"
+                        :current-year="currentLeaveYear"
                         @update-fractioned-days="submitFractionedDays"
+                        @update-paid-leave-days="submitPaidLeaveDays"
+                        @update-selected-year="setSelectedLeaveYear"
                     />
                 </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" />
+                    <EmployeesRttTab
+                        v-else
+                        class="h-full"
+                        :summary="rttSummary"
+                        :selected-year="selectedRttYear"
+                        :available-years="availableRttYears"
+                        :current-year="currentRttYear"
+                        @submit-rtt-payment="submitRttPayment"
+                        @update-selected-year="setSelectedRttYear"
+                    />
                 </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">
@@ -170,6 +197,20 @@
                         @delete="submitDeleteMileage"
                     />
                 </div>
+                <div v-else-if="activeTab === 'formation'" class="h-full">
+                    <div v-if="isFormationLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesFormationTab
+                        v-else
+                        class="h-full"
+                        :formations="formations"
+                        :api-base="formationApiBase"
+                        @create="submitCreateFormation"
+                        @update="submitUpdateFormation"
+                        @delete="submitDeleteFormation"
+                    />
+                </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...
@@ -225,10 +266,19 @@ const {
     leaveSummary,
     rttSummary,
     publicHolidays,
+    selectedLeaveYear,
+    currentLeaveYear,
+    availableLeaveYears,
+    setSelectedLeaveYear,
+    selectedRttYear,
+    currentRttYear,
+    availableRttYears,
+    setSelectedRttYear,
     showLeaveTab,
     showRttTab,
     contractHistory,
     employeeContractWorkLabel,
+    forfaitRemainingDaysLabel,
     contractForm,
     createContractForm,
     isContractDrawerOpen,
@@ -249,6 +299,8 @@ const {
     requiresCreateContractEndDate,
     createContractEndDateFieldClass,
     isCreateContractFormValid,
+    requiresCreateWorkDaysHours,
+    selectedCreateContract,
     contractNatureLabel,
     contractHistoryLabel,
     formatDate,
@@ -259,12 +311,14 @@ const {
     submitContractUpdate,
     submitCreateContract,
     submitFractionedDays,
+    submitPaidLeaveDays,
     submitRttPayment,
     suspensionForms,
     isSuspensionSubmitting,
     submitSuspension,
     addSuspensionForm,
     currentActiveContractPeriodId,
+    interimAgencies,
     isLeaveLoading,
     isRttLoading,
     mileageAllowances,
@@ -273,6 +327,12 @@ const {
     submitCreateMileage,
     submitUpdateMileage,
     submitDeleteMileage,
+    formations,
+    isFormationLoading,
+    formationApiBase,
+    submitCreateFormation,
+    submitUpdateFormation,
+    submitDeleteFormation,
     bonuses,
     isBonusLoading,
     submitCreateBonus,
@@ -285,9 +345,10 @@ const {
     submitDeleteObservation
 } = useEmployeeDetailPage()
 
-const handleYearlyHoursPrint = async (year: number) => {
+const handleYearlyHoursPrint = async (payload: { year: number; month: number | null }) => {
     if (!employee.value) return
-    await printPdf(`/yearly-hours/print?employeeId=${employee.value.id}&year=${year}`)
+    const monthParam = null !== payload.month ? `&month=${payload.month}` : ''
+    await printPdf(`/yearly-hours/print?employeeId=${employee.value.id}&year=${payload.year}${monthParam}`)
     isYearlyHoursDrawerOpen.value = false
 }
 

frontend/pages/employees/index.vue

@@ -4,42 +4,45 @@
             <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
+                    <MalioButton
-                        type="button"
+                        label="Export"
-                        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"
+                        variant="secondary"
-                        @click="handleLeaveRecapPrint"
+                        icon-name="mdi:download"
-                    >
+                        icon-position="left"
-                        Export récap. congés
+                        @click="openExportDrawer"
-                    </button>
+                    />
-                    <button
+                    <MalioButton
-                        type="button"
+                        label="Ajouter un employé"
-                        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"
+                        icon-name="mdi:plus"
-                        @click="isSalaryRecapOpen = true"
+                        icon-position="left"
-                    >
-                        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="flex items-center gap-3 py-7">
                 <div class="w-80">
-                    <EmployeeNameFilterInput v-model="employeeFilter"/>
+                    <MalioInputText
+                        v-model="employeeFilter"
+                        label="Recherche d'un employé"
+                        icon-name="mdi:magnify"
+                    />
                 </div>
-                <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites"/>
+                <div v-if="sites.length > 0" class="relative z-50 w-80">
-                <select
+                    <MalioSelectCheckbox
+                        v-model="selectedSiteIds"
+                        :options="siteOptions"
+                        groupClass="w-80"
+                        label="Sites"
+                        display-select-all
+                    />
+                </div>
+
+                <MalioSelect
                     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"
+                    label="Statut contrat"
-                >
+                    :options="contractStatusOptions"
-                    <option value="active">Avec contrat</option>
+                    group-class="w-40"
-                    <option value="inactive">Sans contrat</option>
+                />
-                    <option value="all">Tous</option>
-                </select>
             </div>
         </div>
 
@@ -72,7 +75,7 @@
                     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>Type:</strong> {{ employee.currentInterimAgencyName ? `${contractNatureLabel(employee.currentContractNature)} (${employee.currentInterimAgencyName})` : 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>
@@ -81,90 +84,53 @@
             </NuxtLink>
         </div>
 
-        <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+        <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
             <form class="space-y-4" @submit.prevent="handleSubmit">
-                <div>
+                <MalioInputText
-                    <label class="text-md font-semibold text-neutral-700" for="first-name">
+                    v-model="form.firstName"
-                        Prénom <span class="text-red-600">*</span>
+                    label="Prénom *"
-                    </label>
+                    group-class="mt-2"
-                    <input
+                    :error="showFirstNameError ? 'Le prénom est obligatoire.' : ''"
-                        id="first-name"
+                />
-                        v-model="form.firstName"
+                <MalioInputText
-                        type="text"
+                    v-model="form.lastName"
-                        :class="firstNameFieldClass"
+                    label="Nom *"
-                    />
+                    group-class="mt-2"
-                    <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
+                    :error="showLastNameError ? 'Le nom est obligatoire.' : ''"
-                        Le prénom est obligatoire.
+                />
-                    </p>
+                <MalioSelect
-                </div>
+                    :model-value="form.siteId === '' ? null : form.siteId"
-                <div>
+                    :options="formSiteOptions"
-                    <label class="text-md font-semibold text-neutral-700" for="last-name">
+                    label="Site *"
-                        Nom <span class="text-red-600">*</span>
+                    min-width=""
-                    </label>
+                    :error="showSiteError ? 'Le site est obligatoire.' : ''"
-                    <input
+                    @update:model-value="(v) => { form.siteId = v === null ? '' : Number(v) }"
-                        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>
+                    <MalioSelect
-                        <label class="text-md font-semibold text-neutral-700" for="contract-nature">
+                        :model-value="form.contractNature"
-                            Type de contrat <span class="text-red-600">*</span>
+                        :options="contractNatureFormOptions"
-                        </label>
+                        label="Type de contrat *"
-                        <select
+                        min-width=""
-                            id="contract-nature"
+                        :error="showContractNatureError ? 'Le type de contrat est obligatoire.' : ''"
-                            v-model="form.contractNature"
+                        @update:model-value="(v) => { if (v !== null) form.contractNature = v as 'CDI' | 'CDD' | 'INTERIM' }"
-                            :class="contractNatureFieldClass"
+                    />
-                        >
+                    <MalioSelect
-                            <option value="CDI">CDI</option>
+                        v-if="form.contractNature === 'INTERIM'"
-                            <option value="CDD">CDD</option>
+                        :model-value="form.interimAgencyId === '' ? null : form.interimAgencyId"
-                            <option value="INTERIM">Intérim</option>
+                        :options="interimAgencyOptions"
-                        </select>
+                        label="Agence d'intérim"
-                        <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
+                        min-width=""
-                            Le type de contrat est obligatoire.
+                        @update:model-value="(v) => { form.interimAgencyId = v === null ? '' : Number(v) }"
-                        </p>
+                    />
-                    </div>
+                    <MalioSelect
-                    <div>
+                        :model-value="form.contractId === '' ? null : form.contractId"
-                        <label class="text-md font-semibold text-neutral-700" for="contract">
+                        :options="contractFormOptions"
-                            Temps de travail <span class="text-red-600">*</span>
+                        label="Temps de travail *"
-                        </label>
+                        min-width=""
-                        <select
+                        :error="showContractError ? 'Le temps de travail est obligatoire.' : ''"
-                            id="contract"
+                        @update:model-value="(v) => { form.contractId = v === null ? '' : Number(v) }"
-                            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>
@@ -173,7 +139,7 @@
                             id="contract-start-date"
                             v-model="form.contractStartDate"
                             type="date"
-                            :class="contractStartDateFieldClass"
+                            :class="[dateInputBaseClass, form.contractStartDate ? 'border-black' : 'border-m-muted', showContractStartDateError ? '!border-m-danger' : '']"
                         />
                         <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
                             La date de début est obligatoire.
@@ -188,59 +154,105 @@
                             id="contract-end-date"
                             v-model="form.contractEndDate"
                             type="date"
-                            :class="contractEndDateFieldClass"
+                            :class="[dateInputBaseClass, form.contractEndDate ? 'border-black' : 'border-m-muted', showContractEndDateError ? '!border-m-danger' : '']"
                         />
                         <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
-                            La date de fin est obligatoire pour un CDD.
+                            La date de fin est obligatoire pour un CDD ou un Intérim.
                         </p>
                     </div>
-                    <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
+                    <div class="flex h-10 items-center rounded-md border border-neutral-200 bg-neutral-50 px-3">
-                        <label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="is-driver">
+                        <MalioCheckbox
-                            <input
+                            v-model="form.isDriver"
-                                id="is-driver"
+                            label="Chauffeur"
-                                v-model="form.isDriver"
+                            group-class="flex items-center"
-                                type="checkbox"
+                        />
-                                class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
-                            />
-                            Chauffeur
-                        </label>
                     </div>
+                    <WorkDaysHoursInput
+                        v-if="requiresSchedule"
+                        v-model="form.workDaysHours"
+                        :contract-weekly-hours="selectedContract?.weeklyHours ?? null"
+                    />
                 </template>
                 <div class="flex justify-end gap-3 pt-2">
-                    <button
+                    <MalioButton
-                        type="button"
+                        label="Annuler"
-                        class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                        variant="tertiary"
                         @click="isDrawerOpen = false"
-                    >
+                    />
-                        Annuler
+                    <MalioButton
-                    </button>
-                    <button
                         type="submit"
-                        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        label="Enregistrer"
-                        :class="submitButtonClass"
+                        :disabled="isSubmitting || !isFormValid"
-                    >
+                    />
-                        Enregistrer
-                    </button>
                 </div>
             </form>
-        </AppDrawer>
+        </MalioDrawer>
 
-        <SalaryRecapDrawer
+        <MalioDrawer v-model="isExportDrawerOpen" title="Export">
-            v-model="isSalaryRecapOpen"
+            <div class="space-y-4">
-            @submit="handleSalaryRecapPrint"
+                <MalioSelect
-        />
+                    :model-value="exportChoice === '' ? null : exportChoice"
+                    :options="exportTypeOptions"
+                    label="Type d'export"
+                    empty-option-label="Choisir un export"
+                    group-class="mt-2"
+                    min-width=""
+                    @update:model-value="onExportChoiceChange"
+                />
+
+                <div v-if="exportChoice === 'salary-recap'">
+                    <label class="text-md font-semibold text-neutral-700" for="export-salary-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="export-salary-month"
+                        v-model="exportSalaryMonth"
+                        type="month"
+                        class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                    />
+                </div>
+
+                <template v-else-if="exportChoice === 'yearly-hours'">
+                    <MalioSelect
+                        :model-value="exportYear"
+                        :options="exportYearOptions"
+                        label="Année *"
+                        min-width=""
+                        @update:model-value="(v) => { if (v !== null) exportYear = Number(v) }"
+                    />
+                    <MalioSelect
+                        :model-value="exportMonth === '' ? null : exportMonth"
+                        :options="exportMonthOptions"
+                        label="Mois *"
+                        empty-option-label="Choisir un mois"
+                        min-width=""
+                        @update:model-value="(v) => { exportMonth = v === null ? '' : Number(v) }"
+                    />
+                </template>
+
+                <div class="flex justify-center pt-2">
+                    <MalioButton
+                        label="Valider"
+                        button-class="w-[200px]"
+                        :disabled="!isExportValid"
+                        @click="handleExportValidate"
+                    />
+                </div>
+            </div>
+        </MalioDrawer>
     </div>
 </template>
 
 <script setup lang="ts">
 import type {Contract} from '~/services/dto/contract'
+import WorkDaysHoursInput from '~/components/employees/WorkDaysHoursInput.vue'
+import { requiresWorkDaysHours } from '~/utils/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 {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
-import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
 import {usePdfPrinter} from '~/composables/usePdfPrinter'
 
@@ -251,7 +263,50 @@ useHead({
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
-const isSalaryRecapOpen = ref(false)
+const isExportDrawerOpen = ref(false)
+const exportChoice = ref<'leave-recap' | 'salary-recap' | 'yearly-hours' | ''>('')
+const exportYear = ref<number>(new Date().getFullYear())
+const exportMonth = ref<number | ''>(new Date().getMonth() + 1)
+const exportSalaryMonth = ref<string>(`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`)
+
+const exportTypeOptions = [
+    { label: 'Récap. congés', value: 'leave-recap' },
+    { label: 'Récap. salaire', value: 'salary-recap' },
+    { label: 'Heures annuelles', value: 'yearly-hours' }
+]
+const exportYearOptions = computed(() => {
+    const current = new Date().getFullYear()
+    return Array.from({ length: 6 }, (_, i) => ({ label: String(current - i), value: current - i }))
+})
+const exportMonthOptions = [
+    { label: 'Janvier', value: 1 },
+    { label: 'Février', value: 2 },
+    { label: 'Mars', value: 3 },
+    { label: 'Avril', value: 4 },
+    { label: 'Mai', value: 5 },
+    { label: 'Juin', value: 6 },
+    { label: 'Juillet', value: 7 },
+    { label: 'Août', value: 8 },
+    { label: 'Septembre', value: 9 },
+    { label: 'Octobre', value: 10 },
+    { label: 'Novembre', value: 11 },
+    { label: 'Décembre', value: 12 }
+]
+
+const isExportValid = computed(() => {
+    if (!exportChoice.value) return false
+    if (exportChoice.value === 'salary-recap') {
+        return exportSalaryMonth.value.trim() !== ''
+    }
+    if (exportChoice.value === 'yearly-hours') {
+        return exportYear.value > 0 && exportMonth.value !== ''
+    }
+    return true
+})
+
+const onExportChoiceChange = (value: string | number | null) => {
+    exportChoice.value = (value === null ? '' : String(value)) as 'leave-recap' | 'salary-recap' | 'yearly-hours' | ''
+}
 const { printPdf } = usePdfPrinter()
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
@@ -262,9 +317,16 @@ const drawerTitle = computed(() =>
 const employees = ref<Employee[]>([])
 const sites = ref<Site[]>([])
 const contracts = ref<Contract[]>([])
+const interimAgencies = ref<InterimAgency[]>([])
 const employeeFilter = ref('')
 const contractStatusFilter = ref<'active' | 'inactive' | 'all'>('active')
+const contractStatusOptions = [
+    { label: 'Avec contrat', value: 'active' },
+    { label: 'Sans contrat', value: 'inactive' },
+    { label: 'Tous', value: 'all' }
+]
 const selectedSiteIds = ref<number[]>([])
+const siteOptions = computed(() => sites.value.map((site) => ({ label: site.name, value: site.id })))
 
 const filteredEmployees = computed<Employee[]>(() => {
     if (selectedSiteIds.value.length === 0) return []
@@ -292,7 +354,9 @@ const form = reactive({
     contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
     contractStartDate: '',
     contractEndDate: '',
-    isDriver: false
+    isDriver: false,
+    workDaysHours: null as Record<number, number> | null,
+    interimAgencyId: '' as number | ''
 })
 
 const validationTouched = reactive({
@@ -310,6 +374,21 @@ const isLastNameValid = computed(() => form.lastName.trim() !== '')
 const isSiteValid = computed(() => form.siteId !== '')
 const isContractValid = computed(() => form.contractId !== '')
 const isContractNatureValid = computed(() => isContractNature(form.contractNature))
+const selectedContract = computed<Contract | null>(() =>
+    contracts.value.find((c) => c.id === Number(form.contractId)) ?? null
+)
+const requiresSchedule = computed(() =>
+    !editingEmployee.value && requiresWorkDaysHours(selectedContract.value, form.contractNature)
+)
+const scheduleTotalMinutes = computed(() => {
+    const raw = form.workDaysHours ?? {}
+    return Object.values(raw).reduce((s, n) => s + (Number(n) || 0), 0)
+})
+const isScheduleValid = computed(() => {
+    if (!requiresSchedule.value) return true
+    const expected = (selectedContract.value?.weeklyHours ?? 0) * 60
+    return expected > 0 && scheduleTotalMinutes.value === expected
+})
 const isContractStartDateValid = computed(() => form.contractStartDate !== '')
 const showsContractEndDateComputed = computed(() => showsContractEndDate(form.contractNature))
 const requiresContractEndDateComputed = computed(() => requiresContractEndDate(form.contractNature))
@@ -327,7 +406,8 @@ const isFormValid = computed(
             : (isContractValid.value &&
                 isContractNatureValid.value &&
                 isContractStartDateValid.value &&
-                isContractEndDateValid.value))
+                isContractEndDateValid.value &&
+                isScheduleValid.value))
 )
 
 const showFirstNameError = computed(
@@ -352,63 +432,23 @@ const showContractEndDateError = computed(
     () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
 )
 
-const baseInputClass =
+const dateInputBaseClass =
-    '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'
+    'mt-2 h-10 w-full rounded-md border px-3 text-md text-black outline-none focus:border-2 focus:border-m-primary'
-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(() => {
+const formSiteOptions = computed(() =>
-    if (isSubmitting.value || !isFormValid.value) {
+    sites.value.map((site) => ({ label: site.name, value: site.id }))
-        return 'opacity-50 cursor-not-allowed'
+)
-    }
+const interimAgencyOptions = computed(() =>
-    return ''
+    interimAgencies.value.map((agency) => ({ label: agency.name, value: agency.id }))
-})
+)
+const contractFormOptions = computed(() =>
+    contracts.value.map((contract) => ({ label: contract.name, value: contract.id }))
+)
+const contractNatureFormOptions = [
+    { label: 'CDI', value: 'CDI' },
+    { label: 'CDD', value: 'CDD' },
+    { label: 'Intérim', value: 'INTERIM' }
+]
 
 const loadEmployees = async () => {
     isLoading.value = true
@@ -427,8 +467,12 @@ const loadContracts = async () => {
     contracts.value = await listContracts()
 }
 
+const loadInterimAgencies = async () => {
+    interimAgencies.value = await listInterimAgencies()
+}
+
 onMounted(async () => {
-    await Promise.all([loadEmployees(), loadSites(), loadContracts()])
+    await Promise.all([loadEmployees(), loadSites(), loadContracts(), loadInterimAgencies()])
     if (form.contractStartDate === '') {
         form.contractStartDate = new Date().toISOString().slice(0, 10)
     }
@@ -478,7 +522,9 @@ const handleSubmit = async () => {
                 contractNature: form.contractNature,
                 contractStartDate: form.contractStartDate,
                 contractEndDate: form.contractEndDate || null,
-                isDriverInput: form.isDriver
+                isDriverInput: form.isDriver,
+                workDaysHoursInput: requiresSchedule.value ? form.workDaysHours : null,
+                interimAgencyId: form.contractNature === 'INTERIM' && form.interimAgencyId !== '' ? Number(form.interimAgencyId) : null
             })
         }
 
@@ -490,6 +536,8 @@ const handleSubmit = async () => {
         form.contractStartDate = new Date().toISOString().slice(0, 10)
         form.contractEndDate = ''
         form.isDriver = false
+        form.workDaysHours = null
+        form.interimAgencyId = ''
         editingEmployee.value = null
         isDrawerOpen.value = false
         await loadEmployees()
@@ -516,6 +564,18 @@ watch(showsContractEndDateComputed, (shows) => {
     }
 })
 
+watch(() => form.contractNature, (nature) => {
+    if (nature !== 'INTERIM') {
+        form.interimAgencyId = ''
+    }
+})
+
+watch(requiresSchedule, (required) => {
+    if (!required) {
+        form.workDaysHours = null
+    }
+})
+
 const openEdit = (employee: Employee) => {
     editingEmployee.value = employee
     form.firstName = employee.firstName
@@ -534,18 +594,34 @@ const openCreate = () => {
     form.contractStartDate = new Date().toISOString().slice(0, 10)
     form.contractEndDate = ''
     form.isDriver = false
+    form.workDaysHours = null
+    form.interimAgencyId = ''
     isDrawerOpen.value = true
 }
 
-const handleLeaveRecapPrint = async () => {
+const openExportDrawer = () => {
-    await printPdf('/leave-recap/print')
+    exportChoice.value = ''
+    const now = new Date()
+    exportYear.value = now.getFullYear()
+    exportMonth.value = now.getMonth() + 1
+    exportSalaryMonth.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+    isExportDrawerOpen.value = true
 }
 
-const handleSalaryRecapPrint = async (month: string) => {
+const handleExportValidate = async () => {
-    await printPdf(`/salary-recap/print?month=${month}`)
+    if (!isExportValid.value) return
-    isSalaryRecapOpen.value = false
+    const choice = exportChoice.value
+    isExportDrawerOpen.value = false
+    if (choice === 'leave-recap') {
+        await printPdf('/leave-recap/print')
+    } else if (choice === 'salary-recap') {
+        await printPdf(`/salary-recap/print?month=${exportSalaryMonth.value}`)
+    } else if (choice === 'yearly-hours') {
+        await printPdf(`/yearly-hours/print-all?year=${exportYear.value}&month=${exportMonth.value}`)
+    }
 }
 
+
 const confirmDelete = async (employee: Employee) => {
     const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
     if (!ok) return

frontend/pages/hours.vue

@@ -1,7 +1,7 @@
 <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>
+            <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Heures</h1>
         </div>
 
         <HoursToolbar
@@ -43,6 +43,7 @@
                     :is-site-manager="isSiteManager"
                     :day-grid-cols="dayGridCols"
                     :is-holiday="isSelectedDateHoliday"
+                    :holiday-label="selectedHolidayLabel"
                     :contract-label="contractLabel"
                     :is-time-tracking="isTimeTracking"
                 :is-presence-tracking="isPresenceTracking"
@@ -67,6 +68,9 @@
                 :get-row-metrics="getRowMetrics"
                 :get-row-absence-label="getRowAbsenceLabel"
                 :get-row-absence-style="getRowAbsenceStyle"
+                :has-row-formation="hasRowFormation"
+                :get-row-formation-label="getRowFormationLabel"
+                :get-row-contract-nature="getRowContractNature"
                 :get-row-updated-at="getRowUpdatedAt"
                 :get-presence-day-value="getPresenceDayValue"
                 :on-absence-click="openAbsenceDrawer"
@@ -77,11 +81,13 @@
                 <HoursWeekView
                     v-else-if="isAdmin && viewMode === 'week'"
                     :is-week-loading="isWeekLoading"
+                    :is-admin="isAdmin"
                     :week-grid-cols="weekGridCols"
                     :weekly-summary="filteredWeeklySummary"
                     :week-day-headers="weekDayHeaders"
                     :format-minutes="formatMinutes"
                     class="max-h-[calc(100vh-300px)]"
+                    @open-comment="openWeekCommentDrawer"
                 />
             </div>
 
@@ -112,6 +118,18 @@
             @delete="deleteAbsenceFromDrawer"
             @cancel="closeAbsenceDrawer"
         />
+
+        <HoursWeekCommentDrawer
+            v-if="weekCommentContext"
+            v-model="isWeekCommentDrawerOpen"
+            :employee-id="weekCommentContext.employeeId"
+            :employee-label="weekCommentContext.employeeLabel"
+            :week-start="weekCommentContext.weekStart"
+            :week-end="weekCommentContext.weekEnd"
+            :initial-content="weekCommentContext.content"
+            :comment-id="weekCommentContext.commentId"
+            @saved="reloadWeeklySummary"
+        />
     </div>
 </template>
 
@@ -139,6 +157,7 @@ const {
   isSubmitting,
   dayGridCols,
   isSelectedDateHoliday,
+  selectedHolidayLabel,
   weekGridCols,
   saveButtonClass,
   formattedSelectedDate,
@@ -177,6 +196,9 @@ const {
   getRowMetrics,
   getRowAbsenceLabel,
   getRowAbsenceStyle,
+  hasRowFormation,
+  getRowFormationLabel,
+  getRowContractNature,
   getRowUpdatedAt,
   getPresenceDayValue,
   openAbsenceDrawer,
@@ -184,7 +206,11 @@ const {
   deleteAbsenceFromDrawer,
   closeAbsenceDrawer,
   formatMinutes,
-  handleSave
+  handleSave,
+  isWeekCommentDrawerOpen,
+  weekCommentContext,
+  openWeekCommentDrawer,
+  reloadWeeklySummary
 } = useHoursPage()
 
 useHead({

frontend/pages/leave-recap.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="flex flex-wrap items-center justify-between gap-4 pb-8">
+      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Récap. congés</h1>
+      <span
+        v-if="cutoffLabel"
+        class="inline-flex items-center gap-2 rounded-full bg-tertiary-500 px-4 py-1 text-sm font-semibold text-primary-500"
+      >
+        <Icon name="mdi:calendar-check-outline" size="18"/>
+        {{ cutoffLabel }}
+      </span>
+    </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="rows.length === 0"
+      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+    >
+      Aucun employé à afficher.
+    </div>
+
+    <!-- Desktop table -->
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
+      <div
+        :class="`grid ${gridColsClass} 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 v-if="showSiteColumn" class="text-left">Site</span>
+        <span class="text-left">Nom</span>
+        <span class="text-left">Prénom</span>
+        <span class="text-left">Contrat</span>
+        <span class="text-right">CP N-1 restant</span>
+        <span class="text-right">Samedis</span>
+        <span class="text-right">CP N</span>
+        <span class="text-right">RTT</span>
+      </div>
+      <div class="border-x border-b border-primary-500 rounded-b-md">
+        <div
+          v-for="row in rows"
+          :key="row.employeeId"
+          :class="`grid ${gridColsClass} items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0`"
+        >
+          <span v-if="showSiteColumn" class="truncate">
+            <span
+              v-if="row.siteName"
+              class="inline-block rounded-full px-3 py-1 text-sm"
+              :style="{ backgroundColor: row.siteColor || '#ffd7d7', color: '#1a1a1a' }"
+            >
+              {{ row.siteName }}
+            </span>
+            <span v-else class="text-neutral-500">-</span>
+          </span>
+          <span class="truncate">{{ row.lastName }}</span>
+          <span class="truncate">{{ row.firstName }}</span>
+          <span class="truncate">{{ row.contractName ?? '-' }}</span>
+          <span class="text-right tabular-nums">{{ formatNumber(row.cpN1Remaining) }}</span>
+          <span class="text-right tabular-nums">{{ row.acquiredSaturdays }}</span>
+          <span class="text-right tabular-nums">{{ row.cpN }}</span>
+          <span class="text-right tabular-nums">{{ row.rtt }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile cards -->
+    <div v-if="!isLoading && rows.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
+      <div
+        v-for="row in rows"
+        :key="'m-' + row.employeeId"
+        class="rounded-md border border-primary-500 bg-white p-4"
+      >
+        <div class="mb-3 flex items-center justify-between gap-2">
+          <p class="text-md font-bold text-primary-500 truncate">
+            {{ row.lastName }} {{ row.firstName }}
+          </p>
+          <span
+            v-if="showSiteColumn && row.siteName"
+            class="inline-block shrink-0 rounded-full px-3 py-1 text-sm"
+            :style="{ backgroundColor: row.siteColor || '#ffd7d7', color: '#1a1a1a' }"
+          >
+            {{ row.siteName }}
+          </span>
+        </div>
+        <p v-if="row.contractName" class="mb-3 text-sm text-neutral-600">{{ row.contractName }}</p>
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+          <div class="flex justify-between">
+            <span class="text-neutral-500">CP N-1</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN1Remaining) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">Samedis</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ row.acquiredSaturdays }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">CP N</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">RTT</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ row.rtt }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LeaveRecapRow } from '~/services/dto/leave-recap'
+import { fetchLeaveRecap } from '~/services/leave-recap'
+import { formatYmdToFr, getIsoWeekNumber, parseYmd } from '~/utils/date'
+
+definePageMeta({ middleware: ['leave-recap-access'] })
+useHead({ title: 'Récap. congés' })
+
+const auth = useAuthStore()
+const rows = ref<LeaveRecapRow[]>([])
+const isLoading = ref(false)
+
+const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
+const isSelfOnly = computed(() => {
+  const roles = auth.user?.roles ?? []
+  return roles.includes('ROLE_SELF') && !roles.includes('ROLE_ADMIN')
+})
+const showSiteColumn = computed(() => !isSelfOnly.value)
+const gridColsClass = computed(() =>
+  showSiteColumn.value
+    ? 'grid-cols-[1.2fr_1fr_1fr_1.2fr_140px_100px_100px_120px]'
+    : 'grid-cols-[1fr_1fr_1.2fr_140px_100px_100px_120px]'
+)
+
+const cutoffLabel = computed(() => {
+  const ymd = rows.value[0]?.cutoffDate
+  if (!ymd) return ''
+  const parsed = parseYmd(ymd)
+  if (!parsed) return ''
+  const week = getIsoWeekNumber(parsed)
+  return `Arrêté au ${formatYmdToFr(ymd)} (fin S${week})`
+})
+
+const formatNumber = (value: number) => {
+  if (!Number.isFinite(value)) return '-'
+  return value.toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+}
+
+const load = async () => {
+  isLoading.value = true
+  try {
+    rows.value = await fetchLeaveRecap()
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(load)
+
+// Silence unused linter warning for isAdmin (kept for future site grouping)
+void isAdmin
+</script>

frontend/pages/login.vue

@@ -9,31 +9,18 @@
             class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
             @submit.prevent="handleSubmit"
         >
-            <div>
+            <MalioInputText
-                <label class="text-sm font-semibold text-neutral-700" for="username">
+                v-model="username"
-                    Nom d'utilisateur
+                label="Nom d'utilisateur"
-                </label>
+                autocomplete="username"
-                <input
+                group-class="mt-2"
-                    id="username"
+            />
-                    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-secondary-500/20"
-                />
-            </div>
 
-            <div>
+            <MalioInputPassword
-                <label class="text-sm font-semibold text-neutral-700" for="password">
+                v-model="password"
-                    Mot de passe
+                label="Mot de passe"
-                </label>
+                autocomplete="current-password"
-                <input
+            />
-                    id="password"
-                    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-secondary-500/20"
-                />
-            </div>
 
             <button
                 type="submit"

frontend/pages/sites.vue

@@ -2,13 +2,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
+      <MalioButton
-        type="button"
+        label="Ajouter un site"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        icon-name="mdi:plus"
+        icon-position="left"
         @click="openCreate"
-      >
+      />
-        + Ajouter un site
-      </button>
     </div>
 
     <div
@@ -52,22 +51,14 @@
       </div>
     </div>
 
-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+    <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
       <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
+        <MalioInputText
-          <label class="text-md font-semibold text-neutral-700" for="name">
+          v-model="form.name"
-            Nom <span class="text-red-600">*</span>
+          label="Nom *"
-          </label>
+          group-class="mt-2"
-          <input
+          :error="showNameError ? 'Le nom du site est obligatoire.' : ''"
-            id="name"
+        />
-            v-model="form.name"
-            type="text"
-            :class="nameFieldClass"
-          />
-          <p v-if="showNameError" class="mt-1 text-sm text-red-600">
-            Le nom du site est obligatoire.
-          </p>
-        </div>
         <div>
           <label class="text-md font-semibold text-neutral-700" for="color">
             Couleur <span class="text-red-600">*</span>
@@ -83,32 +74,29 @@
           </div>
         </div>
         <div v-if="editingSite" class="grid grid-cols-2 gap-3 pt-2">
-          <button
+          <MalioButton
-            type="button"
+            label="Supprimer"
-            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"
+            variant="danger"
+            button-class="w-full"
             @click="confirmDelete(editingSite)"
-          >
+          />
-            Supprimer
+          <MalioButton
-          </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"
+            label="Modifier"
-            :class="submitButtonClass"
+            button-class="w-full"
-          >
+            :disabled="isSubmitting || !isFormValid"
-            Modifier
+          />
-          </button>
         </div>
         <div v-else class="flex justify-center pt-2">
-          <button
+          <MalioButton
             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"
+            label="Valider"
-            :class="submitButtonClass"
+            button-class="w-[200px]"
-          >
+            :disabled="isSubmitting || !isFormValid"
-            + Ajouter
+          />
-          </button>
         </div>
       </form>
-    </AppDrawer>
+    </MalioDrawer>
   </div>
 </template>
 
@@ -146,22 +134,6 @@ 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-secondary-500/20'
-const nameFieldClass = computed(() => {
-  if (showNameError.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 loadSites = async () => {
   isLoading.value = true
   try {

frontend/pages/users.vue

@@ -1,14 +1,13 @@
 <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>
+      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Utilisateurs</h1>
-      <button
+      <MalioButton
-        type="button"
+        label="Ajouter"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        icon-name="mdi:plus"
+        icon-position="left"
         @click="openCreate"
-      >
+      />
-        + Ajouter un utilisateur
-      </button>
     </div>
 
     <div
@@ -18,7 +17,8 @@
       Aucun utilisateur pour le moment.
     </div>
 
-    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+    <!-- Desktop table -->
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
       <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>
@@ -56,43 +56,61 @@
       </div>
     </div>
 
-    <AppDrawer
+    <!-- Mobile cards -->
+    <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500 lg:hidden">
+      Chargement...
+    </div>
+    <div v-else-if="users.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
+      <div
+        v-for="user in users"
+        :key="'m-' + user.id"
+        class="rounded-md border border-primary-500 bg-white p-4 cursor-pointer active:bg-tertiary-500"
+        @click="openEdit(user)"
+      >
+        <div class="flex items-center justify-between gap-2 mb-2">
+          <p class="text-md font-bold text-primary-500 truncate">{{ user.username }}</p>
+          <span
+            v-if="user.isLocked"
+            class="shrink-0 inline-block rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700"
+          >Verrouillé</span>
+          <span
+            v-else
+            class="shrink-0 inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700"
+          >Actif</span>
+        </div>
+        <div class="space-y-1 text-sm">
+          <p v-if="user.employee" class="text-neutral-600">
+            {{ user.employee.firstName }} {{ user.employee.lastName }}
+          </p>
+          <p class="text-neutral-500">
+            Accès : <span class="font-semibold text-primary-500">{{ getAccessLabel(user) }}</span>
+          </p>
+          <p v-if="getSiteLabels(user) !== '-'" class="text-neutral-500 truncate">
+            Sites : <span class="font-semibold text-primary-500">{{ getSiteLabels(user) }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <MalioDrawer
       v-model="isDrawerOpen"
       :title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"
     >
       <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
+        <MalioInputText
-          <label class="text-md font-semibold text-neutral-700" for="username">
+          v-model="form.username"
-            Nom d'utilisateur <span class="text-red-600">*</span>
+          :label="editingUser ? `Nom d'utilisateur` : `Nom d'utilisateur *`"
-          </label>
+          group-class="mt-2"
-          <input
+          :error="showUsernameError ? `Le nom d'utilisateur est obligatoire.` : ''"
-            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">
+          <MalioInputPassword
-            Mot de passe
-            <span v-if="!editingUser" class="text-red-600">*</span>
-          </label>
-          <input
-            id="password"
             v-model="form.password"
-            type="password"
+            :label="editingUser ? 'Mot de passe' : 'Mot de passe *'"
-            :class="passwordFieldClass"
+            :hint="editingUser ? 'Laisse vide pour ne pas changer le mot de passe.' : ''"
+            :error="!editingUser && showPasswordError ? 'Le mot de passe est obligatoire.' : ''"
           />
-          <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>
@@ -135,40 +153,32 @@
         </div>
 
         <div v-if="form.accessMode === 'self'">
-          <label class="text-md font-semibold text-neutral-700" for="employee">
+          <MalioSelect
-            Employé lié
+            :model-value="form.employeeId === '' ? null : form.employeeId"
-          </label>
+            :options="employeeOptions"
-          <select
+            label="Employé lié"
-            id="employee"
+            empty-option-label="Aucun"
-            v-model="form.employeeId"
+            min-width=""
-            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+            :error="showSelfEmployeeError ? 'Sélectionne un employé.' : ''"
-          >
+            @update:model-value="onEmployeeChange"
-            <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
+            <div
               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"
+              class="flex h-10 items-center rounded-md border border-neutral-200 px-3"
             >
-              <input
+              <MalioCheckbox
-                type="checkbox"
+                :model-value="form.siteIds.includes(site.id)"
-                class="cursor-pointer"
+                :label="site.name"
-                :checked="form.siteIds.includes(site.id)"
+                group-class="flex items-center"
-                @change="toggleSite(site.id)"
+                @update:model-value="toggleSite(site.id)"
               />
-              <span>{{ site.name }}</span>
+            </div>
-            </label>
           </div>
           <p v-if="showSitesError" class="mt-1 text-sm text-red-600">
             Sélectionne au moins un site.
@@ -176,30 +186,31 @@
         </div>
 
         <div>
-          <label class="flex items-center gap-2 cursor-pointer">
+          <MalioCheckbox
-            <input
+            v-model="form.isLocked"
-              v-model="form.isLocked"
+            label="Verrouiller le compte"
-              type="checkbox"
+            hint="Un compte verrouillé ne peut plus se connecter."
-              class="cursor-pointer"
+          />
-            />
+        </div>
-            <span class="text-md font-semibold text-neutral-700">Verrouiller le compte</span>
+
-          </label>
+        <div>
-          <p class="mt-1 text-sm text-neutral-500">
+          <MalioCheckbox
-            Un compte verrouillé ne peut plus se connecter.
+            v-model="form.hasLeaveRecapAccess"
-          </p>
+            label="Accès à l'écran Récap. congés"
+            hint="Affiche l'onglet dans la sidebar et donne accès au tableau récap."
+          />
         </div>
 
         <div class="flex justify-center pt-2">
-          <button
+          <MalioButton
             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"
+            :label="editingUser ? 'Modifier' : 'Valider'"
-            :class="submitButtonClass"
+            button-class="w-[200px]"
-          >
+            :disabled="isSubmitting || !isFormValid"
-            {{ editingUser ? 'Modifier' : '+ Ajouter' }}
+          />
-          </button>
         </div>
       </form>
-    </AppDrawer>
+    </MalioDrawer>
   </div>
 </template>
 
@@ -233,7 +244,8 @@ const form = reactive({
   accessMode: 'admin' as 'admin' | 'self' | 'sites',
   employeeId: '' as number | '',
   siteIds: [] as number[],
-  isLocked: false
+  isLocked: false,
+  hasLeaveRecapAccess: false
 })
 
 const validationTouched = reactive({
@@ -296,27 +308,13 @@ const getSiteLabels = (user: User) => {
   return names.length > 0 ? names.join(', ') : 'Sites sélectionnés'
 }
 
-const baseInputClass =
+const employeeOptions = computed(() =>
-  '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'
+  employees.value.map((e) => ({ label: `${e.firstName} ${e.lastName}`, value: e.id }))
-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(() => {
+const onEmployeeChange = (value: string | number | null) => {
-  if (isSubmitting.value || !isFormValid.value) {
+  form.employeeId = value === null ? '' : Number(value)
-    return 'opacity-50 cursor-not-allowed'
+}
-  }
-  return ''
-})
 
 const loadData = async () => {
   isLoading.value = true
@@ -345,6 +343,7 @@ const resetForm = () => {
   form.accessMode = 'admin'
   form.siteIds = []
   form.isLocked = false
+  form.hasLeaveRecapAccess = false
   editingUser.value = null
   validationTouched.username = false
   validationTouched.password = false
@@ -373,6 +372,7 @@ const openEdit = (user: User) => {
 
   form.employeeId = user.employee?.id ?? ''
   form.isLocked = user.isLocked
+  form.hasLeaveRecapAccess = user.hasLeaveRecapAccess ?? false
 
   const siteRoles = userAccessById.value.get(user.id) ?? []
   form.siteIds = siteRoles.map((role) => role.site?.id).filter((id): id is number => typeof id === 'number')
@@ -427,7 +427,8 @@ const handleSubmit = async () => {
         plainPassword: form.password.trim() ? form.password : undefined,
         roles,
         employeeId,
-        isLocked: form.isLocked
+        isLocked: form.isLocked,
+        hasLeaveRecapAccess: form.hasLeaveRecapAccess
       })
 
       const existingSiteRoles = userAccessById.value.get(editingUser.value.id) ?? []
@@ -452,7 +453,8 @@ const handleSubmit = async () => {
         plainPassword: form.password,
         roles,
         employeeId,
-        isLocked: form.isLocked
+        isLocked: form.isLocked,
+        hasLeaveRecapAccess: form.hasLeaveRecapAccess
       })
 
       if (form.accessMode === 'sites' && form.siteIds.length > 0) {

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

@@ -13,6 +13,9 @@ export type EmployeeLeaveSummary = {
   previousYearAcquiredDays: number
   previousYearTakenDays: number
   previousYearRemainingDays: number
+  previousYearPaidDays: number
   presenceDaysByMonth: Record<string, number>
+  presenceDaysToToday: number
+  dataStartDate: string | null
 }
 

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

@@ -9,6 +9,7 @@ export type EmployeeRttWeekSummary = {
   base50Minutes: number
   bonus50Minutes: number
   totalMinutes: number
+  cumulativeBalanceMinutes: number
 }
 
 export type RttMonthPayment = {

frontend/services/dto/employee.ts

@@ -19,6 +19,9 @@ export type ContractHistoryItem = {
   periodId?: number | null
   suspensions?: ContractSuspension[]
   isDriver?: boolean
+  workDaysHours?: Record<number, number> | null
+  interimAgencyId?: number | null
+  interimAgencyName?: string | null
 }
 
 export type Employee = {
@@ -36,4 +39,6 @@ export type Employee = {
   displayOrder?: number
   entryDate?: string | null
   currentSuspensions?: ContractSuspension[]
+  currentInterimAgencyId?: number | null
+  currentInterimAgencyName?: string | null
 }

frontend/services/dto/formation.ts

@@ -0,0 +1,12 @@
+import type { Employee } from './employee'
+
+export type Formation = {
+  id: number
+  startDate: string
+  endDate: string
+  comment: string | null
+  justificatifPath: string | null
+  justificatifName: string | null
+  createdAt: string
+  employee?: Employee
+}

frontend/services/dto/leave-recap.ts

@@ -0,0 +1,14 @@
+export type LeaveRecapRow = {
+  employeeId: number
+  lastName: string
+  firstName: string
+  siteId: number | null
+  siteName: string | null
+  siteColor: string | null
+  contractName: string | null
+  cpN1Remaining: number
+  cpN: string
+  acquiredSaturdays: string
+  rtt: string
+  cutoffDate: string
+}

frontend/services/dto/user-data.ts

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

frontend/services/dto/user.ts

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

frontend/services/dto/work-hour.ts

@@ -59,6 +59,8 @@ export type WeeklyWorkHourDailySummary = {
   hasLunch?: boolean
   hasDinner?: boolean
   hasOvernight?: boolean
+  virtualHolidayMinutes?: number
+  holidayLabel?: string | null
 }
 
 export type WeeklyWorkHourRowSummary = {
@@ -86,6 +88,9 @@ export type WeeklyWorkHourRowSummary = {
   weeklyDinnerCount?: number
   weeklyOvernightCount?: number
   hasContractForWeek?: boolean
+  contractNature?: 'CDI' | 'CDD' | 'INTERIM' | null
+  comment?: string | null
+  commentId?: number | null
 }
 
 export type WeeklyWorkHourSummary = {
@@ -106,6 +111,10 @@ export type WorkHourDayContextRow = {
   creditedMinutes: number
   creditedPresenceUnits: number
   isDriverContract?: boolean
+  hasFormation?: boolean
+  formationLabel?: string | null
+  virtualHolidayMinutes?: number
+  contractNature?: 'CDI' | 'CDD' | 'INTERIM' | null
 }
 
 export type WorkHourDayContext = {

frontend/services/employee-leave-summary.ts

@@ -16,3 +16,11 @@ export const updateFractionedDays = async (employeeId: number, fractionedDays: n
   return api.patch(`/employees/${employeeId}/fractioned-days`, body)
 }
 
+export const updatePaidLeaveDays = async (employeeId: number, paidLeaveDays: number, year?: number) => {
+  const api = useApi()
+  const body: Record<string, unknown> = { paidLeaveDays }
+  if (year) body.year = year
+
+  return api.patch(`/employees/${employeeId}/paid-leave-days`, body)
+}
+

frontend/services/employee-week-comments.ts

@@ -0,0 +1,24 @@
+export type EmployeeWeekComment = {
+  id: number
+  weekStartDate: string
+  content: string
+}
+
+export const createWeekComment = async (payload: { employeeId: number; weekStartDate: string; content: string }) => {
+  const api = useApi()
+  return api.post<EmployeeWeekComment>('/employee_week_comments', {
+    employee: `/api/employees/${payload.employeeId}`,
+    weekStartDate: payload.weekStartDate,
+    content: payload.content
+  }, { toastSuccessKey: 'success.weekComment.save', toastErrorKey: 'errors.weekComment.save' })
+}
+
+export const updateWeekComment = async (id: number, content: string) => {
+  const api = useApi()
+  return api.patch<EmployeeWeekComment>(`/employee_week_comments/${id}`, { content }, { toastSuccessKey: 'success.weekComment.save', toastErrorKey: 'errors.weekComment.save' })
+}
+
+export const deleteWeekComment = async (id: number) => {
+  const api = useApi()
+  await api.delete(`/employee_week_comments/${id}`, {}, { toastSuccessKey: 'success.weekComment.delete', toastErrorKey: 'errors.weekComment.delete' })
+}

frontend/services/employees.ts

@@ -35,6 +35,8 @@ export const createEmployee = async (payload: {
   contractStartDate?: string
   contractEndDate?: string | null
   isDriverInput?: boolean
+  workDaysHoursInput?: Record<number, number> | null
+  interimAgencyId?: number | null
 }) => {
   const api = useApi()
   return api.post<Employee>('/employees', {
@@ -45,7 +47,9 @@ export const createEmployee = async (payload: {
     contractNature: payload.contractNature,
     contractStartDate: payload.contractStartDate,
     contractEndDate: payload.contractEndDate ?? null,
-    isDriverInput: payload.isDriverInput ?? false
+    isDriverInput: payload.isDriverInput ?? false,
+    workDaysHoursInput: payload.workDaysHoursInput ?? null,
+    interimAgencyId: payload.interimAgencyId ?? null
   }, {
     toastSuccessKey: 'success.employee.create',
     toastErrorKey: 'errors.employee.create'
@@ -66,6 +70,8 @@ export const updateEmployee = async (
     contractComment?: string | null
     displayOrder?: number
     isDriverInput?: boolean
+    workDaysHoursInput?: Record<number, number> | null
+    interimAgencyId?: number | null
   }
 ) => {
   const api = useApi()
@@ -97,6 +103,12 @@ export const updateEmployee = async (
   if (payload.isDriverInput !== undefined) {
     body.isDriverInput = payload.isDriverInput
   }
+  if (payload.workDaysHoursInput !== undefined) {
+    body.workDaysHoursInput = payload.workDaysHoursInput
+  }
+  if (payload.interimAgencyId !== undefined) {
+    body.interimAgencyId = payload.interimAgencyId
+  }
 
   return api.patch<Employee>(`/employees/${id}`, body, {
     toastSuccessKey: 'success.employee.update',

frontend/services/formations.ts

@@ -0,0 +1,82 @@
+import { $fetch } from 'ofetch'
+import type { Formation } from './dto/formation'
+import { extractItems } from '~/utils/api'
+
+export const listFormations = async (employeeId: number) => {
+  const api = useApi()
+  const data = await api.get<Formation[] | { 'hydra:member'?: Formation[] }>(
+    '/formations',
+    { employee: `/api/employees/${employeeId}` },
+    { toast: false }
+  )
+  return extractItems<Formation>(data)
+}
+
+export const listFormationsByDateRange = async (from: string, to: string) => {
+  const api = useApi()
+  const data = await api.get<Formation[] | { 'hydra:member'?: Formation[] }>(
+    '/formations',
+    {
+      'startDate[before]': to,
+      'endDate[after]': from
+    },
+    { toast: false }
+  )
+  return extractItems<Formation>(data)
+}
+
+export const createFormation = async (data: {
+  employeeId: number
+  startDate: string
+  endDate: string
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.post<Formation>('/formations', {
+    employee: `/api/employees/${data.employeeId}`,
+    startDate: data.startDate,
+    endDate: data.endDate,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.formation.create',
+    toastErrorKey: 'errors.formation.create'
+  })
+}
+
+export const updateFormation = async (id: number, data: {
+  startDate: string
+  endDate: string
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.patch<Formation>(`/formations/${id}`, {
+    startDate: data.startDate,
+    endDate: data.endDate,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.formation.update',
+    toastErrorKey: 'errors.formation.update'
+  })
+}
+
+export const deleteFormation = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/formations/${id}`, {}, {
+    toastSuccessKey: 'success.formation.delete',
+    toastErrorKey: 'errors.formation.delete'
+  })
+}
+
+export const uploadFormationJustificatif = async (baseURL: string, id: number, file: File) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  return $fetch(`${baseURL}/formations/${id}/justificatif`, {
+    method: 'POST',
+    body: formData,
+    credentials: 'include'
+  })
+}
+
+export const getFormationJustificatifUrl = (baseURL: string, id: number): string => {
+  return `${baseURL}/formations/${id}/justificatif`
+}

frontend/services/interim-agencies.ts

@@ -0,0 +1,16 @@
+import { extractItems } from '~/utils/api'
+
+export type InterimAgency = {
+    id: number
+    name: string
+}
+
+export const listInterimAgencies = async (): Promise<InterimAgency[]> => {
+    const api = useApi()
+    const data = await api.get<InterimAgency[] | { 'hydra:member'?: InterimAgency[] }>(
+        '/interim_agencies',
+        {},
+        { toast: false }
+    )
+    return extractItems<InterimAgency>(data)
+}

frontend/services/leave-recap.ts

@@ -0,0 +1,12 @@
+import type { LeaveRecapRow } from './dto/leave-recap'
+import { extractItems } from '~/utils/api'
+
+export const fetchLeaveRecap = async (): Promise<LeaveRecapRow[]> => {
+  const api = useApi()
+  const data = await api.get<LeaveRecapRow[] | { 'hydra:member'?: LeaveRecapRow[] }>(
+    '/leave-recap',
+    {},
+    { toastErrorKey: 'errors.leaveRecap.load' }
+  )
+  return extractItems<LeaveRecapRow>(data)
+}

frontend/services/users.ts

@@ -17,6 +17,7 @@ export const createUser = async (payload: {
   roles: string[]
   employeeId?: number | null
   isLocked?: boolean
+  hasLeaveRecapAccess?: boolean
 }) => {
   const api = useApi()
   return api.post<User>(
@@ -26,7 +27,8 @@ export const createUser = async (payload: {
       plainPassword: payload.plainPassword,
       roles: payload.roles,
       employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null,
-      isLocked: payload.isLocked ?? false
+      isLocked: payload.isLocked ?? false,
+      hasLeaveRecapAccess: payload.hasLeaveRecapAccess ?? false
     },
     {
       toastSuccessKey: 'success.user.create',
@@ -41,13 +43,15 @@ export const updateUser = async (id: number, payload: {
   roles: string[]
   employeeId?: number | null
   isLocked?: boolean
+  hasLeaveRecapAccess?: boolean
 }) => {
   const api = useApi()
   const body: Record<string, unknown> = {
     username: payload.username,
     roles: payload.roles,
     employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null,
-    isLocked: payload.isLocked ?? false
+    isLocked: payload.isLocked ?? false,
+    hasLeaveRecapAccess: payload.hasLeaveRecapAccess ?? false
   }
 
   if (payload.plainPassword) {

frontend/types/documentation.ts

@@ -0,0 +1,21 @@
+export type DocAccessLevel = 'employee' | 'site_manager' | 'admin'
+
+export interface DocBlock {
+  type: 'paragraph' | 'list' | 'note'
+  content: string
+}
+
+export interface DocArticle {
+  id: string
+  title: string
+  requiredLevel: DocAccessLevel
+  blocks: DocBlock[]
+}
+
+export interface DocSection {
+  id: string
+  title: string
+  requiredLevel: DocAccessLevel
+  icon: string
+  articles: DocArticle[]
+}

frontend/utils/contract.ts

@@ -13,9 +13,49 @@ export const showsContractEndDate = (nature: ContractNature) => {
 }
 
 export const requiresContractEndDate = (nature: ContractNature) => {
-  return nature === 'CDD'
+  return nature === 'CDD' || nature === 'INTERIM'
 }
 
 export const isContractNature = (value: string): value is ContractNature => {
   return (CONTRACT_NATURES as readonly string[]).includes(value)
 }
+
+/**
+ * Whether a contract + nature pair requires the per-day schedule (workDaysHours).
+ * Mirrors EmployeeContractPeriodValidator::assertWorkDaysHours on the backend.
+ */
+export const requiresWorkDaysHours = (
+  contract: { trackingMode?: string | null; weeklyHours?: number | null } | null | undefined,
+  nature: ContractNature
+): boolean => {
+  if (!contract) return false
+  if (nature === 'INTERIM') return false
+  if (contract.trackingMode === 'PRESENCE') return false
+  if (contract.weeklyHours === 35 || contract.weeklyHours === 39) return false
+  return true
+}
+
+const DAY_SHORT_LABELS: Record<number, string> = { 1: 'Lun', 2: 'Mar', 3: 'Mer', 4: 'Jeu', 5: 'Ven' }
+
+/**
+ * Compact human-readable summary of a per-day schedule, e.g. "Lun 2h, Jeu 2h".
+ * Returns null when the schedule is empty/unset.
+ */
+export const formatWorkDaysHoursSummary = (
+  workDaysHours: Record<number, number> | null | undefined
+): string | null => {
+  if (!workDaysHours) return null
+  const entries = Object.entries(workDaysHours)
+    .map(([iso, minutes]) => [Number(iso), Number(minutes)] as const)
+    .filter(([iso, minutes]) => iso >= 1 && iso <= 5 && minutes > 0)
+    .sort(([a], [b]) => a - b)
+  if (entries.length === 0) return null
+  return entries
+    .map(([iso, minutes]) => {
+      const h = Math.floor(minutes / 60)
+      const m = minutes % 60
+      const suffix = m === 0 ? `${h}h` : `${h}h${String(m).padStart(2, '0')}`
+      return `${DAY_SHORT_LABELS[iso]} ${suffix}`
+    })
+    .join(', ')
+}

migrations/Version20260402064647.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260402064647 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add paid_leave_days column to employee_leave_balances for forfait N-1 leave payment';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_leave_balances ADD paid_leave_days DOUBLE PRECISION DEFAULT 0 NOT NULL');
+        $this->addSql("COMMENT ON COLUMN employee_leave_balances.paid_leave_days IS 'Jours de conges N-1 payes par la RH (forfait uniquement).'");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_leave_balances DROP paid_leave_days');
+    }
+}

migrations/Version20260413120000.php

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

migrations/Version20260414100000.php

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

migrations/Version20260416100000.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260416100000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add work_days_hours JSON on employee_contract_periods (schedule for non-standard contracts) + seed Ewa and Nadia';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_contract_periods ADD work_days_hours JSON DEFAULT NULL');
+
+        // Seed the two known 4h employees currently in production.
+        // Ewa DALEMBA: Lundi 2h + Jeudi 2h
+        // Nadia GARRAUD: Mardi 2h + Vendredi 2h
+        // Filter on last_name + first_name (not ids) to stay safe across environments,
+        // and only on periods without an already-set schedule to remain idempotent.
+        $this->addSql(
+            "UPDATE employee_contract_periods ecp SET work_days_hours = '{\"1\":120,\"4\":120}' "
+            .'FROM employees e '
+            .'WHERE ecp.employee_id = e.id '
+            ."AND e.last_name = 'DALEMBA' AND e.first_name = 'Ewa' "
+            .'AND ecp.end_date IS NULL AND ecp.work_days_hours IS NULL'
+        );
+        $this->addSql(
+            "UPDATE employee_contract_periods ecp SET work_days_hours = '{\"2\":120,\"5\":120}' "
+            .'FROM employees e '
+            .'WHERE ecp.employee_id = e.id '
+            ."AND e.last_name = 'GARRAUD' AND e.first_name = 'Nadia' "
+            .'AND ecp.end_date IS NULL AND ecp.work_days_hours IS NULL'
+        );
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_contract_periods DROP work_days_hours');
+    }
+}

migrations/Version20260417100000.php

@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260417100000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create employee_week_comments table for per-week admin annotations on the hours weekly view';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE employee_week_comments (id SERIAL NOT NULL, employee_id INT NOT NULL, week_start_date DATE NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, updated_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, PRIMARY KEY(id))');
+        $this->addSql('CREATE UNIQUE INDEX uniq_employee_week_comment ON employee_week_comments (employee_id, week_start_date)');
+        $this->addSql('CREATE INDEX idx_ewc_week_start ON employee_week_comments (week_start_date)');
+        $this->addSql('ALTER TABLE employee_week_comments ADD CONSTRAINT fk_ewc_employee FOREIGN KEY (employee_id) REFERENCES employees(id) ON DELETE CASCADE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('DROP TABLE employee_week_comments');
+    }
+}

migrations/Version20260417120000.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260417120000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create interim_agencies table and add interim_agency_id to employee_contract_periods';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE interim_agencies (id SERIAL PRIMARY KEY, name VARCHAR(150) NOT NULL UNIQUE)');
+        $this->addSql('ALTER TABLE employee_contract_periods ADD interim_agency_id INT DEFAULT NULL');
+        $this->addSql('ALTER TABLE employee_contract_periods ADD CONSTRAINT fk_ecp_interim_agency FOREIGN KEY (interim_agency_id) REFERENCES interim_agencies (id) ON DELETE SET NULL');
+        $this->addSql('CREATE INDEX idx_ecp_interim_agency ON employee_contract_periods (interim_agency_id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_contract_periods DROP CONSTRAINT IF EXISTS fk_ecp_interim_agency');
+        $this->addSql('DROP INDEX IF EXISTS idx_ecp_interim_agency');
+        $this->addSql('ALTER TABLE employee_contract_periods DROP COLUMN interim_agency_id');
+        $this->addSql('DROP TABLE interim_agencies');
+    }
+}

src/ApiResource/EmployeeLeaveRecap.php

@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\ApiResource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\GetCollection;
+use App\State\EmployeeLeaveRecapProvider;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(
+            uriTemplate: '/leave-recap',
+            paginationEnabled: false,
+            security: "is_granted('ROLE_USER')",
+            provider: EmployeeLeaveRecapProvider::class,
+        ),
+    ],
+)]
+final class EmployeeLeaveRecap
+{
+    public int $employeeId           = 0;
+    public string $lastName          = '';
+    public string $firstName         = '';
+    public ?int $siteId              = null;
+    public ?string $siteName         = null;
+    public ?string $siteColor        = null;
+    public ?string $contractName     = null;
+    public int $contractSortKey      = 99;
+    public float $cpN1Remaining      = 0.0;
+    public string $cpN               = '-';
+    public string $acquiredSaturdays = '-';
+    public string $rtt               = '-';
+    public string $cutoffDate        = '';
+}

src/ApiResource/EmployeeLeaveSummary.php

@@ -34,7 +34,14 @@ final class EmployeeLeaveSummary
     public float $previousYearAcquiredDays  = 0.0;
     public float $previousYearTakenDays     = 0.0;
     public float $previousYearRemainingDays = 0.0;
+    public float $previousYearPaidDays      = 0.0;
 
     /** @var array<string, float> YYYY-MM => count (0.5 for half-days) */
     public array $presenceDaysByMonth = [];
+
+    /** Cumul des jours de présence depuis le début de l'année de congé jusqu'à aujourd'hui (forfait). */
+    public float $presenceDaysToToday = 0.0;
+
+    /** Date de mise en service du logiciel (env RTT_START_DATE) — borne minimale pour les sélecteurs d'historique. */
+    public ?string $dataStartDate = null;
 }

src/ApiResource/EmployeePaidLeaveDaysInput.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\ApiResource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Patch;
+use App\State\EmployeePaidLeaveDaysProcessor;
+use App\State\EmployeePaidLeaveDaysProvider;
+
+#[ApiResource(
+    operations: [
+        new Patch(
+            uriTemplate: '/employees/{id}/paid-leave-days',
+            security: "is_granted('ROLE_ADMIN')",
+            provider: EmployeePaidLeaveDaysProvider::class,
+            processor: EmployeePaidLeaveDaysProcessor::class
+        ),
+    ],
+    paginationEnabled: false
+)]
+final class EmployeePaidLeaveDaysInput
+{
+    public float $paidLeaveDays = 0.0;
+    public ?int $year           = null;
+}

src/ApiResource/EmployeeYearlyHoursBulkPrint.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\ApiResource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\QueryParameter;
+use App\State\EmployeeYearlyHoursBulkPrintProvider;
+
+#[ApiResource(
+    operations: [
+        new Get(
+            uriTemplate: '/yearly-hours/print-all',
+            provider: EmployeeYearlyHoursBulkPrintProvider::class,
+            parameters: [
+                new QueryParameter(key: 'year', required: true),
+            ],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+    ]
+)]
+final class EmployeeYearlyHoursBulkPrint {}