From 7e360ca1136eb4c5419bc3482ac21543052e355b Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Thu, 4 Jun 2026 13:39:48 +0000
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20OPEX=20DSI=20:=20colonne=20Tendan?=
 =?UTF-8?q?ce=20ajout=C3=A9e=20sur=20chaque=20ligne=20du=20tableau=20-=20p?=
 =?UTF-8?q?astille=20rouge+fl=C3=A8che=20montante=20(hausse=20>=202%),=20o?=
 =?UTF-8?q?range=20stable=20(<=202%),=20vert+fl=C3=A8che=20descendante=20(?=
 =?UTF-8?q?baisse),=20bleu=20"Nouveau"=20(pas=20de=20N-1).=20Pourcentage?=
 =?UTF-8?q?=20d'=C3=A9volution=20affich=C3=A9=20dans=20chaque=20pastille.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/DsiOpex.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/client/src/pages/DsiOpex.tsx b/client/src/pages/DsiOpex.tsx
index 31c34f6..6d1b080 100644
--- a/client/src/pages/DsiOpex.tsx
+++ b/client/src/pages/DsiOpex.tsx
@@ -859,6 +859,7 @@ export default function DsiOpex() {
                       <th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ minWidth: '140px' }}>
                         <SortBtn col="montant" label={`Prév. ${annee}`} />
                       </th>
+                      <th className="text-center px-3 py-3 font-medium text-muted-foreground w-24">Tendance</th>
                       <th className="text-right px-4 py-3 font-medium text-muted-foreground w-24">Répartition</th>
                       {!isValidated && <th className="px-4 py-3 w-20"></th>}
                     </tr>
@@ -917,6 +918,41 @@ export default function DsiOpex() {
                                 />
                               )}
                             </td>
+                            <td className="px-3 py-3 text-center">
+                              {(() => {
+                                const n1 = ligne.budget_n1;
+                                const n = ligne.montant;
+                                if (!n1 || n1 === 0) {
+                                  return n > 0
+                                    ? <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-600">Nouveau</span>
+                                    : <span className="text-muted-foreground text-xs">—</span>;
+                                }
+                                const diff = n - n1;
+                                const pctVar = (diff / n1) * 100;
+                                if (Math.abs(pctVar) < 2) {
+                                  return (
+                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-orange-100 text-orange-600">
+                                      <span>≈</span>
+                                      <span>stable</span>
+                                    </span>
+                                  );
+                                } else if (diff > 0) {
+                                  return (
+                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-600">
+                                      <TrendingUp className="w-3 h-3" />
+                                      <span>+{pctVar.toFixed(1)}%</span>
+                                    </span>
+                                  );
+                                } else {
+                                  return (
+                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-600">
+                                      <TrendingDown className="w-3 h-3" />
+                                      <span>{pctVar.toFixed(1)}%</span>
+                                    </span>
+                                  );
+                                }
+                              })()}
+                            </td>
                             <td className="px-4 py-3">
                               <div className="flex items-center gap-2 justify-end">
                                 <div className="w-16 bg-muted rounded-full h-1.5 overflow-hidden">