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

--- 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>
--- 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>
--- 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
--- 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"
--- a/frontend/composables/useHoursPage.ts
+++ b/frontend/composables/useHoursPage.ts
@@ -1138,6 +1138,7 @@ export const useHoursPage = () => {
    isSiteValidationPending,
    canToggleValidation,
    canToggleSiteValidation,
+    canCreateSiteValidationRowFromAbsence,
    isBulkValidationChecked,
    isBulkValidationIndeterminate,
    isBulkSiteValidationChecked,
--- 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'
                            : ''"
--- 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>
--- 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,
--- a/frontend/public/malio.png
+++ b/frontend/public/malio.png
--- 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
 }
--- 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 })
--- 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: {
--- a/migrations/Version20260309170000.php
+++ 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');
+    }
+}
--- a/migrations/Version20260309180000.php
+++ 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');
+    }
+}
--- a/migrations/Version20260309190000.php
+++ 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');
+    }
+}
--- 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;
--- 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;
--- 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')
--- a/src/State/NotificationHistoryProvider.php
+++ 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);
+    }
+}
--- a/src/State/NotificationTodayProvider.php
+++ 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);
+    }
+}
--- 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();
    }
 }
--- 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);
                }