From 53255dba43843f7072306faa33f935e80767eb0d Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 10 Mar 2026 10:01:36 +0100
Subject: [PATCH] feat : modification des notifications + correction de bug

---
 frontend/components/AppTopNav.vue             | 287 ++++---
 frontend/components/SiteFilterSelector.vue    |   2 +-
 frontend/components/employees/ContractTab.vue |   3 +-
 frontend/components/employees/LeaveTab.vue    |   3 +-
 frontend/components/employees/RttTab.vue      |  19 +-
 frontend/components/hours/HoursDayView.vue    |   9 +-
 frontend/components/hours/HoursToolbar.vue    |  11 +-
 frontend/composables/useHoursPage.ts          |   1 +
 frontend/layouts/default.vue                  |   6 +-
 frontend/pages/employees/index.vue            | 759 +++++++++---------
 frontend/pages/hours.vue                      |   2 +
 frontend/public/malio.png                     | Bin 8091 -> 8614 bytes
 frontend/services/dto/notification.ts         |   4 +-
 frontend/services/notifications.ts            |  22 +
 frontend/tailwind.config.ts                   |   2 +-
 migrations/Version20260309170000.php          |  26 +
 migrations/Version20260309180000.php          |  28 +
 migrations/Version20260309190000.php          |  26 +
 src/Entity/Employee.php                       |   9 +
 src/Entity/Notification.php                   |  76 +-
 src/Repository/NotificationRepository.php     |  34 +
 src/State/NotificationHistoryProvider.php     |  30 +
 src/State/NotificationTodayProvider.php       |  30 +
 .../WorkHourBulkSiteValidationProcessor.php   |  49 +-
 src/State/WorkHourSiteValidationProcessor.php |  13 +-
 25 files changed, 932 insertions(+), 519 deletions(-)
 create mode 100644 migrations/Version20260309170000.php
 create mode 100644 migrations/Version20260309180000.php
 create mode 100644 migrations/Version20260309190000.php
 create mode 100644 src/State/NotificationHistoryProvider.php
 create mode 100644 src/State/NotificationTodayProvider.php

diff --git a/frontend/components/AppTopNav.vue b/frontend/components/AppTopNav.vue
index 3380dc4..115d5f3 100644
--- a/frontend/components/AppTopNav.vue
+++ b/frontend/components/AppTopNav.vue
@@ -1,142 +1,233 @@
 <template>
-  <header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
-    <div class="flex h-full items-center justify-end">
-      <div class="flex gap-12 text-xl text-white">
-        <div v-if="isAdmin" ref="bellRoot" class="relative">
-          <button type="button" class="relative self-center cursor-pointer" @click="toggleNotifications">
-            <Icon name="mdi:bell-plus" size="36" />
-            <span
-              v-if="unreadCount > 0"
-              class="absolute -right-1 -top-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
-            >
+    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
+        <div class="flex h-full items-center justify-end">
+            <div class="flex gap-6 text-xl text-white">
+                <div v-if="isAdmin" ref="bellRoot" class="relative">
+                    <button type="button" class="relative self-center cursor-pointer flex items-center" @click="toggleNotifications">
+                        <Icon name="mdi:bell-plus" size="36"/>
+                        <span
+                            v-if="unreadCount > 0"
+                            class="absolute -right-1 -top-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
+                        >
               {{ unreadCount }}
             </span>
-          </button>
+                    </button>
 
-          <div
-            v-if="isNotificationsOpen"
-            class="absolute right-0 top-full z-30 mt-2 w-80 rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg"
-          >
-            <div class="border-b border-neutral-200 px-3 py-2 text-sm font-semibold">
-              Notifications
+                    <div
+                        v-if="isNotificationsOpen"
+                        class="fixed right-[20px] z-30 w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg"
+                        :style="{ top: `${navbarBottom + 20}px` }"
+                    >
+                        <div class="px-3 pt-3 pb-6 text-xl font-semibold">
+                            Notifications
+                        </div>
+                        <div class="flex gap-6 px-3 pb-2 border-b border-black">
+                            <button
+                                type="button"
+                                class="border-b-2 cursor-pointer text-[18px]"
+                                :class="activeNotifTab === 'unread' ? 'border-black font-semibold text-black' : 'border-transparent text-black hover:text-primary-500'"
+                                @click="switchNotifTab('unread')"
+                            >
+                                Non lues
+                            </button>
+                            <button
+                                type="button"
+                                class="border-b-2 cursor-pointer text-[18px]"
+                                :class="activeNotifTab === 'history' ? 'border-black font-semibold text-black' : 'border-transparent text-black hover:text-primary-500'"
+                                @click="switchNotifTab('history')"
+                            >
+                                Historique
+                            </button>
+                        </div>
+                        <div v-if="isLoadingNotifications" class="px-3 py-3 text-sm text-neutral-500">
+                            Chargement...
+                        </div>
+                        <div v-else-if="displayedNotifications.length === 0" class="px-3 py-3 text-sm text-neutral-500">
+                            Aucune notification.
+                        </div>
+                        <div v-else class="max-h-80 overflow-auto">
+                            <NuxtLink
+                                :to="notification.target"
+                                v-for="notification in displayedNotifications"
+                                :key="notification.id"
+                                class="flex gap-5 items-center border-b border-black px-3 py-4 last:border-b-0 relative hover:bg-tertiary-500"
+                                :class="notification.isRead ? '' : 'bg-tertiary-500'"
+                            >
+                                <div class="rounded-full h-[46px] w-[46px] min-w-[46px] bg-primary-500"></div>
+                                <div class="flex flex-col min-w-0 text-[16px]">
+                                    <p class="text-black"><span class="font-semibold capitalize">{{ notification.actorName }}</span> {{ notification.message }}</p>
+                                    <p class="text-black">{{ formatTimeAgo(notification.createdAt) }} - {{ notification.category }}</p>
+                                </div>
+                                <span v-if="!notification.isRead" class="absolute right-4 bg-primary-500 h-4 w-4 rounded-full"></span>
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+                <div ref="userMenuRoot" class="relative flex gap-4">
+                    <button type="button" class="flex items-center gap-4 cursor-pointer" @click="toggleUserMenu">
+                        <Icon name="mdi:account-circle-outline" class="self-center" size="36"/>
+                        <p class="self-center">{{ user?.username }}</p>
+                    </button>
+                    <div
+                        v-if="isUserMenuOpen"
+                        class="fixed right-[20px] z-30 w-60 rounded-md border border-neutral-200 bg-white text-[16px] text-black font-semibold shadow-lg"
+                        :style="{ top: `${navbarBottom + 20}px` }"
+                    >
+                        <button
+                            type="button"
+                            class="block w-full px-3 py-4 text-left hover:bg-tertiary-500 border-b border-black"
+                        >
+                            Mon profil
+                        </button>
+                        <button
+                            type="button"
+                            class="block w-full px-3 py-4 text-left hover:bg-tertiary-500 flex justify-between items-center"
+                            @click="handleLogout"
+                        >
+                            <p>Déconnexion</p>
+                            <Icon name="mdi:logout-variant" size="20"/>
+                        </button>
+                    </div>
+                </div>
             </div>
-            <div v-if="isLoadingNotifications" class="px-3 py-3 text-sm text-neutral-500">
-              Chargement...
-            </div>
-            <div v-else-if="notifications.length === 0" class="px-3 py-3 text-sm text-neutral-500">
-              Aucune notification.
-            </div>
-            <div v-else class="max-h-80 overflow-auto">
-              <div
-                v-for="notification in notifications"
-                :key="notification.id"
-                class="border-b border-neutral-100 px-3 py-2 last:border-b-0"
-              >
-                <p class="text-sm font-semibold text-neutral-900">{{ notification.title }}</p>
-                <p class="text-xs text-neutral-600">{{ notification.message }}</p>
-              </div>
-            </div>
-          </div>
         </div>
-        <div class="group relative flex gap-4">
-          <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
-          <p class="self-center cursor-pointer">{{ user?.username }}</p>
-          <div class="invisible absolute right-0 top-full z-20 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
-            <button
-              type="button"
-              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
-            >
-              Mon profil
-            </button>
-            <button
-              type="button"
-              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
-              @click="handleLogout"
-            >
-              Déconnexion
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
- </template>
+    </header>
+</template>
 
 <script setup lang="ts">
