From 9328e205a0e04da7508305e8b65cc7a2bd9ea22d Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 22 Jan 2026 13:42:47 +0700
Subject: [PATCH] refactor(NetworkConfigManager): enhance server display with
 card layout for improved UI; remove unused PreviewConfigModal import

---
 frontend/src/NetworkConfigManager.jsx | 56 +++++++++++++++++++--------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx
index 2827f28..55db589 100644
--- a/frontend/src/NetworkConfigManager.jsx
+++ b/frontend/src/NetworkConfigManager.jsx
@@ -6,7 +6,6 @@ import FormField from './components/FormField.jsx';
 import ConfirmModal from './components/ConfirmModal.jsx';
 import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
 import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx';
-import PreviewConfigModal from './components/filter/PreviewConfigModal.jsx';
 import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconNetwork,
@@ -699,7 +698,8 @@ function NetworkConfigManager() {
           code
         });
       }
-    });
+      });
+    }
     
     // Генерируем блоки для IP адресов интерфейсов
     const interfaceBlocks = generateMikrotikInterfaceAddresses();
@@ -1848,13 +1848,25 @@ function NetworkConfigManager() {
               const server = getServerInfo(editingInterface.serverId);
               return server ? (
                 <div className="col-12">
-                  <div className="alert alert-info mb-0">
-                    <div className="d-flex align-items-center">
-                      <IconServer size={16} className="me-2" />
-                      <div>
-                        <strong>Сервер 1:</strong> {server.dns || server.ip}
-                        {server.provider && <span className="ms-2">• {server.provider}</span>}
-                        {server.country && <span className="ms-2">• {countryToFlag(server.country)} {server.country}</span>}
+                  <div className="card card-sm border">
+                    <div className="card-body p-2">
+                      <div className="d-flex align-items-center">
+                        <IconServer size={16} className="text-muted me-2" />
+                        <span className="fw-medium text-muted me-2">Сервер 1:</span>
+                        <span className="me-2">{server.dns || server.ip}</span>
+                        {server.provider && (
+                          <>
+                            <span className="text-muted me-2">•</span>
+                            <span className="me-2">{server.provider}</span>
+                          </>
+                        )}
+                        {server.country && (
+                          <>
+                            <span className="text-muted me-2">•</span>
+                            <span>{countryToFlag(server.country)}</span>
+                            <span className="ms-1">{server.country}</span>
+                          </>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -1865,13 +1877,25 @@ function NetworkConfigManager() {
               const server2 = getServerInfo(editingInterface.serverId2);
               return server2 ? (
                 <div className="col-12">
-                  <div className="alert alert-info mb-0">
-                    <div className="d-flex align-items-center">
-                      <IconServer size={16} className="me-2" />
-                      <div>
-                        <strong>Сервер 2:</strong> {server2.dns || server2.ip}
-                        {server2.provider && <span className="ms-2">• {server2.provider}</span>}
-                        {server2.country && <span className="ms-2">• {countryToFlag(server2.country)} {server2.country}</span>}
+                  <div className="card card-sm border">
+                    <div className="card-body p-2">
+                      <div className="d-flex align-items-center">
+                        <IconServer size={16} className="text-muted me-2" />
+                        <span className="fw-medium text-muted me-2">Сервер 2:</span>
+                        <span className="me-2">{server2.dns || server2.ip}</span>
+                        {server2.provider && (
+                          <>
+                            <span className="text-muted me-2">•</span>
+                            <span className="me-2">{server2.provider}</span>
+                          </>
+                        )}
+                        {server2.country && (
+                          <>
+                            <span className="text-muted me-2">•</span>
+                            <span>{countryToFlag(server2.country)}</span>
+                            <span className="ms-1">{server2.country}</span>
+                          </>
+                        )}
                       </div>
                     </div>
                   </div>