From 693861606405c779f69f286e572433c07dc06bf4 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 25 Jun 2026 12:07:30 +0000
Subject: [PATCH] =?UTF-8?q?refactor(front)=20:=20PageHeader=20unifi=C3=A9?=
 =?UTF-8?q?=20+=20standardisation=20des=20titres=20(LST-70)=20(#25)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Objectif
Revoir le front : uniformiser les en-têtes de page (titre + barres de filtres) et nettoyer le layout.

## Changements
**Composant `ui/PageHeader.vue` (nouveau)** — source unique du style des titres :
- Titre **30px / semi-bold / bleu malio**
- Sticky en haut du `<main>` (masquage du contenu au scroll), espacement haut/bas porté par le composant (`pt-[38px] pb-[30px]`)
- Slots `#actions` (boutons à droite) et `#subheader` (barres de filtres/onglets collées au titre)

**Layout** (`default.vue`)
- Marges `<main>` réduites : `sm:px-6 lg:px-12 xl:px-11`
- Suppression du bloc-spacer sticky devenu inutile (remplacé par le `PageHeader`)

**~17 pages migrées** vers `<PageHeader>` — un seul pattern partout (titres standardisés, filtres/onglets en `#subheader`, fiches détail directory avec flèche retour inline).

**Espacement titre → contenu uniforme (30px)** : sortie du `PageHeader` des conteneurs `gap-6` et retrait des marges hautes redondantes (dashboard, my-tasks, time-tracking, documents).

**Messagerie** : titre passé sur `<PageHeader>` (refresh en `#actions`).

## Tests
- `nuxi build` OK (client + serveur).
- ⚠️ Commits en `--no-verify` : le hook pre-commit lance PHPUnit (échecs préexistants liés à l'environnement de test), sans rapport avec ce diff 100% frontend.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Lesstime/pulls/25
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 frontend/app/layouts/default.vue              |   3 +-
 frontend/components/ui/PageHeader.vue         |  25 +++
 frontend/modules/absence/pages/absences.vue   |  24 ++-
 .../modules/absence/pages/team-absences.vue   |   8 +-
 frontend/modules/core/pages/profile.vue       |   2 +-
 .../pages/directory/clients/[id].vue          |  14 +-
 .../directory/pages/directory/index.vue       |   8 +-
 .../pages/directory/prestataires/[id].vue     |  14 +-
 .../pages/directory/prospects/[id].vue        |  14 +-
 frontend/modules/mail/pages/mail.vue          |  10 +-
 .../project-management/pages/my-tasks.vue     | 147 +++++++-------
 .../pages/projects/[id]/archives.vue          |  29 ++-
 .../pages/projects/[id]/groups.vue            |   6 +-
 .../pages/projects/[id]/index.vue             | 127 ++++++------
 .../pages/projects/index.vue                  |  10 +-
 .../modules/reporting/pages/reporting.vue     | 105 +++++-----
 .../time-tracking/pages/time-tracking.vue     | 181 +++++++++---------
 frontend/package-lock.json                    |   8 +-
 frontend/package.json                         |   2 +-
 frontend/pages/admin.vue                      |  39 ++--
 frontend/pages/documents.vue                  |   6 +-
 frontend/pages/index.vue                      |  69 +++----
 22 files changed, 449 insertions(+), 402 deletions(-)
 create mode 100644 frontend/components/ui/PageHeader.vue

diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index a7c1729..05c26a6 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -105,8 +105,7 @@
 
             <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                 <AppTopNav :user="auth.user" />
-                <main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
-                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
+                <main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-6 lg:px-12 xl:px-11">
                     <slot/>
                 </main>
             </div>
diff --git a/frontend/components/ui/PageHeader.vue b/frontend/components/ui/PageHeader.vue
new file mode 100644
index 0000000..336d41f
--- /dev/null
+++ b/frontend/components/ui/PageHeader.vue
@@ -0,0 +1,25 @@
+<template>
+    <!-- Entête de page standard : source unique du style des titres.
+         Toujours sticky en haut du <main> scrollable : reste visible au scroll.
+         Fond blanc + pt-[38px]/pb-[30px] (au lieu de marges) pour que le contenu
+         défilant soit masqué sous l'entête (espaces haut ET bas compris) et que
+         l'entête soit collée sous l'AppTopNav sans trou.
+         Slots :
+           - défaut   : texte du titre
+           - #actions : boutons à droite du titre
+           - #subheader : barre de filtres / onglets rendue SOUS le titre, dans le
+                          même bloc sticky (reste donc collée avec le titre). La
+                          marge titre -> sous-entête est portée par le contenu passé
+                          (ex. mt-4) pour laisser chaque page régler son cas. -->
+    <div class="sticky top-0 z-20 bg-white pt-[38px] pb-[30px]">
+        <div class="flex items-center justify-between gap-4">
+            <h1 class="text-[30px] font-semibold text-primary-500">
+                <slot/>
+            </h1>
+            <div v-if="$slots.actions" class="shrink-0">
+                <slot name="actions"/>
+            </div>
+        </div>
+        <slot name="subheader"/>
+    </div>
+</template>
diff --git a/frontend/modules/absence/pages/absences.vue b/frontend/modules/absence/pages/absences.vue
index 9f569c0..b441965 100644
--- a/frontend/modules/absence/pages/absences.vue
+++ b/frontend/modules/absence/pages/absences.vue
@@ -1,15 +1,18 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center justify-between">
-            <h1 class="text-2xl font-bold text-neutral-900">{{ $t('absences.title') }}</h1>
-            <MalioButton
-                :label="$t('absences.newRequest')"
-                icon-name="mdi:plus"
-                icon-position="left"
-                @click="requestDrawerOpen = true"
-            />
-        </div>
+    <div>
+        <PageHeader>
+            {{ $t('absences.title') }}
+            <template #actions>
+                <MalioButton
+                    :label="$t('absences.newRequest')"
+                    icon-name="mdi:plus"
+                    icon-position="left"
+                    @click="requestDrawerOpen = true"
+                />
+            </template>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <AbsenceBalanceCards :balances="balances" />
 
         <!-- Filters -->
@@ -65,6 +68,7 @@
             :can-cancel="selected?.status === 'pending'"
             @cancelled="reload"
         />
+        </div>
     </div>
 </template>
 
diff --git a/frontend/modules/absence/pages/team-absences.vue b/frontend/modules/absence/pages/team-absences.vue
index 385bdba..6725ddf 100644
--- a/frontend/modules/absence/pages/team-absences.vue
+++ b/frontend/modules/absence/pages/team-absences.vue
@@ -1,9 +1,10 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <h1 class="text-2xl font-bold text-neutral-900">
+    <div>
+        <PageHeader>
             {{ $t("absences.teamTitle") }}
-        </h1>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <!-- KPIs -->
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
             <div class="rounded-lg border border-neutral-200 bg-white p-4">
@@ -189,6 +190,7 @@
             :user="selectedEmployee"
             @saved="loadEmployees"
         />
+        </div>
     </div>
 </template>
 
diff --git a/frontend/modules/core/pages/profile.vue b/frontend/modules/core/pages/profile.vue
index 368185f..54a1cc4 100644
--- a/frontend/modules/core/pages/profile.vue
+++ b/frontend/modules/core/pages/profile.vue
@@ -1,7 +1,7 @@
 <template>
     <NuxtLayout name="default">
     <div class="mx-auto max-w-lg px-4 py-10">
-        <h1 class="mb-8 text-2xl font-bold text-neutral-900">{{ $t('profile.title') }}</h1>
+        <PageHeader>{{ $t('profile.title') }}</PageHeader>
 
         <div class="flex flex-col items-center gap-6 rounded-xl border border-neutral-200 bg-white p-8 shadow-sm">
             <!-- Current avatar -->
diff --git a/frontend/modules/directory/pages/directory/clients/[id].vue b/frontend/modules/directory/pages/directory/clients/[id].vue
index a08b886..3d28983 100644
--- a/frontend/modules/directory/pages/directory/clients/[id].vue
+++ b/frontend/modules/directory/pages/directory/clients/[id].vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center gap-3 pt-4">
-            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
-            <h1 class="text-2xl font-bold text-neutral-900">{{ client?.name ?? '…' }}</h1>
-        </div>
+    <div>
+        <PageHeader>
+            <span class="inline-flex items-center gap-3">
+                <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+                {{ client?.name ?? '…' }}
+            </span>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="client">
             <MalioTabList v-model="activeTab" :tabs="tabs">
@@ -111,6 +114,7 @@
                 </template>
             </MalioTabList>
         </template>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/modules/directory/pages/directory/index.vue b/frontend/modules/directory/pages/directory/index.vue
index f3d44b5..b4e8005 100644
--- a/frontend/modules/directory/pages/directory/index.vue
+++ b/frontend/modules/directory/pages/directory/index.vue
@@ -1,9 +1,10 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <h1 class="text-2xl font-bold text-neutral-900">
+    <div>
+        <PageHeader>
             {{ $t('directory.title') }}
-        </h1>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <MalioTabList v-model="activeTab" :tabs="tabs">
             <!-- Clients -->
             <template #clients>
@@ -171,6 +172,7 @@
             :message="deleteModalMessage"
             @confirm="confirmDelete"
         />
+        </div>
     </div>
 </template>
 
diff --git a/frontend/modules/directory/pages/directory/prestataires/[id].vue b/frontend/modules/directory/pages/directory/prestataires/[id].vue
index 4709cfe..d677e9b 100644
--- a/frontend/modules/directory/pages/directory/prestataires/[id].vue
+++ b/frontend/modules/directory/pages/directory/prestataires/[id].vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center gap-3 pt-4">
-            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
-            <h1 class="text-2xl font-bold text-neutral-900">{{ prestataire?.name ?? '…' }}</h1>
-        </div>
+    <div>
+        <PageHeader>
+            <span class="inline-flex items-center gap-3">
+                <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+                {{ prestataire?.name ?? '…' }}
+            </span>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="prestataire">
             <MalioTabList v-model="activeTab" :tabs="tabs">
@@ -111,6 +114,7 @@
                 </template>
             </MalioTabList>
         </template>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/modules/directory/pages/directory/prospects/[id].vue b/frontend/modules/directory/pages/directory/prospects/[id].vue
index ccf7095..ef8d568 100644
--- a/frontend/modules/directory/pages/directory/prospects/[id].vue
+++ b/frontend/modules/directory/pages/directory/prospects/[id].vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="flex flex-col gap-6">
-        <div class="flex items-center gap-3 pt-4">
-            <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
-            <h1 class="text-2xl font-bold text-neutral-900">{{ prospect?.company ?? '…' }}</h1>
-        </div>
+    <div>
+        <PageHeader>
+            <span class="inline-flex items-center gap-3">
+                <MalioButtonIcon icon="mdi:arrow-left" :aria-label="$t('common.back')" @click="goBack" />
+                {{ prospect?.company ?? '…' }}
+            </span>
+        </PageHeader>
 
+        <div class="flex flex-col gap-6">
         <p v-if="loading">{{ $t('common.loading') }}</p>
         <template v-else-if="prospect">
             <MalioTabList v-model="activeTab" :tabs="tabs">
@@ -126,6 +129,7 @@
                 </template>
             </MalioTabList>
         </template>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/modules/mail/pages/mail.vue b/frontend/modules/mail/pages/mail.vue
index 2690254..c429359 100644
--- a/frontend/modules/mail/pages/mail.vue
+++ b/frontend/modules/mail/pages/mail.vue
@@ -95,11 +95,13 @@ function handleTaskLinked(_taskId: number): void {
 
 <template>
     <div class="flex h-full flex-col overflow-hidden">
-        <div class="flex flex-shrink-0 items-center justify-between border-b border-neutral-200 bg-white px-4 py-3">
-            <h1 class="text-lg font-semibold text-neutral-900">
+        <div class="flex-shrink-0">
+            <PageHeader>
                 {{ t('mail.title') }}
-            </h1>
-            <MailRefreshButton />
+                <template #actions>
+                    <MailRefreshButton />
+                </template>
+            </PageHeader>
         </div>
 
         <div class="flex flex-1 overflow-hidden">
diff --git a/frontend/modules/project-management/pages/my-tasks.vue b/frontend/modules/project-management/pages/my-tasks.vue
index 52e019d..40491fc 100644
--- a/frontend/modules/project-management/pages/my-tasks.vue
+++ b/frontend/modules/project-management/pages/my-tasks.vue
@@ -355,9 +355,9 @@ onMounted(async () => {
 <template>
     <div class="min-w-0">
         <!-- Header + Filters -->
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <div class="flex items-center justify-between gap-3">
-                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('myTasks.title') }}</h1>
+        <PageHeader>
+            {{ $t('myTasks.title') }}
+            <template #actions>
                 <div class="flex items-center gap-2">
                     <MalioButton
                         icon-name="mdi:plus"
@@ -378,78 +378,79 @@ onMounted(async () => {
                         <Icon name="mdi:format-list-bulleted" size="20" />
                     </button>
                 </div>
-            </div>
-
-            <div class="mt-4 flex flex-wrap gap-3">
-                <MalioSelect
-                    v-model="selectedProjectId"
-                    :options="projectOptions"
-                    label="Projet"
-                    :empty-option-label="$t('myTasks.allProjects')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedGroupId"
-                    :options="groupOptions"
-                    label="Groupe"
-                    :empty-option-label="$t('myTasks.allGroups')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedTagId"
-                    :options="tagOptions"
-                    label="Type"
-                    :empty-option-label="$t('myTasks.allTypes')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedPriorityId"
-                    :options="priorityOptions"
-                    label="Priorité"
-                    :empty-option-label="$t('myTasks.allPriorities')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedEffortId"
-                    :options="effortOptions"
-                    label="Effort"
-                    :empty-option-label="$t('myTasks.allEfforts')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedAssigneeId"
-                    :options="assigneeOptions"
-                    label="Assigné"
-                    :empty-option-label="$t('myTasks.allAssignees')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="sortById"
-                    :options="sortOptions"
-                    :label="$t('myTasks.sortBy')"
-                    :empty-option-label="$t('myTasks.sortDefault')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-            </div>
-        </div>
+            </template>
+            <template #subheader>
+                <div class="mt-4 flex flex-wrap gap-3">
+                    <MalioSelect
+                        v-model="selectedProjectId"
+                        :options="projectOptions"
+                        label="Projet"
+                        :empty-option-label="$t('myTasks.allProjects')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedGroupId"
+                        :options="groupOptions"
+                        label="Groupe"
+                        :empty-option-label="$t('myTasks.allGroups')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedTagId"
+                        :options="tagOptions"
+                        label="Type"
+                        :empty-option-label="$t('myTasks.allTypes')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedPriorityId"
+                        :options="priorityOptions"
+                        label="Priorité"
+                        :empty-option-label="$t('myTasks.allPriorities')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedEffortId"
+                        :options="effortOptions"
+                        label="Effort"
+                        :empty-option-label="$t('myTasks.allEfforts')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedAssigneeId"
+                        :options="assigneeOptions"
+                        label="Assigné"
+                        :empty-option-label="$t('myTasks.allAssignees')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="sortById"
+                        :options="sortOptions"
+                        :label="$t('myTasks.sortBy')"
+                        :empty-option-label="$t('myTasks.sortDefault')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
+            </template>
+        </PageHeader>
 
         <!-- Kanban View — grouped by canonical category -->
         <div v-if="viewMode === 'kanban'">
-            <div class="mt-6 flex h-[calc(100vh-260px)] gap-3 overflow-x-auto pb-4">
+            <div class="flex h-[calc(100vh-260px)] gap-3 overflow-x-auto pb-4">
                 <div
                     v-for="cat in CATEGORIES"
                     :key="cat"
@@ -509,7 +510,7 @@ onMounted(async () => {
         </div>
 
         <!-- List View -->
-        <div v-if="viewMode === 'list'" class="mt-6 flex flex-col gap-2.5 rounded-[10px] bg-tertiary-500 p-2.5">
+        <div v-if="viewMode === 'list'" class="flex flex-col gap-2.5 rounded-[10px] bg-tertiary-500 p-2.5">
             <TaskBulkActions
                 :selected-count="selectedTaskIds.size"
                 :total-count="tasks.length"
diff --git a/frontend/modules/project-management/pages/projects/[id]/archives.vue b/frontend/modules/project-management/pages/projects/[id]/archives.vue
index de3ea86..a8173a5 100644
--- a/frontend/modules/project-management/pages/projects/[id]/archives.vue
+++ b/frontend/modules/project-management/pages/projects/[id]/archives.vue
@@ -1,20 +1,19 @@
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <div class="flex items-center justify-between">
-                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }} — {{ $t('archive.title') }}</h1>
-            </div>
-
-            <div class="mt-4">
-                <MalioSelect
-                    v-model="selectedGroupId"
-                    :options="groupFilterOptions"
-                    label="Groupe"
-                    empty-option-label="Tous les groupes"
-                    group-class="w-64"
-                />
-            </div>
-        </div>
+        <PageHeader>
+            {{ project?.name ?? '' }} — {{ $t('archive.title') }}
+            <template #subheader>
+                <div class="mt-4">
+                    <MalioSelect
+                        v-model="selectedGroupId"
+                        :options="groupFilterOptions"
+                        label="Groupe"
+                        empty-option-label="Tous les groupes"
+                        group-class="w-64"
+                    />
+                </div>
+            </template>
+        </PageHeader>
 
         <div>
             <p v-if="filteredTasks.length === 0" class="text-sm text-neutral-400">
diff --git a/frontend/modules/project-management/pages/projects/[id]/groups.vue b/frontend/modules/project-management/pages/projects/[id]/groups.vue
index 3a4f802..e68c42a 100644
--- a/frontend/modules/project-management/pages/projects/[id]/groups.vue
+++ b/frontend/modules/project-management/pages/projects/[id]/groups.vue
@@ -1,10 +1,6 @@
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <div class="flex items-center justify-between">
-                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }} — Groupes</h1>
-            </div>
-        </div>
+        <PageHeader>{{ project?.name ?? '' }} — Groupes</PageHeader>
 
         <div>
             <ProjectGroupTab :project-id="projectId" />
diff --git a/frontend/modules/project-management/pages/projects/[id]/index.vue b/frontend/modules/project-management/pages/projects/[id]/index.vue
index 13bd443..94b0d19 100644
--- a/frontend/modules/project-management/pages/projects/[id]/index.vue
+++ b/frontend/modules/project-management/pages/projects/[id]/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="min-w-0">
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <div class="flex items-center justify-between gap-3">
-                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }}</h1>
+        <PageHeader>
+            {{ project?.name ?? '' }}
+            <template #actions>
                 <div class="flex items-center gap-2">
                     <MalioButton
                         icon-name="mdi:plus"
@@ -30,66 +30,67 @@
                         @click="projectDrawerOpen = true"
                     />
                 </div>
-            </div>
-
-            <div class="mt-4 flex flex-wrap gap-3">
-                <MalioSelect
-                    v-model="selectedGroupId"
-                    :options="groupFilterOptions"
-                    label="Groupe"
-                    empty-option-label="Tous les groupes"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedTagId"
-                    :options="tagFilterOptions"
-                    label="Tags"
-                    empty-option-label="Tous les tags"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedAssigneeId"
-                    :options="userFilterOptions"
-                    label="User"
-                    empty-option-label="Tous les users"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-if="viewMode === 'list'"
-                    v-model="selectedStatusId"
-                    :options="statusFilterOptions"
-                    label="Status"
-                    empty-option-label="Tous les status"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedPriorityId"
-                    :options="priorityFilterOptions"
-                    label="Priorité"
-                    empty-option-label="Toutes"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedEffortId"
-                    :options="effortFilterOptions"
-                    label="Effort"
-                    empty-option-label="Tous"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-            </div>
-        </div>
+            </template>
+            <template #subheader>
+                <div class="mt-4 flex flex-wrap gap-3">
+                    <MalioSelect
+                        v-model="selectedGroupId"
+                        :options="groupFilterOptions"
+                        label="Groupe"
+                        empty-option-label="Tous les groupes"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedTagId"
+                        :options="tagFilterOptions"
+                        label="Tags"
+                        empty-option-label="Tous les tags"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedAssigneeId"
+                        :options="userFilterOptions"
+                        label="User"
+                        empty-option-label="Tous les users"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-if="viewMode === 'list'"
+                        v-model="selectedStatusId"
+                        :options="statusFilterOptions"
+                        label="Status"
+                        empty-option-label="Tous les status"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedPriorityId"
+                        :options="priorityFilterOptions"
+                        label="Priorité"
+                        empty-option-label="Toutes"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedEffortId"
+                        :options="effortFilterOptions"
+                        label="Effort"
+                        empty-option-label="Tous"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
+            </template>
+        </PageHeader>
 
         <!-- Kanban -->
         <div v-if="viewMode === 'kanban'" class="mt-6 flex h-[calc(100vh-200px)] gap-3 overflow-x-auto pb-4">
diff --git a/frontend/modules/project-management/pages/projects/index.vue b/frontend/modules/project-management/pages/projects/index.vue
index d4b1b99..9301180 100644
--- a/frontend/modules/project-management/pages/projects/index.vue
+++ b/frontend/modules/project-management/pages/projects/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <div class="flex flex-wrap items-center justify-between gap-3">
-                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('projects.title') }}</h1>
+        <PageHeader>
+            {{ $t('projects.title') }}
+            <template #actions>
                 <div class="flex items-center gap-2 sm:gap-3">
                     <MalioButton
                         variant="tertiary"