-import type { User } from '~/services/dto/user'
-import type { NotificationItem } from '~/services/dto/notification'
-import { listUnreadNotifications, markAllNotificationsRead } from '~/services/notifications'
+import type {User} from '~/services/dto/user'
+import type {NotificationItem} from '~/services/dto/notification'
+import {listUnreadNotifications, listTodayNotifications, listHistoryNotifications, markAllNotificationsRead} from '~/services/notifications'
 
 defineProps<{
-  user?: User
+    user?: User
 }>()
 
+const formatTimeAgo = (dateString: string): string => {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMinutes = Math.floor(diffMs / 60000)
+    if (diffMinutes < 1) return "À l'instant"
+    if (diffMinutes < 60) return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}`
+    const diffHours = Math.floor(diffMinutes / 60)
+    if (diffHours < 24) return `${diffHours} heure${diffHours > 1 ? 's' : ''}`
+    const diffDays = Math.floor(diffHours / 24)
+    return `${diffDays} jour${diffDays > 1 ? 's' : ''}`
+}
+
 const auth = useAuthStore()
 const route = useRoute()
+const headerRef = ref<HTMLElement | null>(null)
 const bellRoot = ref<HTMLElement | null>(null)
-const notifications = ref<NotificationItem[]>([])
+const userMenuRoot = ref<HTMLElement | null>(null)
+const isUserMenuOpen = ref(false)
+const navbarBottom = ref(0)
+
+const updateNavbarBottom = () => {
+    if (headerRef.value) {
+        navbarBottom.value = headerRef.value.getBoundingClientRect().bottom
+    }
+}
+const todayNotifications = ref<NotificationItem[]>([])
+const historyNotifications = ref<NotificationItem[]>([])
 const isNotificationsOpen = ref(false)
 const isLoadingNotifications = ref(false)
-const unreadCount = computed(() => notifications.value.length)
+const activeNotifTab = ref<'unread' | 'history'>('unread')
+const unreadCount = computed(() => todayNotifications.value.length)
+const displayedNotifications = computed(() => activeNotifTab.value === 'unread' ? todayNotifications.value : historyNotifications.value)
 const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
 
+const toggleUserMenu = () => {
+    updateNavbarBottom()
+    isUserMenuOpen.value = !isUserMenuOpen.value
+}
+
 const handleLogout = async () => {
-  await auth.logout()
-  await navigateTo('/login')
+    await auth.logout()
+    await navigateTo('/login')
+}
+
+const loadTodayNotifications = async () => {
+    todayNotifications.value = await listTodayNotifications()
+}
+
+const loadHistoryNotifications = async () => {
+    historyNotifications.value = await listHistoryNotifications()
 }
 
 const loadNotifications = async () => {
-  isLoadingNotifications.value = true
-  try {
-    notifications.value = await listUnreadNotifications()
-  } finally {
-    isLoadingNotifications.value = false
-  }
+    isLoadingNotifications.value = true
+    try {
+        await loadTodayNotifications()
+    } finally {
+        isLoadingNotifications.value = false
+    }
+}
+
+const switchNotifTab = async (tab: 'unread' | 'history') => {
+    activeNotifTab.value = tab
+    isLoadingNotifications.value = true
+    try {
+        if (tab === 'history') {
+            await loadHistoryNotifications()
+        } else {
+            await loadTodayNotifications()
+        }
+    } finally {
+        isLoadingNotifications.value = false
+    }
 }
 
 const closeNotifications = async () => {
-  if (!isNotificationsOpen.value) return
-  isNotificationsOpen.value = false
-  if (notifications.value.length > 0) {
-    await markAllNotificationsRead()
-    notifications.value = []
-  }
+    if (!isNotificationsOpen.value) return
+    isNotificationsOpen.value = false
+    if (todayNotifications.value.length > 0) {
+        await markAllNotificationsRead()
+        todayNotifications.value = []
+    }
 }
 
 const toggleNotifications = async () => {
-  if (isNotificationsOpen.value) {
-    await closeNotifications()
-    return
-  }
+    if (isNotificationsOpen.value) {
+        await closeNotifications()
+        return
+    }
 
-  isNotificationsOpen.value = true
-  await loadNotifications()
+    updateNavbarBottom()
+    activeNotifTab.value = 'unread'
+    isNotificationsOpen.value = true
+    await loadNotifications()
 }
 
 const handleClickOutside = async (event: MouseEvent) => {
-  const target = event.target as Node | null
-  if (!target || !bellRoot.value) return
-  if (!bellRoot.value.contains(target)) {
-    await closeNotifications()
-  }
+    const target = event.target as Node | null
+    if (!target) return
+    if (bellRoot.value && !bellRoot.value.contains(target)) {
+        await closeNotifications()
+    }
+    if (userMenuRoot.value && !userMenuRoot.value.contains(target)) {
+        isUserMenuOpen.value = false
+    }
 }
 
 onMounted(async () => {
-  if (isAdmin.value) {
-    await loadNotifications()
-  }
-  document.addEventListener('click', handleClickOutside)
+    updateNavbarBottom()
+    if (isAdmin.value) {
+        await loadNotifications()
+    }
+    document.addEventListener('click', handleClickOutside)
 })
 
 watch(
-  () => route.fullPath,
-  async () => {
-    if (!isAdmin.value) return
-    await loadNotifications()
-  }
+    () => route.fullPath,
+    async () => {
+        if (!isAdmin.value) return
+        await loadNotifications()
+    }
 )
 
 onBeforeUnmount(() => {
-  document.removeEventListener('click', handleClickOutside)
+    document.removeEventListener('click', handleClickOutside)
 })
 </script>
diff --git a/frontend/components/SiteFilterSelector.vue b/frontend/components/SiteFilterSelector.vue
index 1fccddb..4f5922a 100644
--- a/frontend/components/SiteFilterSelector.vue
+++ b/frontend/components/SiteFilterSelector.vue
@@ -2,7 +2,7 @@
   <div ref="root" class="relative inline-block w-fit max-w-full">
     <button
       type="button"
-      class="inline-flex w-[280px] min-h-10 items-center justify-between gap-2 rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 hover:bg-tertiary-500"
+      class="inline-flex w-[320px] min-h-10 items-center justify-between gap-2 rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 hover:bg-tertiary-500"
       @click="isOpen = !isOpen"
     >
       <span>Sites</span>
diff --git a/frontend/components/employees/ContractTab.vue b/frontend/components/employees/ContractTab.vue
index a8255e8..041c021 100644
--- a/frontend/components/employees/ContractTab.vue
+++ b/frontend/components/employees/ContractTab.vue
@@ -39,8 +39,7 @@
         :disabled="isCreateContractSubmitting || contracts.length === 0 || !canCreateContract"
         @click="onOpenCreateContractDrawer"
       >
-        <Icon name="mdi:plus-thick" size="16" />
-        Ajouter
+        + Ajouter
       </button>
     </div>
 
diff --git a/frontend/components/employees/LeaveTab.vue b/frontend/components/employees/LeaveTab.vue
index b531798..e85108e 100644
--- a/frontend/components/employees/LeaveTab.vue
+++ b/frontend/components/employees/LeaveTab.vue
@@ -20,8 +20,7 @@
                     class="flex justify-center items-center gap-2 bg-white text-primary-500 font-bold w-[150px] rounded-md py-[1px]"
                     @click="openFractionedDrawer"
                 >
-                    <Icon name="mdi:plus-thick" size="16" />
-                    {{ summary?.fractionedDays === 0 ? 'Ajouter' : 'Modifier' }}</button>
+                    {{ summary?.fractionedDays === 0 ? '+ Ajouter' : 'Modifier' }}</button>
             </div>
             <div class="flex flex-col jutify-center gap-2 items-center py-3">
                 <p><span class="uppercase font-semibold">En cours d'acquisition :</span></p>
diff --git a/frontend/components/employees/RttTab.vue b/frontend/components/employees/RttTab.vue
index 778145e..28137b7 100644
--- a/frontend/components/employees/RttTab.vue
+++ b/frontend/components/employees/RttTab.vue
@@ -1,10 +1,9 @@
 <template>
   <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
-    <div class="flex gap-10 justify-center items-center bg-primary-500 rounded-md text-white py-5 text-[20px]">
-      <p><span class="font-semibold uppercase">RTT à la date du jour :</span> {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
-        <button class="bg-white rounded-md text-primary-500 font-bold px-6 py-1" @click="openNewPayment">
-            <Icon name="mdi:plus-thick" size="16"/>
-            Payer les RTT
+    <div class="flex gap-10 justify-center items-center bg-primary-500 rounded-md text-white py-5">
+      <p class="text-[20px]"><span class="font-semibold">RTT à la date du jour :</span> {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
+        <button class="flex justify-center items-center gap-2 bg-white text-primary-500 font-bold w-[150px] rounded-md py-[1px] text-md" @click="openNewPayment">
+            + Payer les RTT
         </button>
     </div>
     <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
@@ -17,7 +16,7 @@
           <div class="flex justify-center rounded-t-md bg-primary-500 py-3 font-bold text-white text-[18px]">
             {{ month.label }}
           </div>
-          <div class="grid grid-cols-[60%_40%] text-[18px] border border-primary-500">
+          <div class="grid grid-cols-[70%_30%] text-[18px] border border-primary-500">
             <template v-for="week in month.weeks" :key="week.key">
               <div class="py-[6px] pl-3 border-r border-b border-primary-500">
                 <span v-if="week.isEmpty">&nbsp;</span>
@@ -36,7 +35,9 @@
                  title="Modifier les heures payées"
             >
                 <p>{{ formatMinutes(getMonthPaid25(month.month)) }}</p>
-                <Icon name="mdi:pencil" size="16" class="self-center"/>
+                <div class="flex justify-center items-center bg-primary-500 rounded-md p-1">
+                    <Icon name="mdi:pencil" size="16" class="self-center text-white" />
+                </div>
             </div>
             <div class="py-[6px] pl-3 border-r border-primary-500">Heure payée 50%</div>
             <div class="py-[6px] px-3 flex gap-3 items-center cursor-pointer hover:bg-primary-500/10"
@@ -44,7 +45,9 @@
                  title="Modifier les heures payées"
             >
                 <p>{{ formatMinutes(getMonthPaid50(month.month)) }}</p>
-                <Icon name="mdi:pencil" size="16" class="self-center"/>
+                <div class="flex justify-center items-center bg-primary-500 rounded-md p-1">
+                    <Icon name="mdi:pencil" size="16" class="self-center text-white" />
+                </div>
             </div>
           </div>
         </div>
diff --git a/frontend/components/hours/HoursDayView.vue b/frontend/components/hours/HoursDayView.vue
index f48376c..a1a9717 100644
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -16,7 +16,7 @@
         <span class="pl-2">Jour</span>
         <span>Nuit</span>
         <span>Total</span>
-        <span v-if="isAdmin" class="inline-flex items-center gap-2">
+        <span v-if="isAdmin" class="flex justify-between items-center">
           <span>Valider</span>
           <input
             ref="bulkValidationInput"
@@ -152,7 +152,7 @@
           <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}</div>
           <div v-else>{{ getPresenceDayValue(employee.id) }}</div>
         </div>
-        <div v-if="isAdmin">
+        <div v-if="isAdmin" class="text-right">
           <input
             :checked="rows[employee.id]?.isValid ?? false"
             type="checkbox"
@@ -160,13 +160,13 @@
             @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
           />
         </div>
-        <div v-else>
+        <div v-else class="text-right p-5">
           <input
             v-if="isSiteManager"
             :checked="rows[employee.id]?.isSiteValid ?? false"
             type="checkbox"
             class="h-4 w-4 cursor-pointer"
-            :disabled="!canToggleSiteValidation(employee.id) || isSiteValidationPending(employee.id)"
+            :disabled="(!canToggleSiteValidation(employee.id) && !canCreateSiteValidationRowFromAbsence(employee.id)) || isSiteValidationPending(employee.id)"
             @change="onToggleSiteValidation(employee.id, ($event.target as HTMLInputElement).checked)"
           />
           <span v-else-if="rows[employee.id]?.isSiteValid" class="text-xs font-semibold text-neutral-700">Validé</span>
@@ -207,6 +207,7 @@ const props = defineProps<{
   isSiteValidationPending: (employeeId: number) => boolean
   canToggleValidation: (employeeId: number) => boolean
   canToggleSiteValidation: (employeeId: number) => boolean
+  canCreateSiteValidationRowFromAbsence: (employeeId: number) => boolean
   isBulkValidationChecked: boolean
   isBulkValidationIndeterminate: boolean
   isBulkSiteValidationChecked: boolean
diff --git a/frontend/components/hours/HoursToolbar.vue b/frontend/components/hours/HoursToolbar.vue
index f833eb6..9b0fd29 100644
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="py-6 flex flex-col gap-3">
-    <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
+      <div class="flex gap-4">
+          <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
+          <div v-if="isAdmin" class="w-80 max-w-full">
+              <EmployeeNameFilterInput v-model="employeeFilter" />
+          </div>
+      </div>
 
     <div class="flex justify-between items-center gap-4">
       <div class="flex gap-4 flex-wrap">
@@ -99,10 +104,6 @@
       </div>
     </div>
 
-    <div v-if="isAdmin" class="w-80 max-w-full">
-      <EmployeeNameFilterInput v-model="employeeFilter" />
-    </div>
-
     <div
       v-if="isAdmin && viewMode === 'week' && absenceTypes.length > 0"
       class="flex flex-wrap items-center gap-6"
diff --git a/frontend/composables/useHoursPage.ts b/frontend/composables/useHoursPage.ts
index e5f2e47..6ec531b 100644
--- a/frontend/composables/useHoursPage.ts
+++ b/frontend/composables/useHoursPage.ts
@@ -1138,6 +1138,7 @@ export const useHoursPage = () => {
     isSiteValidationPending,
     canToggleValidation,
     canToggleSiteValidation,
+    canCreateSiteValidationRowFromAbsence,
     isBulkValidationChecked,
     isBulkValidationIndeterminate,
     isBulkSiteValidationChecked,
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index da6556c..066aa0f 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -2,21 +2,21 @@
     <div class="h-screen overflow-hidden">
         <div class="flex h-full">
             <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
-                <div>
+                <div class="h-[75px]">
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
                 </div>
                 <nav class="flex-1 px-4 pb-6">
                     <template v-if="isAdmin">
                         <NuxtLink
                             to="/"
-                            class="flex items-center gap-3 px-4 pb-3 pt-6 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
+                            class="hidden flex items-center gap-3 px-4 pb-3 pt-6 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
                             active-class="bg-tertiary-500 text-primary-500 font-bold"
                         >
                             Tableau de bord
                         </NuxtLink>
                         <NuxtLink
                             to="/calendar"
-                            class="flex items-center gap-3 px-4 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500"
+                            class="flex items-center gap-3 px-4 pb-3 pt-6 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
                             :class="route.path.startsWith('/calendar')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
diff --git a/frontend/pages/employees/index.vue b/frontend/pages/employees/index.vue
index 887f790..76487a5 100644
--- a/frontend/pages/employees/index.vue
+++ b/frontend/pages/employees/index.vue
@@ -1,205 +1,206 @@
 <template>
-  <div class="flex-col">
-    <div class="shrink-0">
-      <div class="flex items-center justify-between">
-          <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
-          <button
-              type="button"
-              class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-              @click="openCreate"
-          >
-              <Icon name="mdi:plus-thick" size="16" class="text-white"/>
-              Ajouter un employé
-          </button>
-      </div>
-    <div class="flex gap-10 py-7">
-        <div class="w-80">
-            <EmployeeNameFilterInput v-model="employeeFilter" />
-        </div>
-        <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites" />
-    </div>
-    </div>
-
-    <div
-      v-if="!isLoading && filteredEmployees.length === 0"
-      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
-    >
-      Aucun employé pour le moment.
-    </div>
-
-    <div v-else class="grid gap-8 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
-      <NuxtLink
-        v-for="employee in filteredEmployees"
-        :key="employee.id"
-        :to="`/employees/${employee.id}`"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group relative min-h-[328px] overflow-hidden rounded-lg bg-tertiary-500 p-4 transition-all duration-200 hover:shadow-md"
-      >
-        <div class="flex flex-col items-center gap-7 transition-opacity duration-200 group-hover:opacity-0">
-          <div class="rounded-full bg-neutral-300 h-[175px] w-[175px]"></div>
-          <div class="text-center text-[20px]">
-            <p class="text-primary-500 font-bold">{{ employee.lastName }} {{ employee.firstName }}</p>
-            <p>Nom du poste occupé</p>
-            <p>Site ({{ employee.site?.name ?? '-' }})</p>
-          </div>
+    <div class="flex-col">
+        <div class="shrink-0">
+            <div class="flex items-center justify-between">
+                <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
+                <button
+                    type="button"
+                    class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    @click="openCreate"
+                >
+                    + Ajouter un employé
+                </button>
+            </div>
+            <div class="flex gap-10 py-7">
+                <div class="w-80">
+                    <EmployeeNameFilterInput v-model="employeeFilter"/>
+                </div>
+                <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites"/>
+            </div>
         </div>
 
-        <div class="absolute inset-0 flex items-center justify-center bg-primary-500 p-4 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-          <div class="w-full rounded-md bg-white/15 p-4 text-sm">
-            <p class="text-base font-semibold">{{ employee.lastName }} {{ employee.firstName }}</p>
-            <p>Type: {{ contractNatureLabel(employee.currentContractNature) }}</p>
-            <p>Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
-            <p>Site: {{ employee.site?.name ?? '-' }}</p>
-          </div>
+        <div
+            v-if="!isLoading && filteredEmployees.length === 0"
+            class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+        >
+            Aucun employé pour le moment.
         </div>
-      </NuxtLink>
-    </div>
 
-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
-      <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="first-name">
-            Prénom <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="first-name"
-            v-model="form.firstName"
-            type="text"
-            :class="firstNameFieldClass"
-          />
-          <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
-            Le prénom est obligatoire.
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="last-name">
-            Nom <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="last-name"
-            v-model="form.lastName"
-            type="text"
-            :class="lastNameFieldClass"
-          />
-          <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
-            Le nom est obligatoire.
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="site">
-            Site <span class="text-red-600">*</span>
-          </label>
-          <select
-            id="site"
-            v-model="form.siteId"
-            :class="siteFieldClass"
-          >
-            <option value="">Aucun site</option>
-            <option v-for="site in sites" :key="site.id" :value="site.id">
-              {{ site.name }}
-            </option>
-          </select>
-          <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
-            Le site est obligatoire.
-          </p>
-        </div>
-        <template v-if="!editingEmployee">
-          <div>
-            <label class="text-md font-semibold text-neutral-700" for="contract-nature">
-              Type de contrat <span class="text-red-600">*</span>
-            </label>
-            <select
-              id="contract-nature"
-              v-model="form.contractNature"
-              :class="contractNatureFieldClass"
+        <div v-else class="grid gap-8 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
+            <NuxtLink
+                v-for="employee in filteredEmployees"
+                :key="employee.id"
+                :to="`/employees/${employee.id}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="group relative min-h-[328px] overflow-hidden rounded-lg bg-tertiary-500 p-4 transition-all duration-200 hover:shadow-md"
             >
