chore: bump version to v0.1.97

fix : malio UI
chore: bump version to v0.1.96
2026-04-27 13:02:01 +00:00 · 2026-04-27 15:01:51 +02:00 · 2026-04-27 12:08:31 +00:00 · 2026-04-27 12:08:24 +00:00
18 changed files with 435 additions and 542 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -61,6 +61,7 @@
 - INTERIM: no overtime bonuses, no recovery time
 - Driver contracts: RTT uses `dayHoursMinutes + nightHoursMinutes + workshopHoursMinutes` instead of morning/afternoon/evening time ranges
 - FORFAIT weekend/holiday bonus: each weekend or public holiday day worked gives bonus leave (full day if morning+afternoon, 0.5 if only one). Added to acquired days, no cap. PRESENCE mode only.
+- **FORFAIT — jours de présence et N-1** : les congés posés et imputés sur le stock N-1 ne décrémentent **pas** les jours de présence affichés (`presenceDaysByMonth` et `presenceDaysToToday`). Implémenté dans `EmployeeLeaveSummaryProvider::computePresenceDaysByMonth` via un budget N-1 (= `previousYearTakenDays`) consommé chronologiquement avant comptage des absences. Pour les non-forfait, ce budget vaut toujours 0 → comportement inchangé.

 ## Récap. congés (écran)
 - Accès via sidebar `Récap. congés`, conditionné au flag `User.hasLeaveRecapAccess` (défaut `false`) — activé au create/edit user. Le flag s'applique à tous les profils, y compris admin.
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.95'
+    app.version: '0.1.97'
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -335,7 +335,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 | Contrat | Contract.name |
 | CP N-1 restant | CDI/CDD: acquis N-1 − pris sur N-1. Forfait: report N-1 restant |
 | Samedi restant | CDI/CDD: samedis acquis N-1 − pris. Forfait: `-` |
-| CP N | Forfait: jours acquis année civile. Non-forfait: en cours d'acquisition |
+| CP N | Forfait: restant sur quota année civile (acquis − pris depuis N, sans toucher au stock N-1). Non-forfait: en cours d'acquisition |
 | RTT | Minutes disponibles (report N-1 + acquis N - payés). Format `X h Y m`. Forfait et INTERIM: `-` |

 ## 10bis) Écran Récap. congés (tableau)
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -6,6 +6,7 @@
              <MalioSelectCheckbox
                  v-model="selectedSiteIds"
                  :options="siteOptions"
+                  groupClass="w-80"
                  label="Sites"
                  display-select-all
              />
@@ -46,6 +47,7 @@
                      <MalioSelectCheckbox
                          v-model="selectedSiteIds"
                          :options="siteOptions"
+                          groupClass="w-80"
                          label="Sites"
                          display-select-all
                      />
