chore: bump version to v0.1.7

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|        #321          |        Gestion des rôles dans l'application         |

## Description de la PR
[#321] Gestion des rôles dans l'application

## Modification du .env

## Check list

- [x] Pas de régression
- [ ] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #2
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.env

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

.idea/data_source_mapping.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourcePerFileMappings">
+    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/9cad43df-2147-4989-b7a4-443067034884/console_3.sql" value="9cad43df-2147-4989-b7a4-443067034884" />
+  </component>
+</project>

.idea/db-forest-config.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="db-tree-configuration">
+    <option name="data" value="----------------------------------------&#10;1:0:9cad43df-2147-4989-b7a4-443067034884&#10;2:0:ae622167-c834-4e7b-87a5-c1721036f5dc&#10;3:0:f407a514-c6b4-4b26-9555-445a85892502&#10;" />
+  </component>
+</project>

config/packages/lexik_jwt_authentication.yaml

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

config/version.yaml

@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.3'
+    app.version: '0.1.7'

frontend/components/AbsenceFormDrawer.vue

@@ -39,24 +39,44 @@
                 </p>
             </div>
 
-            <div class="grid grid-cols-2 gap-4">
+            <div class="space-y-4">
                 <div>
-                    <label class="text-md font-semibold text-neutral-700" for="start-date">Date de début</label>
-                    <input
-                        id="start-date"
-                        v-model="absenceForm.startDate"
-                        type="date"
-                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
-                    />
+                    <label class="text-md font-semibold text-neutral-700" for="start-date">Début</label>
+                    <div class="mt-2 grid grid-cols-2 gap-2">
+                        <input
+                            id="start-date"
+                            v-model="absenceForm.startDate"
+                            type="date"
+                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                        />
+                        <select
+                            v-model="absenceForm.startHalf"
+                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                        >
+                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
+                                {{ half.label }}
+                            </option>
+                        </select>
+                    </div>
                 </div>
                 <div>
-                    <label class="text-md font-semibold text-neutral-700" for="end-date">Date de fin</label>
-                    <input
-                        id="end-date"
-                        v-model="absenceForm.endDate"
-                        type="date"
-                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
-                    />
+                    <label class="text-md font-semibold text-neutral-700" for="end-date">Fin</label>
+                    <div class="mt-2 grid grid-cols-2 gap-2">
+                        <input
+                            id="end-date"
+                            v-model="absenceForm.endDate"
+                            type="date"
+                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                        />
+                        <select
+                            v-model="absenceForm.endHalf"
+                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                        >
+                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
+                                {{ half.label }}
+                            </option>
+                        </select>
+                    </div>
                 </div>
             </div>
 
@@ -103,6 +123,8 @@ import { computed, reactive, toRef, watch } from 'vue'
 import type { Employee } from '~/services/dto/employee'
 import type { AbsenceType } from '~/services/dto/absence-type'
 import type { Absence } from '~/services/dto/absence'
+import type { HalfDay } from '~/services/dto/half-day'
+import { HALF_DAYS } from '~/services/dto/half-day'
 import AppDrawer from '~/components/AppDrawer.vue'
 
 const props = defineProps<{
@@ -113,7 +135,9 @@ const props = defineProps<{
         employeeId: number | ''
         typeId: number | ''
         startDate: string
+        startHalf: HalfDay
         endDate: string
+        endHalf: HalfDay
         comment: string
     }
     editingAbsence: Absence | null

frontend/components/CalendarGrid.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+    <div class="h-full min-h-0 overflow-auto rounded-lg border border-neutral-200 bg-white">
         <div class="min-w-[900px]">
             <div class="grid" :style="gridStyle">
                 <div
-                    class="sticky left-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
+                    class="sticky left-0 top-0 z-30 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
                 >
                     Employés
                 </div>
                 <div
                     v-for="day in daysInMonth"
                     :key="day.date"
-                    class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+                    class="sticky top-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
                 >
                     <div>{{ day.label }}</div>
                     <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
@@ -18,8 +18,12 @@
 
                 <template v-for="employee in visibleEmployees" :key="employee.id">
                     <div
-                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
+                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black cursor-pointer"
                         :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
+                        draggable="true"
+                        @dragstart="handleDragStart($event, employee)"
+                        @dragover="handleDragOver"
+                        @drop="handleDrop($event, employee)"
                     >
                         {{ formatEmployeeName(employee) }}
                     </div>
@@ -28,18 +32,46 @@
                         :key="employee.id + '-' + day.date"
                         class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
                     >
-                        <button
-                            type="button"
-                            class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
-                            :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
-                            :style="getCellStyle(employee.id, day.date)"
-                            :disabled="isHolidayDate(day.date)"
-                            @click="handleCellClick(employee, day.date)"
-                        >
-                            <span v-if="getCellCode(employee.id, day.date)">
-                                {{ getCellCode(employee.id, day.date) }}
-                            </span>
-                        </button>
+                        <template v-if="getCellInfo(employee.id, day.date)">
+                            <button
+                                type="button"
+                                class="relative flex h-8 w-full items-center justify-center overflow-hidden rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
+                                :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
+                                :style="getCellStyle(employee.id, day.date)"
+                                :disabled="isHolidayDate(day.date)"
+                                @click="handleCellClick(employee, day.date)"
+                            >
+                                <span v-if="!getCellInfo(employee.id, day.date)?.halfLabel">
+                                    {{ getCellInfo(employee.id, day.date)?.code }}
+                                </span>
+                                <template v-else>
+                                    <span
+                                        v-if="getCellInfo(employee.id, day.date)?.halfLabel === 'AM'"
+                                        class="absolute top-0 left-0 flex h-1/2 w-full items-center justify-center text-[10px] font-semibold"
+                                    >
+                                        {{ getCellInfo(employee.id, day.date)?.code }}
+                                    </span>
+                                    <span
+                                        v-else
+                                        class="absolute bottom-0 left-0 flex h-1/2 w-full items-center justify-center text-[10px] font-semibold"
+                                    >
+                                        {{ getCellInfo(employee.id, day.date)?.code }}
+                                    </span>
+                                </template>
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                type="button"
+                                class="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
+                                :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
+                                :style="getCellStyle(employee.id, day.date)"
+                                :disabled="isHolidayDate(day.date)"
+                                @click="handleCellClick(employee, day.date)"
+                            >
+                                <span></span>
+                            </button>
+                        </template>
                     </div>
                 </template>
             </div>
@@ -49,6 +81,7 @@
 
 <script setup lang="ts">
 import type { Employee } from '~/services/dto/employee'
+import type { HalfDay } from '~/services/dto/half-day'
 
 type DayInfo = {
     date: string
@@ -61,16 +94,34 @@ defineProps<{
     visibleEmployees: Employee[]
     gridStyle: Record<string, string>
     getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
-    getCellCode: (employeeId: number, date: string) => string
+    getCellInfo: (employeeId: number, date: string) => { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string } | null
     formatEmployeeName: (employee: Employee) => string
     isHolidayDate: (date: string) => boolean
 }>()
 
 const emit = defineEmits<{
     (event: 'cell-click', employee: Employee, date: string): void
+    (event: 'reorder', payload: { dragId: number; dropId: number }): void
 }>()
 
 const handleCellClick = (employee: Employee, date: string) => {
     emit('cell-click', employee, date)
 }
+
+const handleDragStart = (event: DragEvent, employee: Employee) => {
+    if (!event.dataTransfer) return
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(employee.id))
+}
+
+const handleDragOver = (event: DragEvent) => {
+    event.preventDefault()
+}
+
+const handleDrop = (event: DragEvent, employee: Employee) => {
+    event.preventDefault()
+    const dragId = Number(event.dataTransfer?.getData('text/plain'))
+    if (!dragId || dragId === employee.id) return
+    emit('reorder', { dragId, dropId: employee.id })
+}
 </script>

frontend/i18n/locales/fr.json

@@ -31,6 +31,11 @@
             "create": "Impossible de créer l'absence.",
             "update": "Impossible de mettre à jour l'absence.",
             "delete": "Impossible de supprimer l'absence."
+        },
+        "user": {
+            "create": "Impossible de créer l'utilisateur.",
+            "update": "Impossible de mettre à jour l'utilisateur.",
+            "delete": "Impossible de supprimer l'utilisateur."
         }
     },
     "success": {
@@ -57,6 +62,11 @@
             "create": "Absence créée.",
             "update": "Absence mise à jour.",
             "delete": "Absence supprimée."
+        },
+        "user": {
+            "create": "Utilisateur créé.",
+            "update": "Utilisateur mis à jour.",
+            "delete": "Utilisateur supprimé."
         }
     }
 }

