feat: ajout malio UI + décompte des jours de présence forfait (#17)

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

frontend/pages/calendar.vue

@@ -5,30 +5,37 @@
         </div>
         <div class="flex flex-col gap-3 py-6">
             <div class="flex items-center justify-between gap-4">
-                <div class="flex items-center gap-4">
-                    <SiteFilterSelector v-model="selectedSiteIds" :sites="sites"/>
-                </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">
-                    <button
-                        type="button"
-                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                    <MalioButton
+                        label="Ajouter une absence"
+                        icon-name="mdi:plus"
+                        icon-position="left"
                         @click="openCreateFromToday"
-                    >
-                        + Ajouter une absence
-                    </button>
-                    <button
-                        type="button"
-                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                    />
+                    <MalioButton
+                        label="Imprimer"
+                        variant="secondary"
+                        icon-name="mdi:printer"
+                        icon-position="left"
                         @click="openPrint"
-                    >
-                        Imprimer
-                    </button>
+                    />
                 </div>
             </div>
             <div class="flex justify-between">
                 <div class="flex items-center gap-4">
                     <div class="w-80">
-                        <EmployeeNameFilterInput v-model="employeeFilter"/>
+                        <MalioInputText
+                            v-model="employeeFilter"
+                            label="Recherche d'un employé"
+                            icon-name="mdi:magnify"
+                        />
                     </div>
                     <PeriodStepperPicker
                         width-class="w-[260px]"
@@ -111,9 +118,7 @@ import {compareEmployeesInSite, sortEmployeesBySiteAndOrder} from '~/utils/emplo
 import CalendarGrid from '~/components/CalendarGrid.vue'
 import AbsenceFormDrawer from '~/components/AbsenceFormDrawer.vue'
 import AbsencePrintDrawer from '~/components/AbsencePrintDrawer.vue'
-import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
 import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
-import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 
 useHead({
     title: 'Calendrier'
@@ -136,6 +141,8 @@ const sites = computed(() => {
     })
 })
 
+const siteOptions = computed(() => sites.value.map((site) => ({ label: site.name, value: site.id })))
+
 // Filtres de sites (par défaut: tous sélectionnés à l'init).
 const selectedSiteIds = ref<number[]>([])
 const sitesInitialized = ref(false)
@@ -154,12 +161,27 @@ const sortedEmployees = computed(() => {
 // Employés visibles selon le filtre de sites.
 const employeeFilter = ref('')
 
+// Un employé est considéré "présent" sur le mois affiché si au moins une de ses
+// périodes de contrat intersecte [début du mois ; fin du mois]. Sinon il est masqué.
+const hasContractInSelectedMonth = (employee: Employee): boolean => {
+    const monthStart = toYmd(selectedYear.value, selectedMonth.value, 1)
+    const monthEnd = toYmd(selectedYear.value, selectedMonth.value + 1, 0)
+    const history = employee.contractHistory ?? []
+    if (history.length === 0) return false
+    return history.some((period) => {
+        const start = period.startDate
+        const end = period.endDate ?? '9999-12-31'
+        return start <= monthEnd && end >= monthStart
+    })
+}
+
 const visibleEmployees = computed(() => {
     if (selectedSiteIds.value.length === 0) return []
     const filter = employeeFilter.value.trim().toLowerCase()
     return sortedEmployees.value.filter((employee) => {
         const siteOk = employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
         if (!siteOk) return false
+        if (!hasContractInSelectedMonth(employee)) return false
         if (!filter) return true
         const first = employee.firstName?.toLowerCase() ?? ''
         const last = employee.lastName?.toLowerCase() ?? ''