-              <option value="CDI">CDI</option>
-              <option value="CDD">CDD</option>
-              <option value="INTERIM">Intérim</option>
-            </select>
-            <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
-              Le type de contrat est obligatoire.
-            </p>
-          </div>
-          <div>
-              <label class="text-md font-semibold text-neutral-700" for="contract">
-                  Temps de travail <span class="text-red-600">*</span>
-              </label>
-              <select
-                  id="contract"
-                  v-model="form.contractId"
-                  :class="contractFieldClass"
-              >
-                  <option value="">Sélectionner un contrat</option>
-                  <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
-                      {{ contract.name }}
-                  </option>
-              </select>
-              <p v-if="showContractError" class="mt-1 text-sm text-red-600">
-                  Le temps de travail est obligatoire.
-              </p>
-          </div>
-          <div>
-            <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
-              Début contrat <span class="text-red-600">*</span>
-            </label>
-            <input
-              id="contract-start-date"
-              v-model="form.contractStartDate"
-              type="date"
-              :class="contractStartDateFieldClass"
-            />
-            <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
-              La date de début est obligatoire.
-            </p>
-          </div>
-          <div v-if="requiresContractEndDateComputed">
-            <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
-              Fin contrat
-              <span v-if="requiresContractEndDateComputed" class="text-red-600">*</span>
-            </label>
-            <input
-              id="contract-end-date"
-              v-model="form.contractEndDate"
-              type="date"
-              :class="contractEndDateFieldClass"
-            />
-            <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
-              La date de fin est obligatoire pour un CDD ou un intérim.
-            </p>
-          </div>
-        </template>
-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="isDrawerOpen = false"
-          >
-            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 class="flex flex-col items-center gap-7 transition-opacity duration-200 group-hover:opacity-0">
+                    <div class="rounded-full bg-primary-500 h-[175px] w-[175px] flex justify-center items-center text-white font-bold text-5xl">{{ employee.initials}}</div>
+                    <div class="text-center text-[20px]">
+                        <p class="text-primary-500 font-bold">{{ employee.firstName }} {{ employee.lastName }}</p>
+                        <p>Nom du poste occupé</p>
+                        <p>Site ({{ employee.site?.name ?? '-' }})</p>
+                    </div>
+                </div>
+
+                <div
+                    class="absolute inset-0 flex items-center justify-center bg-primary-500 p-4 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                    <div class="w-full rounded-md bg-white/15 p-4 text-sm">
+                        <p class="text-base font-semibold">{{ employee.lastName }} {{ employee.firstName }}</p>
+                        <p><strong>Type:</strong> {{ contractNatureLabel(employee.currentContractNature) }}</p>
+                        <p><strong>Temps de travail:</strong> {{ employee.contract?.name ?? '-' }}</p>
+                        <p><strong>Site:</strong> {{ employee.site?.name ?? '-' }}</p>
+                    </div>
+                </div>
+            </NuxtLink>
         </div>
