chore: bump version to v0.1.37

feat : ajout des frais kms + alignment du style de l'application
chore: bump version to v0.1.36
2026-03-13 15:06:06 +00:00 · 2026-03-13 16:05:54 +01:00 · 2026-03-13 11:24:19 +00:00 · 2026-03-13 12:24:11 +01:00 · 2026-03-13 12:23:55 +01:00 · 2026-03-13 11:11:40 +00:00
42 changed files with 1960 additions and 672 deletions
--- a/.idea/SIRH.iml
+++ b/.idea/SIRH.iml
@@ -154,6 +154,8 @@
      <excludeFolder url="file://$MODULE_DIR$/var" />
      <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/data-fixtures" />
      <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/doctrine-fixtures-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/mime" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/polyfill-intl-idn" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
--- a/.idea/php.xml
+++ b/.idea/php.xml
@@ -155,6 +155,8 @@
      <path value="$PROJECT_DIR$/vendor/symfony/monolog-bundle" />
      <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-fixtures-bundle" />
      <path value="$PROJECT_DIR$/vendor/doctrine/data-fixtures" />
+      <path value="$PROJECT_DIR$/vendor/symfony/mime" />
+      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-intl-idn" />
    </include_path>
  </component>
  <component name="PhpProjectSharedConfiguration" php_language_level="8.4" />
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,75 @@
+# SIRH
+
+## Mandatory Rules
+- Any functional change MUST update `doc/` in the same intervention
+- At the end of every feature addition or functional modification, update this CLAUDE.md to reflect new patterns, rules, or conventions introduced
+
+## Commands
+- `make start` — start Docker stack
+- `make test` — run backend tests (PHPUnit)
+- `make dev-nuxt` — dev frontend
+- `cd frontend && npm run build` — build frontend
+- `php bin/console cache:clear && php bin/console cache:warmup` — clear cache after deploy
+
+## Stack
+- Backend: Symfony + API Platform + Doctrine ORM
+- Frontend: Nuxt 4 + Vue 3 + TypeScript + Tailwind CSS
+
+## Project Structure
+- `src/` — Symfony domain, API resources, state providers/processors, services
+- `frontend/` — Nuxt app (pages, components, composables, services)
+- `migrations/` — Doctrine migrations (always include working `down()`)
+- `doc/` — functional rules and business documentation
+
+## Functional Rules
+- Reference: `doc/functional-rules.md` (mandatory reading before any business logic change)
+- Complementary: `doc/leave-rollover.md`, `doc/rtt-rollover.md`
+
+## Domain Model
+- Contracts: `trackingMode` (TIME=hours, PRESENCE=half-days), `weeklyHours`
+- Contract types: FORFAIT, THIRTY_FIVE_HOURS, THIRTY_NINE_HOURS, INTERIM, CUSTOM
+- Contract nature (per period): CDI, CDD, INTERIM
+- Employee contract history: `employee_contract_periods`, resolved by `EmployeeContractResolver`
+- Absences: stored per day (auto-split), AM/PM/full day, clear corresponding hour slots
+- Absences with `countAsWorkedHours=true`: credit minutes (TIME) or nothing (PRESENCE)
+
+## Validation Rules
+- `isValid` (RH): locks line for everyone (admin can only untoggle validation)
+- `isSiteValid` (site manager): locks for non-admin, admin can still edit
+- Any real modification resets both `isSiteValid=false` and `isValid=false`
+- No-op saves preserve existing validations
+
+## Overtime Rules
+- Contracts <= 35h: +25% from 35h to 43h, +50% beyond
+- Contracts >= 39h: +25% from 39h to 43h, +50% beyond
+- INTERIM: no overtime bonuses, no recovery time
+
+## Frontend Patterns
+
+### Table styling (standard across all pages)
+- Header: `grid border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10`
+- Body wrapper: `border-x border-b border-primary-500 rounded-b-md`
+- Rows: `grid items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500`
+- Page wrapper for scroll: `h-full flex flex-col overflow-hidden`, table container: `min-h-0 overflow-auto rounded-md bg-white`
+
+### Drawer buttons (AppDrawer)
+- Edit mode: `grid grid-cols-2 gap-3` → Supprimer (red, left) + Modifier (primary, right)
+- Create mode: centered `+ Ajouter` button, w-[200px]
+- Exception: Users drawer has NO delete button
+- All "Ajouter" buttons across the app use "+" prefix
+
+### API Platform (backend)
+- Custom operations use Processor (write) / Provider (read)
+- File uploads: `deserialize: false` on Post, access file via RequestStack
+- Upload dir: `%kernel.project_dir%/var/uploads`
+
+## Backend Conventions
+- Prefer explicit DTOs over associative arrays
+- Business rules in backend (providers/processors/services), frontend is display/interaction only
+- Keep backend PHP DTOs aligned with frontend TS DTOs (`frontend/services/dto/*`)
+- Update unit tests when constructor/service signatures change
+
+## Language
+- UI is in French
+- User communicates in French
+- Code (variables, comments) in English
--- a/composer.json
+++ b/composer.json
@@ -24,6 +24,7 @@
        "symfony/flex": "^2",
        "symfony/framework-bundle": "8.0.*",
        "symfony/http-client": "8.0.*",
+        "symfony/mime": "8.0.*",
        "symfony/monolog-bundle": "^4.0",
        "symfony/property-access": "8.0.*",
        "symfony/property-info": "8.0.*",
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "b540b6cb25ef55c5eebccb57c76da584",
+    "content-hash": "bdc04f5145303388bac52809ea3f4b05",
    "packages": [
        {
            "name": "api-platform/doctrine-common",
@@ -5374,6 +5374,92 @@
            ],
            "time": "2026-01-28T10:46:31+00:00"
        },
+        {
+            "name": "symfony/mime",
+            "version": "v8.0.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/mime.git",
+                "reference": "5d26d1958aeeba2ace8cc64a3a93d4f5d8f8022b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/5d26d1958aeeba2ace8cc64a3a93d4f5d8f8022b",
+                "reference": "5d26d1958aeeba2ace8cc64a3a93d4f5d8f8022b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.4",
+                "symfony/polyfill-intl-idn": "^1.10",
+                "symfony/polyfill-mbstring": "^1.0"
+            },
+            "conflict": {
+                "egulias/email-validator": "~3.0.0",
+                "phpdocumentor/reflection-docblock": "<5.2|>=7",
+                "phpdocumentor/type-resolver": "<1.5.1"
+            },
+            "require-dev": {
+                "egulias/email-validator": "^2.1.10|^3.1|^4",
+                "league/html-to-markdown": "^5.0",
+                "phpdocumentor/reflection-docblock": "^5.2|^6.0",
+                "symfony/dependency-injection": "^7.4|^8.0",
+                "symfony/process": "^7.4|^8.0",
+                "symfony/property-access": "^7.4|^8.0",
+                "symfony/property-info": "^7.4|^8.0",
+                "symfony/serializer": "^7.4|^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Mime\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Allows manipulating MIME messages",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "mime",
+                "mime-type"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/mime/tree/v8.0.7"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-03-06T13:17:40+00:00"
+        },
        {
            "name": "symfony/monolog-bridge",
            "version": "v8.0.4",
@@ -5685,6 +5771,93 @@
            ],
            "time": "2025-06-27T09:58:17+00:00"
        },
