From d53100f5bd93b48e3b9ce0fb03bf281d7aa8b0cd Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Wed, 25 Feb 2026 02:04:54 +0700
Subject: [PATCH] feat(network-map): enhance card layout and issue display with
 badges for critical and warning nodes

---
 frontend/src/NetworkMapUnifi.jsx | 38 ++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/NetworkMapUnifi.jsx b/frontend/src/NetworkMapUnifi.jsx
index 526d41d..c5756e0 100644
--- a/frontend/src/NetworkMapUnifi.jsx
+++ b/frontend/src/NetworkMapUnifi.jsx
@@ -1046,15 +1046,15 @@ export default function NetworkMapUnifi({
     </div>
     <div className="row g-3 mt-2">
       <div className="col-12 col-xl-6">
-        <div
-          className="card"
-          style={{ background: '#0f172a', border: `1px solid ${UNIFI_CARD_BORDER}` }}
-        >
-          <div className="card-header">
+        <div className="card">
+          <div className="card-header d-flex align-items-center">
             <h3 className="card-title mb-0">Критичные узлы</h3>
+            <div className="card-actions ms-auto">
+              <span className="badge bg-red-lt text-red">{criticalNodes.length}</span>
+            </div>
           </div>
           <div className="table-responsive">
-            <table className="table card-table table-vcenter table-nowrap mb-0 table-sm">
+            <table className="table card-table table-vcenter table-nowrap mb-0 table-sm table-striped">
               <thead>
                 <tr>
                   <th scope="col">Узел</th>
@@ -1085,7 +1085,11 @@ export default function NetworkMapUnifi({
                       <td>{n.maxPingMs != null ? `${n.maxPingMs} ms` : '—'}</td>
                       <td>{n.minSpeedMbps != null ? `${n.minSpeedMbps.toFixed(1)} Мбит/с` : '—'}</td>
                       <td>{n.linkCount}</td>
-                      <td className="text-warning">{n.issues.slice(0, 2).join(', ')}</td>
+                      <td>
+                        <span className="badge bg-orange-lt text-orange">
+                          {n.issues.slice(0, 2).join(', ')}
+                        </span>
+                      </td>
                     </tr>
                   ))
                 )}
@@ -1095,12 +1099,12 @@ export default function NetworkMapUnifi({
         </div>
       </div>
       <div className="col-12 col-xl-6">
-        <div
-          className="card"
-          style={{ background: '#0f172a', border: `1px solid ${UNIFI_CARD_BORDER}` }}
-        >
-          <div className="card-header">
+        <div className="card">
+          <div className="card-header d-flex align-items-center">
             <h3 className="card-title mb-0">Требуют внимания</h3>
+            <div className="card-actions ms-auto">
+              <span className="badge bg-yellow-lt text-yellow">{warningNodes.length}</span>
+            </div>
           </div>
           <div className="table-responsive">
             <table className="table card-table table-vcenter table-nowrap mb-0 table-sm table-striped">
@@ -1127,8 +1131,14 @@ export default function NetworkMapUnifi({
                       </td>
                       <td>{n.maxPingMs != null ? `${n.maxPingMs} ms` : '—'}</td>
                       <td>{n.minSpeedMbps != null ? `${n.minSpeedMbps.toFixed(1)} Мбит/с` : '—'}</td>
-                      <td>{n.staleCount}</td>
-                      <td className="text-muted">{n.issues.slice(0, 2).join(', ')}</td>
+                      <td>
+                        <span className={n.staleCount > 0 ? 'badge bg-yellow-lt text-yellow' : 'text-muted'}>
+                          {n.staleCount}
+                        </span>
+                      </td>
+                      <td>
+                        <span className="text-muted">{n.issues.slice(0, 2).join(', ')}</span>
+                      </td>
                     </tr>
                   ))
                 )}