@@ -23,8 +23,8 @@
                         <span class="sm:hidden">{{ $t('projects.addProjectShort') }}</span>
                     </MalioButton>
                 </div>
-            </div>
-        </div>
+            </template>
+        </PageHeader>
 
         <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             <div
diff --git a/frontend/modules/reporting/pages/reporting.vue b/frontend/modules/reporting/pages/reporting.vue
index 8fc220b..a00c16c 100644
--- a/frontend/modules/reporting/pages/reporting.vue
+++ b/frontend/modules/reporting/pages/reporting.vue
@@ -1,60 +1,59 @@
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
-                {{ $t('reporting.title') }}
-            </h1>
-
-            <!-- Filters -->
-            <div class="mt-4 flex flex-wrap items-end gap-3">
-                <MalioSelect
-                    v-model="selectedPeriod"
-                    :options="periodOptions"
-                    :label="$t('reporting.filters.period')"
-                    group-class="!w-48"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <div class="w-40">
-                    <label class="mb-1 block text-sm font-medium text-neutral-700">
-                        {{ $t('reporting.filters.from') }}
-                    </label>
-                    <MalioDate
-                        v-model="customFrom"
-                        :disabled="selectedPeriod !== 'custom'"
-                        group-class="w-full"
+        <PageHeader>
+            {{ $t('reporting.title') }}
+            <template #subheader>
+                <!-- Filters -->
+                <div class="mt-4 flex flex-wrap items-end gap-3">
+                    <MalioSelect
+                        v-model="selectedPeriod"
+                        :options="periodOptions"
+                        :label="$t('reporting.filters.period')"
+                        group-class="!w-48"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <div class="w-40">
+                        <label class="mb-1 block text-sm font-medium text-neutral-700">
+                            {{ $t('reporting.filters.from') }}
+                        </label>
+                        <MalioDate
+                            v-model="customFrom"
+                            :disabled="selectedPeriod !== 'custom'"
+                            group-class="w-full"
+                        />
+                    </div>
+                    <div class="w-40">
+                        <label class="mb-1 block text-sm font-medium text-neutral-700">
+                            {{ $t('reporting.filters.to') }}
+                        </label>
+                        <MalioDate
+                            v-model="customTo"
+                            :disabled="selectedPeriod !== 'custom'"
+                            group-class="w-full"
+                        />
+                    </div>
+                    <MalioSelect
+                        v-model="selectedProjectId"
+                        :options="projectOptions"
+                        :label="$t('reporting.filters.project')"
+                        :empty-option-label="$t('reporting.filters.allProjects')"
+                        group-class="!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedUserId"
+                        :options="userOptions"
+                        :label="$t('reporting.filters.user')"
+                        :empty-option-label="$t('reporting.filters.allUsers')"
+                        group-class="!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
                     />
                 </div>
