feat : modification des notifications + correction de bug

frontend/components/AppTopNav.vue

@@ -1,10 +1,10 @@
 <template>
-  <header class="border-b border-neutral-200 bg-primary-500 p-5 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-12 text-xl text-white">
+            <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" @click="toggleNotifications">
+                    <button type="button" class="relative self-center cursor-pointer flex items-center" @click="toggleNotifications">
-            <Icon name="mdi:bell-plus" size="36" />
+                        <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"
@@ -15,80 +15,165 @@
 
                     <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"
+                        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="border-b border-neutral-200 px-3 py-2 text-sm font-semibold">
+                        <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="notifications.length === 0" class="px-3 py-3 text-sm text-neutral-500">
+                        <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">
-              <div
+                            <NuxtLink
-                v-for="notification in notifications"
+                                :to="notification.target"
+                                v-for="notification in displayedNotifications"
                                 :key="notification.id"
-                class="border-b border-neutral-100 px-3 py-2 last:border-b-0"
+                                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'"
                             >
-                <p class="text-sm font-semibold text-neutral-900">{{ notification.title }}</p>
+                                <div class="rounded-full h-[46px] w-[46px] min-w-[46px] bg-primary-500"></div>
-                <p class="text-xs text-neutral-600">{{ notification.message }}</p>
+                                <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>
+                <div ref="userMenuRoot" class="relative flex gap-4">
-        <div class="group 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 cursor-pointer" size="36" />
+                        <Icon name="mdi:account-circle-outline" class="self-center" size="36"/>
-          <p class="self-center cursor-pointer">{{ user?.username }}</p>
+                        <p class="self-center">{{ 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>
+                    <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-2 text-left hover:bg-neutral-100"
+                            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-2 text-left hover:bg-neutral-100"
+                            class="block w-full px-3 py-4 text-left hover:bg-tertiary-500 flex justify-between items-center"
                             @click="handleLogout"
                         >
-              Déconnexion
+                            <p>Déconnexion</p>
+                            <Icon name="mdi:logout-variant" size="20"/>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </header>
- </template>
+</template>
 
 <script setup lang="ts">
-import type { User } from '~/services/dto/user'
+import type {User} from '~/services/dto/user'
-import type { NotificationItem } from '~/services/dto/notification'
+import type {NotificationItem} from '~/services/dto/notification'
-import { listUnreadNotifications, markAllNotificationsRead } from '~/services/notifications'
+import {listUnreadNotifications, listTodayNotifications, listHistoryNotifications, markAllNotificationsRead} from '~/services/notifications'
 
 defineProps<{
     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')
 }
 
+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()
+        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
     }
@@ -97,9 +182,9 @@ const loadNotifications = async () => {
 const closeNotifications = async () => {
     if (!isNotificationsOpen.value) return
     isNotificationsOpen.value = false
-  if (notifications.value.length > 0) {
+    if (todayNotifications.value.length > 0) {
         await markAllNotificationsRead()
-    notifications.value = []
+        todayNotifications.value = []
     }
 }
 
@@ -109,19 +194,25 @@ const toggleNotifications = async () => {
         return
     }
 
+    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 (!target) return
-  if (!bellRoot.value.contains(target)) {
+    if (bellRoot.value && !bellRoot.value.contains(target)) {
         await closeNotifications()
     }
+    if (userMenuRoot.value && !userMenuRoot.value.contains(target)) {
+        isUserMenuOpen.value = false
+    }
 }
 
 onMounted(async () => {
+    updateNavbarBottom()
     if (isAdmin.value) {
         await loadNotifications()
     }

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>

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>
 

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>

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]">
+    <div class="flex gap-10 justify-center items-center bg-primary-500 rounded-md text-white py-5">
-      <p><span class="font-semibold uppercase">RTT à la date du jour :</span> {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
+      <p class="text-[20px]"><span class="font-semibold">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">
+        <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">
-            <Icon name="mdi:plus-thick" size="16"/>
+            + Payer les RTT
-            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>

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

frontend/components/hours/HoursToolbar.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="py-6 flex flex-col gap-3">
+      <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"

frontend/composables/useHoursPage.ts

@@ -1138,6 +1138,7 @@ export const useHoursPage = () => {
     isSiteValidationPending,
     canToggleValidation,
     canToggleSiteValidation,
+    canCreateSiteValidationRowFromAbsence,
     isBulkValidationChecked,
     isBulkValidationIndeterminate,
     isBulkSiteValidationChecked,

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'
                             : ''"

frontend/pages/employees/index.vue

@@ -8,15 +8,14 @@
                     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é
-              Ajouter un employé
                 </button>
             </div>
             <div class="flex gap-10 py-7">
                 <div class="w-80">
-            <EmployeeNameFilterInput v-model="employeeFilter" />
+                    <EmployeeNameFilterInput v-model="employeeFilter"/>
                 </div>
-        <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites" />
+                <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites"/>
             </div>
         </div>
 
@@ -37,20 +36,21 @@
                 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="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.lastName }} {{ employee.firstName }}</p>
+                        <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="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><strong>Type:</strong> {{ contractNatureLabel(employee.currentContractNature) }}</p>
-            <p>Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
+                        <p><strong>Temps de travail:</strong> {{ employee.contract?.name ?? '-' }}</p>
-            <p>Site: {{ employee.site?.name ?? '-' }}</p>
+                        <p><strong>Site:</strong> {{ employee.site?.name ?? '-' }}</p>
                     </div>
                 </div>
             </NuxtLink>
@@ -192,14 +192,15 @@
 </template>
 
 <script setup lang="ts">
-import type { Contract } from '~/services/dto/contract'
+import type {Contract} from '~/services/dto/contract'
-import type { Employee } from '~/services/dto/employee'
+import type {Employee} from '~/services/dto/employee'
-import type { Site } from '~/services/dto/site'
+import type {Site} from '~/services/dto/site'
-import { listContracts } from '~/services/contracts'
+import {listContracts} from '~/services/contracts'
-import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
+import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
-import { listSites } from '~/services/sites'
+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'
 })
@@ -396,7 +397,7 @@ watch(sites, (nextSites) => {
     }
 
     selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
-}, { immediate: true })
+}, {immediate: true})
 
 const handleSubmit = async () => {
     if (isSubmitting.value) return

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,

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
 }

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

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

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');
+    }
+}

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');
+    }
+}

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');
+    }
+}

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;

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)]
+    #[ORM\ManyToOne(targetEntity: User::class)]
-    #[Groups(['notification:read'])]
+    #[ORM\JoinColumn(nullable: true, onDelete: 'SET NULL')]
-    private string $title = '';
+    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;

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

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);
+    }
+}

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);
+    }
+}

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();
     }
 }

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';
+                $message = 'a validé les heures';
-                $dateLabel = $workDate->format('d/m/Y');
-                $title     = sprintf('%s validé', $siteName);
-                $message   = sprintf('Le site %s a terminé la validation du %s.', $siteName, $dateLabel);
 
                 foreach ($this->userRepository->findAllAdmins() as $admin) {
-                    $notification = new Notification()
+                    $notification = new Notification();
-                        ->setRecipient($admin)
+                    $notification->setRecipient($admin)
-                        ->setTitle($title)
+                        ->setActor($user)
                         ->setMessage($message)
+                        ->setCategory('Heures')
+                        ->setTarget('/hours')
                     ;
                     $this->entityManager->persist($notification);
                 }