chore: bump version to v0.1.8

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## 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: #3
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>

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.4'
+    app.version: '0.1.8'

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,20 +18,24 @@
 
                 <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>
                     <div
                         v-for="day in daysInMonth"
                         :key="employee.id + '-' + day.date"
-                        class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
+                        class="border-b border-neutral-300 px-2 py-2 text-center text-xs text-neutral-800 hover:bg-neutral-500"
                     >
                         <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="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-white"
                                 :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
                                 :disabled="isHolidayDate(day.date)"
@@ -59,7 +63,7 @@
                         <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="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 bg-white hover:border-white"
                                 :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
                                 :disabled="isHolidayDate(day.date)"
@@ -97,9 +101,27 @@ defineProps<{
 
 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="/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>
+                        <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>
+                    </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,91 @@
 <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="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>
+            </div>
+            <div class="flex justify-between mt-3">
+                <div class="flex items-center gap-4 w-80">
+                    <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 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"
-                        />
+                    <p class="font-bold">Légende :</p>
+                    <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
+                        <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
+                        <p>{{ type.label }}</p>
                     </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>
+
         </div>
 
-        <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"
-        />
+        <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"
@@ -92,7 +115,7 @@ 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 {listEmployees} from '~/services/employees'
+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'
@@ -110,7 +133,12 @@ const sites = computed(() => {
             siteMap.set(employee.site.id, employee.site)
         }
     }
-    return Array.from(siteMap.values()).sort((siteA, siteB) => siteA.name.localeCompare(siteB.name, 'fr'))
+    return Array.from(siteMap.values()).sort((siteA, siteB) => {
+        const orderA = siteA.displayOrder ?? 0
+        const orderB = siteB.displayOrder ?? 0
+        if (orderA !== orderB) return orderA - orderB
+        return siteA.name.localeCompare(siteB.name, 'fr')
+    })
 })
 
 // Filtres de sites (par défaut: tous sélectionnés à l'init).