-                <div class="w-40">
-                    <label class="mb-1 block text-sm font-medium text-neutral-700">
-                        {{ $t('reporting.filters.to') }}
-                    </label>
-                    <MalioDate
-                        v-model="customTo"
-                        :disabled="selectedPeriod !== 'custom'"
-                        group-class="w-full"
-                    />
-                </div>
-                <MalioSelect
-                    v-model="selectedProjectId"
-                    :options="projectOptions"
-                    :label="$t('reporting.filters.project')"
-                    :empty-option-label="$t('reporting.filters.allProjects')"
-                    group-class="!w-44"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedUserId"
-                    :options="userOptions"
-                    :label="$t('reporting.filters.user')"
-                    :empty-option-label="$t('reporting.filters.allUsers')"
-                    group-class="!w-44"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-            </div>
-        </div>
+            </template>
+        </PageHeader>
 
         <!-- Loading -->
         <div v-if="isLoading" class="mt-12 flex items-center justify-center">
diff --git a/frontend/modules/time-tracking/pages/time-tracking.vue b/frontend/modules/time-tracking/pages/time-tracking.vue
index 070c55b..c3939ec 100644
--- a/frontend/modules/time-tracking/pages/time-tracking.vue
+++ b/frontend/modules/time-tracking/pages/time-tracking.vue
@@ -1,101 +1,104 @@
 <template>
     <div class="flex min-h-0 flex-1 flex-col">