frontend/layouts/default.vue

@@ -6,41 +6,50 @@
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
                 </div>
                 <nav class="flex-1 px-4 pb-6">
-                    <NuxtLink
-                        to="/"
-                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600 border-t border-secondary-500"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Tableau de bord
-                    </NuxtLink>
-                    <NuxtLink
-                        to="/calendar"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Calendrier
-                    </NuxtLink>
-                    <NuxtLink
-                        to="/employees"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Employés
-                    </NuxtLink>
-                    <NuxtLink
-                        to="/sites"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Sites
-                    </NuxtLink>
-                    <NuxtLink
-                        to="/absence-types"
-                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
-                        active-class="bg-primary-50 text-primary-600"
-                    >
-                        Types d'absence
-                    </NuxtLink>
+                    <template v-if="isAdmin">
+                        <NuxtLink
+                            to="/"
+                            class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600 border-t border-secondary-500"
+                            active-class="bg-primary-50 text-primary-600"
+                        >
+                            Tableau de bord
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/calendar"
+                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                            active-class="bg-primary-50 text-primary-600"
+                        >
+                            Calendrier
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/employees"
+                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                            active-class="bg-primary-50 text-primary-600"
+                        >
+                            Employés
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/sites"
+                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                            active-class="bg-primary-50 text-primary-600"
+                        >
+                            Sites
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/users"
+                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                            active-class="bg-primary-50 text-primary-600"
+                        >
+                            Utilisateurs
+                        </NuxtLink>
+                        <NuxtLink
+                            to="/absence-types"
+                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                            active-class="bg-primary-50 text-primary-600"
+                        >
+                            Types d'absence
+                        </NuxtLink>
+                    </template>
                 </nav>
 
                 <div class="flex flex-col gap-2 items-center p-4">
@@ -65,6 +74,7 @@
 <script setup lang="ts">
 const auth = useAuthStore()
 const {version} = useAppVersion()