-      </form>
-    </AppDrawer>
-  </div>
+
+        <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+            <form class="space-y-4" @submit.prevent="handleSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="first-name">
+                        Prénom <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="first-name"
+                        v-model="form.firstName"
+                        type="text"
+                        :class="firstNameFieldClass"
+                    />
+                    <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
+                        Le prénom est obligatoire.
+                    </p>
+                </div>
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="last-name">
+                        Nom <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="last-name"
+                        v-model="form.lastName"
+                        type="text"
+                        :class="lastNameFieldClass"
+                    />
+                    <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
+                        Le nom est obligatoire.
+                    </p>
+                </div>
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="site">
+                        Site <span class="text-red-600">*</span>
+                    </label>
+                    <select
+                        id="site"
+                        v-model="form.siteId"
+                        :class="siteFieldClass"
+                    >
+                        <option value="">Aucun site</option>
+                        <option v-for="site in sites" :key="site.id" :value="site.id">
+                            {{ site.name }}
+                        </option>
+                    </select>
+                    <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
+                        Le site est obligatoire.
+                    </p>
+                </div>
+                <template v-if="!editingEmployee">
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="contract-nature">
+                            Type de contrat <span class="text-red-600">*</span>
+                        </label>
+                        <select
+                            id="contract-nature"
+                            v-model="form.contractNature"
+                            :class="contractNatureFieldClass"
+                        >
+                            <option value="CDI">CDI</option>
+                            <option value="CDD">CDD</option>
+                            <option value="INTERIM">Intérim</option>
+                        </select>
+                        <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
+                            Le type de contrat est obligatoire.
+                        </p>
+                    </div>
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="contract">
+                            Temps de travail <span class="text-red-600">*</span>
+                        </label>
+                        <select
+                            id="contract"
+                            v-model="form.contractId"
+                            :class="contractFieldClass"
+                        >
+                            <option value="">Sélectionner un contrat</option>
+                            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
+                                {{ contract.name }}
+                            </option>
+                        </select>
+                        <p v-if="showContractError" class="mt-1 text-sm text-red-600">
+                            Le temps de travail est obligatoire.
+                        </p>
+                    </div>
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
+                            Début contrat <span class="text-red-600">*</span>
+                        </label>
+                        <input
+                            id="contract-start-date"
+                            v-model="form.contractStartDate"
+                            type="date"
+                            :class="contractStartDateFieldClass"
+                        />
+                        <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
+                            La date de début est obligatoire.
+                        </p>
+                    </div>
+                    <div v-if="requiresContractEndDateComputed">
+                        <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
+                            Fin contrat
+                            <span v-if="requiresContractEndDateComputed" class="text-red-600">*</span>
+                        </label>
+                        <input
+                            id="contract-end-date"
+                            v-model="form.contractEndDate"
+                            type="date"
+                            :class="contractEndDateFieldClass"
+                        />
+                        <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
+                            La date de fin est obligatoire pour un CDD ou un intérim.
+                        </p>
+                    </div>
+                </template>
+                <div class="flex justify-end gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                        @click="isDrawerOpen = false"
+                    >
+                        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 { Contract } from '~/services/dto/contract'
-import type { Employee } from '~/services/dto/employee'
-import type { Site } from '~/services/dto/site'
-import { listContracts } from '~/services/contracts'
-import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
-import { listSites } from '~/services/sites'
+import type {Contract} from '~/services/dto/contract'
+import type {Employee} from '~/services/dto/employee'
+import type {Site} from '~/services/dto/site'
+import {listContracts} from '~/services/contracts'
+import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
+import {listSites} from '~/services/sites'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
-import { contractNatureLabel, isContractNature, requiresContractEndDate } from '~/utils/contract'
+import {contractNatureLabel, isContractNature, requiresContractEndDate} from '~/utils/contract'
+
 useHead({
     title: 'Employés'
 })
