From 79ca6e2d05cfbb6846dd5b5c68268d16b92304ec Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Fri, 13 Feb 2026 00:09:50 +0700
Subject: [PATCH] refactor(MikrotikTools): replace gateway input with
 card-based target selection for improved UI and user interaction

---
 frontend/src/MikrotikTools.jsx | 42 +++++++++++++++-------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/frontend/src/MikrotikTools.jsx b/frontend/src/MikrotikTools.jsx
index d72632a..aa2d39c 100644
--- a/frontend/src/MikrotikTools.jsx
+++ b/frontend/src/MikrotikTools.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import api from './lib/api.js';
 import { useNotify } from './components/NotifyProvider.jsx';
-import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx';
 import PageHeader from './components/PageHeader.jsx';
 import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
@@ -366,36 +365,33 @@ function MikrotikTools() {
                       })}
                     </div>
                   )}
-                  <GatewayAutocompleteInput
-                    value={gatewayRef}
-                    onChange={setGatewayRef}
-                    gateways={gateways}
-                    interfaces={interfaces}
-                    serverId={serverId || null}
-                    placeholder="IP gateway или интерфейс…"
-                    onSelectMeta={handleSelectGatewayMeta}
-                  />
                 </>
               )}
 
-              {/* Быстрые цели — чипы */}
-              <div className="d-flex flex-wrap align-items-center gap-1 mt-2">
-                <span className="text-muted small me-1">Цель:</span>
+              {/* Цели — карточки в стиле сервера/gateway */}
+              <div className="row row-cards g-1 mt-2">
                 {POPULAR_TARGETS.map(({ id: tid, name, target: tgt, Icon, color }) => {
                   const isSelected = target === tgt;
                   const bgClass = color === 'red' ? 'bg-red-lt' : color === 'blue' ? 'bg-blue-lt' : 'bg-orange-lt';
                   const textClass = color === 'red' ? 'text-red' : color === 'blue' ? 'text-blue' : 'text-orange';
                   return (
-                    <button
-                      type="button"
-                      key={tid}
-                      className={`btn btn-sm ${isSelected ? `${bgClass} ${textClass}` : 'btn-outline-secondary'}`}
-                      onClick={() => setTarget(tgt)}
-                      title={tgt}
-                    >
-                      <Icon size={14} stroke={1.5} className="me-1" />
-                      {name}
-                    </button>
+                    <div className="col-12 col-sm-6 col-md-4" key={tid}>
+                      <div
+                        className={`card card-sm h-100 cursor-pointer ${isSelected ? 'border-primary card-hover' : 'card-hover'}`}
+                        onClick={() => setTarget(tgt)}
+                        title={tgt}
+                      >
+                        <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
+                          <span className={`avatar avatar-sm ${bgClass} ${textClass}`}>
+                            <Icon size={20} stroke={1.5} />
+                          </span>
+                          <div className="flex-grow-1 min-w-0">
+                            <div className="fw-semibold text-truncate small">{name}</div>
+                            <div className="text-muted small text-truncate">{tgt}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                   );
                 })}
               </div>