From 8bff21bedec22d8cf253e9c9e3d742e6b8aae3c7 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Wed, 4 Mar 2026 08:34:23 +0100
Subject: [PATCH] feat(weather): show trend indicators on team averages

---
 src/app/weather/[id]/page.tsx                | 12 ++-
 src/components/weather/WeatherAverageBar.tsx | 89 ++++++++++++++++++--
 2 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/src/app/weather/[id]/page.tsx b/src/app/weather/[id]/page.tsx
index 224ab2f..cac4e4e 100644
--- a/src/app/weather/[id]/page.tsx
+++ b/src/app/weather/[id]/page.tsx
@@ -40,6 +40,16 @@ export default async function WeatherSessionPage({ params }: WeatherSessionPageP
     getUserTeams(authSession.user.id),
     getWeatherSessionsHistory(authSession.user.id),
   ]);
+  const currentHistoryIndex = history.findIndex((point) => point.sessionId === session.id);
+  const previousTeamAverages =
+    currentHistoryIndex > 0
+      ? {
+          performance: history[currentHistoryIndex - 1].performance,
+          moral: history[currentHistoryIndex - 1].moral,
+          flux: history[currentHistoryIndex - 1].flux,
+          valueCreation: history[currentHistoryIndex - 1].valueCreation,
+        }
+      : null;
 
   return (
     <main className="mx-auto max-w-7xl px-4">
@@ -70,7 +80,7 @@ export default async function WeatherSessionPage({ params }: WeatherSessionPageP
         canEdit={session.canEdit}
         userTeams={userTeams}
       >
-        <WeatherAverageBar entries={session.entries} />
+        <WeatherAverageBar entries={session.entries} previousAverages={previousTeamAverages} />
         <WeatherBoard
           sessionId={session.id}
           currentUserId={authSession.user.id}
diff --git a/src/components/weather/WeatherAverageBar.tsx b/src/components/weather/WeatherAverageBar.tsx
index f9c3b0c..f8a4647 100644
--- a/src/components/weather/WeatherAverageBar.tsx
+++ b/src/components/weather/WeatherAverageBar.tsx
@@ -1,5 +1,5 @@
 // src/components/weather/WeatherAverageBar.tsx
-import { getAverageEmoji } from '@/lib/weather-utils';
+import { getAverageEmoji, getEmojiScore } from '@/lib/weather-utils';
 
 interface WeatherEntry {
   performanceEmoji: string | null;
@@ -10,22 +10,93 @@ interface WeatherEntry {
 
 interface WeatherAverageBarProps {
   entries: WeatherEntry[];
+  previousAverages?: {
+    performance: number | null;
+    moral: number | null;
+    flux: number | null;
+    valueCreation: number | null;
+  } | null;
 }
 
 const AXES = [
-  { key: 'performanceEmoji' as const, label: 'Performance' },
-  { key: 'moralEmoji' as const, label: 'Moral' },
-  { key: 'fluxEmoji' as const, label: 'Flux' },
-  { key: 'valueCreationEmoji' as const, label: 'Création de valeur' },
+  { key: 'performanceEmoji' as const, scoreKey: 'performance' as const, label: 'Performance' },
+  { key: 'moralEmoji' as const, scoreKey: 'moral' as const, label: 'Moral' },
+  { key: 'fluxEmoji' as const, scoreKey: 'flux' as const, label: 'Flux' },
+  {
+    key: 'valueCreationEmoji' as const,
+    scoreKey: 'valueCreation' as const,
+    label: 'Création de valeur',
+  },
 ];
 
-export function WeatherAverageBar({ entries }: WeatherAverageBarProps) {
+function getAverageScore(emojis: (string | null)[]): number | null {
+  const scores = emojis.map(getEmojiScore).filter((score): score is number => score !== null);
+  if (scores.length === 0) return null;
+  return scores.reduce((sum, score) => sum + score, 0) / scores.length;
+}
+
+function AverageEvolutionIndicator({
+  currentScore,
+  previousScore,
+}: {
+  currentScore: number | null;
+  previousScore: number | null | undefined;
+}) {
+  if (currentScore === null || previousScore === null || previousScore === undefined) return null;
+  const delta = currentScore - previousScore;
+
+  if (delta < 0) {
+    return (
+      <span
+        className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
+        style={{
+          backgroundColor: 'color-mix(in srgb, var(--success) 18%, transparent)',
+          color: 'var(--success)',
+        }}
+        title="En progression"
+      >
+        ↑
+      </span>
+    );
+  }
+
+  if (delta > 0) {
+    return (
+      <span
+        className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
+        style={{
+          backgroundColor: 'color-mix(in srgb, var(--destructive) 18%, transparent)',
+          color: 'var(--destructive)',
+        }}
+        title="En baisse"
+      >
+        ↓
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
+      style={{
+        backgroundColor: 'color-mix(in srgb, var(--muted) 15%, transparent)',
+        color: 'var(--muted)',
+      }}
+      title="Stable"
+    >
+      →
+    </span>
+  );
+}
+
+export function WeatherAverageBar({ entries, previousAverages }: WeatherAverageBarProps) {
   if (entries.length === 0) return null;
 
   return (
     <div className="flex flex-wrap items-center gap-3 mb-4">
       <span className="text-xs font-medium text-muted uppercase tracking-wide">Moyenne équipe</span>
-      {AXES.map(({ key, label }) => {
+      {AXES.map(({ key, scoreKey, label }) => {
+        const currentScore = getAverageScore(entries.map((e) => e[key]));
         const avg = getAverageEmoji(entries.map((e) => e[key]));
         return (
           <div
@@ -34,6 +105,10 @@ export function WeatherAverageBar({ entries }: WeatherAverageBarProps) {
           >
             <span className="text-lg leading-none">{avg ?? '—'}</span>
             <span className="text-xs text-muted">{label}</span>
+            <AverageEvolutionIndicator
+              currentScore={currentScore}
+              previousScore={previousAverages?.[scoreKey]}
+            />
           </div>
         );
       })}