+        {
+            "name": "symfony/polyfill-intl-idn",
+            "version": "v1.33.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-idn.git",
+                "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-idn/zipball/9614ac4d8061dc257ecc64cba1b140873dce8ad3",
+                "reference": "9614ac4d8061dc257ecc64cba1b140873dce8ad3",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2",
+                "symfony/polyfill-intl-normalizer": "^1.10"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/polyfill",
+                    "name": "symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Idn\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Laurent Bassin",
+                    "email": "laurent@bassin.info"
+                },
+                {
+                    "name": "Trevor Rowbotham",
+                    "email": "trevor.rowbotham@pm.me"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "idn",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.33.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-10T14:38:51+00:00"
+        },
        {
            "name": "symfony/polyfill-intl-normalizer",
            "version": "v1.33.0",
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.32'
+    app.version: '0.1.37'
--- a/frontend/components/AbsenceFormDrawer.vue
+++ b/frontend/components/AbsenceFormDrawer.vue
@@ -93,28 +93,29 @@
                />
            </div>

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

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

    <div
      v-if="isOpen"
-      class="absolute left-0 top-full z-20 mt-2 max-h-80 w-full overflow-auto rounded-md border border-neutral-200 bg-white p-3 shadow-lg"
+      class="z-50 absolute left-0 top-full z-20 mt-2 max-h-80 w-full overflow-auto rounded-md border border-neutral-200 bg-white p-3 shadow-lg"
    >
      <div class="flex flex-col gap-2">
        <label
--- a/frontend/components/employees/ContractTab.vue
+++ b/frontend/components/employees/ContractTab.vue
@@ -1,7 +1,7 @@
 <template>
  <section class="mt-8">
-    <div class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-4 border-b border-neutral-200 bg-neutral-50 px-6 py-3 text-md font-semibold text-neutral-700">
+    <div class="overflow-hidden bg-white">
+      <div class="grid grid-cols-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
        <p>Contrat</p>
        <p>Heures</p>
        <p>Date de début</p>
@@ -10,11 +10,11 @@
      <div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
        Aucun historique de contrat.
      </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
        <div
          v-for="item in contractHistory"
          :key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
-          class="grid grid-cols-4 border-b border-neutral-100 px-6 py-3 text-md text-primary-500 last:border-b-0"
+          class="grid grid-cols-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
        >
          <p>{{ contractNatureLabel(item.contractNature) }}</p>
          <p>{{ contractHistoryLabel(item) }}</p>
@@ -133,21 +133,13 @@
          </label>
        </div>

-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            :disabled="isContractSubmitting"
-            @click="onUpdateContractDrawerOpen(false)"
-          >
-            Annuler
-          </button>
+        <div class="flex justify-center pt-2">
          <button
            type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
            :disabled="isContractSubmitting || !isContractEndDateValid"
          >
-            Enregistrer
+            Modifier
          </button>
        </div>
      </form>
@@ -248,21 +240,13 @@
          <input id="create-contract-end-date" v-model="createContractForm.endDate" type="date" :class="createContractEndDateFieldClass" />
        </div>

-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            :disabled="isCreateContractSubmitting"
-            @click="onUpdateCreateContractDrawerOpen(false)"
-          >
-            Annuler
-          </button>
+        <div class="flex justify-center pt-2">
          <button
            type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
            :disabled="isCreateContractSubmitting || !isCreateContractFormValid"
          >
-            Enregistrer
+            + Ajouter
          </button>
        </div>
      </form>
--- a/frontend/components/employees/LeaveTab.vue
+++ b/frontend/components/employees/LeaveTab.vue
@@ -1,35 +1,54 @@
 <template>
    <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
-        <div class="grid grid-cols-4 rounded-md bg-primary-500 text-white text-[20]">
-            <div class="flex flex-col gap-2 jutify-center items-center border-r-4 border-white py-3">
-                <p><strong class="uppercase font-semibold">Année acquis :</strong> {{
-                        formatCount(summary?.acquiredDays)
-                    }} Jours</p>
-                <p><strong class="uppercase font-semibold">Reste à prendre :</strong>
-                    {{ formatCount(summary?.remainingDays) }} Jours</p>
-            </div>
-            <div class="flex flex-col gap-2 jutify-center items-center border-r-4 border-white py-3">
-                <p><span class="uppercase font-semibold">Samedi acquis :</span>
-                    {{ formatCount(summary?.acquiredSaturdays) }} Jours</p>
-                <p><span class="uppercase font-semibold">Reste à prendre :</span>
-                    {{ formatCount(summary?.remainingSaturdays) }} Jours</p>
-            </div>
-            <div class="flex flex-col gap-2 jutify-center items-center border-r-4 border-white py-3">
-                <p><span class="uppercase font-semibold">Fractionné acquis : </span>{{ formatCount(summary?.fractionedDays) }} Jours</p>
+        <div class="grid grid-cols-4 rounded-md bg-tertiary-500 text-primary-500 text-[18px] border border-primary-500">
+            <p class="col-start-1 p-[10px] border-b border-b-black"><strong class="uppercase font-semibold">Année acquis :</strong> {{
+                    formatCount(summary?.acquiredDays)
+                }} Jours
+            </p>
+            <p class="col-start-2 p-[10px] border-b border-b-black"><strong class="uppercase font-semibold">Pris :</strong>
+                {{ formatCount(isForfaitRule ? currentYearTakenDays : summary?.takenDays) }} Jours
+            </p>
+            <p class="col-start-3 p-[10px] border-b border-b-black"><strong class="uppercase font-semibold">Reste à prendre :</strong>
+                {{ formatCount(summary?.remainingDays) }} Jours
+            </p>
+            <p class="col-start-4 p-[10px] border-b border-b-black"><strong class="uppercase font-semibold">En cours d'acquisition :</strong>
+                {{ formatCount(summary?.accruingDays) }} Jours
+            </p>
+            <p v-if="!isForfaitRule" class="col-start-1 p-[10px]"><span class="uppercase font-semibold">Samedi acquis :</span>
+                {{ formatCount(summary?.acquiredSaturdays) }} Jours
+            </p>
+            <p v-else class="col-start-1 p-[10px]"><span class="uppercase font-semibold">Année N-1 acquis :</span>
+                {{ formatCount(summary?.previousYearAcquiredDays) }} Jours
+            </p>
+            <p v-if="!isForfaitRule" class="col-start-2 p-[10px]"><span class="uppercase font-semibold">Pris :</span>
+                {{ formatCount(summary?.takenSaturdays) }} Jours
+            </p>
+            <p v-if="!isForfaitRule" class="col-start-3 p-[10px]"><span class="uppercase font-semibold">Reste à prendre :</span>
+                {{ formatCount(summary?.remainingSaturdays) }} Jours
+            </p>
+            <p v-else class="col-start-2 p-[10px]"><span class="uppercase font-semibold">Pris :</span>
+                {{ formatCount(summary?.previousYearTakenDays) }} Jours
+            </p>
+            <p v-if="isForfaitRule" class="col-start-3 p-[10px]"><span class="uppercase font-semibold">Reste à prendre :</span>
+                {{ formatCount(summary?.previousYearRemainingDays) }} Jours
+            </p>
+            <div v-if="!isForfaitRule" class="col-start-4 p-[10px] flex gap-7 items-center">
+                <div>
+                    <span class="uppercase font-semibold">Fractionné acquis : </span>
+                    <span>{{ formatCount(summary?.fractionedDays) }} Jours</span>
+                </div>
                <button
-                    class="flex justify-center items-center gap-2 bg-white text-primary-500 font-bold w-[150px] rounded-md py-[1px]"
+                    class="flex items-center"
                    @click="openFractionedDrawer"
                >
-                    {{ summary?.fractionedDays === 0 ? '+ Ajouter' : 'Modifier' }}</button>
-            </div>
-            <div class="flex flex-col jutify-center gap-2 items-center py-3">
-                <p><span class="uppercase font-semibold">En cours d'acquisition :</span></p>
-                <p>{{ formatCount(summary?.accruingDays) }} Jours</p>
+                    <Icon name="mdi:edit-box" size="24"/>
+                </button>
            </div>
        </div>
        <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
            <div class="grid grid-cols-4 gap-10">
-                <div v-for="month in months" :key="month.label" class="rounded-md bg-tertiary-500 text-primary-500 flex flex-col justify-between">
+                <div v-for="month in months" :key="month.label"
+                     class="rounded-md bg-tertiary-500 text-primary-500 flex flex-col justify-between">
                    <div class="flex justify-center rounded-t-md bg-primary-500 py-1 font-bold uppercase text-white">
                        {{ month.label }}
                    </div>
@@ -54,7 +73,9 @@
                            </div>
                        </template>
                    </div>
-                    <div class="px-2 py-2 text-center border-t border-primary-500">Jours de présence : {{ summary?.presenceDaysByMonth?.[month.monthKey] ?? 0 }}</div>
+                    <div class="px-2 py-2 text-center border-t border-primary-500">Jours de présence :
+                        {{ summary?.presenceDaysByMonth?.[month.monthKey] ?? 0 }}
+                    </div>
                </div>
            </div>
        </div>
@@ -118,7 +139,7 @@ const emit = defineEmits<{
 }>()

 const isFractionedDrawerOpen = ref(false)
-const fractionedForm = reactive({ days: 0 })
+const fractionedForm = reactive({days: 0})

 const openFractionedDrawer = () => {
    fractionedForm.days = props.summary?.fractionedDays ?? 0
@@ -151,6 +172,11 @@ const weekDayLabels = ['L', 'M', 'M', 'J', 'V', 'S', 'D'] as const

 const isForfaitRule = computed(() => props.summary?.ruleCode === 'FORFAIT_218')

+const currentYearTakenDays = computed(() => {
+    if (!props.summary) return null
+    return props.summary.takenDays - (props.summary.previousYearTakenDays ?? 0)
+})
+
 const displayedYear = computed(() => {
    if (props.summary?.year) return props.summary.year
    const today = new Date()
@@ -282,15 +308,15 @@ const getDayStyle = (day: { leave: DayLeaveState | null; isHoliday: boolean }) =
    if (day.leave) {
        const color = day.leave.colors[0] ?? '#222783'
        if (day.leave.am && day.leave.pm) {
-            return { backgroundColor: color }
+            return {backgroundColor: color}
        }
        const colorFaded = `${color}60`
        const backgroundImage = day.leave.am
            ? `linear-gradient(180deg, ${color} 0 50%, ${colorFaded} 50% 100%)`
            : `linear-gradient(180deg, ${colorFaded} 0 50%, ${color} 50% 100%)`
-        return { backgroundImage, backgroundColor: 'transparent' }
+        return {backgroundImage, backgroundColor: 'transparent'}
    }
-    if (day.isHoliday) return { backgroundColor: 'rgb(179, 229, 252)' }
+    if (day.isHoliday) return {backgroundColor: 'rgb(179, 229, 252)'}
    return undefined
 }

--- a/frontend/components/employees/MileageTab.vue
+++ b/frontend/components/employees/MileageTab.vue
@@ -0,0 +1,268 @@
+<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>Mois</p>
+                <p>Nombre de Km</p>
+                <p>Commentaire</p>
+                <p>Justificatif</p>
+            </div>
+            <div v-if="allowances.length === 0" class="px-6 py-4 text-[20px] font-bold text-primary-500 border-x border-b border-primary-500 rounded-b-md">
+                Aucun frais kilométrique.
+            </div>
+            <div v-else class="border-x border-b border-primary-500 rounded-b-md">
+                <div
+                    v-for="item in allowances"
+                    :key="item.id"
+                    class="grid grid-cols-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>{{ formatMonth(item.month) }}</p>
+                    <p>{{ item.kilometers }}</p>
+                    <p>{{ item.comment ?? '-' }}</p>
+                    <p>
+                        <a
+                            v-if="item.receiptPath"
+                            :href="getReceiptUrl(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"/>
+                            <span>{{ item.receiptName ?? 'Télécharger' }}</span>
+                        </a>
+                        <span v-else>-</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center mb-4 mt-8">
+            <button
+                type="button"
+                class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md text-white disabled:cursor-not-allowed disabled:opacity-50"
+                @click="onOpenCreateDrawer"
+            >
+                + Ajouter
+            </button>
+        </div>
+
+
+        <AppDrawer v-model="isDrawerOpen" title="Frais Kms">
+            <form class="space-y-4" @submit.prevent="onSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="mileage-month"
+                        v-model="form.month"
+                        type="month"
+                        class="capitalize mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-kilometers">
+                        Nombre de Km <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="mileage-kilometers"
+                        v-model.number="form.kilometers"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-receipt">
+                        Justificatif
+                    </label>
+                    <div v-if="isEditing && editingItem?.receiptName" class="mt-1 text-sm text-neutral-500">
+                        Fichier actuel : {{ editingItem.receiptName }}
+                    </div>
+                    <input
+                        id="mileage-receipt"
+                        ref="fileInput"
+                        type="file"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 file:mr-3 file:rounded file:border-0 file:bg-primary-500 file:px-3 file:py-1 file:text-sm file:text-white"
+                        @change="onFileChange"
+                    />
+                    <p v-if="fileError" class="mt-1 text-sm text-red-600">{{ fileError }}</p>
+                    <p v-else class="mt-1 text-sm text-neutral-500">Fichier au format pdf</p>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-comment">
+                        Commentaire
+                    </label>
+                    <textarea
+                        id="mileage-comment"
+                        v-model="form.comment"
+                        rows="3"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                        placeholder="Commentaire..."
+                    />
+                </div>
+
+                <div v-if="isEditing" class="grid grid-cols-2 gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+                        @click="onDelete"
+                    >
+                        Supprimer
+                    </button>
+                    <button
+                        type="submit"
+                        class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        Modifier
+                    </button>
+                </div>
+                <div v-else class="flex justify-center pt-2">
+                    <button
+                        type="submit"
+                        class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="!isFormValid"
+                    >
+                        + Ajouter
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type {MileageAllowance} from '~/services/dto/mileage-allowance'
+import {getReceiptUrl} from '~/services/mileage-allowances'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    allowances: MileageAllowance[]
+    apiBase: string
+}>()
+
+const emit = defineEmits<{
+    (event: 'create', data: { month: string; kilometers: number; comment?: string }, file?: File): void
+    (event: 'update', id: number, data: { month: string; kilometers: number; comment?: string }, file?: File): void
+    (event: 'delete', id: number): void
+}>()
+
+const isDrawerOpen = ref(false)
+const isEditing = ref(false)
+const editingItem = ref<MileageAllowance | null>(null)
+const selectedFile = ref<File | undefined>(undefined)
+const fileInput = ref<HTMLInputElement | null>(null)
+const fileError = ref('')
+
+const currentYearMonth = () => {
+    const now = new Date()
+    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+}
+
+const form = reactive({
+    month: currentYearMonth(),
+    kilometers: 0,
+    comment: ''
+})
+
+const isFormValid = computed(() => {
+    return form.month && form.kilometers > 0 && !fileError.value
+})
+
+const monthLabels: Record<number, string> = {
+    1: 'Janvier',
+    2: 'Février',
+    3: 'Mars',
+    4: 'Avril',
+    5: 'Mai',
+    6: 'Juin',
+    7: 'Juillet',
+    8: 'Août',
+    9: 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre'
+}
+
+const formatMonth = (dateStr: string): string => {
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return dateStr
+    const month = date.getMonth() + 1
+    const year = date.getFullYear()
+    return `${monthLabels[month]} ${year}`
+}
+
+const resetForm = () => {
+    form.month = currentYearMonth()
+    form.kilometers = 0
+    form.comment = ''
+    selectedFile.value = undefined
+    fileError.value = ''
+    if (fileInput.value) {
+        fileInput.value.value = ''
+    }
+}
+
+const onOpenCreateDrawer = () => {
+    isEditing.value = false
+    editingItem.value = null
+    resetForm()
+    isDrawerOpen.value = true
+}
+
+const onOpenEditDrawer = (item: MileageAllowance) => {
+    isEditing.value = true
+    editingItem.value = item
+    // Extract YYYY-MM from YYYY-MM-DD
+    form.month = item.month.substring(0, 7)
+    form.kilometers = item.kilometers
+    form.comment = item.comment ?? ''
+    selectedFile.value = undefined
+    if (fileInput.value) {
+        fileInput.value.value = ''
+    }
+    isDrawerOpen.value = true
+}
+
+const onFileChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (file && file.type !== 'application/pdf') {
+        fileError.value = 'Seuls les fichiers PDF sont acceptés.'
+        selectedFile.value = undefined
+        target.value = ''
+        return
+    }
+    fileError.value = ''
+    selectedFile.value = file ?? undefined
+}
+
+const onSubmit = () => {
+    const data = {
+        month: `${form.month}-01`,
+        kilometers: form.kilometers,
+        comment: form.comment || undefined
+    }
+
+    if (isEditing.value && editingItem.value) {
+        emit('update', editingItem.value.id, data, selectedFile.value)
+    } else {
+        emit('create', data, selectedFile.value)
+    }
+    isDrawerOpen.value = false
+}
+
+const onDelete = () => {
+    if (!editingItem.value) return
+    const ok = window.confirm('Supprimer ce frais kilométrique ?')
+    if (!ok) return
+    emit('delete', editingItem.value.id)
+    isDrawerOpen.value = false
+}
+</script>
--- a/frontend/components/employees/RttTab.vue
+++ b/frontend/components/employees/RttTab.vue
@@ -22,7 +22,7 @@
        </button>
      </div>
      <p class="text-[16px]">
-        <span class="font-semibold">RTT À LA DATE DU JOUR :</span>
+        <span class="font-bold">RTT À LA DATE DU JOUR :</span>
        {{ formatMinutes(summary?.availableMinutes ?? 0) }}
      </p>
        <div class="flex justify-center">
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
+    <div class="bg-white overflow-hidden flex min-h-0 flex-col">
        <div class="overflow-y-auto min-h-0">
            <div
-                class="grid w-full min-w-0 gap-1 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-sm font-semibold text-neutral-700 sticky top-0 z-10"
+                class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
                :style="{ gridTemplateColumns: dayGridCols }"
            >
                <span>Nom</span>
@@ -42,10 +42,11 @@
                <span v-if="!isAdmin">RH  <Icon name="mdi:check-bold" class="ml-1"/></span>
            </div>

+            <div class="border-x border-b border-primary-500 rounded-b-md">
            <div
                v-for="employee in employees"
                :key="employee.id"
-                class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0"
+                class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
                :style="{ gridTemplateColumns: dayGridCols }"
            >
                <div class="text-neutral-900 min-w-0">
@@ -142,19 +143,19 @@
                        :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
                    />
                </div>
-                <div class="pl-2 text-sm font-semibold text-neutral-700">
+                <div class="pl-2 text-sm font-semibold">
                    <div v-if="isTimeTracking(employee)">{{
                            formatMinutes(getRowMetrics(employee.id).dayMinutes)
                        }}
                    </div>
                </div>
-                <div class="text-sm font-semibold text-neutral-700">
+                <div class="text-sm font-semibold">
                    <div v-if="isTimeTracking(employee)">{{
                            formatMinutes(getRowMetrics(employee.id).nightMinutes)
                        }}
                    </div>
                </div>
-                <div class="text-sm font-semibold text-neutral-700">
+                <div class="text-sm font-semibold">
                    <div v-if="isTimeTracking(employee)">{{
                            formatMinutes(getRowMetrics(employee.id).totalMinutes)
                        }}
@@ -186,6 +187,7 @@
                    <span v-else class="text-xs text-neutral-500">-</span>
                </div>
            </div>
+            </div>
        </div>
    </div>
 </template>
--- a/frontend/components/hours/HoursWeekView.vue
+++ b/frontend/components/hours/HoursWeekView.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
+  <div class="bg-white overflow-hidden flex min-h-0 flex-col">
    <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
    <div v-else class="overflow-y-auto min-h-0">
      <div
-        class="grid w-full min-w-0 gap-1 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-sm font-semibold text-neutral-700 sticky top-0 z-10"
+        class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
        :style="{ gridTemplateColumns: weekGridCols }"
      >
        <span>Nom</span>
@@ -16,10 +16,11 @@
        <span>Total <br>récup.</span>
      </div>

+      <div class="border-x border-b border-primary-500 rounded-b-md">
      <div
        v-for="row in weeklySummary?.rows ?? []"
        :key="row.employeeId"
-        class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0 hover:bg-tertiary-500"
+        class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
        :style="{ gridTemplateColumns: weekGridCols }"
      >
        <div class="text-neutral-900 min-w-0">
@@ -68,6 +69,7 @@
          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
        </div>
      </div>
+      </div>
    </div>
  </div>
 </template>
--- a/frontend/composables/useEmployeeContract.ts
+++ b/frontend/composables/useEmployeeContract.ts
@@ -0,0 +1,344 @@
+import type { Ref } from 'vue'
+import type { Contract } from '~/services/dto/contract'
+import type { ContractHistoryItem, Employee } from '~/services/dto/employee'
+import { listContracts } from '~/services/contracts'
+import { updateEmployee } from '~/services/employees'
+import { createSuspension, updateSuspension } from '~/services/contractSuspensions'
+import { formatNullableYmdToFr, getTodayYmd, shiftYmd } from '~/utils/date'
+import { contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate } from '~/utils/contract'
+
+type SuspensionForm = {
+  id: number | null
+  startDate: string
+  endDate: string
+  comment: string
+}
+
+export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const toast = useToast()
+  const contracts = ref<Contract[]>([])
+  const isContractDrawerOpen = ref(false)
+  const isContractSubmitting = ref(false)
+  const isCreateContractDrawerOpen = ref(false)
+  const isCreateContractSubmitting = ref(false)
+  const suspensionForms = ref<SuspensionForm[]>([])
+  const isSuspensionSubmitting = ref(false)
+
+  const contractForm = reactive({
+    contractId: '' as number | '',
+    contractName: '',
+    weeklyHours: null as number | null,
+    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
+    startDate: '',
+    endDate: '',
+    paidLeaveSettled: false,
+    comment: ''
+  })
+
+  const validationTouched = reactive({
+    endDate: false
+  })
+
+  const createContractForm = reactive({
+    contractId: '' as number | '',
+    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
+    startDate: '',
+    endDate: ''
+  })
+
+  const createValidationTouched = reactive({
+    contractId: false,
+    contractNature: false,
+    startDate: false,
+    endDate: false
+  })
+
+  const contractHistory = computed(() => employee.value?.contractHistory ?? [])
+
+  const formatDate = (value?: string | null) => formatNullableYmdToFr(value)
+
+  const contractHistoryLabel = (item: ContractHistoryItem) => {
+    if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
+      return `${item.weeklyHours} heures`
+    }
+    return item.contractName ?? '-'
+  }
+
+  const currentActiveContractPeriod = computed(() => {
+    const today = getTodayYmd()
+    const history = employee.value?.contractHistory ?? []
+    return history.find((item) => item.startDate <= today && (!item.endDate || item.endDate >= today)) ?? null
+  })
+
+  const currentActiveContractPeriodId = computed<number | null>(() => {
+    const period = currentActiveContractPeriod.value
+    return period?.periodId ?? null
+  })
+
+  const canCloseCurrentContract = computed(() => {
+    const active = currentActiveContractPeriod.value
+    if (!active) return false
+    if (!active.endDate) return true
+    return active.endDate > getTodayYmd()
+  })
+
+  const canCreateContract = computed(() => {
+    const active = currentActiveContractPeriod.value
+    if (!active) return true
+    return !!active.endDate
+  })
+
+  const isContractEndDateValid = computed(() => contractForm.endDate !== '')
+  const showContractEndDateError = computed(() => validationTouched.endDate && !isContractEndDateValid.value)
+
+  const showsCreateContractEndDate = computed(() => showsContractEndDate(createContractForm.contractNature))
+  const requiresCreateContractEndDate = computed(() => requiresContractEndDate(createContractForm.contractNature))
+  const isCreateContractValid = computed(() => createContractForm.contractId !== '')
+  const isCreateContractNatureValid = computed(() => isContractNature(createContractForm.contractNature))
+  const isCreateContractStartDateValid = computed(() => createContractForm.startDate !== '')
+  const isCreateContractEndDateValid = computed(() => !requiresCreateContractEndDate.value || createContractForm.endDate !== '')
+  const isCreateContractFormValid = computed(() =>
+    isCreateContractValid.value &&
+    isCreateContractNatureValid.value &&
+    isCreateContractStartDateValid.value &&
+    isCreateContractEndDateValid.value
+  )
+
+  const baseInputClass =
+    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
+  const readonlyFieldClass = `${baseInputClass} border-neutral-300 bg-neutral-100 text-neutral-700`
+  const contractEndDateFieldClass = computed(() => showContractEndDateError.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
+  const baseSelectClass = 'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+  const createContractFieldClass = computed(() => createValidationTouched.contractId && !isCreateContractValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
+  const createContractNatureFieldClass = computed(() => createValidationTouched.contractNature && !isCreateContractNatureValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
+  const createContractStartDateFieldClass = computed(() => createValidationTouched.startDate && !isCreateContractStartDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
+  const createContractEndDateFieldClass = computed(() => createValidationTouched.endDate && !isCreateContractEndDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
+  const closeContractWorkedHoursLabel = computed(() => {
+    if (contractForm.weeklyHours !== null && contractForm.weeklyHours !== undefined) return `${contractForm.weeklyHours} heures`
+    return contractForm.contractName || '-'
+  })
+
+  const resetContractValidation = () => {
+    validationTouched.endDate = false
+  }
+
+  const hydrateSuspensionForms = () => {
+    const current = employee.value?.currentSuspensions ?? []
+    suspensionForms.value = current.map(s => ({
+      id: s.id,
+      startDate: s.startDate,
+      endDate: s.endDate ?? '',
+      comment: s.comment ?? ''
+    }))
+  }
+
+  const hydrateContractFormFromCurrent = () => {
+    const current = employee.value
+    const active = currentActiveContractPeriod.value
+    if (!current || !active) return
+
+    contractForm.contractId = active.contractId ?? current.contract?.id ?? ''
+    contractForm.contractName = active.contractName ?? current.contract?.name ?? ''
+    contractForm.weeklyHours = active.weeklyHours ?? current.contract?.weeklyHours ?? null
+    contractForm.contractNature = active.contractNature
+    contractForm.startDate = active.startDate
+    contractForm.endDate = getTodayYmd()
+    contractForm.paidLeaveSettled = false
+    contractForm.comment = ''
+  }
+
+  const openCloseContractDrawer = () => {
+    if (!employee.value || !canCloseCurrentContract.value) return
+    hydrateContractFormFromCurrent()
+    resetContractValidation()
+    hydrateSuspensionForms()
+    isContractDrawerOpen.value = true
+  }
+
+  const setContractDrawerOpen = (open: boolean) => {
+    isContractDrawerOpen.value = open
+  }
+
+  const resetCreateValidation = () => {
+    createValidationTouched.contractId = false
+    createValidationTouched.contractNature = false
+    createValidationTouched.startDate = false
+    createValidationTouched.endDate = false
+  }
+
+  const openCreateContractDrawer = () => {
+    if (!employee.value || !canCreateContract.value) return
+    createContractForm.contractId = ''
+    createContractForm.contractNature = 'CDI'
+    createContractForm.endDate = ''
+    createContractForm.startDate = currentActiveContractPeriod.value?.endDate
+      ? (shiftYmd(currentActiveContractPeriod.value.endDate, 1) ?? currentActiveContractPeriod.value.endDate)
+      : getTodayYmd()
+    resetCreateValidation()
+    isCreateContractDrawerOpen.value = true
+  }
+
+  const setCreateContractDrawerOpen = (open: boolean) => {
+    isCreateContractDrawerOpen.value = open
+  }
+
+  const submitContractUpdate = async () => {
+    if (!employee.value || isContractSubmitting.value || !currentActiveContractPeriod.value) return
+
+    validationTouched.endDate = true
+    if (!isContractEndDateValid.value) return
+
+    if (contractForm.endDate < currentActiveContractPeriod.value.startDate) {
+      toast.error({
+        title: 'Erreur',
+        message: `La date de fin doit être postérieure au ${formatDate(currentActiveContractPeriod.value.startDate)}.`
+      })
+      return
+    }
+
+    isContractSubmitting.value = true
+    try {
+      await updateEmployee(employee.value.id, {
+        firstName: employee.value.firstName,
+        lastName: employee.value.lastName,
+        siteId: employee.value.site?.id ?? null,
+        contractId: Number(contractForm.contractId),
+        contractEndDate: contractForm.endDate || null,
+        contractPaidLeaveSettled: contractForm.paidLeaveSettled,
+        contractComment: contractForm.comment || null
+      })
+
+      isContractDrawerOpen.value = false
+      await reloadEmployee()
+    } finally {
+      isContractSubmitting.value = false
+    }
+  }
+
+  const submitCreateContract = async () => {
+    if (!employee.value || isCreateContractSubmitting.value) return
+
+    createValidationTouched.contractId = true
+    createValidationTouched.contractNature = true
+    createValidationTouched.startDate = true
+    createValidationTouched.endDate = true
+    if (!isCreateContractFormValid.value) return
+
+    if (currentActiveContractPeriod.value?.endDate) {
+      const minStartDate = shiftYmd(currentActiveContractPeriod.value.endDate, 1) ?? currentActiveContractPeriod.value.endDate
+      if (createContractForm.startDate < minStartDate) {
+        toast.error({
+          title: 'Erreur',
+          message: `La date de début doit être au moins le ${formatDate(minStartDate)}.`
+        })
+        return
+      }
+    }
+
+    isCreateContractSubmitting.value = true
+    try {
+      await updateEmployee(employee.value.id, {
+        firstName: employee.value.firstName,
+        lastName: employee.value.lastName,
+        siteId: employee.value.site?.id ?? null,
+        contractId: Number(createContractForm.contractId),
+        contractNature: createContractForm.contractNature,
+        contractStartDate: createContractForm.startDate,
+        contractEndDate: createContractForm.endDate || null
+      })
+      isCreateContractDrawerOpen.value = false
+      await reloadEmployee()
+    } finally {
+      isCreateContractSubmitting.value = false
+    }
+  }
+
+  const submitSuspension = async (index: number) => {
+    const form = suspensionForms.value[index]
+    if (!form || !form.startDate) return
+
+    const periodId = currentActiveContractPeriodId.value
+    if (!periodId) return
+
+    isSuspensionSubmitting.value = true
+    try {
+      if (form.id) {
+        await updateSuspension(form.id, {
+          startDate: form.startDate,
+          endDate: form.endDate || null,
+          comment: form.comment || null
+        })
+      } else {
+        await createSuspension({
+          contractPeriodId: periodId,
+          startDate: form.startDate,
+          endDate: form.endDate || null,
+          comment: form.comment || null
+        })
+      }
+      await reloadEmployee()
+      hydrateSuspensionForms()
+    } finally {
+      isSuspensionSubmitting.value = false
+    }
+  }
+
+  const addSuspensionForm = () => {
+    suspensionForms.value.push({
+      id: null,
+      startDate: '',
+      endDate: '',
+      comment: ''
+    })
+  }
+
+  const loadContracts = async () => {
+    contracts.value = await listContracts()
+  }
+
+  watch(showsCreateContractEndDate, (shows) => {
+    if (!shows) {
+      createContractForm.endDate = ''
+    }
+  })
+
+  return {
+    contracts,
+    contractHistory,
+    contractForm,
+    createContractForm,
+    isContractDrawerOpen,
+    isContractSubmitting,
+    isCreateContractDrawerOpen,
+    isCreateContractSubmitting,
+    canCloseCurrentContract,
+    canCreateContract,
+    readonlyFieldClass,
+    closeContractWorkedHoursLabel,
+    contractEndDateFieldClass,
+    showContractEndDateError,
+    isContractEndDateValid,
+    createContractNatureFieldClass,
+    createContractFieldClass,
+    createContractStartDateFieldClass,
+    showsCreateContractEndDate,
+    requiresCreateContractEndDate,
+    createContractEndDateFieldClass,
+    isCreateContractFormValid,
+    contractNatureLabel,
+    contractHistoryLabel,
+    formatDate,
+    openCloseContractDrawer,
+    openCreateContractDrawer,
+    setContractDrawerOpen,
+    setCreateContractDrawerOpen,
+    submitContractUpdate,
+    submitCreateContract,
+    suspensionForms,
+    isSuspensionSubmitting,
+    submitSuspension,
+    addSuspensionForm,
+    currentActiveContractPeriodId,
+    loadContracts
+  }
+}
--- a/frontend/composables/useEmployeeDetailPage.ts
+++ b/frontend/composables/useEmployeeDetailPage.ts
@@ -1,75 +1,13 @@
-import type { Contract } from '~/services/dto/contract'
-import type { Absence } from '~/services/dto/absence'
-import type { EmployeeLeaveSummary } from '~/services/dto/employee-leave-summary'
-import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
-import type { ContractHistoryItem, Employee } from '~/services/dto/employee'
+import type { Employee } from '~/services/dto/employee'
 import { CONTRACT_TYPES } from '~/services/dto/contract'
-import { listAbsences } from '~/services/absences'
-import { listContracts } from '~/services/contracts'
-import { getEmployeeLeaveSummary, updateFractionedDays } from '~/services/employee-leave-summary'
-import { getEmployeeRttSummary, createRttPayment } from '~/services/employee-rtt-summary'
-import { getEmployee, updateEmployee } from '~/services/employees'
-import { listPublicHolidays } from '~/services/public-holidays'
-import { formatNullableYmdToFr, getTodayYmd, shiftYmd } from '~/utils/date'
-import { contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate } from '~/utils/contract'
-import { createSuspension, updateSuspension } from '~/services/contractSuspensions'
+import { getEmployee } from '~/services/employees'

 export const useEmployeeDetailPage = () => {
  const route = useRoute()
-  const toast = useToast()
  const employee = ref<Employee | null>(null)
  const isLoading = ref(false)
-  const activeTab = ref<'contract' | 'leave' | 'rtt'>('contract')
-  const contracts = ref<Contract[]>([])
-  const employeeAbsences = ref<Absence[]>([])
-  const leaveSummary = ref<EmployeeLeaveSummary | null>(null)
-  const rttSummary = ref<EmployeeRttSummary | null>(null)
-  const publicHolidays = ref<Record<string, string>>({})
-  const isContractDrawerOpen = ref(false)
-  const isContractSubmitting = ref(false)
-  const isCreateContractDrawerOpen = ref(false)
-  const isCreateContractSubmitting = ref(false)
+  const activeTab = ref<'contract' | 'leave' | 'rtt' | 'mileage'>('contract')

-  type SuspensionForm = {
-    id: number | null
-    startDate: string
-    endDate: string
-    comment: string
-  }
-
-  const suspensionForms = ref<SuspensionForm[]>([])
-  const isSuspensionSubmitting = ref(false)
-
-  const contractForm = reactive({
-    contractId: '' as number | '',
-    contractName: '',
-    weeklyHours: null as number | null,
-    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
-    startDate: '',
-    endDate: '',
-    paidLeaveSettled: false,
-    comment: ''
-  })
-
-  const validationTouched = reactive({
-    endDate: false
-  })
-
-  const createContractForm = reactive({
-    contractId: '' as number | '',
-    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
-    startDate: '',
-    endDate: ''
-  })
-
-  const createValidationTouched = reactive({
-    contractId: false,
-    contractNature: false,
-    startDate: false,
-    endDate: false
-  })
-
-  const contractHistory = computed(() => employee.value?.contractHistory ?? [])
  const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
  const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
  const employeeContractWorkLabel = computed(() => {
@@ -80,133 +18,6 @@ export const useEmployeeDetailPage = () => {
    return contract.name || '-'
  })

-  const formatDate = (value?: string | null) => formatNullableYmdToFr(value)
-
-  const contractHistoryLabel = (item: ContractHistoryItem) => {
-    if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
-      return `${item.weeklyHours} heures`
-    }
-    return item.contractName ?? '-'
-  }
-
-  const currentActiveContractPeriod = computed(() => {
-    const today = getTodayYmd()
-    const history = employee.value?.contractHistory ?? []
-    return history.find((item) => item.startDate <= today && (!item.endDate || item.endDate >= today)) ?? null
-  })
-
-  const currentActiveContractPeriodId = computed<number | null>(() => {
-    const period = currentActiveContractPeriod.value
-    return period?.periodId ?? null
-  })
-
-  const canCloseCurrentContract = computed(() => {
-    const active = currentActiveContractPeriod.value
-    if (!active) return false
-    if (!active.endDate) return true
-    return active.endDate > getTodayYmd()
-  })
-
-  const canCreateContract = computed(() => {
-    const active = currentActiveContractPeriod.value
-    if (!active) return true
-    return !!active.endDate
-  })
-
-  const isContractEndDateValid = computed(() => contractForm.endDate !== '')
-  const showContractEndDateError = computed(() => validationTouched.endDate && !isContractEndDateValid.value)
-
-  const showsCreateContractEndDate = computed(() => showsContractEndDate(createContractForm.contractNature))
-  const requiresCreateContractEndDate = computed(() => requiresContractEndDate(createContractForm.contractNature))
-  const isCreateContractValid = computed(() => createContractForm.contractId !== '')
-  const isCreateContractNatureValid = computed(() => isContractNature(createContractForm.contractNature))
-  const isCreateContractStartDateValid = computed(() => createContractForm.startDate !== '')
-  const isCreateContractEndDateValid = computed(() => !requiresCreateContractEndDate.value || createContractForm.endDate !== '')
-  const isCreateContractFormValid = computed(() =>
-    isCreateContractValid.value &&
-    isCreateContractNatureValid.value &&
-    isCreateContractStartDateValid.value &&
-    isCreateContractEndDateValid.value
-  )
-
-  const baseInputClass =
-    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-  const readonlyFieldClass = `${baseInputClass} border-neutral-300 bg-neutral-100 text-neutral-700`
-  const contractEndDateFieldClass = computed(() => showContractEndDateError.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
-  const baseSelectClass = 'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-  const createContractFieldClass = computed(() => createValidationTouched.contractId && !isCreateContractValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
-  const createContractNatureFieldClass = computed(() => createValidationTouched.contractNature && !isCreateContractNatureValid.value ? `${baseSelectClass} border-red-500` : `${baseSelectClass} border-neutral-300`)
-  const createContractStartDateFieldClass = computed(() => createValidationTouched.startDate && !isCreateContractStartDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
-  const createContractEndDateFieldClass = computed(() => createValidationTouched.endDate && !isCreateContractEndDateValid.value ? `${baseInputClass} border-red-500` : `${baseInputClass} border-neutral-300`)
-  const closeContractWorkedHoursLabel = computed(() => {
-    if (contractForm.weeklyHours !== null && contractForm.weeklyHours !== undefined) return `${contractForm.weeklyHours} heures`
-    return contractForm.contractName || '-'
-  })
-
-  const resetContractValidation = () => {
-    validationTouched.endDate = false
-  }
-
-  const hydrateSuspensionForms = () => {
-    const current = employee.value?.currentSuspensions ?? []
-    suspensionForms.value = current.map(s => ({
-      id: s.id,
-      startDate: s.startDate,
-      endDate: s.endDate ?? '',
-      comment: s.comment ?? ''
-    }))
-  }
-
-  const hydrateContractFormFromCurrent = () => {
-    const current = employee.value
-    const active = currentActiveContractPeriod.value
-    if (!current || !active) return
-
-    contractForm.contractId = active.contractId ?? current.contract?.id ?? ''
-    contractForm.contractName = active.contractName ?? current.contract?.name ?? ''
-    contractForm.weeklyHours = active.weeklyHours ?? current.contract?.weeklyHours ?? null
-    contractForm.contractNature = active.contractNature
-    contractForm.startDate = active.startDate
-    contractForm.endDate = getTodayYmd()
-    contractForm.paidLeaveSettled = false
-    contractForm.comment = ''
-  }
-
-  const openCloseContractDrawer = () => {
-    if (!employee.value || !canCloseCurrentContract.value) return
-    hydrateContractFormFromCurrent()
-    resetContractValidation()
-    hydrateSuspensionForms()
-    isContractDrawerOpen.value = true
-  }
-
-  const setContractDrawerOpen = (open: boolean) => {
-    isContractDrawerOpen.value = open
-  }
-
-  const resetCreateValidation = () => {
-    createValidationTouched.contractId = false
-    createValidationTouched.contractNature = false
-    createValidationTouched.startDate = false
-    createValidationTouched.endDate = false
-  }
-
-  const openCreateContractDrawer = () => {
-    if (!employee.value || !canCreateContract.value) return
-    createContractForm.contractId = ''
-    createContractForm.contractNature = 'CDI'
-    createContractForm.endDate = ''
-    createContractForm.startDate = currentActiveContractPeriod.value?.endDate
-      ? (shiftYmd(currentActiveContractPeriod.value.endDate, 1) ?? currentActiveContractPeriod.value.endDate)
-      : getTodayYmd()
-    resetCreateValidation()
-    isCreateContractDrawerOpen.value = true
-  }
-
-  const setCreateContractDrawerOpen = (open: boolean) => {
-    isCreateContractDrawerOpen.value = open
-  }
-
  const loadEmployee = async () => {
    const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
    const employeeId = Number(idParam)
@@ -216,185 +27,48 @@ export const useEmployeeDetailPage = () => {

    isLoading.value = true
    try {
-      const loadedEmployee = await getEmployee(employeeId)
-      employee.value = loadedEmployee
+      employee.value = await getEmployee(employeeId)

-      const now = new Date()
-      const isForfait = loadedEmployee.contract?.type === CONTRACT_TYPES.FORFAIT
-      const leaveYear = isForfait
-        ? now.getFullYear()
-        : (now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear())
-      const rttYear = now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear()
-      const from = isForfait
-        ? `${leaveYear}-01-01`
-        : `${leaveYear - 1}-06-01`
-      const to = isForfait
-        ? `${leaveYear}-12-31`
-        : `${leaveYear}-05-31`
-      const holidayYears = isForfait
-        ? [leaveYear]
-        : [leaveYear - 1, leaveYear]
-      const [absences, summary, rtt, ...holidayResults] = await Promise.all([
-        listAbsences({
-          from,
-          to,
-          employeeId: loadedEmployee.id
-        }),
-        showLeaveTab.value
-          ? getEmployeeLeaveSummary(loadedEmployee.id, leaveYear)
-          : Promise.resolve(null),
-        showRttTab.value
-          ? getEmployeeRttSummary(loadedEmployee.id, rttYear)
-          : Promise.resolve(null),
-        ...holidayYears.map((y) => listPublicHolidays('metropole', y))
-      ])
-      employeeAbsences.value = absences
-      leaveSummary.value = summary
-      rttSummary.value = rtt
-      publicHolidays.value = Object.assign({}, ...holidayResults)
      if (!showLeaveTab.value && activeTab.value === 'leave') {
        activeTab.value = 'contract'
      }
      if (!showRttTab.value && activeTab.value === 'rtt') {
        activeTab.value = 'contract'
      }
+
+      leave.resetLoaded()
+      rtt.resetLoaded()
+      mileage.resetLoaded()
+
+      if (activeTab.value === 'leave' && showLeaveTab.value) {
+        await leave.loadLeaveData()
+      } else if (activeTab.value === 'rtt' && showRttTab.value) {
+        await rtt.loadRttData()
+      } else if (activeTab.value === 'mileage') {
+        await mileage.loadMileageData()
+      }
    } finally {
      isLoading.value = false
    }
  }

-  const submitContractUpdate = async () => {
-    if (!employee.value || isContractSubmitting.value || !currentActiveContractPeriod.value) return
+  const contract = useEmployeeContract(employee, loadEmployee)
+  const leave = useEmployeeLeave(employee, loadEmployee)
+  const rtt = useEmployeeRtt(employee, loadEmployee)
+  const mileage = useEmployeeMileage(employee, loadEmployee)

-    validationTouched.endDate = true
-    if (!isContractEndDateValid.value) return
-
-    if (contractForm.endDate < currentActiveContractPeriod.value.startDate) {
-      toast.error({
-        title: 'Erreur',
-        message: `La date de fin doit être postérieure au ${formatDate(currentActiveContractPeriod.value.startDate)}.`
-      })
-      return
-    }
-
-    isContractSubmitting.value = true
-    try {
-      await updateEmployee(employee.value.id, {
-        firstName: employee.value.firstName,
-        lastName: employee.value.lastName,
-        siteId: employee.value.site?.id ?? null,
-        contractId: Number(contractForm.contractId),
-        contractEndDate: contractForm.endDate || null,
-        contractPaidLeaveSettled: contractForm.paidLeaveSettled,
-        contractComment: contractForm.comment || null
-      })
-
-      isContractDrawerOpen.value = false
-      await loadEmployee()
-    } finally {
-      isContractSubmitting.value = false
-    }
-  }
-
-  const submitCreateContract = async () => {
-    if (!employee.value || isCreateContractSubmitting.value) return
-
-    createValidationTouched.contractId = true
-    createValidationTouched.contractNature = true
-    createValidationTouched.startDate = true
-    createValidationTouched.endDate = true
-    if (!isCreateContractFormValid.value) return
-
-    if (currentActiveContractPeriod.value?.endDate) {
-      const minStartDate = shiftYmd(currentActiveContractPeriod.value.endDate, 1) ?? currentActiveContractPeriod.value.endDate
-      if (createContractForm.startDate < minStartDate) {
-        toast.error({
-          title: 'Erreur',
-          message: `La date de début doit être au moins le ${formatDate(minStartDate)}.`
-        })
-        return
-      }
-    }
-
-    isCreateContractSubmitting.value = true
-    try {
-      await updateEmployee(employee.value.id, {
-        firstName: employee.value.firstName,
-        lastName: employee.value.lastName,
-        siteId: employee.value.site?.id ?? null,
-        contractId: Number(createContractForm.contractId),
-        contractNature: createContractForm.contractNature,
-        contractStartDate: createContractForm.startDate,
-        contractEndDate: createContractForm.endDate || null
-      })
-      isCreateContractDrawerOpen.value = false
-      await loadEmployee()
-    } finally {
-      isCreateContractSubmitting.value = false
-    }
-  }
-
-  const submitSuspension = async (index: number) => {
-    const form = suspensionForms.value[index]
-    if (!form || !form.startDate) return
-
-    const periodId = currentActiveContractPeriodId.value
-    if (!periodId) return
-
-    isSuspensionSubmitting.value = true
-    try {
-      if (form.id) {
-        await updateSuspension(form.id, {
-          startDate: form.startDate,
-          endDate: form.endDate || null,
-          comment: form.comment || null
-        })
-      } else {
-        await createSuspension({
-          contractPeriodId: periodId,
-          startDate: form.startDate,
-          endDate: form.endDate || null,
-          comment: form.comment || null
-        })
-      }
-      await loadEmployee()
-      hydrateSuspensionForms()
-    } finally {
-      isSuspensionSubmitting.value = false
-    }
-  }
-
-  const addSuspensionForm = () => {
-    suspensionForms.value.push({
-      id: null,
-      startDate: '',
-      endDate: '',
-      comment: ''
-    })
-  }
-
-  const submitFractionedDays = async (days: number) => {
-    if (!employee.value) return
-    const year = leaveSummary.value?.year ?? undefined
-    await updateFractionedDays(employee.value.id, days, year)
-    await loadEmployee()
-  }
-
-  const submitRttPayment = async (month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number) => {
-    if (!employee.value) return
-    const year = rttSummary.value?.year ?? undefined
-    await createRttPayment(employee.value.id, month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes, year)
-    await loadEmployee()
-  }
-
-  watch(showsCreateContractEndDate, (shows) => {
-    if (!shows) {
-      createContractForm.endDate = ''
+  watch(activeTab, (tab) => {
+    if (tab === 'leave' && !leave.leaveDataLoaded.value && showLeaveTab.value) {
+      leave.loadLeaveData()
+    } else if (tab === 'rtt' && !rtt.rttDataLoaded.value && showRttTab.value) {
+      rtt.loadRttData()
+    } else if (tab === 'mileage' && !mileage.mileageDataLoaded.value) {
+      mileage.loadMileageData()
    }
  })

  onMounted(async () => {
-    contracts.value = await listContracts()
+    await contract.loadContracts()
    await loadEmployee()
  })

@@ -402,50 +76,12 @@ export const useEmployeeDetailPage = () => {
    employee,
    isLoading,
    activeTab,
-    contracts,
-    employeeAbsences,
-    leaveSummary,
-    rttSummary,
-    publicHolidays,
    showLeaveTab,
    showRttTab,
-    contractHistory,
    employeeContractWorkLabel,
-    contractForm,
-    createContractForm,
-    isContractDrawerOpen,
-    isContractSubmitting,
-    isCreateContractDrawerOpen,
-    isCreateContractSubmitting,
-    canCloseCurrentContract,
-    canCreateContract,
-    readonlyFieldClass,
-    closeContractWorkedHoursLabel,
-    contractEndDateFieldClass,
-    showContractEndDateError,
-    isContractEndDateValid,
-    createContractNatureFieldClass,
-    createContractFieldClass,
-    createContractStartDateFieldClass,
-    showsCreateContractEndDate,
-    requiresCreateContractEndDate,
-    createContractEndDateFieldClass,
-    isCreateContractFormValid,
-    contractNatureLabel,
-    contractHistoryLabel,
-    formatDate,
-    openCloseContractDrawer,
-    openCreateContractDrawer,
-    setContractDrawerOpen,
-    setCreateContractDrawerOpen,
-    submitContractUpdate,
-    submitCreateContract,
-    submitFractionedDays,
-    submitRttPayment,
-    suspensionForms,
-    isSuspensionSubmitting,
-    submitSuspension,
-    addSuspensionForm,
-    currentActiveContractPeriodId
+    ...contract,
+    ...leave,
+    ...rtt,
+    ...mileage
  }
 }
--- a/frontend/composables/useEmployeeLeave.ts
+++ b/frontend/composables/useEmployeeLeave.ts
@@ -0,0 +1,70 @@
+import type { Ref } from 'vue'
+import type { Absence } from '~/services/dto/absence'
+import type { EmployeeLeaveSummary } from '~/services/dto/employee-leave-summary'
+import type { Employee } from '~/services/dto/employee'
+import { CONTRACT_TYPES } from '~/services/dto/contract'
+import { listAbsences } from '~/services/absences'
+import { getEmployeeLeaveSummary, updateFractionedDays } from '~/services/employee-leave-summary'
+import { listPublicHolidays } from '~/services/public-holidays'
+
+export const useEmployeeLeave = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const employeeAbsences = ref<Absence[]>([])
+  const leaveSummary = ref<EmployeeLeaveSummary | null>(null)
+  const publicHolidays = ref<Record<string, string>>({})
+  const isLeaveLoading = ref(false)
+  const leaveDataLoaded = ref(false)
+
+  const getLeaveYear = () => {
+    const now = new Date()
+    const isForfait = employee.value?.contract?.type === CONTRACT_TYPES.FORFAIT
+    return isForfait
+      ? now.getFullYear()
+      : (now.getMonth() >= 5 ? now.getFullYear() + 1 : now.getFullYear())
+  }
+
+  const loadLeaveData = async () => {
+    if (!employee.value || isLeaveLoading.value) return
+    isLeaveLoading.value = true
+    try {
+      const isForfait = employee.value.contract?.type === CONTRACT_TYPES.FORFAIT
+      const leaveYear = getLeaveYear()
+      const from = isForfait ? `${leaveYear}-01-01` : `${leaveYear - 1}-06-01`
+      const to = isForfait ? `${leaveYear}-12-31` : `${leaveYear}-05-31`
+      const holidayYears = isForfait ? [leaveYear] : [leaveYear - 1, leaveYear]
+
+      const [absences, summary, ...holidayResults] = await Promise.all([
+        listAbsences({ from, to, employeeId: employee.value.id }),
+        getEmployeeLeaveSummary(employee.value.id, leaveYear),
+        ...holidayYears.map((y) => listPublicHolidays('metropole', y))
+      ])
+      employeeAbsences.value = absences
+      leaveSummary.value = summary
+      publicHolidays.value = Object.assign({}, ...holidayResults)
+      leaveDataLoaded.value = true
+    } finally {
+      isLeaveLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    leaveDataLoaded.value = false
+  }
+
+  const submitFractionedDays = async (days: number) => {
+    if (!employee.value) return
+    const year = leaveSummary.value?.year ?? undefined
+    await updateFractionedDays(employee.value.id, days, year)
+    await reloadEmployee()
+  }
+
+  return {
+    employeeAbsences,
+    leaveSummary,
+    publicHolidays,
+    isLeaveLoading,
+    leaveDataLoaded,
+    loadLeaveData,
+    resetLoaded,
+    submitFractionedDays
+  }
+}
--- a/frontend/composables/useEmployeeMileage.ts
+++ b/frontend/composables/useEmployeeMileage.ts
@@ -0,0 +1,73 @@
+import type { Ref } from 'vue'
+import type { MileageAllowance } from '~/services/dto/mileage-allowance'
+import type { Employee } from '~/services/dto/employee'
+import {
+  listMileageAllowances,
+  createMileageAllowance,
+  updateMileageAllowance,
+  deleteMileageAllowance,
+  uploadReceipt
+} from '~/services/mileage-allowances'
+
+export const useEmployeeMileage = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const config = useRuntimeConfig()
+  const apiBase = (config.public.apiBase as string) ?? '/api'
+
+  const mileageAllowances = ref<MileageAllowance[]>([])
+  const isMileageLoading = ref(false)
+  const mileageDataLoaded = ref(false)
+
+  const loadMileageData = async () => {
+    if (!employee.value || isMileageLoading.value) return
+    isMileageLoading.value = true
+    try {
+      mileageAllowances.value = await listMileageAllowances(employee.value.id)
+      mileageDataLoaded.value = true
+    } finally {
+      isMileageLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    mileageDataLoaded.value = false
+  }
+
+  const submitCreateMileage = async (data: { month: string; kilometers: number; comment?: string }, file?: File) => {
+    if (!employee.value) return
+    const result = await createMileageAllowance({
+      employeeId: employee.value.id,
+      month: data.month,
+      kilometers: data.kilometers,
+      comment: data.comment
+    })
+    if (file && result?.id) {
+      await uploadReceipt(apiBase, result.id, file)
+    }
+    await reloadEmployee()
+  }
+
+  const submitUpdateMileage = async (id: number, data: { month: string; kilometers: number; comment?: string }, file?: File) => {
+    await updateMileageAllowance(id, data)
+    if (file) {
+      await uploadReceipt(apiBase, id, file)
+    }
+    await reloadEmployee()
+  }
+
+  const submitDeleteMileage = async (id: number) => {
+    await deleteMileageAllowance(id)
+    await reloadEmployee()
+  }
+
+  return {
+    mileageAllowances,
+    isMileageLoading,
+    mileageDataLoaded,
+    mileageApiBase: apiBase,
+    loadMileageData,
+    resetLoaded,
+    submitCreateMileage,
+    submitUpdateMileage,
+    submitDeleteMileage
+  }
+}
--- a/frontend/composables/useEmployeeRtt.ts
+++ b/frontend/composables/useEmployeeRtt.ts
@@ -0,0 +1,42 @@
+import type { Ref } from 'vue'
+import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
+import type { Employee } from '~/services/dto/employee'
+import { getEmployeeRttSummary, createRttPayment } from '~/services/employee-rtt-summary'
+
+export const useEmployeeRtt = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
+  const rttSummary = ref<EmployeeRttSummary | null>(null)
+  const isRttLoading = ref(false)
+  const rttDataLoaded = ref(false)
+
+  const loadRttData = async () => {
+    if (!employee.value || isRttLoading.value) return
+    isRttLoading.value = true
+    try {
+      const rttYear = new Date().getMonth() >= 5 ? new Date().getFullYear() + 1 : new Date().getFullYear()
+      rttSummary.value = await getEmployeeRttSummary(employee.value.id, rttYear)
+      rttDataLoaded.value = true
+    } finally {
+      isRttLoading.value = false
+    }
+  }
+
+  const resetLoaded = () => {
+    rttDataLoaded.value = false
+  }
+
+  const submitRttPayment = async (month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number) => {
+    if (!employee.value) return
+    const year = rttSummary.value?.year ?? undefined
+    await createRttPayment(employee.value.id, month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes, year)
+    await reloadEmployee()
+  }
+
+  return {
+    rttSummary,
+    isRttLoading,
+    rttDataLoaded,
+    loadRttData,
+    resetLoaded,
+    submitRttPayment
+  }
+}
--- a/frontend/composables/useHoursPage.ts
+++ b/frontend/composables/useHoursPage.ts
@@ -138,19 +138,17 @@ export const useHoursPage = () => {
    return true
  }

-  const canCreateValidationRowFromAbsence = (employeeId: number) => {
+  const canCreateEmptyValidationRow = (employeeId: number) => {
    const row = rows.value[employeeId]
    if (row?.workHourId) return false
+    if (!hasContractAtSelectedDate(employeeId)) return false
    const dayRow = dayContextByEmployeeId.value.get(employeeId)
-    return !!dayRow?.absenceLabel && hasContractAtSelectedDate(employeeId)
+    return !!dayRow?.absenceLabel || is4hContract(employeeId)
  }

-  const canCreateSiteValidationRowFromAbsence = (employeeId: number) => {
-    const row = rows.value[employeeId]
-    if (row?.workHourId) return false
-    const dayRow = dayContextByEmployeeId.value.get(employeeId)
-    return !!dayRow?.absenceLabel && hasContractAtSelectedDate(employeeId)
-  }
+  const canCreateValidationRowFromAbsence = (employeeId: number) => canCreateEmptyValidationRow(employeeId)
+
+  const canCreateSiteValidationRowFromAbsence = (employeeId: number) => canCreateEmptyValidationRow(employeeId)

  const bulkValidatableEmployeeIds = computed(() => {
    return visibleEmployees.value
@@ -347,6 +345,10 @@ export const useHoursPage = () => {

  const isPresenceTracking = (employee: Employee) => employee.contract?.trackingMode === TRACKING_MODES.PRESENCE
  const isTimeTracking = (employee: Employee) => !isPresenceTracking(employee)
+  const is4hContract = (employeeId: number) => {
+    const employee = employees.value.find((e) => e.id === employeeId)
+    return employee?.contract?.weeklyHours === 4
+  }
  const isRowLocked = (employeeId: number) => {
    const row = rows.value[employeeId]
    if (!row) return false
@@ -692,13 +694,8 @@ export const useHoursPage = () => {
    options: { toast?: boolean } = {}
  ) => {
    const row = rows.value[employeeId]
-    const dayRow = dayContextByEmployeeId.value.get(employeeId)
    if (!row?.workHourId && checked) {
-      const employee = employees.value.find((item) => item.id === employeeId)
-      const hasAbsence = !!dayRow?.absenceLabel
-      const canCreateFromAbsence = !!employee && hasAbsence && hasContractAtSelectedDate(employeeId)
-
-      if (canCreateFromAbsence) {
+      if (canCreateEmptyValidationRow(employeeId)) {
        await bulkUpsertWorkHours({
          workDate: selectedDate.value,
          entries: [{
@@ -746,13 +743,8 @@ export const useHoursPage = () => {
    options: { toast?: boolean } = {}
  ) => {
    const row = rows.value[employeeId]
-    const dayRow = dayContextByEmployeeId.value.get(employeeId)
    if (!row?.workHourId && checked) {
-      const employee = employees.value.find((item) => item.id === employeeId)
-      const hasAbsence = !!dayRow?.absenceLabel
-      const canCreateFromAbsence = !!employee && hasAbsence && hasContractAtSelectedDate(employeeId)
-
-      if (canCreateFromAbsence) {
+      if (canCreateEmptyValidationRow(employeeId)) {
        await bulkUpsertWorkHours({
          workDate: selectedDate.value,
          entries: [{
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -36,6 +36,11 @@
            "create": "Impossible de créer l'utilisateur.",
            "update": "Impossible de mettre à jour l'utilisateur.",
            "delete": "Impossible de supprimer l'utilisateur."
+        },
+        "mileage": {
+            "create": "Impossible de créer le frais kilométrique.",
+            "update": "Impossible de mettre à jour le frais kilométrique.",
+            "delete": "Impossible de supprimer le frais kilométrique."
        }
    },
    "success": {
@@ -67,6 +72,11 @@
            "create": "Utilisateur créé.",
            "update": "Utilisateur mis à jour.",
            "delete": "Utilisateur supprimé."
+        },
+        "mileage": {
+            "create": "Frais kilométrique créé.",
+            "update": "Frais kilométrique mis à jour.",
+            "delete": "Frais kilométrique supprimé."
        }
    }
 }
--- a/frontend/pages/absence-types.vue
+++ b/frontend/pages/absence-types.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="flex items-center justify-between pb-12">
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="flex items-center justify-between pb-6">
      <h1 class="text-4xl font-bold text-primary-500">Types d'absence</h1>
      <button
        type="button"
        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
        @click="openCreate"
      >
-        Ajouter un type
+        + Ajouter un type
      </button>
    </div>

@@ -18,33 +18,33 @@
      Aucun type pour le moment.
    </div>

-    <div v-else class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[120px_160px_1fr_220px_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
-        <span class="text-left">Code</span>
-        <span class="text-left">Libellé</span>
-        <span class="text-left">Couleur</span>
-        <span class="text-left">Compte en heures</span>
-        <span class="text-right">Actions</span>
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+      <div class="grid grid-cols-4 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
+        <span>Code</span>
+        <span>Libellé</span>
+        <span>Couleur</span>
+        <span>Compte en heures</span>
      </div>
      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
        Chargement...
      </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
        <div
          v-for="type in absenceTypes"
          :key="type.id"
-          class="grid grid-cols-[120px_160px_1fr_220px_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-4 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+          @click="openEdit(type)"
        >
-          <span class="font-semibold text-left">{{ type.code }}</span>
-          <span class="text-left">{{ type.label }}</span>
-          <div class="flex items-center gap-2 justify-start">
+          <span>{{ type.code }}</span>
+          <span>{{ type.label }}</span>
+          <div class="flex items-center gap-2">
            <span
              class="inline-block h-3 w-3 rounded-full"
              :style="{ backgroundColor: type.color }"
            />
            <span class="text-md uppercase text-neutral-500">{{ type.color }}</span>
          </div>
-          <div class="text-left">
+          <div>
            <span
              class="inline-flex rounded-md px-2 py-1 text-sm font-semibold"
              :class="type.countAsWorkedHours ? 'bg-emerald-100 text-emerald-700' : 'bg-neutral-100 text-neutral-700'"
@@ -52,22 +52,6 @@
              {{ type.countAsWorkedHours ? 'Oui' : 'Non' }}
            </span>
          </div>
-          <div class="flex items-center justify-end gap-2">
-            <button
-              type="button"
-              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-              @click="openEdit(type)"
-            >
-              Modifier
-            </button>
-            <button
-              type="button"
-              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
-              @click="confirmDelete(type)"
-            >
-              Supprimer
-            </button>
-          </div>
        </div>
      </div>
    </div>
@@ -145,20 +129,29 @@
            La couleur est obligatoire.
          </p>
        </div>
-        <div class="flex justify-end gap-3 pt-2">
+        <div v-if="editingType" class="grid grid-cols-2 gap-3 pt-2">
          <button
            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="closeDrawer"
+            class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+            @click="confirmDelete(editingType)"
          >
-            Annuler
+            Supprimer
          </button>
          <button
            type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
            :class="submitButtonClass"
          >
-            Enregistrer
+            Modifier
+          </button>
+        </div>
+        <div v-else class="flex justify-center pt-2">
+          <button
+            type="submit"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :class="submitButtonClass"
+          >
+            + Ajouter
          </button>
        </div>
      </form>
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -14,7 +14,7 @@
                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
                        @click="openCreateFromToday"
                    >
-                        Ajouter une absence
+                        + Ajouter une absence
                    </button>
                    <button
                        type="button"
--- a/frontend/pages/employees/[id].vue
+++ b/frontend/pages/employees/[id].vue
@@ -55,6 +55,16 @@
                        <Icon name="mdi:schedule" size="24" class="align-self"/>
                        RTT
                    </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'mileage'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'mileage'"
+                    >
+                        <Icon name="mdi:car-outline" size="24" class="align-self"/>
+                        Frais Kms
+                    </button>
                </div>
            </div>
            <div class="min-h-0 flex-1">
@@ -98,15 +108,39 @@
                    :on-add-suspension-form="addSuspensionForm"
                    :current-contract-period-id="currentActiveContractPeriodId"
                />
-                <EmployeesLeaveTab
-                    v-else-if="showLeaveTab && activeTab === 'leave'"
-                    class="h-full"
-                    :absences="employeeAbsences"
-                    :summary="leaveSummary"
-                    :public-holidays="publicHolidays"
-                    @update-fractioned-days="submitFractionedDays"
-                />
-                <EmployeesRttTab v-else-if="showRttTab && activeTab === 'rtt'" class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
+                <div v-else-if="showLeaveTab && activeTab === 'leave'" class="h-full">
+                    <div v-if="isLeaveLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesLeaveTab
+                        v-else
+                        class="h-full"
+                        :absences="employeeAbsences"
+                        :summary="leaveSummary"
+                        :public-holidays="publicHolidays"
+                        @update-fractioned-days="submitFractionedDays"
+                    />
+                </div>
+                <div v-else-if="showRttTab && activeTab === 'rtt'" class="h-full">
+                    <div v-if="isRttLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesRttTab v-else class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
+                </div>
+                <div v-else-if="activeTab === 'mileage'" class="h-full">
+                    <div v-if="isMileageLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesMileageTab
+                        v-else
+                        class="h-full"
+                        :allowances="mileageAllowances"
+                        :api-base="mileageApiBase"
+                        @create="submitCreateMileage"
+                        @update="submitUpdateMileage"
+                        @delete="submitDeleteMileage"
+                    />
+                </div>
            </div>
        </div>
    </div>
@@ -161,7 +195,15 @@ const {
    isSuspensionSubmitting,
    submitSuspension,
    addSuspensionForm,
-    currentActiveContractPeriodId
+    currentActiveContractPeriodId,
+    isLeaveLoading,
+    isRttLoading,
+    mileageAllowances,
+    isMileageLoading,
+    mileageApiBase,
+    submitCreateMileage,
+    submitUpdateMileage,
+    submitDeleteMileage
 } = useEmployeeDetailPage()

 useHead(() => ({
--- a/frontend/pages/sites.vue
+++ b/frontend/pages/sites.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="flex items-center justify-between pb-12">
+  <div class="h-full flex flex-col overflow-hidden">
+    <div class="flex items-center justify-between pb-6">
      <h1 class="text-4xl font-bold text-primary-500">Sites</h1>
      <button
        type="button"
        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
        @click="openCreate"
      >
-        Ajouter un site
+        + Ajouter un site
      </button>
    </div>

@@ -18,26 +18,26 @@
      Aucun site pour le moment.
    </div>

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

@@ -18,42 +18,29 @@
      Aucun utilisateur pour le moment.
    </div>

-    <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[1fr_1fr_140px_1fr_140px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+      <div class="grid grid-cols-4 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
        <span class="text-left">Utilisateur</span>
        <span class="text-left">Employé</span>
        <span class="text-left">Accès</span>
        <span class="text-left">Sites</span>
-        <span class="text-right">Actions</span>
      </div>
      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
        Chargement...
      </div>
-      <div v-else>
+      <div v-else class="border-x border-b border-primary-500 rounded-b-md">
        <div
          v-for="user in users"
          :key="user.id"
-          class="grid grid-cols-[1fr_1fr_140px_1fr_140px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-4 items-center gap-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+          @click="openEdit(user)"
        >
-          <span class="text-left">{{ user.username }}</span>
-          <span class="text-left">
+          <span>{{ user.username }}</span>
+          <span>
            {{ user.employee ? `${user.employee.firstName} ${user.employee.lastName}` : '-' }}
          </span>
-          <span class="text-left text-sm text-neutral-600">
-            {{ getAccessLabel(user) }}
-          </span>
-          <span class="text-left text-sm text-neutral-600">
-            {{ getSiteLabels(user) }}
-          </span>
-          <div class="flex justify-end">
-            <button
-              type="button"
-              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-              @click="openEdit(user)"
-            >
-              Modifier
-            </button>
-          </div>
+          <span>{{ getAccessLabel(user) }}</span>
+          <span>{{ getSiteLabels(user) }}</span>
        </div>
      </div>
    </div>
@@ -177,20 +164,13 @@
          </p>
        </div>

-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="closeDrawer"
-          >
-            Annuler
-          </button>
+        <div class="flex justify-center pt-2">
          <button
            type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
            :class="submitButtonClass"
          >
-            Enregistrer
+            {{ editingUser ? 'Modifier' : '+ Ajouter' }}
          </button>
        </div>
      </form>
--- a/frontend/services/dto/employee-leave-summary.ts
+++ b/frontend/services/dto/employee-leave-summary.ts
@@ -10,6 +10,9 @@ export type EmployeeLeaveSummary = {
  takenSaturdays: number
  fractionedDays: number
  accruingDays: number
+  previousYearAcquiredDays: number
+  previousYearTakenDays: number
+  previousYearRemainingDays: number
  presenceDaysByMonth: Record<string, number>
 }

--- a/frontend/services/dto/mileage-allowance.ts
+++ b/frontend/services/dto/mileage-allowance.ts
@@ -0,0 +1,9 @@
+export type MileageAllowance = {
+  id: number
+  month: string
+  kilometers: number
+  comment: string | null
+  receiptPath: string | null
+  receiptName: string | null
+  createdAt: string
+}
--- a/frontend/services/mileage-allowances.ts
+++ b/frontend/services/mileage-allowances.ts
@@ -0,0 +1,69 @@
+import { $fetch } from 'ofetch'
+import type { MileageAllowance } from './dto/mileage-allowance'
+import { extractItems } from '~/utils/api'
+
+export const listMileageAllowances = async (employeeId: number) => {
+  const api = useApi()
+  const data = await api.get<MileageAllowance[] | { 'hydra:member'?: MileageAllowance[] }>(
+    '/mileage_allowances',
+    { employee: `/api/employees/${employeeId}` },
+    { toast: false }
+  )
+  return extractItems<MileageAllowance>(data)
+}
+
+export const createMileageAllowance = async (data: {
+  employeeId: number
+  month: string
+  kilometers: number
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.post<MileageAllowance>('/mileage_allowances', {
+    employee: `/api/employees/${data.employeeId}`,
+    month: data.month,
+    kilometers: data.kilometers,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.mileage.create',
+    toastErrorKey: 'errors.mileage.create'
+  })
+}
+
+export const updateMileageAllowance = async (id: number, data: {
+  month: string
+  kilometers: number
+  comment?: string
+}) => {
+  const api = useApi()
+  return api.patch<MileageAllowance>(`/mileage_allowances/${id}`, {
+    month: data.month,
+    kilometers: data.kilometers,
+    comment: data.comment
+  }, {
+    toastSuccessKey: 'success.mileage.update',
+    toastErrorKey: 'errors.mileage.update'
+  })
+}
+
+export const deleteMileageAllowance = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/mileage_allowances/${id}`, {}, {
+    toastSuccessKey: 'success.mileage.delete',
+    toastErrorKey: 'errors.mileage.delete'
+  })
+}
+
+export const uploadReceipt = async (baseURL: string, id: number, file: File) => {
+  const formData = new FormData()
+  formData.append('file', file)
+  return $fetch(`${baseURL}/mileage_allowances/${id}/receipt`, {
+    method: 'POST',
+    body: formData,
+    credentials: 'include'
+  })
+}
+
+export const getReceiptUrl = (baseURL: string, id: number): string => {
+  return `${baseURL}/mileage_allowances/${id}/receipt`
+}
--- a/migrations/Version20260313125819.php
+++ b/migrations/Version20260313125819.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313125819 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create mileage_allowances table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE mileage_allowances (id INT GENERATED BY DEFAULT AS IDENTITY NOT NULL, month DATE NOT NULL, kilometers DOUBLE PRECISION NOT NULL, comment TEXT DEFAULT NULL, receipt_path VARCHAR(255) DEFAULT NULL, created_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, employee_id INT NOT NULL, PRIMARY KEY (id))');
+        $this->addSql('CREATE INDEX IDX_3B44830E8C03F15C ON mileage_allowances (employee_id)');
+        $this->addSql('ALTER TABLE mileage_allowances ADD CONSTRAINT FK_3B44830E8C03F15C FOREIGN KEY (employee_id) REFERENCES employees (id) NOT DEFERRABLE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances DROP CONSTRAINT FK_3B44830E8C03F15C');
+        $this->addSql('DROP TABLE mileage_allowances');
+    }
+}
--- a/migrations/Version20260313133548.php
+++ b/migrations/Version20260313133548.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260313133548 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add receipt_name column to mileage_allowances';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances ADD receipt_name VARCHAR(255) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE mileage_allowances DROP receipt_name');
+    }
+}
--- a/src/ApiResource/EmployeeLeaveSummary.php
+++ b/src/ApiResource/EmployeeLeaveSummary.php
@@ -20,17 +20,20 @@ use App\State\EmployeeLeaveSummaryProvider;
 )]
 final class EmployeeLeaveSummary
 {
-    public int $year                 = 0;
-    public bool $isSupported         = false;
-    public string $ruleCode          = '';
-    public float $acquiredDays       = 0.0;
-    public float $remainingDays      = 0.0;
-    public float $takenDays          = 0.0;
-    public float $acquiredSaturdays  = 0.0;
-    public float $remainingSaturdays = 0.0;
-    public float $takenSaturdays     = 0.0;
-    public float $fractionedDays     = 0.0;
-    public float $accruingDays       = 0.0;
+    public int $year                        = 0;
+    public bool $isSupported                = false;
+    public string $ruleCode                 = '';
+    public float $acquiredDays              = 0.0;
+    public float $remainingDays             = 0.0;
+    public float $takenDays                 = 0.0;
+    public float $acquiredSaturdays         = 0.0;
+    public float $remainingSaturdays        = 0.0;
+    public float $takenSaturdays            = 0.0;
+    public float $fractionedDays            = 0.0;
+    public float $accruingDays              = 0.0;
+    public float $previousYearAcquiredDays  = 0.0;
+    public float $previousYearTakenDays     = 0.0;
+    public float $previousYearRemainingDays = 0.0;

    /** @var array<string, float> YYYY-MM => count (0.5 for half-days) */
    public array $presenceDaysByMonth = [];
--- a/src/Entity/MileageAllowance.php
+++ b/src/Entity/MileageAllowance.php
@@ -0,0 +1,192 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Doctrine\Orm\Filter\DateFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
+use ApiPlatform\Metadata\ApiFilter;
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
+use App\Repository\MileageAllowanceRepository;
+use App\State\MileageAllowanceDeleteProcessor;
+use App\State\MileageAllowanceReceiptDownloadProvider;
+use App\State\MileageAllowanceReceiptUploadProcessor;
+use DateTimeImmutable;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new Get(
+            security: "is_granted('ROLE_USER')"
+        ),
+        new GetCollection(
+            security: "is_granted('ROLE_USER')"
+        ),
+        new Post(
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+        new Patch(
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+        new Delete(
+            security: "is_granted('ROLE_ADMIN')",
+            processor: MileageAllowanceDeleteProcessor::class,
+        ),
+        new Post(
+            uriTemplate: '/mileage_allowances/{id}/receipt',
+            security: "is_granted('ROLE_ADMIN')",
+            deserialize: false,
+            processor: MileageAllowanceReceiptUploadProcessor::class,
+        ),
+        new Get(
+            uriTemplate: '/mileage_allowances/{id}/receipt',
+            security: "is_granted('ROLE_USER')",
+            provider: MileageAllowanceReceiptDownloadProvider::class,
+        ),
+    ],
+    normalizationContext: [
+        'groups'          => ['mileage_allowance:read', 'employee:read'],
+        'datetime_format' => 'Y-m-d',
+    ],
+    denormalizationContext: [
+        'groups'          => ['mileage_allowance:write'],
+        'datetime_format' => 'Y-m-d',
+    ],
+    order: ['month' => 'DESC'],
+    paginationEnabled: false,
+)]
+#[ApiFilter(DateFilter::class, properties: ['month'])]
+#[ApiFilter(SearchFilter::class, properties: ['employee' => 'exact'])]
+#[ORM\Entity(repositoryClass: MileageAllowanceRepository::class)]
+#[ORM\Table(name: 'mileage_allowances')]
+class MileageAllowance
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(type: 'integer')]
+    #[Groups(['mileage_allowance:read'])]
+    private ?int $id = null;
+
+    #[ORM\ManyToOne(targetEntity: Employee::class)]
+    #[ORM\JoinColumn(nullable: false)]
+    #[Groups(['mileage_allowance:read', 'mileage_allowance:write'])]
+    private ?Employee $employee = null;
+
+    #[ORM\Column(type: 'date_immutable')]
+    #[Groups(['mileage_allowance:read', 'mileage_allowance:write'])]
+    private ?DateTimeImmutable $month = null;
+
+    #[ORM\Column(type: 'float')]
+    #[Groups(['mileage_allowance:read', 'mileage_allowance:write'])]
+    private float $kilometers = 0;
+
+    #[ORM\Column(type: 'text', nullable: true)]
+    #[Groups(['mileage_allowance:read', 'mileage_allowance:write'])]
+    private ?string $comment = null;
+
+    #[ORM\Column(type: 'string', length: 255, nullable: true)]
+    #[Groups(['mileage_allowance:read'])]
+    private ?string $receiptPath = null;
+
+    #[ORM\Column(type: 'string', length: 255, nullable: true)]
+    #[Groups(['mileage_allowance:read'])]
+    private ?string $receiptName = null;
+
+    #[ORM\Column(type: 'datetime_immutable')]
+    #[Groups(['mileage_allowance:read'])]
+    private DateTimeImmutable $createdAt;
+
+    public function __construct()
+    {
+        $this->createdAt = new DateTimeImmutable();
+    }
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getEmployee(): ?Employee
+    {
+        return $this->employee;
+    }
+
+    public function setEmployee(?Employee $employee): self
+    {
+        $this->employee = $employee;
+
+        return $this;
+    }
+
+    public function getMonth(): ?DateTimeImmutable
+    {
+        return $this->month;
+    }
+
+    public function setMonth(?DateTimeImmutable $month): self
+    {
+        $this->month = $month;
+
+        return $this;
+    }
+
+    public function getKilometers(): float
+    {
+        return $this->kilometers;
+    }
+
+    public function setKilometers(float $kilometers): self
+    {
+        $this->kilometers = $kilometers;
+
+        return $this;
+    }
+
+    public function getComment(): ?string
+    {
+        return $this->comment;
+    }
+
+    public function setComment(?string $comment): self
+    {
+        $this->comment = $comment;
+
+        return $this;
+    }
+
+    public function getReceiptPath(): ?string
+    {
+        return $this->receiptPath;
+    }
+
+    public function setReceiptPath(?string $receiptPath): self
+    {
+        $this->receiptPath = $receiptPath;
+
+        return $this;
+    }
+
+    public function getReceiptName(): ?string
+    {
+        return $this->receiptName;
+    }
+
+    public function setReceiptName(?string $receiptName): self
+    {
+        $this->receiptName = $receiptName;
+
+        return $this;
+    }
+
+    public function getCreatedAt(): DateTimeImmutable
+    {
+        return $this->createdAt;
+    }
+}
--- a/src/Repository/MileageAllowanceRepository.php
+++ b/src/Repository/MileageAllowanceRepository.php
@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Entity\MileageAllowance;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/**
+ * @extends ServiceEntityRepository<MileageAllowance>
+ */
+final class MileageAllowanceRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, MileageAllowance::class);
+    }
+}
--- a/src/Repository/WorkHourRepository.php
+++ b/src/Repository/WorkHourRepository.php
@@ -191,6 +191,43 @@ final class WorkHourRepository extends ServiceEntityRepository implements WorkHo
        return $result;
    }

+    /**
+     * Return the set of Y-m-d dates where the employee has worked hours on the given dates.
+     *
+     * @param list<string> $dates Y-m-d formatted dates
+     *
+     * @return array<string, true> Y-m-d => true
+     */
+    public function findWorkedDatesAmong(Employee $employee, array $dates): array
+    {
+        if ([] === $dates) {
+            return [];
+        }
+
+        $placeholders = [];
+        $params       = ['employee' => $employee->getId()];
+        foreach (array_values($dates) as $i => $date) {
+            $key            = "d{$i}";
+            $placeholders[] = ":{$key}";
+            $params[$key]   = $date;
+        }
+
+        $sql = sprintf(
+            'SELECT work_date FROM work_hours WHERE employee_id = :employee AND work_date IN (%s) AND (morning_from IS NOT NULL OR afternoon_from IS NOT NULL OR evening_from IS NOT NULL)',
+            implode(', ', $placeholders)
+        );
+
+        $conn = $this->getEntityManager()->getConnection();
+        $rows = $conn->fetchAllAssociative($sql, $params);
+
+        $result = [];
+        foreach ($rows as $row) {
+            $result[(string) $row['work_date']] = true;
+        }
+
+        return $result;
+    }
+
    public function hasPendingSiteValidationForSiteAndDate(int $siteId, DateTimeInterface $date): bool
    {
        $workDate = DateTimeImmutable::createFromInterface($date);
--- a/src/State/EmployeeLeaveSummaryProvider.php
+++ b/src/State/EmployeeLeaveSummaryProvider.php
@@ -91,16 +91,19 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface

        $fractionedDays = $this->resolveFractionedDays($employee, $yearSummary['ruleCode'], $year);

-        $summary->isSupported        = true;
-        $summary->ruleCode           = $yearSummary['ruleCode'];
-        $summary->acquiredDays       = $yearSummary['acquiredDays'] + $fractionedDays;
-        $summary->acquiredSaturdays  = $yearSummary['acquiredSaturdays'];
-        $summary->fractionedDays     = $fractionedDays;
-        $summary->accruingDays       = $yearSummary['accruingDays'];
-        $summary->takenDays          = $yearSummary['takenDays'];
-        $summary->takenSaturdays     = $yearSummary['takenSaturdays'];
-        $summary->remainingDays      = $yearSummary['remainingDays'] + $fractionedDays;
-        $summary->remainingSaturdays = $yearSummary['remainingSaturdays'];
+        $summary->isSupported               = true;
+        $summary->ruleCode                  = $yearSummary['ruleCode'];
+        $summary->acquiredDays              = $yearSummary['acquiredDays'] + $fractionedDays;
+        $summary->acquiredSaturdays         = $yearSummary['acquiredSaturdays'];
+        $summary->fractionedDays            = $fractionedDays;
+        $summary->accruingDays              = $yearSummary['accruingDays'];
+        $summary->takenDays                 = $yearSummary['takenDays'];
+        $summary->takenSaturdays            = $yearSummary['takenSaturdays'];
+        $summary->remainingDays             = $yearSummary['remainingDays'] + $fractionedDays;
+        $summary->remainingSaturdays        = $yearSummary['remainingSaturdays'];
+        $summary->previousYearAcquiredDays  = $yearSummary['previousYearAcquiredDays'];
+        $summary->previousYearTakenDays     = $yearSummary['previousYearTakenDays'];
+        $summary->previousYearRemainingDays = $yearSummary['previousYearRemainingDays'];

        [$periodFrom, $periodTo]      = $this->resolvePeriodBounds($employee, $year);
        $summary->presenceDaysByMonth = $this->computePresenceDaysByMonth($employee, $periodFrom, $periodTo);
@@ -117,7 +120,10 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
     *   takenDays: float,
     *   takenSaturdays: float,
     *   remainingDays: float,
-     *   remainingSaturdays: float
+     *   remainingSaturdays: float,
+     *   previousYearAcquiredDays: float,
+     *   previousYearTakenDays: float,
+     *   previousYearRemainingDays: float
     * }
     */
    private function computeYearSummary(Employee $employee, int $targetYear): ?array
@@ -214,6 +220,10 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
                $takenDays += $openingBalance->getTakenDays();
                $takenSaturdays += $openingBalance->getTakenSaturdays();
            }
+            $previousYearAcquired  = 0.0;
+            $previousYearTaken     = 0.0;
+            $previousYearRemaining = 0.0;
+
            if (LeaveRuleCode::CDI_CDD_NON_FORFAIT->value === $leavePolicy['ruleCode']) {
                $availableAcquired  = max(0.0, $carryDays);
                $takenFromAcquired  = min($availableAcquired, $takenDays);
@@ -238,26 +248,37 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
            } else {
                // Forfait: no "en cours d'acquisition" counter, all rights are in acquired.
                // Suspensions do not impact forfait 218 leave calculation.
-                $acquiredDays       = $carryDays + $leavePolicy['acquiredDays'];
+                // Taken days are first deducted from N-1 carry, then from current year.
+                $previousYearAcquired = $carryDays;
+                $takenFromPrevious    = min(max(0.0, $previousYearAcquired), $takenDays);
+                $previousYearTaken    = $takenFromPrevious;
+                $takenFromCurrent     = $takenDays - $takenFromPrevious;
+
+                $previousYearRemaining = max(0.0, $previousYearAcquired - $takenFromPrevious);
+
+                $acquiredDays       = $leavePolicy['acquiredDays'];
                $accruingDays       = 0.0;
-                $remainingDays      = max(0.0, $acquiredDays - $takenDays);
+                $remainingDays      = max(0.0, $acquiredDays - $takenFromCurrent);
                $acquiredSaturdays  = 0.0;
                $remainingSaturdays = 0.0;

-                $previousRemainingDays      = $remainingDays;
+                $previousRemainingDays      = $previousYearRemaining + $remainingDays;
                $previousRemainingSaturdays = 0.0;
            }

            if ($year === $targetYear) {
                $targetSummary = [
-                    'ruleCode'           => $leavePolicy['ruleCode'],
-                    'acquiredDays'       => $acquiredDays,
-                    'acquiredSaturdays'  => $acquiredSaturdays,
-                    'accruingDays'       => $accruingDays,
-                    'takenDays'          => $takenDays,
-                    'takenSaturdays'     => $takenSaturdays,
-                    'remainingDays'      => $remainingDays,
-                    'remainingSaturdays' => $remainingSaturdays,
+                    'ruleCode'                  => $leavePolicy['ruleCode'],
+                    'acquiredDays'              => $acquiredDays,
+                    'acquiredSaturdays'         => $acquiredSaturdays,
+                    'accruingDays'              => $accruingDays,
+                    'takenDays'                 => $takenDays,
+                    'takenSaturdays'            => $takenSaturdays,
+                    'remainingDays'             => $remainingDays,
+                    'remainingSaturdays'        => $remainingSaturdays,
+                    'previousYearAcquiredDays'  => $previousYearAcquired,
+                    'previousYearTakenDays'     => $previousYearTaken,
+                    'previousYearRemainingDays' => $previousYearRemaining,
                ];
            }
        }
@@ -544,16 +565,34 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
        $weekendWorkedDays = $this->workHourRepository->countWeekendWorkedDaysByMonth($employee, $from, $to);
        $absences          = $this->absenceRepository->findByEmployeeAndOverlappingDateRange($employee, $from, $to);

-        // Count absence days per month (0.5 for half-days).
+        // Find which public holidays were actually worked (should count as presence).
+        $workedHolidays = [] !== $publicHolidays
+            ? $this->workHourRepository->findWorkedDatesAmong($employee, array_keys($publicHolidays))
+            : [];
+
+        // Count absence days per month, iterating day by day to handle multi-day absences
+        // and properly distribute across months.
        $absenceDaysByMonth = [];
        foreach ($absences as $absence) {
-            $date     = DateTimeImmutable::createFromInterface($absence->getStartDate());
-            $monthKey = $date->format('Y-m');
-            $days     = 1.0;
-            if ($absence->getStartHalf() === $absence->getEndHalf()) {
-                $days = 0.5;
+            $start = DateTimeImmutable::createFromInterface($absence->getStartDate())->setTime(0, 0);
+            $end   = DateTimeImmutable::createFromInterface($absence->getEndDate())->setTime(0, 0);
+
+            for ($day = $start; $day <= $end; $day = $day->modify('+1 day')) {
+                $weekDay = (int) $day->format('N');
+                // Skip weekends
+                if ($weekDay >= 6) {
+                    continue;
+                }
+
+                $monthKey  = $day->format('Y-m');
+                [$am, $pm] = $this->resolveSegmentsForDate($absence, $day->format('Y-m-d'));
+                $dayAmount = ($am ? 0.5 : 0.0) + ($pm ? 0.5 : 0.0);
+                if ($dayAmount <= 0.0) {
+                    continue;
+                }
+
+                $absenceDaysByMonth[$monthKey] = ($absenceDaysByMonth[$monthKey] ?? 0.0) + $dayAmount;
            }
-            $absenceDaysByMonth[$monthKey] = ($absenceDaysByMonth[$monthKey] ?? 0.0) + $days;
        }

        // Count business days and public holidays per month.
@@ -574,7 +613,8 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
                $day = $day->modify('+1 day')
            ) {
                $weekDay = (int) $day->format('N');
-                if ($weekDay <= 5 && !isset($publicHolidays[$day->format('Y-m-d')])) {
+                $dayKey  = $day->format('Y-m-d');
+                if ($weekDay <= 5 && (!isset($publicHolidays[$dayKey]) || isset($workedHolidays[$dayKey]))) {
                    ++$businessDays;
                }
            }
--- a/src/State/MileageAllowanceDeleteProcessor.php
+++ b/src/State/MileageAllowanceDeleteProcessor.php
@@ -0,0 +1,42 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use App\Entity\MileageAllowance;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+
+final readonly class MileageAllowanceDeleteProcessor implements ProcessorInterface
+{
+    public function __construct(
+        private EntityManagerInterface $entityManager,
+        #[Autowire('%kernel.project_dir%/var/uploads')]
+        private string $uploadDir,
+    ) {}
+
+    public function process(mixed $data, Operation $operation, array $uriVariables = [], array $context = []): null
+    {
+        if (!$data instanceof MileageAllowance) {
+            return null;
+        }
+
+        $receiptPath = $data->getReceiptPath();
+
+        if (null !== $receiptPath) {
+            $absolutePath = sprintf('%s/%s', $this->uploadDir, $receiptPath);
+
+            if (file_exists($absolutePath)) {
+                unlink($absolutePath);
+            }
+        }
+
+        $this->entityManager->remove($data);
+        $this->entityManager->flush();
+
+        return null;
+    }
+}
--- a/src/State/MileageAllowanceReceiptDownloadProvider.php
+++ b/src/State/MileageAllowanceReceiptDownloadProvider.php
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Entity\MileageAllowance;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+use Symfony\Component\HttpFoundation\HeaderUtils;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+final readonly class MileageAllowanceReceiptDownloadProvider implements ProviderInterface
+{
+    public function __construct(
+        private EntityManagerInterface $entityManager,
+        #[Autowire('%kernel.project_dir%/var/uploads')]
+        private string $uploadDir,
+    ) {}
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): BinaryFileResponse
+    {
+        $mileageAllowance = $this->entityManager->find(MileageAllowance::class, $uriVariables['id']);
+
+        if (null === $mileageAllowance) {
+            throw new NotFoundHttpException('Mileage allowance not found.');
+        }
+
+        $receiptPath = $mileageAllowance->getReceiptPath();
+
+        if (null === $receiptPath) {
+            throw new NotFoundHttpException('No receipt found for this mileage allowance.');
+        }
+
+        $absolutePath = sprintf('%s/%s', $this->uploadDir, $receiptPath);
+
+        if (!file_exists($absolutePath)) {
+            throw new NotFoundHttpException('Receipt file not found.');
+        }
+
+        $response    = new BinaryFileResponse($absolutePath);
+        $disposition = HeaderUtils::makeDisposition(
+            HeaderUtils::DISPOSITION_ATTACHMENT,
+            $mileageAllowance->getReceiptName() ?? 'justificatif.pdf'
+        );
+        $response->headers->set('Content-Disposition', $disposition);
+
+        return $response;
+    }
+}
--- a/src/State/MileageAllowanceReceiptUploadProcessor.php
+++ b/src/State/MileageAllowanceReceiptUploadProcessor.php
@@ -0,0 +1,66 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use App\Entity\MileageAllowance;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
+use Symfony\Component\Uid\Uuid;
+
+final readonly class MileageAllowanceReceiptUploadProcessor implements ProcessorInterface
+{
+    public function __construct(
+        private EntityManagerInterface $entityManager,
+        private RequestStack $requestStack,
+        #[Autowire('%kernel.project_dir%/var/uploads')]
+        private string $uploadDir,
+    ) {}
+
+    public function process(mixed $data, Operation $operation, array $uriVariables = [], array $context = []): JsonResponse
+    {
+        if (!$data instanceof MileageAllowance) {
+            throw new BadRequestHttpException('Invalid entity.');
+        }
+
+        $request = $this->requestStack->getCurrentRequest();
+        $file    = $request?->files->get('file');
+
+        if (null === $file) {
+            throw new BadRequestHttpException('No file uploaded.');
+        }
+
+        if ('application/pdf' !== $file->getMimeType()) {
+            throw new BadRequestHttpException('Only PDF files are accepted.');
+        }
+
+        $month        = $data->getMonth();
+        $year         = $month?->format('Y') ?? date('Y');
+        $monthNumber  = $month?->format('m') ?? date('m');
+        $relativePath = sprintf('mileage-receipts/%s/%s', $year, $monthNumber);
+        $absoluteDir  = sprintf('%s/%s', $this->uploadDir, $relativePath);
+
+        if (!is_dir($absoluteDir)) {
+            mkdir($absoluteDir, 0o755, true);
+        }
+
+        $filename     = Uuid::v4()->toRfc4122().'.pdf';
+        $fullRelative = sprintf('%s/%s', $relativePath, $filename);
+        $originalName = $file->getClientOriginalName();
+
+        $file->move($absoluteDir, $filename);
+
+        $data->setReceiptPath($fullRelative);
+        $data->setReceiptName($originalName);
+        $this->entityManager->flush();
+
+        return new JsonResponse(['path' => $fullRelative, 'name' => $originalName], Response::HTTP_OK);
+    }
+}
--- a/src/State/WorkHourBulkUpsertProcessor.php
+++ b/src/State/WorkHourBulkUpsertProcessor.php
@@ -134,13 +134,15 @@ final readonly class WorkHourBulkUpsertProcessor implements ProcessorInterface
                continue;
            }

+            $is4hContract = 4 === $contract->getWeeklyHours();
+
            if ($this->isEntryEmpty($normalized)) {
                // Convention choisie: une ligne vide supprime l'enregistrement existant.
                if ($existing) {
                    $this->entityManager->remove($existing);
                    ++$result->deleted;
-                } elseif (($absenceByEmployeeId[$employeeId] ?? false) === true) {
-                    // Si une absence existe ce jour, on garde une ligne technique pour pouvoir valider la journée.
+                } elseif (($absenceByEmployeeId[$employeeId] ?? false) === true || $is4hContract) {
+                    // Si une absence existe ce jour ou contrat 4h, on garde une ligne technique pour pouvoir valider la journée.
                    $workHour = new WorkHour()
                        ->setEmployee($employee)
                        ->setWorkDate($workDate)
Author	SHA1	Message	Date
gitea-actions	8b20632ab8	chore: bump version to v0.1.37 All checks were successful Auto Tag Develop / tag (push) Successful in 5s Details Build Release Artefact / build (push) Successful in 1m18s Details	2026-03-13 15:06:06 +00:00
tristan	0cc2b2730a	feat : ajout des frais kms + alignment du style de l'application Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details	2026-03-13 16:05:54 +01:00
gitea-actions	c35edb9a1c	chore: bump version to v0.1.36 All checks were successful Auto Tag Develop / tag (push) Successful in 4s Details Build Release Artefact / build (push) Successful in 1m15s Details	2026-03-13 11:24:19 +00:00
tristan	4b04be1d1b	Merge remote-tracking branch 'origin/develop' into develop Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details	2026-03-13 12:24:11 +01:00
tristan	b24dd8595d	fix : calcule des jours de présence + SiteFilterSelector.vue	2026-03-13 12:23:55 +01:00
gitea-actions	96185e2334	chore: bump version to v0.1.35 All checks were successful Auto Tag Develop / tag (push) Successful in 4s Details Build Release Artefact / build (push) Successful in 1m17s Details	2026-03-13 11:11:40 +00:00
tristan	7d53000fc2	fix : validation autorisée pour les contrats 4h sans heures ou absence All checks were successful Auto Tag Develop / tag (push) Successful in 5s Details	2026-03-13 12:11:31 +01:00
gitea-actions	c317a2a026	chore: bump version to v0.1.34 All checks were successful Auto Tag Develop / tag (push) Successful in 5s Details Build Release Artefact / build (push) Successful in 1m20s Details	2026-03-13 10:59:58 +00:00
tristan	8846e83df1	feat : modification de l'affichage des congés All checks were successful Auto Tag Develop / tag (push) Successful in 5s Details	2026-03-13 11:57:02 +01:00
gitea-actions	ff824f233a	chore: bump version to v0.1.33 All checks were successful Auto Tag Develop / tag (push) Successful in 4s Details Build Release Artefact / build (push) Successful in 1m15s Details	2026-03-13 10:03:51 +00:00
tristan	c4c9dfceab	feat : amélioration des perfs de la page employée en séparant les responsabilités et le chargement par onglet Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details	2026-03-13 11:03:41 +01:00