From 12d719aa66770e282b6335cd8942c61bc59c23f1 Mon Sep 17 00:00:00 2001
From: laurentbarontini <l.barontini@open-squared.ch>
Date: Sat, 3 Jan 2026 18:19:28 +0100
Subject: [PATCH] 03.01.26

---
 src/App.jsx | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4f77143e..19090c71 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -176,29 +176,24 @@ const kpis = [
   },
 ];
 
-const latestValue  = data.length > 4 ? data[4].value : null;
-const prevValue    = data.length > 3 ? data[3].value : null;
-const latestDate   = data.length > 4 ? data[4].date  : null;
+const latestValue = data.length > 4 ? data[4].value : null;
+const prevValue   = data.length > 3 ? data[3].value : null;
+const latestDate  = data.length > 4 ? data[4].date : null;
 
-let trend = null;
-let trendColor = null;
+let trendValue = null;
 
 if (latestValue && prevValue) {
-  const diff = ((latestValue - prevValue) / prevValue) * 100;
-
-  trend = `${diff >= 0 ? "+" : ""}${diff.toFixed(2)}%`;
-  trendColor = diff >= 0 ? "#16A34A" : "#DC2626"; // vert / rouge
+  trendValue = ((latestValue - prevValue) / prevValue) * 100;
 }
 
+
 const news = [
   {
     type: "Forex",
     label: `EUR/USD: ${latestValue?.toFixed(4)}`,
-    trend,
-    color: "#1E3A8A",
     date: latestDate,
     icon: TrendingUp,
-    trendColor,
+    trendValue, // <- même logique que KPIs
   },
   // {
   //   type: "Logistic",
@@ -550,12 +545,19 @@ export default function App() {
                       </div>
                       <div className="ml-6">
                         <span style={{ color: n.color }}>{n.label}</span>
-                        {n.trend && (
+                        {n.trendValue !== null && (
                           <span
-                            className="ml-2 font-semibold"
-                            style={{ color: n.trendColor }}
+                            className={`
+                              ml-2 px-2 py-0.5 text-xs font-semibold rounded-md border
+                              ${
+                                n.trendValue >= 0
+                                  ? "bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800"
+                                  : "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"
+                              }
+                            `}
                           >
-                            {n.trend}
+                            {n.trendValue >= 0 ? "+" : ""}
+                            {n.trendValue.toFixed(2)}%
                           </span>
                         )}
                       </div>