feat : modification des notifications + correction de bug

2026-03-10 10:01:36 +01:00
parent 701dd9faf3
commit 53255dba43
25 changed files with 932 additions and 519 deletions
@@ -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">
-            <Icon name="mdi:bell-plus" size="36" />
+                    <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"
@@ -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
-                v-for="notification in notifications"
+                            <NuxtLink
+                                :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>
-                <p class="text-xs text-neutral-600">{{ notification.message }}</p>
+                                <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>
-        <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">
+                <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-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 { 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
 }>()

+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 (!bellRoot.value.contains(target)) {
+    if (!target) return
+    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()
    }
@@ -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>
@@ -39,8 +39,7 @@
        :disabled="isCreateContractSubmitting || contracts.length === 0 || !canCreateContract"
        @click="onOpenCreateContractDrawer"
      >
-        <Icon name="mdi:plus-thick" size="16" />
-        Ajouter
+        + Ajouter
      </button>
    </div>

@@ -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>
@@ -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>
@@ -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
@@ -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"
@@ -1138,6 +1138,7 @@ export const useHoursPage = () => {
    isSiteValidationPending,
    canToggleValidation,
    canToggleSiteValidation,
+    canCreateSiteValidationRowFromAbsence,
    isBulkValidationChecked,
    isBulkValidationIndeterminate,
    isBulkSiteValidationChecked,
@@ -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'
                            : ''"
@@ -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>Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
-            <p>Site: {{ employee.site?.name ?? '-' }}</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>
@@ -192,14 +192,15 @@
 </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'
 })
@@ -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
@@ -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,
@@ -1,7 +1,9 @@
 export type NotificationItem = {
  id: number
-  title: string
+  actorName: string
  message: string
+  category: string
+  target: string
  isRead: boolean
  createdAt: string
 }
@@ -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 })
@@ -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: {
@@ -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');
+    }
+}
@@ -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');
+    }
+}
@@ -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');
+    }
+}
@@ -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;
@@ -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;
@@ -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')
@@ -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);
+    }
+}
@@ -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);
+    }
+}
@@ -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();
    }
 }
@@ -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);
                }