From da35f29960be171c411e857a2254445d04efe1d2 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 23 Apr 2026 11:44:55 +0200
Subject: [PATCH] fix(audit) : MalioButton + paliers month/year dans
 AuditTimeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

T-010 — remplace le <button> HTML brut par MalioButton variant=tertiary,
conformement a la regle projet (tous les boutons passent par Malio*).

T-014 — etend relativeDate avec les paliers 'month' (~30.44j) et 'year'
(~365.25j). Avant, une entree vieille d'un an affichait "il y a 52
semaines" au lieu de "l'an dernier" (RelativeTimeFormat FR).
---
 .../shared/components/audit/AuditTimeline.vue | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/shared/components/audit/AuditTimeline.vue b/frontend/shared/components/audit/AuditTimeline.vue
index 642f808..d694cc9 100644
--- a/frontend/shared/components/audit/AuditTimeline.vue
+++ b/frontend/shared/components/audit/AuditTimeline.vue
@@ -77,14 +77,13 @@
 
         <!-- Lazy loading : bouton "Voir plus" si plus de pages. -->
         <div v-if="hasMore" class="mt-4 flex justify-center">
-            <button
-                type="button"
-                class="px-3 py-1.5 text-sm rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-60"
+            <MalioButton
+                variant="tertiary"
+                :label="loading ? t('common.loading') : t('audit.timeline.load_more')"
                 :disabled="loading"
+                button-class="text-sm"
                 @click="loadMore"
-            >
-                {{ loading ? t('common.loading') : t('audit.timeline.load_more') }}
-            </button>
+            />
         </div>
     </div>
 </template>
@@ -163,22 +162,27 @@ function dotClass(action: string): string {
 }
 
 // Relativise une date via Intl.RelativeTimeFormat. On selectionne l'unite
-// la plus grossiere possible (minutes < heures < jours < semaines). La
-// locale suit dynamiquement celle de l'app pour qu'un switch de langue
-// prenne effet sans nouveau mount (recomputed = cache par-locale).
+// la plus grossiere possible (secondes < minutes < heures < jours < semaines
+// < mois < annees). La locale suit dynamiquement celle de l'app pour qu'un
+// switch de langue prenne effet sans nouveau mount (recomputed = cache
+// par-locale). Paliers mois/annee approximes (30.44j / 365.25j) : suffisant
+// pour un affichage humain, la tooltip absoluteDate garde la date exacte.
 const rtf = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
 
 function relativeDate(iso: string): string {
     const diffMs = Date.now() - new Date(iso).getTime()
     const diffSec = Math.round(diffMs / 1000)
     const absSec = Math.abs(diffSec)
+    const sign = -Math.sign(diffSec)
     const fmt = rtf.value
 
-    if (absSec < 60) return fmt.format(-Math.sign(diffSec) * Math.abs(diffSec), 'second')
-    if (absSec < 3600) return fmt.format(-Math.sign(diffSec) * Math.round(absSec / 60), 'minute')
-    if (absSec < 86400) return fmt.format(-Math.sign(diffSec) * Math.round(absSec / 3600), 'hour')
-    if (absSec < 604800) return fmt.format(-Math.sign(diffSec) * Math.round(absSec / 86400), 'day')
-    return fmt.format(-Math.sign(diffSec) * Math.round(absSec / 604800), 'week')
+    if (absSec < 60)       return fmt.format(sign * absSec, 'second')
+    if (absSec < 3600)     return fmt.format(sign * Math.round(absSec / 60), 'minute')
+    if (absSec < 86400)    return fmt.format(sign * Math.round(absSec / 3600), 'hour')
+    if (absSec < 604800)   return fmt.format(sign * Math.round(absSec / 86400), 'day')
+    if (absSec < 2629800)  return fmt.format(sign * Math.round(absSec / 604800), 'week')   // < ~30.44j
+    if (absSec < 31557600) return fmt.format(sign * Math.round(absSec / 2629800), 'month') // < ~365.25j
+    return fmt.format(sign * Math.round(absSec / 31557600), 'year')
 }
 
 function absoluteDate(iso: string): string {