@@ -210,7 +211,7 @@ const isLoading = ref(false)
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
 const drawerTitle = computed(() =>
-  editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
+    editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
 )
 
 const employees = ref<Employee[]>([])
@@ -220,41 +221,41 @@ const employeeFilter = ref('')
 const selectedSiteIds = ref<number[]>([])
 
 const filteredEmployees = computed<Employee[]>(() => {
-  if (selectedSiteIds.value.length === 0) return []
+    if (selectedSiteIds.value.length === 0) return []
 
-  const filter = employeeFilter.value.trim().toLowerCase()
-  const bySite = employees.value.filter((employee) => {
-    const siteId = employee.site?.id
-    return !!siteId && selectedSiteIds.value.includes(siteId)
-  })
+    const filter = employeeFilter.value.trim().toLowerCase()
+    const bySite = employees.value.filter((employee) => {
+        const siteId = employee.site?.id
+        return !!siteId && selectedSiteIds.value.includes(siteId)
+    })
 
-  if (!filter) return bySite
+    if (!filter) return bySite
 
-  return bySite.filter((employee) => {
-    const firstName = employee.firstName?.toLowerCase() ?? ''
-    const lastName = employee.lastName?.toLowerCase() ?? ''
-    return firstName.includes(filter) || lastName.includes(filter)
-  })
+    return bySite.filter((employee) => {
+        const firstName = employee.firstName?.toLowerCase() ?? ''
+        const lastName = employee.lastName?.toLowerCase() ?? ''
+        return firstName.includes(filter) || lastName.includes(filter)
+    })
 })
 
 const form = reactive({
-  firstName: '',
-  lastName: '',
-  siteId: '' as number | '',
-  contractId: '' as number | '',
-  contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
-  contractStartDate: '',
-  contractEndDate: ''
+    firstName: '',
+    lastName: '',
+    siteId: '' as number | '',
+    contractId: '' as number | '',
+    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
+    contractStartDate: '',
+    contractEndDate: ''
 })
 
 const validationTouched = reactive({
-  firstName: false,
-  lastName: false,
-  siteId: false,
-  contractId: false,
-  contractNature: false,
-  contractStartDate: false,
-  contractEndDate: false
+    firstName: false,
+    lastName: false,
+    siteId: false,
+    contractId: false,
+    contractNature: false,
+    contractStartDate: false,
+    contractEndDate: false
 })
 
 const isFirstNameValid = computed(() => form.firstName.trim() !== '')