+const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
 
 const handleLogout = async () => {
     await auth.logout()

frontend/middleware/admin.ts

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

frontend/pages/calendar.vue

@@ -1,68 +1,81 @@
 <template>
-    <div>
+    <div class="h-full flex flex-col overflow-hidden">
         <div class="flex flex-wrap items-center justify-between gap-4">
             <h1 class="text-4xl font-bold text-primary-500">Calendrier des absences</h1>
         </div>
-        <div class="flex items-center justify-between py-6">
-            <div class="flex items-center gap-4">
-                <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
-                    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
-                        <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
-                        <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
-                        <input
-                            :id="`site-${site.id}`"
-                            v-model="selectedSiteIds"
-                            :value="site.id"
-                            type="checkbox"
-                            class="h-4 w-4"
-                        />
+        <div class="py-6">
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-4">
+                    <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                        <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
+                            <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
+                            <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
+                            <input
+                                :id="`site-${site.id}`"
+                                v-model="selectedSiteIds"
+                                :value="site.id"
+                                type="checkbox"
+                                class="h-4 w-4"
+                            />
+                        </div>
                     </div>
+                    <select
+                        v-model="selectedMonth"
+                        class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                    >
+                        <option v-for="month in months" :key="month.value" :value="month.value">
+                            {{ month.label }}
+                        </option>
+                    </select>
+                    <select
+                        v-model="selectedYear"
+                        class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                    >
+                        <option v-for="year in years" :key="year" :value="year">
+                            {{ year }}
+                        </option>
+                    </select>
+                </div>
+                <div class="flex gap-4">
+                    <button
+                        type="button"
+                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openCreateFromToday"
+                    >
+                        Ajouter une absence
+                    </button>
+                    <button
+                        type="button"
+                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="openPrint"
+                    >
+                        Imprimer
+                    </button>
                 </div>
-                <select
-                    v-model="selectedMonth"
-                    class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                >
-                    <option v-for="month in months" :key="month.value" :value="month.value">
-                        {{ month.label }}
-                    </option>
-                </select>
-                <select
-                    v-model="selectedYear"
-                    class="h-10 rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                >
-                    <option v-for="year in years" :key="year" :value="year">
-                        {{ year }}
-                    </option>
-                </select>
             </div>
-            <div class="flex gap-4">
-                <button
-                    type="button"
-                    class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openCreateFromToday"
-                >
-                    Ajouter une absence
-                </button>
-                <button
-                    type="button"
-                    class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
-                    @click="openPrint"
-                >
-                    Imprimer
-                </button>
+            <div class="mt-3 flex items-center gap-4">
+                <input
+                    v-model="employeeFilter"
+                    type="text"
+                    placeholder="Chercher un employé (nom ou prénom)"
+                    class="h-10 w-full max-w-md rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                />
             </div>
         </div>
 
-        <CalendarGrid
-            :days-in-month="daysInMonth"
-            :visible-employees="visibleEmployees"
-            :grid-style="gridStyle"
-            :get-cell-style="getCellStyle"
-            :get-cell-code="getCellCode"
-            :format-employee-name="formatEmployeeName"
-            :is-holiday-date="isHolidayDate"
-            @cell-click="openCreate"
-        />
+        <div class="flex-1 min-h-0">
+            <CalendarGrid
+                :days-in-month="daysInMonth"
+                :visible-employees="visibleEmployees"
+                :grid-style="gridStyle"
+                :get-cell-style="getCellStyle"
+                :get-cell-info="getCellInfo"
+                :format-employee-name="formatEmployeeName"
+                :is-holiday-date="isHolidayDate"
+                @cell-click="openCreate"
+                @reorder="handleReorder"
+            />
+        </div>
 
         <AbsenceFormDrawer
             v-model="isDrawerOpen"
@@ -90,7 +103,9 @@
 import type {Employee} from '~/services/dto/employee'
 import type {AbsenceType} from '~/services/dto/absence-type'
 import type {Absence} from '~/services/dto/absence'
-import {listEmployees} from '~/services/employees'
+import type {HalfDay} from '~/services/dto/half-day'
+import {HALF_DAYS} from '~/services/dto/half-day'
+import {listEmployees, updateEmployeeOrder} from '~/services/employees'
 import {listAbsenceTypes} from '~/services/absence-types'
 import {createAbsence, deleteAbsence, listAbsences, updateAbsence} from '~/services/absences'
 import {listPublicHolidays} from '~/services/public-holidays'
@@ -99,6 +114,7 @@ import CalendarGrid from '~/components/CalendarGrid.vue'
 import AbsenceFormDrawer from '~/components/AbsenceFormDrawer.vue'
 import AbsencePrintDrawer from '~/components/AbsencePrintDrawer.vue'
 
+// Données principales affichées dans la grille.
 const employees = ref<Employee[]>([])
 const sites = computed(() => {
     const siteMap = new Map<number, { id: number; name: string; color: string }>()
@@ -110,6 +126,7 @@ const sites = computed(() => {
     return Array.from(siteMap.values()).sort((siteA, siteB) => siteA.name.localeCompare(siteB.name, 'fr'))
 })
 
+// Filtres de sites (par défaut: tous sélectionnés à l'init).
 const selectedSiteIds = ref<number[]>([])
 const sitesInitialized = ref(false)
 
@@ -119,35 +136,51 @@ watch(sites, (next) => {
     sitesInitialized.value = true
 }, { immediate: true })
 
+// Tri stable: site -> nom -> prénom.
 const sortedEmployees = computed(() => {
   return [...employees.value].sort((employeeA, employeeB) => {
     const siteNameA = employeeA.site?.name ?? ''
     const siteNameB = employeeB.site?.name ?? ''
     if (siteNameA !== siteNameB) return siteNameA.localeCompare(siteNameB, 'fr')
-        const lastNameA = employeeA.lastName ?? ''
-        const lastNameB = employeeB.lastName ?? ''
-        if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
-        const firstNameA = employeeA.firstName ?? ''
-        const firstNameB = employeeB.firstName ?? ''
+    const orderA = employeeA.displayOrder ?? 0
+    const orderB = employeeB.displayOrder ?? 0
+    if (orderA !== orderB) return orderA - orderB
+    const lastNameA = employeeA.lastName ?? ''
+    const lastNameB = employeeB.lastName ?? ''
+    if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
+    const firstNameA = employeeA.firstName ?? ''
+    const firstNameB = employeeB.firstName ?? ''
     return firstNameA.localeCompare(firstNameB, 'fr')
   })
 })
 
+// Employés visibles selon le filtre de sites.
+const employeeFilter = ref('')
+
 const visibleEmployees = computed(() => {
     if (selectedSiteIds.value.length === 0) return []
+    const filter = employeeFilter.value.trim().toLowerCase()
     return sortedEmployees.value.filter((employee) => {
-        return employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+        const siteOk = employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+        if (!siteOk) return false
+        if (!filter) return true
+        const first = employee.firstName?.toLowerCase() ?? ''
+        const last = employee.lastName?.toLowerCase() ?? ''
+        return first.includes(filter) || last.includes(filter)
     })
 })
+// Données de référence et absences du mois affiché.
 const absenceTypes = ref<AbsenceType[]>([])
 const absences = ref<Absence[]>([])
 const publicHolidays = ref<Record<string, string>>({})
 
+// États UI.
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const editingAbsence = ref<Absence | null>(null)
 const isPrintOpen = ref(false)
 
+// Sélecteurs de période.
 const now = new Date()
 const selectedMonth = ref(now.getMonth())
 const selectedYear = ref(now.getFullYear())
@@ -170,43 +203,53 @@ const months = [
 const years = Array.from({length: 5}, (unusedValue, index) => now.getFullYear() - 2 + index)
 
 
+// Infos de calendrier calculées.
 const daysInMonth = computed(() => getDaysInMonth(selectedYear.value, selectedMonth.value))
 const monthStartDate = computed(() => new Date(selectedYear.value, selectedMonth.value, 1))
 const monthEndDate = computed(() => new Date(selectedYear.value, selectedMonth.value + 1, 0))
 
+// Largeur fixe de la colonne employés + une colonne par jour.
 const gridStyle = computed(() => ({
     gridTemplateColumns: `160px repeat(${daysInMonth.value.length}, minmax(44px, 1fr))`
 }))
 
+// Formulaire d'absence (AM/PM par défaut = journée complète).
 const form = reactive({
     employeeId: '' as number | '',
     typeId: '' as number | '',
     startDate: '',
+    startHalf: 'AM' as HalfDay,
     endDate: '',
+    endHalf: 'PM' as HalfDay,
     comment: ''
 })
 
+// Formulaire d'impression (intervalle + sites).
 const printForm = reactive({
     from: '',
     to: '',
     siteIds: [] as number[]
 })
 
-
+// Remet le formulaire à zéro.
 const resetForm = () => {
     form.employeeId = ''
     form.typeId = ''
     form.startDate = ''
+    form.startHalf = 'AM'
     form.endDate = ''
+    form.endHalf = 'PM'
     form.comment = ''
 }
 
+// Ferme le drawer et nettoie l'état.
 const closeDrawer = () => {
     isDrawerOpen.value = false
     editingAbsence.value = null
     resetForm()
 }
 
+// Ouvre l'impression avec la période du mois courant.
 const openPrint = () => {
     const monthStart = toYmd(selectedYear.value, selectedMonth.value, 1)
     const monthEnd = toYmd(selectedYear.value, selectedMonth.value + 1, 0)
@@ -220,12 +263,43 @@ const closePrint = () => {
     isPrintOpen.value = false
 }
 
+// Parse "YYYY-MM-DD" en Date (ou null).
 const parseYmd = (value: string) => {
     const [year, month, day] = value.split('-').map(Number)
     if (!year || !month || !day) return null
     return new Date(year, month - 1, day)
 }
 
+// Détermine si la journée est une demi-journée (AM/PM) ou complète.
+const getHalfForDate = (
+    startDate: string,
+    endDate: string,
+    startHalf: HalfDay,
+    endHalf: HalfDay,
+    date: string
+) => {
+    if (startDate === endDate) {
+        return startHalf === endHalf ? startHalf : null
+    }
+    if (date === startDate && startHalf === 'PM') return 'PM'
+    if (date === endDate && endHalf === 'AM') return 'AM'
+    return null
+}
+
+// Renvoie les segments occupés pour une date donnée (AM/PM).
+const getSegmentsForDate = (
+    startDate: string,
+    endDate: string,
+    startHalf: HalfDay,
+    endHalf: HalfDay,
+    date: string
+) => {
+    const half = getHalfForDate(startDate, endDate, startHalf, endHalf, date)
+    if (!half) return HALF_DAYS.map((item) => item.value) as HalfDay[]
+    return [half] as HalfDay[]
+}
+
+// Ajoute des mois tout en gardant un jour valide.
 const addMonths = (date: Date, months: number) => {
     const next = new Date(date.getFullYear(), date.getMonth() + months, date.getDate())
     if (next.getMonth() !== (date.getMonth() + months) % 12) {
@@ -234,6 +308,7 @@ const addMonths = (date: Date, months: number) => {
     return next
 }
 
+// Limite l'intervalle d'impression à 2 mois max.
 const enforcePrintRange = () => {
     if (!printForm.from) return
     const start = parseYmd(printForm.from)
@@ -266,6 +341,7 @@ const enforcePrintRange = () => {
 watch(() => printForm.from, enforcePrintRange)
 watch(() => printForm.to, enforcePrintRange)
 
+// Chargements API.
 const loadEmployees = async () => {
     employees.value = await listEmployees()
 }
@@ -302,15 +378,17 @@ watch(selectedYear, async () => {
 
 // Indexation des absences par cellule pour eviter un find() a chaque case.
 const cellAbsenceMap = computed(() => {
-    const map = new Map<string, { id: number; code: string; color: string; textColor?: string }>()
+    const map = new Map<string, { id: number; code: string; color: string; halfLabel?: HalfDay; textColor?: string }>()
     const monthStart = monthStartDate.value
     const monthEnd = monthEndDate.value
 
     for (const absence of absences.value) {
         const employeeId = absence.employee?.id
         if (!employeeId) continue
-        const start = parseYmd(normalizeDate(absence.startDate))
-        const end = parseYmd(normalizeDate(absence.endDate))
+        const startDate = normalizeDate(absence.startDate)
+        const endDate = normalizeDate(absence.endDate)
+        const start = parseYmd(startDate)
+        const end = parseYmd(endDate)
         if (!start || !end) continue
 
         const rangeStart = start < monthStart ? monthStart : start
@@ -322,11 +400,20 @@ const cellAbsenceMap = computed(() => {
             currentDate <= rangeEnd;
             currentDate.setDate(currentDate.getDate() + 1)
         ) {
-            const key = `${employeeId}-${toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())}`
+            const dateKey = toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+            const key = `${employeeId}-${dateKey}`
+            const halfLabel = getHalfForDate(
+                startDate,
+                endDate,
+                absence.startHalf ?? 'AM',
+                absence.endHalf ?? 'PM',
+                dateKey
+            ) ?? undefined
             map.set(key, {
                 id: absence.id,
                 code: absence.type?.code ?? '',
-                color: absence.type?.color ?? '#222783'
+                color: absence.type?.color ?? '#222783',
+                halfLabel
             })
         }
     }
@@ -334,15 +421,17 @@ const cellAbsenceMap = computed(() => {
     return map
 })
 
+// Jours fériés (interdit pour la création).
 const isHolidayDate = (date: string) => {
     return Boolean(publicHolidays.value[date])
 }
 
+// Renvoie l'absence effective pour une cellule (ou un "Férié").
 const getCellAbsence = (employeeId: number, date: string) => {
     if (isHolidayDate(date)) {
         return {
             id: 0,
-            code: 'F',
+            code: 'Férié',
             color: '#b3e5fc',
             textColor: '#0f172a'
         }
@@ -352,20 +441,35 @@ const getCellAbsence = (employeeId: number, date: string) => {
     return null
 }
 
+// Style de cellule (plein ou demi-journée).
 const getCellStyle = (employeeId: number, date: string) => {
     const absence = getCellAbsence(employeeId, date)
     if (!absence) return undefined
 
+    if (absence.halfLabel) {
+        const color = absence.color
+        const textColor = absence.textColor ?? '#FFF'
+        const backgroundImage = absence.halfLabel === 'AM'
+            ? `linear-gradient(180deg, ${color} 0 50%, transparent 50% 100%)`
+            : `linear-gradient(180deg, transparent 0 50%, ${color} 50% 100%)`
+        return {
+            backgroundImage,
+            backgroundColor: 'transparent',
+            color: textColor
+        }
+    }
+
     return {
         backgroundColor: absence.color,
         color: absence.textColor ?? '#fff'
     }
 }
 
-const getCellCode = (employeeId: number, date: string) => {
-    return getCellAbsence(employeeId, date)?.code ?? ''
+const getCellInfo = (employeeId: number, date: string) => {
+    return getCellAbsence(employeeId, date)
 }
 
+// Ouverture du drawer depuis une cellule.
 const openCreate = (employee: Employee, date: string) => {
     if (isHolidayDate(date)) {
         window.alert("Impossible de creer une absence un jour ferie.")
@@ -384,12 +488,16 @@ const openCreate = (employee: Employee, date: string) => {
         form.typeId = existing.type.id
         form.startDate = normalizeDate(existing.startDate)
         form.endDate = normalizeDate(existing.endDate)
+        form.startHalf = existing.startHalf ?? 'AM'
+        form.endHalf = existing.endHalf ?? 'PM'
         form.comment = existing.comment ?? ''
     } else {
         editingAbsence.value = null
         form.employeeId = employee.id
         form.startDate = date
         form.endDate = date
+        form.startHalf = 'AM'
+        form.endHalf = 'PM'
         form.typeId = ''
         form.comment = ''
     }
@@ -397,6 +505,7 @@ const openCreate = (employee: Employee, date: string) => {
     isDrawerOpen.value = true
 }
 
+// Ouverture du drawer depuis le bouton "Ajouter".
 const openCreateFromToday = () => {
     editingAbsence.value = null
     form.employeeId = ''
@@ -409,10 +518,13 @@ const openCreateFromToday = () => {
     }
     form.startDate = today
     form.endDate = today
+    form.startHalf = 'AM'
+    form.endHalf = 'PM'
     form.comment = ''
     isDrawerOpen.value = true
 }
 
+// Vérifie la présence d'un férié dans l'intervalle.
 const hasHolidayInRange = (startDate: string, endDate: string) => {
     const start = parseYmd(startDate)
     const end = parseYmd(endDate)
@@ -430,6 +542,7 @@ const hasHolidayInRange = (startDate: string, endDate: string) => {
     return false
 }
 
+// Soumission du formulaire: validations + chevauchement + save.
 const handleSubmit = async () => {
     if (isSubmitting.value) return
 
@@ -437,6 +550,14 @@ const handleSubmit = async () => {
     try {
         const start = normalizeDate(form.startDate)
         const end = normalizeDate(form.endDate)
+        if (start > end) {
+            window.alert("La date de fin ne peut pas etre avant la date de debut.")
+            return
+        }
+        if (start === end && form.startHalf === 'PM' && form.endHalf === 'AM') {
+            window.alert("La demi-journee de fin ne peut pas etre avant la demi-journee de debut.")
+            return
+        }
         if (hasHolidayInRange(start, end)) {
             window.alert("Impossible de creer une absence sur un jour ferie.")
             return
@@ -446,7 +567,40 @@ const handleSubmit = async () => {
             if (editingAbsence.value && absence.id === editingAbsence.value.id) return false
             const aStart = normalizeDate(absence.startDate)
             const aEnd = normalizeDate(absence.endDate)
-            return start <= aEnd && end >= aStart
+            if (start > aEnd || end < aStart) return false
+
+            const overlapStart = start > aStart ? start : aStart
+            const overlapEnd = end < aEnd ? end : aEnd
+            const overlapStartDate = parseYmd(overlapStart)
+            const overlapEndDate = parseYmd(overlapEnd)
+            if (!overlapStartDate || !overlapEndDate) return false
+
+            for (
+                let currentDate = new Date(overlapStartDate.getTime());
+                currentDate <= overlapEndDate;
+                currentDate.setDate(currentDate.getDate() + 1)
+            ) {
+                const dateKey = toYmd(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())
+                const existingSegments = getSegmentsForDate(
+                    aStart,
+                    aEnd,
+                    absence.startHalf ?? 'AM',
+                    absence.endHalf ?? 'PM',
+                    dateKey
+                )
+                const newSegments = getSegmentsForDate(
+                    start,
+                    end,
+                    form.startHalf,
+                    form.endHalf,
+                    dateKey
+                )
+                if (existingSegments.some((segment) => newSegments.includes(segment))) {
+                    return true
+                }
+            }
+
+            return false
         })
 
         if (overlaps.length > 0) {
@@ -466,7 +620,9 @@ const handleSubmit = async () => {
                 employeeId: Number(form.employeeId),
                 typeId: Number(form.typeId),
                 startDate: form.startDate,
+                startHalf: form.startHalf,
                 endDate: form.endDate,
+                endHalf: form.endHalf,
                 comment: form.comment
             })
         } else {
@@ -474,7 +630,9 @@ const handleSubmit = async () => {
                 employeeId: Number(form.employeeId),
                 typeId: Number(form.typeId),
                 startDate: form.startDate,
+                startHalf: form.startHalf,
                 endDate: form.endDate,
+                endHalf: form.endHalf,
                 comment: form.comment
             })
         }
@@ -486,6 +644,7 @@ const handleSubmit = async () => {
     }
 }
 
+// Suppression de l'absence en cours d'édition.
 const handleDelete = async () => {
     if (!editingAbsence.value) return
 
@@ -497,11 +656,13 @@ const handleDelete = async () => {
     await loadAbsences()
 }
 
+// Affiche "Prénom N.".
 const formatEmployeeName = (employee: Employee) => {
     const initial = employee.lastName ? `${employee.lastName[0].toUpperCase()}.` : ''
     return `${employee.firstName} ${initial}`.trim()
 }
 
+// Impression PDF de l'intervalle sélectionné.
 const { printPdf } = usePdfPrinter()
 const handlePrint = async () => {
     const params = new URLSearchParams()
@@ -513,4 +674,46 @@ const handlePrint = async () => {
     await printPdf(`/absences/print?${params.toString()}`)
     isPrintOpen.value = false
 }
+
+const handleReorder = async (payload: { dragId: number; dropId: number }) => {
+    const dragEmployee = employees.value.find((employee) => employee.id === payload.dragId)
+    const dropEmployee = employees.value.find((employee) => employee.id === payload.dropId)
+    if (!dragEmployee || !dropEmployee) return
+    const dragSiteId = dragEmployee.site?.id
+    const dropSiteId = dropEmployee.site?.id
+    if (!dragSiteId || !dropSiteId || dragSiteId !== dropSiteId) return
+
+    const siteEmployees = [...employees.value]
+        .filter((employee) => employee.site?.id === dragSiteId)
+        .sort((employeeA, employeeB) => {
+            const orderA = employeeA.displayOrder ?? 0
+            const orderB = employeeB.displayOrder ?? 0
+            if (orderA !== orderB) return orderA - orderB
+            const lastNameA = employeeA.lastName ?? ''
+            const lastNameB = employeeB.lastName ?? ''
+            if (lastNameA !== lastNameB) return lastNameA.localeCompare(lastNameB, 'fr')
+            const firstNameA = employeeA.firstName ?? ''
+            const firstNameB = employeeB.firstName ?? ''
+            return firstNameA.localeCompare(firstNameB, 'fr')
+        })
+
+    const fromIndex = siteEmployees.findIndex((employee) => employee.id === dragEmployee.id)
+    const toIndex = siteEmployees.findIndex((employee) => employee.id === dropEmployee.id)
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
+
+    const [moved] = siteEmployees.splice(fromIndex, 1)
+    siteEmployees.splice(toIndex, 0, moved)
+
+    const updates: Array<{ id: number; displayOrder: number }> = []
+    siteEmployees.forEach((employee, index) => {
+        const nextOrder = index + 1
+        if ((employee.displayOrder ?? 0) !== nextOrder) {
+            updates.push({ id: employee.id, displayOrder: nextOrder })
+        }
+        employee.displayOrder = nextOrder
+    })
+
+    if (updates.length === 0) return
+    await Promise.all(updates.map((update) => updateEmployeeOrder(update.id, update.displayOrder)))
+}
 </script>

frontend/pages/users.vue

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

frontend/services/absences.ts

@@ -1,4 +1,5 @@
 import type { Absence } from './dto/absence'
+import type { HalfDay } from './dto/half-day'
 import { extractItems } from '~/utils/api'
 
 type ListAbsencesFilters = {
@@ -31,7 +32,9 @@ export const createAbsence = async (payload: {
   employeeId: number
   typeId: number
   startDate: string
+  startHalf: HalfDay
   endDate: string
+  endHalf: HalfDay
   comment?: string
 }) => {
   const api = useApi()
@@ -39,7 +42,9 @@ export const createAbsence = async (payload: {
     employee: `/api/employees/${payload.employeeId}`,
     type: `/api/absence_types/${payload.typeId}`,
     startDate: payload.startDate,
+    startHalf: payload.startHalf,
     endDate: payload.endDate,
+    endHalf: payload.endHalf,
     comment: payload.comment
   }, {
     toastSuccessKey: 'success.absence.create',
@@ -52,7 +57,9 @@ export const updateAbsence = async (payload: {
   employeeId: number
   typeId: number
   startDate: string
+  startHalf: HalfDay
   endDate: string
+  endHalf: HalfDay
   comment?: string
 }) => {
   const api = useApi()
@@ -60,7 +67,9 @@ export const updateAbsence = async (payload: {
     employee: `/api/employees/${payload.employeeId}`,
     type: `/api/absence_types/${payload.typeId}`,
     startDate: payload.startDate,
+    startHalf: payload.startHalf,
     endDate: payload.endDate,
+    endHalf: payload.endHalf,
     comment: payload.comment
   }, {
     toastSuccessKey: 'success.absence.update',

frontend/services/dto/absence.ts

@@ -1,10 +1,13 @@
 import type { Employee } from './employee'
 import type { AbsenceType } from './absence-type'
+import type { HalfDay } from './half-day'
 
 export type Absence = {
   id: number
   startDate: string
+  startHalf: HalfDay
   endDate: string
+  endHalf: HalfDay
   comment?: string | null
   employee: Employee
   type: AbsenceType

frontend/services/dto/employee.ts

@@ -5,4 +5,5 @@ export type Employee = {
   firstName: string
   lastName: string
   site: Site
+  displayOrder?: number
 }

frontend/services/dto/half-day.ts

@@ -0,0 +1,6 @@
+export type HalfDay = 'AM' | 'PM'
+
+export const HALF_DAYS: { value: HalfDay; label: string }[] = [
+  { value: 'AM', label: 'Matin' },
+  { value: 'PM', label: 'Après-midi' }
+]

frontend/services/dto/user-data.ts

@@ -1,4 +1,5 @@
 export type UserData = {
   id: number
   username: string
+  roles: string[]
 }

frontend/services/dto/user.ts

@@ -0,0 +1,8 @@
+import type { Employee } from './employee'
+
+export type User = {
+  id: number
+  username: string
+  roles: string[]
+  employee?: Employee | null
+}

frontend/services/employees.ts

@@ -33,19 +33,33 @@ export const updateEmployee = async (
     firstName: string
     lastName: string
     siteId?: number | null
+    displayOrder?: number
   }
 ) => {
   const api = useApi()
   return api.patch<Employee>(`/employees/${id}`, {
     firstName: payload.firstName,
     lastName: payload.lastName,
-    site: payload.siteId ? `/api/sites/${payload.siteId}` : null
+    site: payload.siteId ? `/api/sites/${payload.siteId}` : null,
+    displayOrder: payload.displayOrder
   }, {
     toastSuccessKey: 'success.employee.update',
     toastErrorKey: 'errors.employee.update'
   })
 }
 
+export const updateEmployeeOrder = async (
+  id: number,
+  displayOrder: number
+) => {
+  const api = useApi()
+  return api.patch<Employee>(`/employees/${id}`, {
+    displayOrder
+  }, {
+    toast: false
+  })
+}
+
 export const deleteEmployee = async (id: number) => {
   const api = useApi()
   return api.delete(`/employees/${id}`, {}, {

frontend/services/user-site-roles.ts

@@ -0,0 +1,38 @@
+import { extractItems } from '~/utils/api'
+
+export const createUserSiteRole = async (payload: {
+  userId: number
+  siteId: number
+  role: string
+}) => {
+  const api = useApi()
+  return api.post('/user_site_roles', {
+    user: `/api/users/${payload.userId}`,
+    site: `/api/sites/${payload.siteId}`,
+    role: payload.role
+  }, {
+    toast: false
+  })
+}
+
+export type UserSiteRole = {
+  id: number
+  user: { id: number }
+  site: { id: number; name?: string }
+  role: string
+}
+
+export const listUserSiteRoles = async () => {
+  const api = useApi()
+  const data = await api.get<UserSiteRole[] | { 'hydra:member'?: UserSiteRole[] }>(
+    '/user_site_roles',
+    {},
+    { toast: false }
+  )
+  return extractItems<UserSiteRole>(data)
+}
+
+export const deleteUserSiteRole = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/user_site_roles/${id}`, {}, { toast: false })
+}

frontend/services/users.ts

@@ -0,0 +1,57 @@
+import type { User } from './dto/user'
+import { extractItems } from '~/utils/api'
+
+export const listUsers = async () => {
+  const api = useApi()
+  const data = await api.get<User[] | { 'hydra:member'?: User[] }>(
+    '/users',
+    {},
+    { toast: false }
+  )
+  return extractItems<User>(data)
+}
+
+export const createUser = async (payload: {
+  username: string
+  plainPassword: string
+  roles: string[]
+  employeeId?: number | null
+}) => {
+  const api = useApi()
+  return api.post<User>(
+    '/users',
+    {
+      username: payload.username,
+      plainPassword: payload.plainPassword,
+      roles: payload.roles,
+      employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null
+    },
+    {
+      toastSuccessKey: 'success.user.create',
+      toastErrorKey: 'errors.user.create'
+    }
+  )
+}
+
+export const updateUser = async (id: number, payload: {
+  username: string
+  plainPassword?: string
+  roles: string[]
+  employeeId?: number | null
+}) => {
+  const api = useApi()
+  const body: Record<string, unknown> = {
+    username: payload.username,
+    roles: payload.roles,
+    employee: payload.employeeId ? `/api/employees/${payload.employeeId}` : null
+  }
+
+  if (payload.plainPassword) {
+    body.plainPassword = payload.plainPassword
+  }
+
+  return api.patch<User>(`/users/${id}`, body, {
+    toastSuccessKey: 'success.user.update',
+    toastErrorKey: 'errors.user.update'
+  })
+}

migrations/Version20260210120000.php

@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260210120000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add start/end half-day fields to absences';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql("ALTER TABLE absences ADD start_half VARCHAR(2) NOT NULL DEFAULT 'AM'");
+        $this->addSql("ALTER TABLE absences ADD end_half VARCHAR(2) NOT NULL DEFAULT 'PM'");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE absences DROP COLUMN start_half');
+        $this->addSql('ALTER TABLE absences DROP COLUMN end_half');
+    }
+}

migrations/Version20260210121500.php

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

migrations/Version20260210123000.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260210123000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Backfill employee display_order per site';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Initialise display_order par site selon le tri nom/prénom/id.
+        $this->addSql('
+            UPDATE employees e
+            SET display_order = ranked.rn
+            FROM (
+                SELECT id,
+                       ROW_NUMBER() OVER (
+                           PARTITION BY site_id
+                           ORDER BY last_name ASC, first_name ASC, id ASC
+                       ) AS rn
+                FROM employees
+            ) ranked
+            WHERE ranked.id = e.id
+        ');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // Pas de rollback pertinent.
+    }
+}

migrations/Version20260211120000.php

@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260211120000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create user_site_roles table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE user_site_roles (id SERIAL NOT NULL, user_id INT NOT NULL, site_id INT NOT NULL, role VARCHAR(50) NOT NULL, PRIMARY KEY(id))');
+        $this->addSql('CREATE INDEX IDX_USER_SITE_ROLES_USER ON user_site_roles (user_id)');
+        $this->addSql('CREATE INDEX IDX_USER_SITE_ROLES_SITE ON user_site_roles (site_id)');
+        $this->addSql('CREATE UNIQUE INDEX UNIQ_USER_SITE_ROLES_USER_SITE_ROLE ON user_site_roles (user_id, site_id, role)');
+        $this->addSql('ALTER TABLE user_site_roles ADD CONSTRAINT FK_USER_SITE_ROLES_USER FOREIGN KEY (user_id) REFERENCES users (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+        $this->addSql('ALTER TABLE user_site_roles ADD CONSTRAINT FK_USER_SITE_ROLES_SITE FOREIGN KEY (site_id) REFERENCES sites (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE user_site_roles DROP CONSTRAINT FK_USER_SITE_ROLES_USER');
+        $this->addSql('ALTER TABLE user_site_roles DROP CONSTRAINT FK_USER_SITE_ROLES_SITE');
+        $this->addSql('DROP TABLE user_site_roles');
+    }
+}

migrations/Version20260212120000.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260212120000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Link users to employees (one-to-one)';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE users ADD employee_id INT DEFAULT NULL');
+        $this->addSql('CREATE UNIQUE INDEX UNIQ_USERS_EMPLOYEE ON users (employee_id)');
+        $this->addSql('ALTER TABLE users ADD CONSTRAINT FK_USERS_EMPLOYEE FOREIGN KEY (employee_id) REFERENCES employees (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE users DROP CONSTRAINT FK_USERS_EMPLOYEE');
+        $this->addSql('DROP INDEX UNIQ_USERS_EMPLOYEE');
+        $this->addSql('ALTER TABLE users DROP COLUMN employee_id');
+    }
+}

src/ApiResource/AbsencePrint.php

@@ -18,7 +18,8 @@ use App\State\AbsencePrintProvider;
                 new QueryParameter(key: 'from', required: true),
                 new QueryParameter(key: 'to', required: true),
                 new QueryParameter(key: 'sites', required: false),
-            ]
+            ],
+            security: "is_granted('ROLE_ADMIN')"
         ),
     ]
 )]

src/Entity/Absence.php

@@ -20,7 +20,9 @@ use Symfony\Component\Serializer\Attribute\Groups;
     ],
     denormalizationContext: [
         'datetime_format' => 'Y-m-d',
-    ]
+    ],
+    paginationEnabled: false,
+    security: "is_granted('ROLE_ADMIN')",
 )]
 #[ApiFilter(DateFilter::class, properties: ['startDate', 'endDate'])]
 #[ApiFilter(SearchFilter::class, properties: ['employee.site' => 'exact'])]
@@ -50,10 +52,18 @@ class Absence
     #[Groups(['absence:read'])]
     private DateTimeInterface $startDate;
 
+    #[ORM\Column(type: 'string', length: 2, options: ['default' => 'AM'])]
+    #[Groups(['absence:read'])]
+    private string $startHalf = 'AM';
+
     #[ORM\Column(type: 'date')]
     #[Groups(['absence:read'])]
     private DateTimeInterface $endDate;
 
+    #[ORM\Column(type: 'string', length: 2, options: ['default' => 'PM'])]
+    #[Groups(['absence:read'])]
+    private string $endHalf = 'PM';
+
     #[ORM\Column(type: 'text', nullable: true)]
     #[Groups(['absence:read'])]
     private ?string $comment = null;
@@ -111,6 +121,30 @@ class Absence
         return $this;
     }
 
+    public function getStartHalf(): string
+    {
+        return $this->startHalf;
+    }
+
+    public function setStartHalf(string $startHalf): self
+    {
+        $this->startHalf = $startHalf;
+
+        return $this;
+    }
+
+    public function getEndHalf(): string
+    {
+        return $this->endHalf;
+    }
+
+    public function setEndHalf(string $endHalf): self
+    {
+        $this->endHalf = $endHalf;
+
+        return $this;
+    }
+
     public function getComment(): ?string
     {
         return $this->comment;

src/Entity/AbsenceType.php

@@ -8,7 +8,11 @@ use ApiPlatform\Metadata\ApiResource;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Attribute\Groups;
 
-#[ApiResource(normalizationContext: ['groups' => ['absence_type:read']])]
+#[ApiResource(
+    normalizationContext: ['groups' => ['absence_type:read']],
+    paginationEnabled: false,
+    security: "is_granted('ROLE_ADMIN')"
+)]
 #[ORM\Entity]
 #[ORM\Table(name: 'absence_types')]
 class AbsenceType

src/Entity/Employee.php

@@ -11,7 +11,9 @@ use Symfony\Component\Serializer\Attribute\Groups;
 
 #[ApiResource(
     normalizationContext: ['groups' => ['employee:read', 'site:read']],
-    denormalizationContext: ['groups' => ['employee:write']]
+    denormalizationContext: ['groups' => ['employee:write']],
+    paginationEnabled: false,
+    security: "is_granted('ROLE_ADMIN')"
 )]
 #[ORM\Entity]
 #[ORM\Table(name: 'employees')]
@@ -37,6 +39,10 @@ class Employee
     #[Groups(['employee:read', 'employee:write'])]
     private ?Site $site = null;
 
+    #[ORM\Column(type: 'integer', options: ['default' => 0])]
+    #[Groups(['employee:read', 'employee:write'])]
+    private int $displayOrder = 0;
+
     #[ORM\Column(type: 'datetime_immutable')]
     private DateTimeImmutable $createdAt;
 
@@ -90,4 +96,16 @@ class Employee
     {
         return $this->createdAt;
     }
+
+    public function getDisplayOrder(): int
+    {
+        return $this->displayOrder;
+    }
+
+    public function setDisplayOrder(int $displayOrder): self
+    {
+        $this->displayOrder = $displayOrder;
+
+        return $this;
+    }
 }

src/Entity/Site.php

@@ -8,7 +8,11 @@ use ApiPlatform\Metadata\ApiResource;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Attribute\Groups;
 
-#[ApiResource(normalizationContext: ['groups' => ['site:read']])]
+#[ApiResource(
+    normalizationContext: ['groups' => ['site:read']],
+    paginationEnabled: false,
+    security: "is_granted('ROLE_ADMIN')"
+)]
 #[ORM\Entity]
 #[ORM\Table(name: 'sites')]
 class Site

src/Entity/User.php

@@ -4,12 +4,20 @@ declare(strict_types=1);
 
 namespace App\Entity;
 
+use ApiPlatform\Metadata\ApiProperty;
 use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Patch;
+use ApiPlatform\Metadata\Post;
 use App\State\CurrentUserProvider;
+use App\State\UserPasswordHasherProcessor;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
+use Symfony\Component\Serializer\Attribute\Groups;
 
 #[ApiResource(
     operations: [
@@ -19,6 +27,29 @@ use Symfony\Component\Security\Core\User\UserInterface;
             security: "is_granted('ROLE_USER')",
             provider: CurrentUserProvider::class
         ),
+        new GetCollection(
+            normalizationContext: ['groups' => ['user:read', 'employee:read', 'site:read']],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+        new Get(
+            uriTemplate: '/users/{id}',
+            normalizationContext: ['groups' => ['user:read', 'employee:read', 'site:read']],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+        new Post(
+            denormalizationContext: ['groups' => ['user:write']],
+            normalizationContext: ['groups' => ['user:read']],
+            security: "is_granted('ROLE_ADMIN')",
+            processor: UserPasswordHasherProcessor::class
+        ),
+        new Patch(
+            uriTemplate: '/users/{id}',
+            paginationEnabled: false,
+            normalizationContext: ['groups' => ['user:read']],
+            denormalizationContext: ['groups' => ['user:write']],
+            security: "is_granted('ROLE_ADMIN')",
+            processor: UserPasswordHasherProcessor::class
+        ),
     ]
 )]
 #[ORM\Entity]
@@ -29,17 +60,40 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     #[ORM\Id]
     #[ORM\GeneratedValue]
     #[ORM\Column(type: 'integer')]
+    #[Groups(['user:read'])]
     private ?int $id = null;
 
     #[ORM\Column(type: 'string', length: 180)]
+    #[Groups(['user:read', 'user:write'])]
     private string $username = '';
 
     #[ORM\Column(type: 'json')]
+    #[Groups(['user:write'])]
     private array $roles = [];
 
     #[ORM\Column(type: 'string')]
     private string $password = '';
 
+    #[Groups(['user:write'])]
+    private string $plainPassword = '';
+
+    #[ApiProperty(readableLink: true)]
+    #[ORM\OneToOne(targetEntity: Employee::class)]
+    #[ORM\JoinColumn(nullable: true, unique: true)]
+    #[Groups(['user:read', 'user:write'])]
+    private ?Employee $employee = null;
+
+    /**
+     * @var Collection<int, UserSiteRole>
+     */
+    #[ORM\OneToMany(mappedBy: 'user', targetEntity: UserSiteRole::class, orphanRemoval: true)]
+    private Collection $siteRoles;
+
+    public function __construct()
+    {
+        $this->siteRoles = new ArrayCollection();
+    }
+
     public function getId(): ?int
     {
         return $this->id;
@@ -65,6 +119,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     /**
      * @return list<string>
      */
+    #[Groups(['user:read'])]
     public function getRoles(): array
     {
         $roles   = $this->roles;
@@ -95,5 +150,58 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
         return $this;
     }
 
+    public function getPlainPassword(): string
+    {
+        return $this->plainPassword;
+    }
+
+    public function setPlainPassword(string $plainPassword): self
+    {
+        $this->plainPassword = $plainPassword;
+
+        return $this;
+    }
+
+    public function getEmployee(): ?Employee
+    {
+        return $this->employee;
+    }
+
+    public function setEmployee(?Employee $employee): self
+    {
+        $this->employee = $employee;
+
+        return $this;
+    }
+
+    /**
+     * @return Collection<int, UserSiteRole>
+     */
+    public function getSiteRoles(): Collection
+    {
+        return $this->siteRoles;
+    }
+
+    public function addSiteRole(UserSiteRole $siteRole): self
+    {
+        if (!$this->siteRoles->contains($siteRole)) {
+            $this->siteRoles->add($siteRole);
+            $siteRole->setUser($this);
+        }
+
+        return $this;
+    }
+
+    public function removeSiteRole(UserSiteRole $siteRole): self
+    {
+        if ($this->siteRoles->removeElement($siteRole)) {
+            if ($siteRole->getUser() === $this) {
+                $siteRole->setUser(null);
+            }
+        }
+
+        return $this;
+    }
+
     public function eraseCredentials(): void {}
 }

src/Entity/UserSiteRole.php

@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiProperty;
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Delete;
+use ApiPlatform\Metadata\GetCollection;
+use ApiPlatform\Metadata\Post;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(
+            uriTemplate: '/user_site_roles',
+            normalizationContext: ['groups' => ['user_site_role:read', 'site:read', 'user:read']],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+        new Post(
+            uriTemplate: '/user_site_roles',
+            denormalizationContext: ['groups' => ['user_site_role:write']],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+        new Delete(
+            uriTemplate: '/user_site_roles/{id}',
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+    ],
+    paginationEnabled: false,
+)]
+#[ORM\Entity()]
+#[ORM\Table(name: 'user_site_roles')]
+#[ORM\UniqueConstraint(name: 'uniq_user_site_role', fields: ['user', 'site', 'role'])]
+class UserSiteRole
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(type: 'integer')]
+    #[Groups(['user_site_role:read'])]
+    private ?int $id = null;
+
+    #[ApiProperty(readableLink: true)]
+    #[ORM\ManyToOne(targetEntity: User::class, inversedBy: 'siteRoles')]
+    #[ORM\JoinColumn(nullable: false)]
+    #[Groups(['user_site_role:read', 'user_site_role:write'])]
+    private ?User $user = null;
+
+    #[ApiProperty(readableLink: true)]
+    #[ORM\ManyToOne(targetEntity: Site::class)]
+    #[ORM\JoinColumn(nullable: false)]
+    #[Groups(['user_site_role:read', 'user_site_role:write'])]
+    private ?Site $site = null;
+
+    #[ORM\Column(type: 'string', length: 50)]
+    #[Groups(['user_site_role:read', 'user_site_role:write'])]
+    private string $role = '';
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getUser(): ?User
+    {
+        return $this->user;
+    }
+
+    public function setUser(?User $user): self
+    {
+        $this->user = $user;
+
+        return $this;
+    }
+
+    public function getSite(): ?Site
+    {
+        return $this->site;
+    }
+
+    public function setSite(?Site $site): self
+    {
+        $this->site = $site;
+
+        return $this;
+    }
+
+    public function getRole(): string
+    {
+        return $this->role;
+    }
+
+    public function setRole(string $role): self
+    {
+        $this->role = $role;
+
+        return $this;
+    }
+}

src/State/AbsencePrintProvider.php

@@ -115,6 +115,7 @@ class AbsencePrintProvider implements ProviderInterface
             ->leftJoin('e.site', 's')
             ->addSelect('s')
             ->orderBy('s.name', 'ASC')
+            ->addOrderBy('e.displayOrder', 'ASC')
             ->addOrderBy('e.lastName', 'ASC')
             ->addOrderBy('e.firstName', 'ASC')
         ;
@@ -184,17 +185,38 @@ class AbsencePrintProvider implements ProviderInterface
 
             $absenceStart = DateTimeImmutable::createFromInterface($absence->getStartDate());
             $absenceEnd   = DateTimeImmutable::createFromInterface($absence->getEndDate());
+            $startHalf    = $absence->getStartHalf();
+            $endHalf      = $absence->getEndHalf();
 
             $start = max($absenceStart, $from);
             $end   = min($absenceEnd, $to);
 
             $current = $start;
             while ($current <= $end) {
-                $dateKey = $current->format('Y-m-d');
+                $dateKey    = $current->format('Y-m-d');
+                $isSameDay  = $absenceStart->format('Y-m-d') === $absenceEnd->format('Y-m-d');
+                $isStartDay = $current->format('Y-m-d') === $absenceStart->format('Y-m-d');
+                $isEndDay   = $current->format('Y-m-d') === $absenceEnd->format('Y-m-d');
+                $halfLabel  = null;
+
+                if ($isSameDay) {
+                    if ($startHalf === $endHalf) {
+                        $halfLabel = $startHalf;
+                    }
+                } else {
+                    if ($isStartDay && 'PM' === $startHalf) {
+                        $halfLabel = 'PM';
+                    }
+                    if ($isEndDay && 'AM' === $endHalf) {
+                        $halfLabel = 'AM';
+                    }
+                }
 
                 $map[$employeeId][$dateKey] = [
-                    'code'  => (string) $type->getCode(),
-                    'color' => (string) $type->getColor(),
+                    'code'      => (string) $type->getCode(),
+                    'color'     => (string) $type->getColor(),
+                    'half'      => null !== $halfLabel,
+                    'halfLabel' => $halfLabel,
                 ];
 
                 $current = $current->add(new DateInterval('P1D'));

src/State/UserPasswordHasherProcessor.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Doctrine\Common\State\PersistProcessor;
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProcessorInterface;
+use App\Entity\User;
+use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
+
+final readonly class UserPasswordHasherProcessor implements ProcessorInterface
+{
+    public function __construct(
+        private PersistProcessor $persistProcessor,
+        private UserPasswordHasherInterface $passwordHasher
+    ) {}
+
+    public function process(
+        mixed $data,
+        Operation $operation,
+        array $uriVariables = [],
+        array $context = []
+    ): mixed {
+        if ($data instanceof User && '' !== $data->getPlainPassword()) {
+            $hashed = $this->passwordHasher->hashPassword($data, $data->getPlainPassword());
+            $data->setPassword($hashed);
+            $data->setPlainPassword('');
+        }
+
+        return $this->persistProcessor->process($data, $operation, $uriVariables, $context);
+    }
+}

templates/absence/print.html.twig

@@ -9,7 +9,7 @@
 
         html, body {
             margin: 0;
-            padding: 2mm;
+            padding: 4mm;
             font-family: Helvetica, sans-serif;
             font-size: 8px;
         }
@@ -69,6 +69,11 @@
             font-size: 9px;
         }
 
+        .holiday-code {
+            font-weight: bold;
+            font-size: 4px;
+        }
+
         .month-separator {
             border-right: 4px solid #0a0a0a !important;
         }
@@ -80,6 +85,49 @@
         .holiday {
             background: #b3e5fc;
         }
+
+        .body-cell {
+            height: 6mm;
+            padding: 0 !important;
+            vertical-align: middle;
+            text-align: center;
+        }
+
+        .full-cell {
+            display: block;
+            height: 6mm;
+            line-height: 6mm;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+        }
+
+        .half-table {
+            width: 100%;
+            height: 6mm;
+            border-collapse: collapse;
+            table-layout: fixed;
+            border: 0;
+            border-spacing: 0;
+            margin: 0;
+        }
+
+        .half-td {
+            height: 3mm;
+            line-height: 3mm;
+            text-align: center;
+            font-weight: bold;
+            font-size: 7px;
+            padding: 0;
+            border: 0;
+            vertical-align: middle;
+        }
+
+        td.body-cell table,
+        td.body-cell td {
+            padding: 0;
+        }
+
     </style>
 </head>
 <body>
@@ -198,11 +246,26 @@
                 {% set info = absenceMap[employee.id][day.date] ?? null %}
                 {% set isMonthEnd = (not loop.last) and (days[loop.index].date|date('n') != day.date|date('n')) %}
                 {% set isWeekend = day.date|date('N') in [6, 7] %}
-                <td class="col-day{% if isMonthEnd %} month-separator{% endif %}{% if isWeekend %} weekend{% endif %}{% if isHoliday %} holiday{% endif %}" style="width: {{ dayColWidthMm }}mm;{% if info and not isHoliday %} background-color: {{ info.color }};{% endif %}">
+                <td class="col-day body-cell{% if isMonthEnd %} month-separator{% endif %}{% if isWeekend %} weekend{% endif %}{% if isHoliday %} holiday{% endif %}" style="width: {{ dayColWidthMm }}mm;{% if info and not isHoliday and not info.half %} background-color: {{ info.color }};{% endif %}">
                     {% if isHoliday %}
-                        <span class="code">F</span>
+                        <span class="full-cell code">Férié</span>
                     {% elseif info %}
-                        <span class="code">{{ info.code }}</span>
+                        {% if info.half %}
+                            <table class="half-table">
+                                <tr>
+                                    <td class="half-td" style="{% if info.halfLabel == 'AM' %}background-color: {{ info.color }};{% endif %}">
+                                        {% if info.halfLabel == 'AM' %}{{ info.code }}{% endif %}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="half-td" style="{% if info.halfLabel == 'PM' %}background-color: {{ info.color }};{% endif %}">
+                                        {% if info.halfLabel == 'PM' %}{{ info.code }}{% endif %}
+                                    </td>
+                                </tr>
+                            </table>
+                        {% else %}
+                            <span class="full-cell code">{{ info.code }}</span>
+                        {% endif %}
                     {% endif %}
                 </td>
             {% endfor %}