From e7650b961b0a912bdf0017ae46eb4c784aabe368 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 12 Feb 2026 23:19:35 +0700
Subject: [PATCH] refactor(MikrotikTools): redesign header and action buttons
 for traceroute and ping modes, improving layout and user interaction

---
 frontend/src/MikrotikTools.jsx | 98 +++++++++++++++++++---------------
 1 file changed, 55 insertions(+), 43 deletions(-)

diff --git a/frontend/src/MikrotikTools.jsx b/frontend/src/MikrotikTools.jsx
index ef356e4..55f063d 100644
--- a/frontend/src/MikrotikTools.jsx
+++ b/frontend/src/MikrotikTools.jsx
@@ -304,34 +304,65 @@ function MikrotikTools() {
         </div>
       </div>
 
-      {/* Параметры трассировки + результаты */}
+      {/* Горизонтальная панель: режим (Traceroute/Ping) + основное действие — по образцу Tabler "page-header" с btn-list */}
+      <div className="card mb-3">
+        <div className="card-body py-2">
+          <div className="row align-items-center g-2">
+            <div className="col">
+              <ul className="nav nav-pills" role="tablist">
+                <li className="nav-item" role="presentation">
+                  <button
+                    type="button"
+                    className={`nav-link ${mode === 'traceroute' ? 'active' : ''}`}
+                    onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                    role="tab"
+                  >
+                    Traceroute
+                  </button>
+                </li>
+                <li className="nav-item" role="presentation">
+                  <button
+                    type="button"
+                    className={`nav-link ${mode === 'ping' ? 'active' : ''}`}
+                    onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                    role="tab"
+                  >
+                    Ping
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div className="col-auto ms-auto">
+              <div className="btn-list">
+                <button
+                  type="button"
+                  className="btn btn-outline-secondary"
+                  onClick={handleReset}
+                  disabled={running}
+                >
+                  <IconRefresh size={16} className="me-1" />
+                  Сбросить
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={handleRunCheck}
+                  disabled={running || loading}
+                >
+                  {running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Параметры проверки + результаты */}
       <div className="row g-3">
         <div className="col-md-4">
           <div className="card">
             <div className="card-header">
-              <div className="row align-items-center g-2">
-                <div className="col">
-                  <h3 className="card-title mb-0">Параметры проверки</h3>
-                </div>
-                <div className="col-auto">
-                  <div className="btn-group btn-group-sm" role="group" aria-label="Тип проверки">
-                    <button
-                      type="button"
-                      className={`btn ${mode === 'traceroute' ? 'btn-secondary' : 'btn-outline-secondary'}`}
-                      onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
-                    >
-                      Traceroute
-                    </button>
-                    <button
-                      type="button"
-                      className={`btn ${mode === 'ping' ? 'btn-secondary' : 'btn-outline-secondary'}`}
-                      onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
-                    >
-                      Ping
-                    </button>
-                  </div>
-                </div>
-              </div>
+              <h3 className="card-title mb-0">Параметры проверки</h3>
             </div>
             <div className="card-body">
               {loading && !networkConfig ? (
@@ -486,25 +517,6 @@ function MikrotikTools() {
                 </>
               )}
             </div>
-            <div className="card-footer d-flex justify-content-between">
-              <button
-                type="button"
-                className="btn btn-outline-secondary"
-                onClick={handleReset}
-                disabled={running}
-              >
-                <IconRefresh size={16} className="me-1" />
-                Сбросить
-              </button>
-              <button
-                type="button"
-                className="btn btn-primary"
-                onClick={handleRunCheck}
-                disabled={running || loading}
-              >
-                {running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
-              </button>
-            </div>
           </div>
         </div>