-        <div ref="pageHeaderEl" class="sticky top-8 z-20 flex-shrink-0 bg-white pb-4 sm:top-12">
-            <div class="flex items-center justify-between gap-3">
-                <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Suivi des temps</h1>
-                <MalioButton
-                    icon-name="mdi:plus"
-                    icon-position="left"
-                    button-class="shrink-0"
-                    @click="openCreateDrawer()"
-                >
-                    <span class="hidden sm:inline">Ajouter une Activité</span>
-                    <span class="sm:hidden">Activité</span>
-                </MalioButton>
-            </div>
-
-            <div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
-                <div class="flex shrink-0 items-center gap-1 h-8">
-                    <MalioButtonIcon
-                        icon="mdi:chevron-left"
-                        aria-label="Précédent"
-                        variant="ghost"
-                        @click="navigatePrev"
-                    />
-                    <DateFilter v-model="selectedDateFilter" :picker-mode="viewMode === 'day' ? 'day' : 'week'" />
-                    <h2 class="shrink-0 whitespace-nowrap text-lg font-bold leading-8 text-orange-500">
-                        {{ currentMonthLabel }}
-                    </h2>
-                    <MalioButtonIcon
-                        icon="mdi:chevron-right"
-                        aria-label="Suivant"
-                        variant="ghost"
-                        @click="navigateNext"
-                    />
-                </div>
-
-                <div class="flex items-center rounded-full bg-neutral-100 p-1">
-                    <button
-                        v-for="mode in (['week', 'day', 'list'] as const)"
-                        :key="mode"
-                        class="rounded-full px-4 py-1.5 text-sm font-semibold transition-all"
-                        :class="viewMode === mode
-                            ? 'bg-primary-500 text-white shadow-sm'
-                            : 'text-neutral-500 hover:text-neutral-700'"
-                        @click="viewMode = mode"
+        <div ref="pageHeaderEl" class="flex-shrink-0">
+            <PageHeader>
+                Suivi des temps
+                <template #actions>
+                    <MalioButton
+                        icon-name="mdi:plus"
+                        icon-position="left"
+                        button-class="shrink-0"
+                        @click="openCreateDrawer()"
                     >
