From c3fba50de8e01c8bee4b65987aca61ed4d5f4e3a Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Sun, 22 Feb 2026 22:17:16 +0700
Subject: [PATCH] refactor(ResourceStatsPage): update RouterResourceCard layout
 to include an icon and improve styling

---
 frontend/src/ResourceStatsPage.jsx | 37 +++++++++++++++---------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ResourceStatsPage.jsx b/frontend/src/ResourceStatsPage.jsx
index 716711f..e5f0524 100644
--- a/frontend/src/ResourceStatsPage.jsx
+++ b/frontend/src/ResourceStatsPage.jsx
@@ -52,25 +52,31 @@ function KpiBlock({ label, value, percent, variant }) {
   );
 }
 
-/** Карточка одного роутера: приветствие (имя), сводка, KPI (RAM, CPU, HDD) + декоративная иконка справа */
+/** Карточка одного роутера: иконка перед названием, сводка, KPI (RAM, CPU, HDD) */
 function RouterResourceCard({ router }) {
   const { name, host, error, resource } = router;
   const hasResource = resource && !error;
 
   return (
     <div className="card rounded-3 shadow-sm border-0 overflow-hidden h-100">
-      <div className="card-body d-flex flex-column flex-md-row align-items-stretch p-4">
-        <div className="flex-grow-1 pe-0 pe-md-3">
-          <h3 className="h4 fw-bold mb-1 text-body">
-            {name}
-          </h3>
-          <p className="text-secondary small mb-3">
-            {host}
-            {resource?.version && (
-              <span className="ms-2"> · RouterOS {resource.version}</span>
-            )}
-          </p>
-
+      <div className="card-body p-4">
+        <div className="d-flex align-items-center mb-3">
+          <span className="avatar avatar-lg bg-primary-lt text-primary rounded-3 me-3 flex-shrink-0">
+            <IconServer size={28} />
+          </span>
+          <div className="min-w-0">
+            <h3 className="h4 fw-bold mb-0 text-body text-truncate">
+              {name}
+            </h3>
+            <p className="text-secondary small mb-0 mt-1">
+              {host}
+              {resource?.version && (
+                <span className="ms-1"> · RouterOS {resource.version}</span>
+              )}
+            </p>
+          </div>
+        </div>
+        <div>
           {error && (
             <div className="alert alert-danger py-2 mb-3 d-flex align-items-center">
               <IconAlertCircle size={20} className="me-2 flex-shrink-0" />
@@ -130,11 +136,6 @@ function RouterResourceCard({ router }) {
             </div>
           )}
         </div>
-        <div className="d-none d-md-flex align-items-center justify-content-center flex-shrink-0 mt-3 mt-md-0 ms-md-3">
-          <span className="avatar avatar-xl bg-primary-lt text-primary rounded-3">
-            <IconServer size={48} />
-          </span>
-        </div>
       </div>
     </div>
   );