@@ -265,173 +266,216 @@ const isContractNatureValid = computed(() => isContractNature(form.contractNatur
 const isContractStartDateValid = computed(() => form.contractStartDate !== '')
 const requiresContractEndDateComputed = computed(() => requiresContractEndDate(form.contractNature))
 const isContractEndDateValid = computed(() => {
-  if (!requiresContractEndDateComputed.value) return true
-  return form.contractEndDate !== ''
+    if (!requiresContractEndDateComputed.value) return true
+    return form.contractEndDate !== ''
 })
 const isFormValid = computed(
-  () =>
-    isFirstNameValid.value &&
-    isLastNameValid.value &&
-    isSiteValid.value &&
-    (editingEmployee.value
-      ? true
-      : (isContractValid.value &&
-        isContractNatureValid.value &&
-        isContractStartDateValid.value &&
-        isContractEndDateValid.value))
+    () =>
+        isFirstNameValid.value &&
+        isLastNameValid.value &&
+        isSiteValid.value &&
+        (editingEmployee.value
+            ? true
+            : (isContractValid.value &&
+                isContractNatureValid.value &&
+                isContractStartDateValid.value &&
+                isContractEndDateValid.value))
 )
 
 const showFirstNameError = computed(
-  () => validationTouched.firstName && !isFirstNameValid.value
+    () => validationTouched.firstName && !isFirstNameValid.value
 )
 const showLastNameError = computed(
-  () => validationTouched.lastName && !isLastNameValid.value
+    () => validationTouched.lastName && !isLastNameValid.value
 )
 const showSiteError = computed(
-  () => validationTouched.siteId && !isSiteValid.value
+    () => validationTouched.siteId && !isSiteValid.value
 )
 const showContractError = computed(
-  () => validationTouched.contractId && !isContractValid.value
+    () => validationTouched.contractId && !isContractValid.value
 )
 const showContractNatureError = computed(
-  () => !editingEmployee.value && validationTouched.contractNature && !isContractNatureValid.value
+    () => !editingEmployee.value && validationTouched.contractNature && !isContractNatureValid.value
 )
 const showContractStartDateError = computed(
-  () => !editingEmployee.value && validationTouched.contractStartDate && !isContractStartDateValid.value
+    () => !editingEmployee.value && validationTouched.contractStartDate && !isContractStartDateValid.value
 )
 const showContractEndDateError = computed(
-  () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
+    () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
 )
 
 const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
+    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
 const firstNameFieldClass = computed(() => {
-  if (showFirstNameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
+    if (showFirstNameError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
 })
 const lastNameFieldClass = computed(() => {
-  if (showLastNameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
+    if (showLastNameError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
 })
 const siteFieldClass = computed(() => {
-  const baseSelectClass =
-    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-  if (showSiteError.value) {
-    return `${baseSelectClass} border-red-500`
-  }
-  return `${baseSelectClass} border-neutral-300`
+    const baseSelectClass =
+        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    if (showSiteError.value) {
+        return `${baseSelectClass} border-red-500`
+    }
+    return `${baseSelectClass} border-neutral-300`
 })
 const contractFieldClass = computed(() => {
-  const baseClass =
-    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-  if (showContractError.value) {
-    return `${baseClass} border-red-500`
-  }
-  return `${baseClass} border-neutral-300`
+    const baseClass =
+        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    if (showContractError.value) {
+        return `${baseClass} border-red-500`
+    }
+    return `${baseClass} border-neutral-300`
 })
 const contractNatureFieldClass = computed(() => {
-  const baseClass =
-    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-  if (showContractNatureError.value) {
-    return `${baseClass} border-red-500`
-  }
-  return `${baseClass} border-neutral-300`
+    const baseClass =
+        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
+    if (showContractNatureError.value) {
+        return `${baseClass} border-red-500`
+    }
+    return `${baseClass} border-neutral-300`
 })
 const contractStartDateFieldClass = computed(() => {
-  if (showContractStartDateError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
+    if (showContractStartDateError.value) {
+        return `${baseInputClass} border-red-500`
+    }
+    return `${baseInputClass} border-neutral-300`
 })
 const contractEndDateFieldClass = computed(() => {
-  if (showContractEndDateError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
+    if (showContractEndDateError.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 ''
+    if (isSubmitting.value || !isFormValid.value) {
+        return 'opacity-50 cursor-not-allowed'
+    }
+    return ''
 })
 
 const loadEmployees = async () => {
-  isLoading.value = true
-  try {
-    employees.value = await listEmployees()
-  } finally {
-    isLoading.value = false
-  }
+    isLoading.value = true
+    try {
+        employees.value = await listEmployees()
+    } finally {
+        isLoading.value = false
+    }
 }
 
 const loadSites = async () => {
-  sites.value = await listSites()
+    sites.value = await listSites()
 }
 
 const loadContracts = async () => {
-  contracts.value = await listContracts()
+    contracts.value = await listContracts()
 }
 
 onMounted(async () => {
-  await Promise.all([loadEmployees(), loadSites(), loadContracts()])
-  if (form.contractStartDate === '') {
-    form.contractStartDate = new Date().toISOString().slice(0, 10)
-  }
+    await Promise.all([loadEmployees(), loadSites(), loadContracts()])
+    if (form.contractStartDate === '') {
+        form.contractStartDate = new Date().toISOString().slice(0, 10)
+    }
 })
 
 watch(sites, (nextSites) => {
-  const currentSiteIds = nextSites.map((site) => site.id)
+    const currentSiteIds = nextSites.map((site) => site.id)
 
-  if (!sitesInitialized.value) {
-    if (currentSiteIds.length === 0) return
-    selectedSiteIds.value = currentSiteIds
-    sitesInitialized.value = true
-    return
-  }
-
-  selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
-}, { immediate: true })
-
-const handleSubmit = async () => {
-  if (isSubmitting.value) return
-  validationTouched.firstName = true
-  validationTouched.lastName = true
-  validationTouched.siteId = true
-  if (!editingEmployee.value) {
-    validationTouched.contractId = true
-    validationTouched.contractNature = true
-    validationTouched.contractStartDate = true
-    validationTouched.contractEndDate = true
-  }
-  if (!isFormValid.value) return
-
-  isSubmitting.value = true
-  try {
-    if (editingEmployee.value) {
-      await updateEmployee(editingEmployee.value.id, {
-        firstName: form.firstName,
-        lastName: form.lastName,
-        siteId: form.siteId === '' ? null : Number(form.siteId),
-        contractId: editingEmployee.value.contract?.id ?? Number(form.contractId)
-      })
-    } else {
-      await createEmployee({
-        firstName: form.firstName,
-        lastName: form.lastName,
-        siteId: form.siteId === '' ? null : Number(form.siteId),
-        contractId: Number(form.contractId),
-        contractNature: form.contractNature,
-        contractStartDate: form.contractStartDate,
-        contractEndDate: requiresContractEndDateComputed.value ? form.contractEndDate : null
-      })
+    if (!sitesInitialized.value) {
+        if (currentSiteIds.length === 0) return
+        selectedSiteIds.value = currentSiteIds
+        sitesInitialized.value = true
+        return
     }
 
+    selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
+}, {immediate: true})
+
+const handleSubmit = async () => {
+    if (isSubmitting.value) return
+    validationTouched.firstName = true
+    validationTouched.lastName = true
+    validationTouched.siteId = true
+    if (!editingEmployee.value) {
+        validationTouched.contractId = true
+        validationTouched.contractNature = true
+        validationTouched.contractStartDate = true
+        validationTouched.contractEndDate = true
+    }
+    if (!isFormValid.value) return
+
+    isSubmitting.value = true
+    try {
+        if (editingEmployee.value) {
+            await updateEmployee(editingEmployee.value.id, {
+                firstName: form.firstName,
+                lastName: form.lastName,
+                siteId: form.siteId === '' ? null : Number(form.siteId),
+                contractId: editingEmployee.value.contract?.id ?? Number(form.contractId)
+            })
+        } else {
+            await createEmployee({
+                firstName: form.firstName,
+                lastName: form.lastName,
+                siteId: form.siteId === '' ? null : Number(form.siteId),
+                contractId: Number(form.contractId),
+                contractNature: form.contractNature,
+                contractStartDate: form.contractStartDate,
+                contractEndDate: requiresContractEndDateComputed.value ? form.contractEndDate : null
+            })
+        }
+
+        form.firstName = ''
+        form.lastName = ''
+        form.siteId = ''
+        form.contractId = ''
+        form.contractNature = 'CDI'
+        form.contractStartDate = new Date().toISOString().slice(0, 10)
+        form.contractEndDate = ''
+        editingEmployee.value = null
+        isDrawerOpen.value = false
+        await loadEmployees()
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+watch(isDrawerOpen, (isOpen) => {
+    if (!isOpen) {
+        validationTouched.firstName = false
+        validationTouched.lastName = false
+        validationTouched.siteId = false
+        validationTouched.contractId = false
+        validationTouched.contractNature = false
+        validationTouched.contractStartDate = false
+        validationTouched.contractEndDate = false
+    }
+})
+
+watch(requiresContractEndDateComputed, (required) => {
+    if (!required) {
+        form.contractEndDate = ''
+    }
+})
+
+const openEdit = (employee: Employee) => {
+    editingEmployee.value = employee
+    form.firstName = employee.firstName
+    form.lastName = employee.lastName
+    form.siteId = employee.site?.id ?? ''
+    isDrawerOpen.value = true
+}
+
+const openCreate = () => {
+    editingEmployee.value = null
     form.firstName = ''
     form.lastName = ''
     form.siteId = ''
@@ -439,57 +483,14 @@ const handleSubmit = async () => {
     form.contractNature = 'CDI'
     form.contractStartDate = new Date().toISOString().slice(0, 10)
     form.contractEndDate = ''
-    editingEmployee.value = null
-    isDrawerOpen.value = false
-    await loadEmployees()
-  } finally {
-    isSubmitting.value = false
-  }
-}
-
-watch(isDrawerOpen, (isOpen) => {
-  if (!isOpen) {
-    validationTouched.firstName = false
-    validationTouched.lastName = false
-    validationTouched.siteId = false
-    validationTouched.contractId = false
-    validationTouched.contractNature = false
-    validationTouched.contractStartDate = false
-    validationTouched.contractEndDate = false
-  }
-})
-
-watch(requiresContractEndDateComputed, (required) => {
-  if (!required) {
-    form.contractEndDate = ''
-  }
-})
-
-const openEdit = (employee: Employee) => {
-  editingEmployee.value = employee
-  form.firstName = employee.firstName
-  form.lastName = employee.lastName
-  form.siteId = employee.site?.id ?? ''
-  isDrawerOpen.value = true
-}
-
-const openCreate = () => {
-  editingEmployee.value = null
-  form.firstName = ''
-  form.lastName = ''
-  form.siteId = ''
-  form.contractId = ''
-  form.contractNature = 'CDI'
-  form.contractStartDate = new Date().toISOString().slice(0, 10)
-  form.contractEndDate = ''
-  isDrawerOpen.value = true
+    isDrawerOpen.value = true
 }
 
 const confirmDelete = async (employee: Employee) => {
-  const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
-  if (!ok) return
+    const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
+    if (!ok) return
 
-  await deleteEmployee(employee.id)
-  await loadEmployees()
+    await deleteEmployee(employee.id)
+    await loadEmployees()
 }
 </script>
diff --git a/frontend/pages/hours.vue b/frontend/pages/hours.vue
index a37d02a..6361293 100644
--- a/frontend/pages/hours.vue
+++ b/frontend/pages/hours.vue
@@ -54,6 +54,7 @@
                 :is-site-validation-pending="isSiteValidationPending"
                 :can-toggle-validation="canToggleValidation"
                 :can-toggle-site-validation="canToggleSiteValidation"
+                :can-create-site-validation-row-from-absence="canCreateSiteValidationRowFromAbsence"
                 :is-bulk-validation-checked="isBulkValidationChecked"
                 :is-bulk-validation-indeterminate="isBulkValidationIndeterminate"
                 :is-bulk-site-validation-checked="isBulkSiteValidationChecked"
@@ -162,6 +163,7 @@ const {
   isSiteValidationPending,
   canToggleValidation,
   canToggleSiteValidation,
+  canCreateSiteValidationRowFromAbsence,
   isBulkValidationChecked,
   isBulkValidationIndeterminate,
   isBulkSiteValidationChecked,
diff --git a/frontend/public/malio.png b/frontend/public/malio.png
index ab1ea2ff00b14fb53a0735a917a3145333e52151..f66b0750f6fcd6c4fab5bec5eac33224ff259062 100644
GIT binary patch
literal 8614
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

literal 8091
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
Cec#^z

diff --git a/frontend/services/dto/notification.ts b/frontend/services/dto/notification.ts
index edfd9e1..94192ec 100644
--- a/frontend/services/dto/notification.ts
+++ b/frontend/services/dto/notification.ts
@@ -1,7 +1,9 @@
 export type NotificationItem = {
   id: number
-  title: string
+  actorName: string
   message: string
+  category: string
+  target: string
   isRead: boolean
   createdAt: string
 }
diff --git a/frontend/services/notifications.ts b/frontend/services/notifications.ts
index 7d8a96e..a0d921e 100644
--- a/frontend/services/notifications.ts
+++ b/frontend/services/notifications.ts
@@ -12,6 +12,28 @@ export const listUnreadNotifications = async () => {
   return extractItems<NotificationItem>(data)
 }
 
+export const listTodayNotifications = async () => {
+  const api = useApi()
+  const data = await api.get<NotificationItem[] | { 'hydra:member'?: NotificationItem[] }>(
+    '/notifications/today',
+    {},
+    { toast: false }
+  )
+
+  return extractItems<NotificationItem>(data)
+}
+
+export const listHistoryNotifications = async () => {
+  const api = useApi()
+  const data = await api.get<NotificationItem[] | { 'hydra:member'?: NotificationItem[] }>(
+    '/notifications/history',
+    {},
+    { toast: false }
+  )
+
+  return extractItems<NotificationItem>(data)
+}
+
 export const markAllNotificationsRead = async () => {
   const api = useApi()
   return api.post('/notifications/mark-all-read', {}, { toast: false })
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 691f3ae..13ab8ad 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -4,7 +4,7 @@ export default <Partial<Config>>{
     theme: {
         extend: {
             fontFamily: {
-                sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
+                sans: ['"Inter"', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
             },
             colors: {
                 primary: {
diff --git a/migrations/Version20260309170000.php b/migrations/Version20260309170000.php
new file mode 100644
index 0000000..8926021
--- /dev/null
+++ b/migrations/Version20260309170000.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260309170000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add category column to notifications table.';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql("ALTER TABLE notifications ADD COLUMN category VARCHAR(60) NOT NULL DEFAULT ''");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE notifications DROP COLUMN category');
+    }
+}
diff --git a/migrations/Version20260309180000.php b/migrations/Version20260309180000.php
new file mode 100644
index 0000000..6b1e67a
--- /dev/null
+++ b/migrations/Version20260309180000.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260309180000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Replace title with actor_id on notifications table.';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE notifications ADD COLUMN actor_id INT DEFAULT NULL REFERENCES users(id) ON DELETE SET NULL');
+        $this->addSql('ALTER TABLE notifications DROP COLUMN title');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql("ALTER TABLE notifications ADD COLUMN title VARCHAR(120) NOT NULL DEFAULT ''");
+        $this->addSql('ALTER TABLE notifications DROP COLUMN actor_id');
+    }
+}
diff --git a/migrations/Version20260309190000.php b/migrations/Version20260309190000.php
new file mode 100644
index 0000000..5632ba7
--- /dev/null
+++ b/migrations/Version20260309190000.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260309190000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add target column to notifications table.';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql("ALTER TABLE notifications ADD COLUMN target VARCHAR(255) NOT NULL DEFAULT ''");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE notifications DROP COLUMN target');
+    }
+}
diff --git a/src/Entity/Employee.php b/src/Entity/Employee.php
index b5e63f6..8c97575 100644
--- a/src/Entity/Employee.php
+++ b/src/Entity/Employee.php
@@ -116,6 +116,15 @@ class Employee
         return $this;
     }
 
+    #[Groups(['employee:read'])]
+    public function getInitials(): string
+    {
+        $first = mb_strtoupper(mb_substr(trim($this->firstName), 0, 1));
+        $last  = mb_strtoupper(mb_substr(trim($this->lastName), 0, 1));
+
+        return $first.$last;
+    }
+
     public function getSite(): ?Site
     {
         return $this->site;
diff --git a/src/Entity/Notification.php b/src/Entity/Notification.php
index bbad842..0df2c98 100644
--- a/src/Entity/Notification.php
+++ b/src/Entity/Notification.php
@@ -5,10 +5,13 @@ declare(strict_types=1);
 namespace App\Entity;
 
 use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
 use ApiPlatform\Metadata\Post;
 use App\Repository\NotificationRepository;
 use App\State\MarkAllNotificationsReadProcessor;
+use App\State\NotificationHistoryProvider;
+use App\State\NotificationTodayProvider;
 use App\State\UnreadNotificationsProvider;
 use DateTimeImmutable;
 use Doctrine\ORM\Mapping as ORM;
@@ -16,6 +19,13 @@ use Symfony\Component\Serializer\Attribute\Groups;
 
 #[ApiResource(
     operations: [
+        new Get(
+            uriTemplate: '/notifications/{id}',
+            uriVariables: ['id'],
+            requirements: ['id' => '\d+'],
+            normalizationContext: ['groups' => ['notification:read']],
+            security: "is_granted('ROLE_USER')"
+        ),
         new GetCollection(
             uriTemplate: '/notifications/unread',
             normalizationContext: ['groups' => ['notification:read']],
@@ -23,6 +33,20 @@ use Symfony\Component\Serializer\Attribute\Groups;
             provider: UnreadNotificationsProvider::class,
             paginationEnabled: false
         ),
+        new GetCollection(
+            uriTemplate: '/notifications/today',
+            normalizationContext: ['groups' => ['notification:read']],
+            security: "is_granted('ROLE_USER')",
+            provider: NotificationTodayProvider::class,
+            paginationEnabled: false
+        ),
+        new GetCollection(
+            uriTemplate: '/notifications/history',
+            normalizationContext: ['groups' => ['notification:read']],
+            security: "is_granted('ROLE_USER')",
+            provider: NotificationHistoryProvider::class,
+            paginationEnabled: false
+        ),
         new Post(
             uriTemplate: '/notifications/mark-all-read',
             security: "is_granted('ROLE_USER')",
@@ -48,14 +72,22 @@ class Notification
     #[ORM\JoinColumn(nullable: false, onDelete: 'CASCADE')]
     private ?User $recipient = null;
 
-    #[ORM\Column(type: 'string', length: 120)]
-    #[Groups(['notification:read'])]
-    private string $title = '';
+    #[ORM\ManyToOne(targetEntity: User::class)]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
+    private ?User $actor = null;
 
     #[ORM\Column(type: 'text')]
     #[Groups(['notification:read'])]
     private string $message = '';
 
+    #[ORM\Column(type: 'string', length: 60, options: ['default' => ''])]
+    #[Groups(['notification:read'])]
+    private string $category = '';
+
+    #[ORM\Column(type: 'string', length: 255, options: ['default' => ''])]
+    #[Groups(['notification:read'])]
+    private string $target = '';
+
     #[ORM\Column(type: 'boolean', options: ['default' => false])]
     #[Groups(['notification:read'])]
     private bool $isRead = false;
@@ -86,18 +118,24 @@ class Notification
         return $this;
     }
 
-    public function getTitle(): string
+    public function getActor(): ?User
     {
-        return $this->title;
+        return $this->actor;
     }
 
-    public function setTitle(string $title): self
+    public function setActor(?User $actor): self
     {
-        $this->title = $title;
+        $this->actor = $actor;
 
         return $this;
     }
 
+    #[Groups(['notification:read'])]
+    public function getActorName(): string
+    {
+        return $this->actor?->getUsername() ?? '';
+    }
+
     public function getMessage(): string
     {
         return $this->message;
@@ -110,6 +148,30 @@ class Notification
         return $this;
     }
 
+    public function getCategory(): string
+    {
+        return $this->category;
+    }
+
+    public function setCategory(string $category): self
+    {
+        $this->category = $category;
+
+        return $this;
+    }
+
+    public function getTarget(): string
+    {
+        return $this->target;
+    }
+
+    public function setTarget(string $target): self
+    {
+        $this->target = $target;
+
+        return $this;
+    }
+
     public function isRead(): bool
     {
         return $this->isRead;
diff --git a/src/Repository/NotificationRepository.php b/src/Repository/NotificationRepository.php
index 8a4ada7..9136aac 100644
--- a/src/Repository/NotificationRepository.php
+++ b/src/Repository/NotificationRepository.php
@@ -6,6 +6,7 @@ namespace App\Repository;
 
 use App\Entity\Notification;
 use App\Entity\User;
+use DateTimeImmutable;
 use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
 use Doctrine\Persistence\ManagerRegistry;
 
@@ -36,6 +37,39 @@ final class NotificationRepository extends ServiceEntityRepository
         ;
     }
 
+    /**
+     * @return list<Notification>
+     */
+    public function findTodayByRecipient(User $recipient): array
+    {
+        $todayStart = new DateTimeImmutable('today 00:00:00');
+
+        return $this->createQueryBuilder('n')
+            ->andWhere('n.recipient = :recipient')
+            ->andWhere('n.createdAt >= :todayStart')
+            ->setParameter('recipient', $recipient)
+            ->setParameter('todayStart', $todayStart)
+            ->orderBy('n.createdAt', 'DESC')
+            ->getQuery()
+            ->getResult()
+        ;
+    }
+
+    /**
+     * @return list<Notification>
+     */
+    public function findLatestByRecipient(User $recipient, int $limit = 10): array
+    {
+        return $this->createQueryBuilder('n')
+            ->andWhere('n.recipient = :recipient')
+            ->setParameter('recipient', $recipient)
+            ->orderBy('n.createdAt', 'DESC')
+            ->setMaxResults($limit)
+            ->getQuery()
+            ->getResult()
+        ;
+    }
+
     public function markAllReadByRecipient(User $recipient): int
     {
         return $this->createQueryBuilder('n')
diff --git a/src/State/NotificationHistoryProvider.php b/src/State/NotificationHistoryProvider.php
new file mode 100644
index 0000000..b38c236
--- /dev/null
+++ b/src/State/NotificationHistoryProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Entity\User;
+use App\Repository\NotificationRepository;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
+
+final readonly class NotificationHistoryProvider implements ProviderInterface
+{
+    public function __construct(
+        private Security $security,
+        private NotificationRepository $notificationRepository,
+    ) {}
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): array
+    {
+        $user = $this->security->getUser();
+        if (!$user instanceof User) {
+            throw new AccessDeniedHttpException('Authentication required.');
+        }
+
+        return $this->notificationRepository->findLatestByRecipient($user, 5);
+    }
+}
diff --git a/src/State/NotificationTodayProvider.php b/src/State/NotificationTodayProvider.php
new file mode 100644
index 0000000..ed17d8d
--- /dev/null
+++ b/src/State/NotificationTodayProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Entity\User;
+use App\Repository\NotificationRepository;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
+
+final readonly class NotificationTodayProvider implements ProviderInterface
+{
+    public function __construct(
+        private Security $security,
+        private NotificationRepository $notificationRepository,
+    ) {}
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): array
+    {
+        $user = $this->security->getUser();
+        if (!$user instanceof User) {
+            throw new AccessDeniedHttpException('Authentication required.');
+        }
+
+        return $this->notificationRepository->findUnreadByRecipient($user);
+    }
+}
diff --git a/src/State/WorkHourBulkSiteValidationProcessor.php b/src/State/WorkHourBulkSiteValidationProcessor.php
index b4a1c79..ab3ab96 100644
--- a/src/State/WorkHourBulkSiteValidationProcessor.php
+++ b/src/State/WorkHourBulkSiteValidationProcessor.php
@@ -8,9 +8,15 @@ use ApiPlatform\Metadata\Operation;
 use ApiPlatform\State\ProcessorInterface;
 use App\ApiResource\WorkHourBulkSiteValidation;
 use App\ApiResource\WorkHourBulkValidationResult;
+use App\Entity\Notification;
 use App\Entity\User;
 use App\Entity\WorkHour;
+use App\Repository\UserRepository;
+use App\Repository\WorkHourRepository;
+use App\Security\EmployeeScopeService;
 use App\Service\WorkHours\WorkHourBulkValidationExecutor;
+use DateTimeImmutable;
+use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
@@ -20,6 +26,10 @@ final readonly class WorkHourBulkSiteValidationProcessor implements ProcessorInt
     public function __construct(
         private Security $security,
         private WorkHourBulkValidationExecutor $executor,
+        private WorkHourRepository $workHourRepository,
+        private UserRepository $userRepository,
+        private EmployeeScopeService $employeeScopeService,
+        private EntityManagerInterface $entityManager,
     ) {}
 
     public function process(
@@ -41,7 +51,7 @@ final readonly class WorkHourBulkSiteValidationProcessor implements ProcessorInt
             throw new AccessDeniedHttpException('Only site managers can bulk update site validation.');
         }
 
-        return $this->executor->execute(
+        $result = $this->executor->execute(
             user: $user,
             workDateValue: $data->workDate,
             employeeIds: $data->employeeIds,
@@ -50,5 +60,42 @@ final readonly class WorkHourBulkSiteValidationProcessor implements ProcessorInt
                 $workHour->setIsSiteValid($data->isSiteValid);
             }
         );
+
+        if ($data->isSiteValid && $result->updated > 0) {
+            $this->createNotificationsIfSiteFullyValidated($user, $data->workDate);
+        }
+
+        return $result;
+    }
+
+    private function createNotificationsIfSiteFullyValidated(User $user, string $workDateValue): void
+    {
+        $workDate = DateTimeImmutable::createFromFormat('Y-m-d', $workDateValue);
+        if (!$workDate) {
+            return;
+        }
+
+        $siteIds = $this->employeeScopeService->getAllowedSiteIds($user);
+
+        foreach ($siteIds as $siteId) {
+            if ($this->workHourRepository->hasPendingSiteValidationForSiteAndDate($siteId, $workDate)) {
+                continue;
+            }
+
+            $message = 'a validé les heures';
+
+            foreach ($this->userRepository->findAllAdmins() as $admin) {
+                $notification = new Notification();
+                $notification->setRecipient($admin)
+                    ->setActor($user)
+                    ->setMessage($message)
+                    ->setCategory('Heures')
+                    ->setTarget('/hours')
+                ;
+                $this->entityManager->persist($notification);
+            }
+        }
+
+        $this->entityManager->flush();
     }
 }
diff --git a/src/State/WorkHourSiteValidationProcessor.php b/src/State/WorkHourSiteValidationProcessor.php
index 0bc0915..608f54f 100644
--- a/src/State/WorkHourSiteValidationProcessor.php
+++ b/src/State/WorkHourSiteValidationProcessor.php
@@ -66,16 +66,15 @@ final readonly class WorkHourSiteValidationProcessor implements ProcessorInterfa
             $workDate   = $data->getWorkDate();
             $hasPending = $this->workHourRepository->hasPendingSiteValidationForSiteAndDate($siteId, $workDate);
             if (!$hasPending) {
-                $siteName  = $data->getEmployee()?->getSite()?->getName() ?? 'Site';
-                $dateLabel = $workDate->format('d/m/Y');
-                $title     = sprintf('%s validé', $siteName);
-                $message   = sprintf('Le site %s a terminé la validation du %s.', $siteName, $dateLabel);
+                $message = 'a validé les heures';
 
                 foreach ($this->userRepository->findAllAdmins() as $admin) {
-                    $notification = new Notification()
-                        ->setRecipient($admin)
-                        ->setTitle($title)
+                    $notification = new Notification();
+                    $notification->setRecipient($admin)
+                        ->setActor($user)
                         ->setMessage($message)
+                        ->setCategory('Heures')
+                        ->setTarget('/hours')
                     ;
                     $this->entityManager->persist($notification);
                 }