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

- Nouveau composant ui/PageHeader.vue : source unique du style des titres
  (30px / semi-bold / bleu malio), sticky avec masquage du scroll, slots
  #actions et #subheader (barres de filtres/onglets collées au titre)
- Layout : marges <main> réduites (sm:px-6 lg:px-12 xl:px-11) + suppression
  du bloc-spacer sticky devenu inutile
- ~17 pages migrées vers <PageHeader>, un seul pattern partout
- Espacement titre -> contenu uniforme (30px), porté par le composant

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 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 +-
 .../project-management/pages/my-tasks.vue     | 143 +++++++-------
 .../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     | 179 +++++++++---------
 frontend/pages/admin.vue                      |  39 ++--
 frontend/pages/documents.vue                  |   4 +-
 frontend/pages/index.vue                      |  67 +++----
 19 files changed, 433 insertions(+), 388 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/project-management/pages/my-tasks.vue b/frontend/modules/project-management/pages/my-tasks.vue
index 52e019d..0f3688b 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,74 +378,75 @@ 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'">
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..38994f6 100644
--- a/frontend/modules/time-tracking/pages/time-tracking.vue
+++ b/frontend/modules/time-tracking/pages/time-tracking.vue
@@ -1,98 +1,101 @@
 <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">
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..86dbcbf 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>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 96b1d67..e4bc1e8 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">