--- a/frontend/composables/useEmployeeDetailPage.ts
+++ b/frontend/composables/useEmployeeDetailPage.ts
@@ -10,10 +10,11 @@ export const useEmployeeDetailPage = () => {

  const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
  const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
+  const isForfait = computed(() => employee.value?.contract?.type === CONTRACT_TYPES.FORFAIT)
  const employeeContractWorkLabel = computed(() => {
    const contract = employee.value?.contract
    if (!contract) return '-'
-    if (contract.type === CONTRACT_TYPES.FORFAIT) return 'Forfait'
+    if (contract.type === CONTRACT_TYPES.FORFAIT) return 'Forfait - 218 jours'
    if (contract.weeklyHours !== null && contract.weeklyHours !== undefined) return `${contract.weeklyHours} heures`
    return contract.name || '-'
  })
@@ -55,6 +56,9 @@ export const useEmployeeDetailPage = () => {
        await bonus.loadBonusData()
      } else if (activeTab.value === 'observation') {
        await observation.loadObservationData()
+      } else if (isForfait.value && showLeaveTab.value) {
+        // Eager load: needed for the "X jours restants" header label on forfait employees.
+        await leave.loadLeaveData()
      }
    } finally {
      isLoading.value = false
@@ -63,6 +67,13 @@ export const useEmployeeDetailPage = () => {

  const contract = useEmployeeContract(employee, loadEmployee)
  const leave = useEmployeeLeave(employee, loadEmployee)
+  const forfaitRemainingDaysLabel = computed(() => {
+    if (!isForfait.value) return ''
+    const presence = leave.leaveSummary.value?.presenceDaysToToday
+    if (presence === undefined || presence === null) return ''
+    const remaining = 218 - presence
+    return ` (${remaining} restants)`
+  })
  const rtt = useEmployeeRtt(employee, loadEmployee)
  const mileage = useEmployeeMileage(employee, loadEmployee)
  const formation = useEmployeeFormation(employee, loadEmployee)
@@ -97,6 +108,7 @@ export const useEmployeeDetailPage = () => {
    showLeaveTab,
    showRttTab,
    employeeContractWorkLabel,
+    forfaitRemainingDaysLabel,
    ...contract,
    ...leave,
    ...rtt,
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,7 @@
            "name": "frontend",
            "hasInstallScript": true,
            "dependencies": {
-                "@malio/layer-ui": "^1.4.3",
+                "@malio/layer-ui": "^1.4.6",
                "@nuxt/icon": "^2.2.1",
                "@nuxtjs/i18n": "^10.2.1",
                "@pinia/nuxt": "^0.11.3",
@@ -2222,9 +2222,9 @@
            "license": "MIT"
        },
        "node_modules/@malio/layer-ui": {
-            "version": "1.4.3",
-            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.4.3/layer-ui-1.4.3.tgz",
-            "integrity": "sha512-XGR0VteuRGGizl8ZP2ZRlyWsdSTAwOYR7z5687Gx/SFr5eTg+poOV2NupqOuWCksxEcXA54vzzC0vMG8PbSvxg==",
+            "version": "1.4.6",
+            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.4.6/layer-ui-1.4.6.tgz",
+            "integrity": "sha512-stHqUAJ8E6a62Ka7QXlE177GhkIsjtmYNa/tNk1TVpbJ099okfLLivrlofEl7CCAqDeMaIepnW4q0vxJT+EFEA==",
            "dependencies": {
                "@nuxt/icon": "^2.2.1",
                "@nuxtjs/tailwindcss": "^6.14.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
    "dependencies": {
        "@nuxt/icon": "^2.2.1",
        "@nuxtjs/i18n": "^10.2.1",
-        "@malio/layer-ui": "^1.4.3",
+        "@malio/layer-ui": "^1.4.6",
        "@pinia/nuxt": "^0.11.3",
        "nuxt": "^4.3.0",
        "nuxt-toast": "^1.4.0",
--- a/frontend/pages/absence-types.vue
+++ b/frontend/pages/absence-types.vue
@@ -2,13 +2,12 @@
  <div class="h-full flex flex-col overflow-hidden">
    <div class="flex items-center justify-between pb-6">
      <h1 class="text-4xl font-bold text-primary-500">Types de statut</h1>
-      <button
-        type="button"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+      <MalioButton
+        label="Ajouter un type"
+        icon-name="mdi:plus"
+        icon-position="left"
        @click="openCreate"
-      >
-        + Ajouter un type
-      </button>
+      />
    </div>

    <div
@@ -56,60 +55,40 @@
      </div>
    </div>

-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+    <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
      <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="code">
-            Code <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="code"
-            v-model="form.code"
-            type="text"
-            maxlength="10"
-            :class="codeFieldClass"
-          />
-          <p v-if="showCodeError" class="mt-1 text-sm text-red-600">
-            Le code est obligatoire.
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="label">
-            Libellé <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="label"
-            v-model="form.label"
-            type="text"
-            :class="labelFieldClass"
-          />
-          <p v-if="showLabelError" class="mt-1 text-sm text-red-600">
-            Le libellé est obligatoire.
-          </p>
-        </div>
+        <MalioInputText
+          v-model="form.code"
+          label="Code *"
+          group-class="mt-2"
+          :max-length="10"
+          :error="showCodeError ? 'Le code est obligatoire.' : ''"
+        />
+        <MalioInputText
+          v-model="form.label"
+          label="Libellé *"
+          group-class="mt-2"
+          :error="showLabelError ? 'Le libellé est obligatoire.' : ''"
+        />
        <div>
          <label class="text-md font-semibold text-neutral-700">
            Compté comme travaillé
          </label>
          <div class="mt-2 flex items-center gap-6">
-            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
-              <input
-                v-model="form.countAsWorkedHours"
-                type="radio"
-                class="h-4 w-4"
-                :value="true"
-              />
-              Oui
-            </label>
-            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
-              <input
-                v-model="form.countAsWorkedHours"
-                type="radio"
-                class="h-4 w-4"
-                :value="false"
-              />
-              Non
-            </label>
+            <MalioRadioButton
+              v-model="form.countAsWorkedHours"
+              name="countAsWorkedHours"
+              :value="true"
+              label="Oui"
+              group-class="w-auto mt-0"
+            />
+            <MalioRadioButton
+              v-model="form.countAsWorkedHours"
+              name="countAsWorkedHours"
+              :value="false"
+              label="Non"
+              group-class="w-auto mt-0"
+            />
          </div>
        </div>
        <div>
@@ -130,32 +109,29 @@
          </p>
        </div>
        <div v-if="editingType" 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"
+          <MalioButton
+            label="Supprimer"
+            variant="danger"
+            button-class="w-full"
            @click="confirmDelete(editingType)"
-          >
-            Supprimer
-          </button>
-          <button
+          />
+          <MalioButton
            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"
-            :class="submitButtonClass"
-          >
-            Modifier
-          </button>
+            label="Modifier"
+            button-class="w-full"
+            :disabled="isSubmitting || !isFormValid"
+          />
        </div>
        <div v-else class="flex justify-center pt-2">
-          <button
+          <MalioButton
            type="submit"
-            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            + Ajouter
-          </button>
+            label="Valider"
+            button-class="w-[200px]"
+            :disabled="isSubmitting || !isFormValid"
+          />
        </div>
      </form>
-    </AppDrawer>
+    </MalioDrawer>
  </div>
 </template>

@@ -202,20 +178,6 @@ const showCodeError = computed(() => validationTouched.code && !isCodeValid.valu
 const showLabelError = computed(() => validationTouched.label && !isLabelValid.value)
 const showColorError = computed(() => validationTouched.color && !isColorValid.value)

-const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const codeFieldClass = computed(() => {
-  if (showCodeError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const labelFieldClass = computed(() => {
-  if (showLabelError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
 const colorFieldClass = computed(() => {
  const baseColorClass = 'h-10 w-16 cursor-pointer rounded-md border bg-white p-1'
  if (showColorError.value) {
@@ -224,13 +186,6 @@ const colorFieldClass = computed(() => {
  return `${baseColorClass} border-neutral-300`
 })

-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
-
 const loadAbsenceTypes = async () => {
  isLoading.value = true
  try {
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -5,16 +5,13 @@
        </div>
        <div class="flex flex-col gap-3 py-6">
            <div class="flex items-center justify-between gap-4">
-                <div class="flex items-center gap-4">
-                    <div class="relative z-50 w-80">
-                        <MalioSelectCheckbox
-                            v-model="selectedSiteIds"
-                            :options="siteOptions"
-                            label="Sites"
-                            display-select-all
-                        />
-                    </div>
-                </div>
+                    <MalioSelectCheckbox
+                        v-model="selectedSiteIds"
+                        :options="siteOptions"
+                        label="Sites"
+                        groupClass="relative z-50 w-80 h-10"
+                        display-select-all
+                    />
                <div class="flex gap-4">
                    <MalioButton
                        label="Ajouter une absence"
--- a/frontend/pages/employees/[id].vue
+++ b/frontend/pages/employees/[id].vue
@@ -26,7 +26,7 @@
                    <p>Date d'entrée : {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
                </div>
                <div class="text-right">
-                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}</p>
+                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}{{ forfaitRemainingDaysLabel }}</p>
                    <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                </div>
            </div>
@@ -257,6 +257,7 @@ const {
    showRttTab,
    contractHistory,
    employeeContractWorkLabel,
+    forfaitRemainingDaysLabel,
    contractForm,
    createContractForm,
    isContractDrawerOpen,
--- a/frontend/pages/employees/index.vue
+++ b/frontend/pages/employees/index.vue
@@ -4,34 +4,19 @@
            <div class="flex items-center justify-between">
                <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
                <div class="flex items-center gap-3">
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        @click="handleLeaveRecapPrint"
-                    >
-                        Export récap. congés
-                    </button>
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        @click="isSalaryRecapOpen = true"
-                    >
-                        Export récap. salaire
-                    </button>
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        @click="isYearlyHoursBulkOpen = true"
-                    >
-                        Export heures
-                    </button>
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    <MalioButton
+                        label="Export"
+                        variant="secondary"
+                        icon-name="mdi:download"
+                        icon-position="left"
+                        @click="openExportDrawer"
+                    />
+                    <MalioButton
+                        label="Ajouter un employé"
+                        icon-name="mdi:plus"
+                        icon-position="left"
                        @click="openCreate"
-                    >
-                        + Ajouter un employé
-                    </button>
+                    />
                </div>
            </div>
            <div class="flex items-center gap-3 py-7">
@@ -46,6 +31,7 @@
                    <MalioSelectCheckbox
                        v-model="selectedSiteIds"
                        :options="siteOptions"
+                        groupClass="w-80"
                        label="Sites"
                        display-select-all
                    />
@@ -98,105 +84,53 @@
            </NuxtLink>
        </div>

-        <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+        <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
            <form class="space-y-4" @submit.prevent="handleSubmit">
-                <div>
-                    <label class="text-md font-semibold text-neutral-700" for="first-name">
-                        Prénom <span class="text-red-600">*</span>
-                    </label>
-                    <input
-                        id="first-name"
-                        v-model="form.firstName"
-                        type="text"
-                        :class="firstNameFieldClass"
-                    />
-                    <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
-                        Le prénom est obligatoire.
-                    </p>
-                </div>
-                <div>
-                    <label class="text-md font-semibold text-neutral-700" for="last-name">
-                        Nom <span class="text-red-600">*</span>
-                    </label>
-                    <input
-                        id="last-name"
-                        v-model="form.lastName"
-                        type="text"
-                        :class="lastNameFieldClass"
-                    />
-                    <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
-                        Le nom est obligatoire.
-                    </p>
-                </div>
-                <div>
-                    <label class="text-md font-semibold text-neutral-700" for="site">
-                        Site <span class="text-red-600">*</span>
-                    </label>
-                    <select
-                        id="site"
-                        v-model="form.siteId"
-                        :class="siteFieldClass"
-                    >
-                        <option value="">Aucun site</option>
-                        <option v-for="site in sites" :key="site.id" :value="site.id">
-                            {{ site.name }}
-                        </option>
-                    </select>
-                    <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
-                        Le site est obligatoire.
-                    </p>
-                </div>
+                <MalioInputText
+                    v-model="form.firstName"
+                    label="Prénom *"
+                    group-class="mt-2"
+                    :error="showFirstNameError ? 'Le prénom est obligatoire.' : ''"
+                />
+                <MalioInputText
+                    v-model="form.lastName"
+                    label="Nom *"
+                    group-class="mt-2"
+                    :error="showLastNameError ? 'Le nom est obligatoire.' : ''"
+                />
+                <MalioSelect
+                    :model-value="form.siteId === '' ? null : form.siteId"
+                    :options="formSiteOptions"
+                    label="Site *"
+                    min-width=""
+                    :error="showSiteError ? 'Le site est obligatoire.' : ''"
+                    @update:model-value="(v) => { form.siteId = v === null ? '' : Number(v) }"
+                />
                <template v-if="!editingEmployee">
-                    <div>
-                        <label class="text-md font-semibold text-neutral-700" for="contract-nature">
-                            Type de contrat <span class="text-red-600">*</span>
-                        </label>
-                        <select
-                            id="contract-nature"
-                            v-model="form.contractNature"
-                            :class="contractNatureFieldClass"
-                        >
-                            <option value="CDI">CDI</option>
-                            <option value="CDD">CDD</option>
-                            <option value="INTERIM">Intérim</option>
-                        </select>
-                        <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
-                            Le type de contrat est obligatoire.
-                        </p>
-                    </div>
-                    <div v-if="form.contractNature === 'INTERIM'">
-                        <label class="text-md font-semibold text-neutral-700" for="interim-agency">
-                            Agence d'intérim
-                        </label>
-                        <select
-                            id="interim-agency"
-                            v-model="form.interimAgencyId"
-                            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-                        >
-                            <option value="">Aucune</option>
-                            <option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
-                                {{ agency.name }}
-                            </option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="text-md font-semibold text-neutral-700" for="contract">
-                            Temps de travail <span class="text-red-600">*</span>
-                        </label>
-                        <select
-                            id="contract"
-                            v-model="form.contractId"
-                            :class="contractFieldClass"
-                        >
-                            <option value="">Sélectionner un contrat</option>
-                            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
-                                {{ contract.name }}
-                            </option>
-                        </select>
-                        <p v-if="showContractError" class="mt-1 text-sm text-red-600">
-                            Le temps de travail est obligatoire.
-                        </p>
-                    </div>
+                    <MalioSelect
+                        :model-value="form.contractNature"
+                        :options="contractNatureFormOptions"
+                        label="Type de contrat *"
+                        min-width=""
+                        :error="showContractNatureError ? 'Le type de contrat est obligatoire.' : ''"
+                        @update:model-value="(v) => { if (v !== null) form.contractNature = v as 'CDI' | 'CDD' | 'INTERIM' }"
+                    />
+                    <MalioSelect
+                        v-if="form.contractNature === 'INTERIM'"
+                        :model-value="form.interimAgencyId === '' ? null : form.interimAgencyId"
+                        :options="interimAgencyOptions"
+                        label="Agence d'intérim"
+                        min-width=""
+                        @update:model-value="(v) => { form.interimAgencyId = v === null ? '' : Number(v) }"
+                    />
+                    <MalioSelect
+                        :model-value="form.contractId === '' ? null : form.contractId"
+                        :options="contractFormOptions"
+                        label="Temps de travail *"
+                        min-width=""
+                        :error="showContractError ? 'Le temps de travail est obligatoire.' : ''"
+                        @update:model-value="(v) => { form.contractId = v === null ? '' : Number(v) }"
+                    />
                    <div>
                        <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
                            Début contrat <span class="text-red-600">*</span>
@@ -205,7 +139,7 @@
                            id="contract-start-date"
                            v-model="form.contractStartDate"
                            type="date"
-                            :class="contractStartDateFieldClass"
+                            :class="[dateInputBaseClass, form.contractStartDate ? 'border-black' : 'border-m-muted', showContractStartDateError ? '!border-m-danger' : '']"
                        />
                        <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
                            La date de début est obligatoire.
@@ -220,22 +154,18 @@
                            id="contract-end-date"
                            v-model="form.contractEndDate"
                            type="date"
-                            :class="contractEndDateFieldClass"
+                            :class="[dateInputBaseClass, form.contractEndDate ? 'border-black' : 'border-m-muted', showContractEndDateError ? '!border-m-danger' : '']"
                        />
                        <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
                            La date de fin est obligatoire pour un CDD ou un Intérim.
                        </p>
                    </div>
-                    <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
-                        <label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="is-driver">
-                            <input
-                                id="is-driver"
-                                v-model="form.isDriver"
-                                type="checkbox"
-                                class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
-                            />
-                            Chauffeur
-                        </label>
+                    <div class="flex h-10 items-center rounded-md border border-neutral-200 bg-neutral-50 px-3">
+                        <MalioCheckbox
+                            v-model="form.isDriver"
+                            label="Chauffeur"
+                            group-class="flex items-center"
+                        />
                    </div>
                    <WorkDaysHoursInput
                        v-if="requiresSchedule"
@@ -244,34 +174,72 @@
                    />
                </template>
                <div class="flex justify-end gap-3 pt-2">
-                    <button
-                        type="button"
-                        class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                    <MalioButton
+                        label="Annuler"
+                        variant="tertiary"
                        @click="isDrawerOpen = false"
-                    >
-                        Annuler
-                    </button>
-                    <button
+                    />
+                    <MalioButton
                        type="submit"
-                        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        :class="submitButtonClass"
-                    >
-                        Enregistrer
-                    </button>
+                        label="Enregistrer"
+                        :disabled="isSubmitting || !isFormValid"
+                    />
                </div>
            </form>
-        </AppDrawer>
+        </MalioDrawer>

-        <SalaryRecapDrawer
-            v-model="isSalaryRecapOpen"
-            @submit="handleSalaryRecapPrint"
-        />
+        <MalioDrawer v-model="isExportDrawerOpen" title="Export">
+            <div class="space-y-4">
+                <MalioSelect
+                    :model-value="exportChoice === '' ? null : exportChoice"
+                    :options="exportTypeOptions"
+                    label="Type d'export"
+                    empty-option-label="Choisir un export"
+                    group-class="mt-2"
+                    min-width=""
+                    @update:model-value="onExportChoiceChange"
+                />

-        <BulkYearlyHoursDrawer
-            v-model="isYearlyHoursBulkOpen"
-            :is-loading="isYearlyHoursBulkLoading"
-            @submit="handleBulkYearlyHoursPrint"
-        />
+                <div v-if="exportChoice === 'salary-recap'">
+                    <label class="text-md font-semibold text-neutral-700" for="export-salary-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="export-salary-month"
+                        v-model="exportSalaryMonth"
+                        type="month"
+                        class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                    />
+                </div>
+
+                <template v-else-if="exportChoice === 'yearly-hours'">
+                    <MalioSelect
+                        :model-value="exportYear"
+                        :options="exportYearOptions"
+                        label="Année *"
+                        min-width=""
+                        @update:model-value="(v) => { if (v !== null) exportYear = Number(v) }"
+                    />
+                    <MalioSelect
+                        :model-value="exportMonth === '' ? null : exportMonth"
+                        :options="exportMonthOptions"
+                        label="Mois *"
+                        empty-option-label="Choisir un mois"
+                        min-width=""
+                        @update:model-value="(v) => { exportMonth = v === null ? '' : Number(v) }"
+                    />
+                </template>
+
+                <div class="flex justify-center pt-2">
+                    <MalioButton
+                        label="Valider"
+                        button-class="w-[200px]"
+                        :disabled="!isExportValid"
+                        @click="handleExportValidate"
+                    />
+                </div>
+            </div>
+        </MalioDrawer>
    </div>
 </template>

@@ -285,8 +253,6 @@ import {listContracts} from '~/services/contracts'
 import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
 import {listSites} from '~/services/sites'
 import {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
-import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
-import BulkYearlyHoursDrawer from '~/components/BulkYearlyHoursDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
 import {usePdfPrinter} from '~/composables/usePdfPrinter'

@@ -297,9 +263,50 @@ useHead({
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
-const isSalaryRecapOpen = ref(false)
-const isYearlyHoursBulkOpen = ref(false)
-const isYearlyHoursBulkLoading = ref(false)
+const isExportDrawerOpen = ref(false)
+const exportChoice = ref<'leave-recap' | 'salary-recap' | 'yearly-hours' | ''>('')
+const exportYear = ref<number>(new Date().getFullYear())
+const exportMonth = ref<number | ''>(new Date().getMonth() + 1)
+const exportSalaryMonth = ref<string>(`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`)
+
+const exportTypeOptions = [
+    { label: 'Récap. congés', value: 'leave-recap' },
+    { label: 'Récap. salaire', value: 'salary-recap' },
+    { label: 'Heures annuelles', value: 'yearly-hours' }
+]
+const exportYearOptions = computed(() => {
+    const current = new Date().getFullYear()
+    return Array.from({ length: 6 }, (_, i) => ({ label: String(current - i), value: current - i }))
+})
+const exportMonthOptions = [
+    { label: 'Janvier', value: 1 },
+    { label: 'Février', value: 2 },
+    { label: 'Mars', value: 3 },
+    { label: 'Avril', value: 4 },
+    { label: 'Mai', value: 5 },
+    { label: 'Juin', value: 6 },
+    { label: 'Juillet', value: 7 },
+    { label: 'Août', value: 8 },
+    { label: 'Septembre', value: 9 },
+    { label: 'Octobre', value: 10 },
+    { label: 'Novembre', value: 11 },
+    { label: 'Décembre', value: 12 }
+]
+
+const isExportValid = computed(() => {
+    if (!exportChoice.value) return false
+    if (exportChoice.value === 'salary-recap') {
+        return exportSalaryMonth.value.trim() !== ''
+    }
+    if (exportChoice.value === 'yearly-hours') {
+        return exportYear.value > 0 && exportMonth.value !== ''
+    }
+    return true
+})
+
+const onExportChoiceChange = (value: string | number | null) => {
+    exportChoice.value = (value === null ? '' : String(value)) as 'leave-recap' | 'salary-recap' | 'yearly-hours' | ''
+}
 const { printPdf } = usePdfPrinter()
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
@@ -425,63 +432,23 @@ const showContractEndDateError = computed(
    () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
 )

-const baseInputClass =
-    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const firstNameFieldClass = computed(() => {
-    if (showFirstNameError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
-const lastNameFieldClass = computed(() => {
-    if (showLastNameError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
-const siteFieldClass = computed(() => {
-    const baseSelectClass =
-        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-    if (showSiteError.value) {
-        return `${baseSelectClass} border-red-500`
-    }
-    return `${baseSelectClass} border-neutral-300`
-})
-const contractFieldClass = computed(() => {
-    const baseClass =
-        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-    if (showContractError.value) {
-        return `${baseClass} border-red-500`
-    }
-    return `${baseClass} border-neutral-300`
-})
-const contractNatureFieldClass = computed(() => {
-    const baseClass =
-        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-    if (showContractNatureError.value) {
-        return `${baseClass} border-red-500`
-    }
-    return `${baseClass} border-neutral-300`
-})
-const contractStartDateFieldClass = computed(() => {
-    if (showContractStartDateError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
-const contractEndDateFieldClass = computed(() => {
-    if (showContractEndDateError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
+const dateInputBaseClass =
+    'mt-2 h-10 w-full rounded-md border px-3 text-md text-black outline-none focus:border-2 focus:border-m-primary'

-const submitButtonClass = computed(() => {
-    if (isSubmitting.value || !isFormValid.value) {
-        return 'opacity-50 cursor-not-allowed'
-    }
-    return ''
-})
+const formSiteOptions = computed(() =>
+    sites.value.map((site) => ({ label: site.name, value: site.id }))
+)
+const interimAgencyOptions = computed(() =>
+    interimAgencies.value.map((agency) => ({ label: agency.name, value: agency.id }))
+)
+const contractFormOptions = computed(() =>
+    contracts.value.map((contract) => ({ label: contract.name, value: contract.id }))
+)
+const contractNatureFormOptions = [
+    { label: 'CDI', value: 'CDI' },
+    { label: 'CDD', value: 'CDD' },
+    { label: 'Intérim', value: 'INTERIM' }
+]

 const loadEmployees = async () => {
    isLoading.value = true
@@ -632,26 +599,29 @@ const openCreate = () => {
    isDrawerOpen.value = true
 }

-const handleLeaveRecapPrint = async () => {
-    await printPdf('/leave-recap/print')
+const openExportDrawer = () => {
+    exportChoice.value = ''
+    const now = new Date()
+    exportYear.value = now.getFullYear()
+    exportMonth.value = now.getMonth() + 1
+    exportSalaryMonth.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+    isExportDrawerOpen.value = true
 }

-const handleSalaryRecapPrint = async (month: string) => {
-    await printPdf(`/salary-recap/print?month=${month}`)
-    isSalaryRecapOpen.value = false
-}
-
-const handleBulkYearlyHoursPrint = async (payload: { year: number; month: number | null }) => {
-    isYearlyHoursBulkLoading.value = true
-    try {
-        const monthParam = null !== payload.month ? `&month=${payload.month}` : ''
-        await printPdf(`/yearly-hours/print-all?year=${payload.year}${monthParam}`)
-        isYearlyHoursBulkOpen.value = false
-    } finally {
-        isYearlyHoursBulkLoading.value = false
+const handleExportValidate = async () => {
+    if (!isExportValid.value) return
+    const choice = exportChoice.value
+    isExportDrawerOpen.value = false
+    if (choice === 'leave-recap') {
+        await printPdf('/leave-recap/print')
+    } else if (choice === 'salary-recap') {
+        await printPdf(`/salary-recap/print?month=${exportSalaryMonth.value}`)
+    } else if (choice === 'yearly-hours') {
+        await printPdf(`/yearly-hours/print-all?year=${exportYear.value}&month=${exportMonth.value}`)
    }
 }

+
 const confirmDelete = async (employee: Employee) => {
    const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
    if (!ok) return
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -9,31 +9,18 @@
            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
            @submit.prevent="handleSubmit"
        >
-            <div>
-                <label class="text-sm font-semibold text-neutral-700" for="username">
-                    Nom d'utilisateur
-                </label>
-                <input
-                    id="username"
-                    v-model="username"
-                    type="text"
-                    autocomplete="username"
-                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
-                />
-            </div>
+            <MalioInputText
+                v-model="username"
+                label="Nom d'utilisateur"
+                autocomplete="username"
+                group-class="mt-2"
+            />

-            <div>
-                <label class="text-sm font-semibold text-neutral-700" for="password">
-                    Mot de passe
-                </label>
-                <input
-                    id="password"
-                    v-model="password"
-                    type="password"
-                    autocomplete="current-password"
-                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
-                />
-            </div>
+            <MalioInputPassword
+                v-model="password"
+                label="Mot de passe"
+                autocomplete="current-password"
+            />

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

    <div
@@ -52,22 +51,14 @@
      </div>
    </div>

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

@@ -146,22 +134,6 @@ const isFormValid = computed(() => isNameValid.value)

 const showNameError = computed(() => validationTouched.name && !isNameValid.value)

-const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const nameFieldClass = computed(() => {
-  if (showNameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-
-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
-
 const loadSites = async () => {
  isLoading.value = true
  try {
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -2,13 +2,12 @@
  <div class="h-full flex flex-col overflow-hidden">
    <div class="flex items-center justify-between pb-6">
      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Utilisateurs</h1>
-      <button
-        type="button"
-        class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500 lg:px-4 lg:text-md"
+      <MalioButton
+        label="Ajouter"
+        icon-name="mdi:plus"
+        icon-position="left"
        @click="openCreate"
-      >
-        + Ajouter
-      </button>
+      />
    </div>

    <div
@@ -93,43 +92,25 @@
      </div>
    </div>

-    <AppDrawer
+    <MalioDrawer
      v-model="isDrawerOpen"
      :title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"
    >
      <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="username">
-            Nom d'utilisateur <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="username"
-            v-model="form.username"
-            type="text"
-            :class="usernameFieldClass"
-          />
-          <p v-if="showUsernameError" class="mt-1 text-sm text-red-600">
-            Le nom d'utilisateur est obligatoire.
-          </p>
-        </div>
+        <MalioInputText
+          v-model="form.username"
+          :label="editingUser ? `Nom d'utilisateur` : `Nom d'utilisateur *`"
+          group-class="mt-2"
+          :error="showUsernameError ? `Le nom d'utilisateur est obligatoire.` : ''"
+        />

        <div>
-          <label class="text-md font-semibold text-neutral-700" for="password">
-            Mot de passe
-            <span v-if="!editingUser" class="text-red-600">*</span>
-          </label>
-          <input
-            id="password"
+          <MalioInputPassword
            v-model="form.password"
-            type="password"
-            :class="passwordFieldClass"
+            :label="editingUser ? 'Mot de passe' : 'Mot de passe *'"
+            :hint="editingUser ? 'Laisse vide pour ne pas changer le mot de passe.' : ''"
+            :error="!editingUser && showPasswordError ? 'Le mot de passe est obligatoire.' : ''"
          />
-          <p v-if="editingUser" class="mt-1 text-sm text-neutral-500">
-            Laisse vide pour ne pas changer le mot de passe.
-          </p>
-          <p v-else-if="showPasswordError" class="mt-1 text-sm text-red-600">
-            Le mot de passe est obligatoire.
-          </p>
        </div>

        <div>
@@ -172,40 +153,32 @@
        </div>

        <div v-if="form.accessMode === 'self'">
-          <label class="text-md font-semibold text-neutral-700" for="employee">
-            Employé lié
-          </label>
-          <select
-            id="employee"
-            v-model="form.employeeId"
-            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-          >
-            <option value="">Aucun</option>
-            <option v-for="employee in employees" :key="employee.id" :value="employee.id">
-              {{ employee.firstName }} {{ employee.lastName }}
-            </option>
-          </select>
-          <p v-if="showSelfEmployeeError" class="mt-1 text-sm text-red-600">
-            Sélectionne un employé.
-          </p>
+          <MalioSelect
+            :model-value="form.employeeId === '' ? null : form.employeeId"
+            :options="employeeOptions"
+            label="Employé lié"
+            empty-option-label="Aucun"
+            min-width=""
+            :error="showSelfEmployeeError ? 'Sélectionne un employé.' : ''"
+            @update:model-value="onEmployeeChange"
+          />
        </div>

        <div v-if="form.accessMode === 'sites'">
          <p class="text-md font-semibold text-neutral-700">Sites autorisés</p>
          <div class="mt-2 grid gap-2 sm:grid-cols-2">
-            <label
+            <div
              v-for="site in sites"
              :key="site.id"
-              class="flex items-center gap-2 rounded-md border border-neutral-200 px-3 py-2 text-sm text-neutral-700 cursor-pointer"
+              class="flex h-10 items-center rounded-md border border-neutral-200 px-3"
            >
-              <input
-                type="checkbox"
-                class="cursor-pointer"
-                :checked="form.siteIds.includes(site.id)"
-                @change="toggleSite(site.id)"
+              <MalioCheckbox
+                :model-value="form.siteIds.includes(site.id)"
+                :label="site.name"
+                group-class="flex items-center"
+                @update:model-value="toggleSite(site.id)"
              />
-              <span>{{ site.name }}</span>
-            </label>
+            </div>
          </div>
          <p v-if="showSitesError" class="mt-1 text-sm text-red-600">
            Sélectionne au moins un site.
@@ -213,44 +186,31 @@
        </div>

        <div>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              v-model="form.isLocked"
-              type="checkbox"
-              class="cursor-pointer"
-            />
-            <span class="text-md font-semibold text-neutral-700">Verrouiller le compte</span>
-          </label>
-          <p class="mt-1 text-sm text-neutral-500">
-            Un compte verrouillé ne peut plus se connecter.
-          </p>
+          <MalioCheckbox
+            v-model="form.isLocked"
+            label="Verrouiller le compte"
+            hint="Un compte verrouillé ne peut plus se connecter."
+          />
        </div>

        <div>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              v-model="form.hasLeaveRecapAccess"
-              type="checkbox"
-              class="cursor-pointer"
-            />
-            <span class="text-md font-semibold text-neutral-700">Accès à l'écran Récap. congés</span>
-          </label>
-          <p class="mt-1 text-sm text-neutral-500">
-            Affiche l'onglet dans la sidebar et donne accès au tableau récap.
-          </p>
+          <MalioCheckbox
+            v-model="form.hasLeaveRecapAccess"
+            label="Accès à l'écran Récap. congés"
+            hint="Affiche l'onglet dans la sidebar et donne accès au tableau récap."
+          />
        </div>

        <div class="flex justify-center pt-2">
-          <button
+          <MalioButton
            type="submit"
-            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            {{ editingUser ? 'Modifier' : '+ Ajouter' }}
-          </button>
+            :label="editingUser ? 'Modifier' : 'Valider'"
+            button-class="w-[200px]"
+            :disabled="isSubmitting || !isFormValid"
+          />
        </div>
      </form>
-    </AppDrawer>
+    </MalioDrawer>
  </div>
 </template>

@@ -348,27 +308,13 @@ const getSiteLabels = (user: User) => {
  return names.length > 0 ? names.join(', ') : 'Sites sélectionnés'
 }

-const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const usernameFieldClass = computed(() => {
-  if (showUsernameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const passwordFieldClass = computed(() => {
-  if (showPasswordError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
+const employeeOptions = computed(() =>
+  employees.value.map((e) => ({ label: `${e.firstName} ${e.lastName}`, value: e.id }))
+)

-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
+const onEmployeeChange = (value: string | number | null) => {
+  form.employeeId = value === null ? '' : Number(value)
+}

 const loadData = async () => {
  isLoading.value = true
--- a/frontend/services/dto/employee-leave-summary.ts
+++ b/frontend/services/dto/employee-leave-summary.ts
@@ -15,5 +15,6 @@ export type EmployeeLeaveSummary = {
  previousYearRemainingDays: number
  previousYearPaidDays: number
  presenceDaysByMonth: Record<string, number>
+  presenceDaysToToday: number
 }

--- a/src/ApiResource/EmployeeLeaveSummary.php
+++ b/src/ApiResource/EmployeeLeaveSummary.php
@@ -38,4 +38,7 @@ final class EmployeeLeaveSummary

    /** @var array<string, float> YYYY-MM => count (0.5 for half-days) */
    public array $presenceDaysByMonth = [];
+
+    /** Cumul des jours de présence depuis le début de l'année de congé jusqu'à aujourd'hui (forfait). */
+    public float $presenceDaysToToday = 0.0;
 }
--- a/src/Service/Leave/LeaveRecapRowBuilder.php
+++ b/src/Service/Leave/LeaveRecapRowBuilder.php
@@ -73,7 +73,7 @@ final readonly class LeaveRecapRowBuilder
                        }
                    }
                    $cpN1Remaining     = round($yearSummary['previousYearRemainingDays'], 2);
-                    $cpN               = (string) round($yearSummary['acquiredDays'], 2);
+                    $cpN               = (string) round($yearSummary['remainingDays'], 2);
                    $acquiredSaturdays = '-';
                } else {
                    $cpN1Remaining     = round($yearSummary['remainingDays'], 2);
--- a/src/State/EmployeeLeaveSummaryProvider.php
+++ b/src/State/EmployeeLeaveSummaryProvider.php
@@ -119,8 +119,29 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
        $summary->previousYearRemainingDays = $yearSummary['previousYearRemainingDays'];
        $summary->previousYearPaidDays      = $paidLeaveDays;

-        [$periodFrom, $periodTo]      = $this->resolvePeriodBounds($employee, $year);
-        $summary->presenceDaysByMonth = $this->computePresenceDaysByMonth($employee, $periodFrom, $periodTo);
+        [$periodFrom, $periodTo] = $this->resolvePeriodBounds($employee, $year);
+        // Forfait-only: leaves taken from N-1 stock do NOT decrement presence days.
+        // For non-forfait, previousYearTakenDays is always 0, so the budget has no effect.
+        $n1AbsencesBudget             = $yearSummary['previousYearTakenDays'];
+        $summary->presenceDaysByMonth = $this->computePresenceDaysByMonth(
+            $employee,
+            $periodFrom,
+            $periodTo,
+            $n1AbsencesBudget
+        );
+
+        // Same logic as presenceDaysByMonth but bounded at today: number of presence days
+        // accumulated from leave year start up to today (inclusive).
+        $today                        = new DateTimeImmutable('today');
+        $cappedTo                     = $today < $periodTo ? $today : $periodTo;
+        $summary->presenceDaysToToday = $today < $periodFrom
+            ? 0.0
+            : array_sum($this->computePresenceDaysByMonth(
+                $employee,
+                $periodFrom,
+                $cappedTo,
+                $n1AbsencesBudget
+            ));

        return $summary;
    }
@@ -686,8 +707,12 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
     *
     * @return array<string, float> YYYY-MM => presence day count
     */
-    private function computePresenceDaysByMonth(Employee $employee, DateTimeImmutable $from, DateTimeImmutable $to): array
-    {
+    private function computePresenceDaysByMonth(
+        Employee $employee,
+        DateTimeImmutable $from,
+        DateTimeImmutable $to,
+        float $n1AbsencesBudget = 0.0
+    ): array {
        $publicHolidays    = $this->buildPublicHolidayMap($from, $to);
        $weekendWorkedDays = $this->workHourRepository->countWeekendWorkedDaysByMonth($employee, $from, $to);
        $absences          = $this->absenceRepository->findByEmployeeAndOverlappingDateRange($employee, $from, $to);
@@ -697,10 +722,20 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
            ? $this->workHourRepository->findWorkedDatesAmong($employee, array_keys($publicHolidays))
            : [];

+        // Sort absences chronologically so N-1 budget (forfait only) is consumed in date order:
+        // earliest absences attribute to N-1 first, later ones overflow to N and reduce presence.
+        $sortedAbsences = $absences;
+        usort(
+            $sortedAbsences,
+            static fn ($a, $b): int => $a->getStartDate() <=> $b->getStartDate()
+        );
+
+        $remainingN1Budget = $n1AbsencesBudget;
+
        // Count absence days per month, iterating day by day to handle multi-day absences
        // and properly distribute across months.
        $absenceDaysByMonth = [];
-        foreach ($absences as $absence) {
+        foreach ($sortedAbsences as $absence) {
            $start = DateTimeImmutable::createFromInterface($absence->getStartDate())->setTime(0, 0);
            $end   = DateTimeImmutable::createFromInterface($absence->getEndDate())->setTime(0, 0);

@@ -718,6 +753,17 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
                    continue;
                }

+                // Forfait: leaves taken from N-1 stock do NOT decrement presence days.
+                // We chronologically consume the N-1 budget before counting any absence.
+                if ($remainingN1Budget > 0.0) {
+                    $consumed = min($remainingN1Budget, $dayAmount);
+                    $remainingN1Budget -= $consumed;
+                    $dayAmount -= $consumed;
+                    if ($dayAmount <= 0.0) {
+                        continue;
+                    }
+                }
+
                $absenceDaysByMonth[$monthKey] = ($absenceDaysByMonth[$monthKey] ?? 0.0) + $dayAmount;
            }
        }
Author	SHA1	Message	Date
gitea-actions	973de2d094	chore: bump version to v0.1.97 All checks were successful Auto Tag Develop / tag (push) Successful in 5s Details Build & Push Docker Image / build (push) Successful in 56s Details	2026-04-27 13:02:01 +00:00
tristan	74c109713c	fix : malio UI Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details	2026-04-27 15:01:51 +02:00
gitea-actions	06173e7225	chore: bump version to v0.1.96 All checks were successful Auto Tag Develop / tag (push) Successful in 6s Details Build & Push Docker Image / build (push) Successful in 2m59s Details	2026-04-27 12:08:31 +00:00
tristan	cc868a1e82	feat: ajout malio UI + décompte des jours de présence forfait (#17 ) Some checks failed Auto Tag Develop / tag (push) Has been cancelled Details \| Numéro du ticket \| Titre du ticket \| \|------------------\|-----------------\| \| \| \| ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #17 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>	2026-04-27 12:08:24 +00:00