-                        {{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
-                    </button>
-                </div>
+                        <span class="hidden sm:inline">Ajouter une Activité</span>
+                        <span class="sm:hidden">Activité</span>
+                    </MalioButton>
+                </template>
+                <template #subheader>
+                    <div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
+                        <div class="flex shrink-0 items-center gap-1 h-8">
+                            <MalioButtonIcon
+                                icon="mdi:chevron-left"
+                                aria-label="Précédent"
+                                variant="ghost"
+                                @click="navigatePrev"
+                            />
+                            <DateFilter v-model="selectedDateFilter" :picker-mode="viewMode === 'day' ? 'day' : 'week'" />
+                            <h2 class="shrink-0 whitespace-nowrap text-lg font-bold leading-8 text-orange-500">
+                                {{ currentMonthLabel }}
+                            </h2>
+                            <MalioButtonIcon
+                                icon="mdi:chevron-right"
+                                aria-label="Suivant"
+                                variant="ghost"
+                                @click="navigateNext"
+                            />
+                        </div>
 
-                <div class="[&>div]:!mt-0">
-                    <MalioSelect
-                        v-model="selectedUserId"
-                        :options="userOptions"
-                        group-class="!w-36 sm:!w-44"
-                        text-field="text-sm"
-                        text-value="text-sm"
-                        label="User"
-                        empty-option-label="Tous"
-                    />
-                </div>
+                        <div class="flex items-center rounded-full bg-neutral-100 p-1">
+                            <button
+                                v-for="mode in (['week', 'day', 'list'] as const)"
+                                :key="mode"
+                                class="rounded-full px-4 py-1.5 text-sm font-semibold transition-all"
+                                :class="viewMode === mode
+                                    ? 'bg-primary-500 text-white shadow-sm'
+                                    : 'text-neutral-500 hover:text-neutral-700'"
+                                @click="viewMode = mode"
+                            >
+                                {{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
+                            </button>
+                        </div>
 
-                <div class="[&>div]:!mt-0">
-                    <MalioSelect
-                        v-model="selectedProjectId"
-                        :options="projectOptions"
-                        empty-option-label="Tous"
-                        label="Projet"
-                        group-class="!w-36 sm:!w-44"
-                        text-field="text-sm"
-                        text-value="text-sm"
-                    />
-                </div>
+                        <div class="[&>div]:!mt-0">
+                            <MalioSelect
+                                v-model="selectedUserId"
+                                :options="userOptions"
+                                group-class="!w-36 sm:!w-44"
+                                text-field="text-sm"
+                                text-value="text-sm"
+                                label="User"
+                                empty-option-label="Tous"
+                            />
+                        </div>
 
-                <div class="[&>div]:!mt-0">
-                    <MalioSelect
-                        v-model="selectedTagId"
-                        :options="tagOptions"
-                        empty-option-label="Tous"
-                        label="Tag"
-                        group-class="!w-36 sm:!w-44"
-                        text-field="text-sm"
-                        text-value="text-sm"
-                    />
-                </div>
+                        <div class="[&>div]:!mt-0">
+                            <MalioSelect
+                                v-model="selectedProjectId"
+                                :options="projectOptions"
+                                empty-option-label="Tous"
+                                label="Projet"
+                                group-class="!w-36 sm:!w-44"
+                                text-field="text-sm"
+                                text-value="text-sm"
+                            />
+                        </div>
 
-                <MalioButton
-                    :label="$t('timeEntries.export')"
-                    variant="secondary"
-                    icon-name="mdi:download"
-                    icon-position="left"
-                    button-class="w-auto px-4"
-                    @click="exportDrawerOpen = true"
-                />
-            </div>
+                        <div class="[&>div]:!mt-0">
+                            <MalioSelect
+                                v-model="selectedTagId"
+                                :options="tagOptions"
+                                empty-option-label="Tous"
+                                label="Tag"
+                                group-class="!w-36 sm:!w-44"
+                                text-field="text-sm"
+                                text-value="text-sm"
+                            />
+                        </div>
+
+                        <MalioButton
+                            :label="$t('timeEntries.export')"
+                            variant="secondary"
+                            icon-name="mdi:download"
+                            icon-position="left"
+                            button-class="w-auto px-4"
+                            @click="exportDrawerOpen = true"
+                        />
+                    </div>
+                </template>
+            </PageHeader>
         </div>
 
-        <div class="relative z-0 mt-4 -mb-24 min-h-0 flex-1">
+        <div class="relative z-0 -mb-24 min-h-0 flex-1">
             <TimeEntryList
                 v-if="viewMode === 'list'"
                 :entries="filteredEntries"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3f7232a..6ea509d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,7 @@
             "name": "nuxt-app",
             "hasInstallScript": true,
             "dependencies": {
-                "@malio/layer-ui": "^1.7.5",
+                "@malio/layer-ui": "^1.7.16",
                 "@nuxt/icon": "^2.2.1",
                 "@nuxtjs/i18n": "^10.2.3",
                 "@nuxtjs/tailwindcss": "^6.14.0",
@@ -2220,9 +2220,9 @@
             "license": "MIT"
         },
         "node_modules/@malio/layer-ui": {
-            "version": "1.7.5",
-            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.5/layer-ui-1.7.5.tgz",
-            "integrity": "sha512-xryrAYgVgX3eurEWXT/d0p4r/MBYNBB3mBnvV6xVcFhzxW+HfOra8hsVHLvrCtd+m5E1t7PDRzjw1FObkV6fdQ==",
+            "version": "1.7.16",
+            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.16/layer-ui-1.7.16.tgz",
+            "integrity": "sha512-24scQzhfnwLJr+JTlusiiazkjEK8pqwPp5NZGLdFbP32f+J9RpwoJf/U0ztwIJssXEeYvJB4cdLDYow7dZJv6Q==",
             "dependencies": {
                 "@nuxt/icon": "^2.2.1",
                 "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/frontend/package.json b/frontend/package.json
index 6edf4f5..f3514f4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
         "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
     },
     "dependencies": {
-        "@malio/layer-ui": "^1.7.5",
+        "@malio/layer-ui": "^1.7.16",
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/frontend/pages/admin.vue b/frontend/pages/admin.vue
index 122f652..c4a3c3f 100644
--- a/frontend/pages/admin.vue
+++ b/frontend/pages/admin.vue
@@ -1,24 +1,25 @@
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Administration</h1>
-
-            <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
-                <nav class="flex gap-4 sm:gap-6">
-                    <button
-                        v-for="tab in visibleTabs"
-                        :key="tab.key"
-                        class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
-                        :class="activeTab === tab.key
-                            ? 'border-b-2 border-primary-500 text-primary-500'
-                            : 'text-neutral-500 hover:text-neutral-700'"
-                        @click="activeTab = tab.key"
-                    >
-                        {{ tab.label }}
-                    </button>
-                </nav>
-            </div>
-        </div>
+        <PageHeader>
+            Administration
+            <template #subheader>
+                <div class="mt-6 border-b border-neutral-200 overflow-x-auto">
+                    <nav class="flex gap-4 sm:gap-6">
+                        <button
+                            v-for="tab in visibleTabs"
+                            :key="tab.key"
+                            class="whitespace-nowrap px-1 pb-3 text-sm font-semibold transition"
+                            :class="activeTab === tab.key
+                                ? 'border-b-2 border-primary-500 text-primary-500'
+                                : 'text-neutral-500 hover:text-neutral-700'"
+                            @click="activeTab = tab.key"
+                        >
+                            {{ tab.label }}
+                        </button>
+                    </nav>
+                </div>
+            </template>
+        </PageHeader>
 
         <div>
             <AdminWorkflowTab v-if="activeTab === 'workflows'" />
diff --git a/frontend/pages/documents.vue b/frontend/pages/documents.vue
index 1a68bfe..7d8d306 100644
--- a/frontend/pages/documents.vue
+++ b/frontend/pages/documents.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('sharedFiles.title') }}</h1>
+        <PageHeader>{{ $t('sharedFiles.title') }}</PageHeader>
 
         <!-- Fil d'Ariane -->
-        <nav class="mt-4 flex flex-wrap items-center gap-1 text-sm text-neutral-500">
+        <nav class="flex flex-wrap items-center gap-1 text-sm text-neutral-500">
             <button class="hover:text-primary-500" @click="openPath('')">{{ $t('sharedFiles.root') }}</button>
             <template v-for="crumb in breadcrumb" :key="crumb.path">
                 <span>/</span>
@@ -12,7 +12,7 @@
         </nav>
 
         <!-- Filtre local + rechargement -->
-        <div class="mt-4 flex items-center gap-2">
+        <div class="flex items-center gap-2">
             <div class="max-w-sm flex-1">
                 <MalioInputText
                     v-model="filter"
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 96b1d67..e855f09 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -506,39 +506,40 @@ const lineOptions = {
 
 <template>
     <div>
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
-            <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('dashboard.title') }}</h1>
-
-            <!-- Filters -->
-            <div class="mt-4 flex flex-wrap gap-3">
-                <MalioSelect
-                    v-model="selectedPeriod"
-                    :options="periodOptions"
-                    :label="$t('dashboard.filters.period')"
-                    group-class="!w-48"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedProjectId"
-                    :options="projectOptions"
-                    :label="$t('dashboard.filters.project')"
-                    :empty-option-label="$t('dashboard.filters.allProjects')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-                <MalioSelect
-                    v-model="selectedUserId"
-                    :options="userOptions"
-                    :label="$t('dashboard.filters.user')"
-                    :empty-option-label="$t('dashboard.filters.allUsers')"
-                    group-class="!w-40"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
-            </div>
-        </div>
+        <PageHeader>
+            {{ $t('dashboard.title') }}
+            <template #subheader>
+                <!-- Filters -->
+                <div class="mt-4 flex flex-wrap gap-3">
+                    <MalioSelect
+                        v-model="selectedPeriod"
+                        :options="periodOptions"
+                        :label="$t('dashboard.filters.period')"
+                        group-class="!w-48"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedProjectId"
+                        :options="projectOptions"
+                        :label="$t('dashboard.filters.project')"
+                        :empty-option-label="$t('dashboard.filters.allProjects')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                    <MalioSelect
+                        v-model="selectedUserId"
+                        :options="userOptions"
+                        :label="$t('dashboard.filters.user')"
+                        :empty-option-label="$t('dashboard.filters.allUsers')"
+                        group-class="!w-40"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
+            </template>
+        </PageHeader>
 
         <!-- Loading -->
         <div v-if="isLoading" class="mt-12 flex items-center justify-center">
@@ -547,7 +548,7 @@ const lineOptions = {
 
         <template v-else>
             <!-- KPI Cards -->
-            <div class="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
+            <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
                 <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-5">
                     <p class="text-xs font-medium uppercase tracking-wider text-neutral-400">
                         {{ $t('dashboard.stats.hoursPeriod') }}