@@ -126,23 +154,37 @@ watch(sites, (next) => {
 // Tri stable: site -> nom -> prénom.
 const sortedEmployees = computed(() => {
   return [...employees.value].sort((employeeA, employeeB) => {
+    const siteOrderA = employeeA.site?.displayOrder ?? 0
+    const siteOrderB = employeeB.site?.displayOrder ?? 0
+    if (siteOrderA !== siteOrderB) return siteOrderA - siteOrderB
     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é.
@@ -650,4 +692,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/sites.vue

@@ -32,8 +32,15 @@
           v-for="site in sites"
           :key="site.id"
           class="grid grid-cols-[1fr_140px_160px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          draggable="true"
+          @dragstart="handleDragStart($event, site)"
+          @dragover="handleDragOver"
+          @drop="handleDrop($event, site)"
         >
-          <span class="text-left">{{ site.name }}</span>
+          <span class="flex items-center gap-2 text-left cursor-pointer">
+            <span class="select-none text-xs">::</span>
+            <span>{{ site.name }}</span>
+          </span>
           <div class="flex items-center gap-2 justify-start">
             <span
               class="inline-block h-3 w-3 rounded-full"
@@ -114,11 +121,12 @@
 
 <script setup lang="ts">
 import type { Site } from '~/services/dto/site'
-import { createSite, deleteSite, listSites, updateSite } from '~/services/sites'
+import { createSite, deleteSite, listSites, updateSite, updateSiteOrder } from '~/services/sites'
 
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
+const isReordering = ref(false)
 
 const sites = ref<Site[]>([])
 const editingSite = ref<Site | null>(null)
@@ -207,7 +215,8 @@ const handleSubmit = async () => {
     } else {
       await createSite({
         name: form.name,
-        color: form.color
+        color: form.color,
+        displayOrder: sites.value.length + 1
       })
     }
 
@@ -231,4 +240,52 @@ const confirmDelete = async (site: Site) => {
   await deleteSite(site.id)
   await loadSites()
 }
+
+const handleDragStart = (event: DragEvent, site: Site) => {
+  if (isReordering.value || !event.dataTransfer) return
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/plain', String(site.id))
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const handleDrop = async (event: DragEvent, site: Site) => {
+  event.preventDefault()
+  if (isReordering.value) return
+
+  const dragId = Number(event.dataTransfer?.getData('text/plain'))
+  if (!dragId || dragId === site.id) return
+
+  const fromIndex = sites.value.findIndex((item) => item.id === dragId)
+  const toIndex = sites.value.findIndex((item) => item.id === site.id)
+  if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return
+
+  const reordered = [...sites.value]
+  const [moved] = reordered.splice(fromIndex, 1)
+  reordered.splice(toIndex, 0, moved)
+
+  const updates: Array<{ id: number; displayOrder: number }> = []
+  reordered.forEach((item, index) => {
+    const nextOrder = index + 1
+    if ((item.displayOrder ?? 0) !== nextOrder) {
+      updates.push({ id: item.id, displayOrder: nextOrder })
+    }
+    item.displayOrder = nextOrder
+  })
+
+  sites.value = reordered
+  if (updates.length === 0) return
+
+  isReordering.value = true
+  try {
+    await Promise.all(updates.map((update) => updateSiteOrder(update.id, update.displayOrder)))
+  } catch {
+    window.alert("Impossible de reordonner les sites.")
+    await loadSites()
+  } finally {
+    isReordering.value = false
+  }
+}
 </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/dto/employee.ts

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

frontend/services/dto/site.ts

@@ -2,4 +2,5 @@ export type Site = {
   id: number
   name: string
   color: string
+  displayOrder?: number
 }

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/sites.ts

@@ -8,10 +8,15 @@ export const listSites = async () => {
     {},
     { toast: false }
   )
-  return extractItems<Site>(data)
+  return extractItems<Site>(data).sort((siteA, siteB) => {
+    const orderA = siteA.displayOrder ?? 0
+    const orderB = siteB.displayOrder ?? 0
+    if (orderA !== orderB) return orderA - orderB
+    return siteA.name.localeCompare(siteB.name, 'fr')
+  })
 }
 
-export const createSite = async (payload: Pick<Site, 'name' | 'color'>) => {
+export const createSite = async (payload: Pick<Site, 'name' | 'color'> & { displayOrder?: number }) => {
   const api = useApi()
   return api.post<Site>('/sites', payload, {
     toastSuccessKey: 'success.site.create',
@@ -19,7 +24,10 @@ export const createSite = async (payload: Pick<Site, 'name' | 'color'>) => {
   })
 }
 
-export const updateSite = async (id: number, payload: Pick<Site, 'name' | 'color'>) => {
+export const updateSite = async (
+  id: number,
+  payload: Pick<Site, 'name' | 'color'> & { displayOrder?: number }
+) => {
   const api = useApi()
   return api.patch<Site>(`/sites/${id}`, payload, {
     toastSuccessKey: 'success.site.update',
@@ -27,6 +35,15 @@ export const updateSite = async (id: number, payload: Pick<Site, 'name' | 'color
   })
 }
 
+export const updateSiteOrder = async (id: number, displayOrder: number) => {
+  const api = useApi()
+  return api.patch<Site>(`/sites/${id}`, {
+    displayOrder
+  }, {
+    toast: false
+  })
+}
+
 export const deleteSite = async (id: number) => {
   const api = useApi()
   return api.delete(`/sites/${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/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');
+    }
+}

migrations/Version20260216143000.php

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

migrations/Version20260216143100.php

@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260216143100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Backfill site display_order';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('
+            UPDATE sites s
+            SET display_order = ranked.rn
+            FROM (
+                SELECT id,
+                       ROW_NUMBER() OVER (
+                           ORDER BY name ASC, id ASC
+                       ) AS rn
+                FROM sites
+            ) ranked
+            WHERE ranked.id = s.id
+        ');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // Pas de rollback pertinent.
+    }
+}

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'])]

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
@@ -27,6 +31,10 @@ class Site
     #[Groups(['site:read', 'employee:read'])]
     private string $color = '';
 
+    #[ORM\Column(type: 'integer', options: ['default' => 0])]
+    #[Groups(['site:read'])]
+    private int $displayOrder = 0;
+
     public function getId(): ?int
     {
         return $this->id;
@@ -55,4 +63,16 @@ class Site
 
         return $this;
     }
+
+    public function getDisplayOrder(): int
+    {
+        return $this->displayOrder;
+    }
+
+    public function setDisplayOrder(int $displayOrder): self
+    {
+        $this->displayOrder = $displayOrder;
+
+        return $this;
+    }
 }

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

@@ -114,7 +114,9 @@ class AbsencePrintProvider implements ProviderInterface
             ->createQueryBuilder('e')
             ->leftJoin('e.site', 's')
             ->addSelect('s')
-            ->orderBy('s.name', 'ASC')
+            ->orderBy('s.displayOrder', 'ASC')
+            ->addOrderBy('s.name', 'ASC')
+            ->addOrderBy('e.displayOrder', 'ASC')
             ->addOrderBy('e.lastName', 'ASC')
             ->addOrderBy('e.firstName', 'ASC')
         ;

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

@@ -35,29 +35,27 @@
         }
 
         .col-employee {
-            font-size: 16px;
+            font-size: 10px;
             font-weight: bold;
             width: 10mm;
             text-align: left;
         }
 
         .col-day {
-            font-size: 10px;
+            font-size: 8px;
             text-align: center;
         }
 
         .month {
-            font-size: 16px;
+            font-size: 14px;
             font-weight: bold;
-            padding: 3px 0;
         }
 
         .site-title td {
             font-weight: bold;
-            font-size: 16px;
+            font-size: 12px;
             text-transform: uppercase;
             border-color: #0a0a0a;
-            padding: 4px 6px;
         }
 
         .site-title .label {
@@ -66,7 +64,7 @@
 
         .code {
             font-weight: bold;
-            font-size: 9px;
+            font-size: 8px;
         }
 
         .holiday-code {
@@ -95,8 +93,6 @@
 
         .full-cell {
             display: block;
-            height: 6mm;
-            line-height: 6mm;
             text-align: center;
             margin: 0;
             padding: 0;
@@ -104,7 +100,6 @@
 
         .half-table {
             width: 100%;
-            height: 6mm;
             border-collapse: collapse;
             table-layout: fixed;
             border: 0;