From d9610d2be4eca7dc068c16a34a53d45f1657baaa Mon Sep 17 00:00:00 2001
From: Manus <manus@santinova.fr>
Date: Thu, 20 Aug 2026 16:33:07 +0200
Subject: [PATCH] feat(dashboard): distinguer visuellement les apps INFRA dans
 le tableau de bord

---
 src/frontend/src/pages/DashboardPage.jsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/DashboardPage.jsx b/src/frontend/src/pages/DashboardPage.jsx
index f5a9684..7f9752d 100644
--- a/src/frontend/src/pages/DashboardPage.jsx
+++ b/src/frontend/src/pages/DashboardPage.jsx
@@ -147,10 +147,12 @@ export default function DashboardPage({ apps }) {
             <p className="text-gray-500 text-sm">Aucune application détectée</p>
           ) : (
             <div className="space-y-3">
-              {apps.map((app) => (
+              {apps.map((app) => {
+                const isInfra = app.category === "INFRA" || ["portail-santinova", "manus-dashboard"].includes(app.id);
+                return (
                 <div
                   key={app.id}
-                  className="flex items-center justify-between py-3 px-4 rounded-lg bg-dark-700/50 border border-dark-600/50"
+                  className={`flex items-center justify-between py-3 px-4 rounded-lg ${isInfra ? "bg-amber-950/20 border border-amber-500/30" : "bg-dark-700/50 border border-dark-600/50"}`}
                 >
                   <div className="flex items-center gap-3">
                     <div
@@ -163,7 +165,12 @@ export default function DashboardPage({ apps }) {
                       }`}
                     />
                     <div>
-                      <p className="text-sm font-medium text-gray-200">
+                      {isInfra && (
+                        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-500/15 text-amber-400 border border-amber-500/30 mb-0.5">
+                          ⚙ Infra
+                        </span>
+                      )}
+                      <p className={`text-sm font-medium ${isInfra ? "text-amber-200" : "text-gray-200"}`}>
                         {app.name}
                       </p>
                       <p className="text-xs text-gray-500">
@@ -180,7 +187,8 @@ export default function DashboardPage({ apps }) {
                     <StatusBadge status={app.status} />
                   </div>
                 </div>
-              ))}
+                );
+              })}
             </div>
           )}
         </div>