feat: Enhance ServerManager with gateway field, improved validation, and new control buttons for server management

frontend/src/ServerManager.jsx

@@ -27,7 +27,8 @@ function ServerManager() {
     dns: '', 
     country: '', 
     provider: '', 
-    tunnel: 'GRE' 
+    tunnel: 'GRE',
+    gateway: ''
   });
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
@@ -127,7 +128,7 @@ function ServerManager() {
   };
 
   const handleAddServerFromModal = () => {
-    if (!newServer.ip.trim() || !newServer.dns.trim() || !newServer.country.trim() || !newServer.provider.trim() || !newServer.tunnel.trim()) {
+    if (!newServer.ip.trim() || !newServer.dns.trim() || !newServer.country.trim() || !newServer.provider.trim() || !newServer.tunnel.trim() || !newServer.gateway.trim()) {
       setError('Все поля должны быть заполнены.');
       return;
     }
@@ -393,6 +394,45 @@ function ServerManager() {
         </div>
       )}
 
+      {/* Кнопки управления */}
+      <div className="d-flex flex-wrap gap-2 mb-3 align-items-center">
+        <button 
+          type="button" 
+          className="btn btn-primary"
+          onClick={handleOpenAddServerModal}
+        >
+          <IconPlus className="icon me-2" />
+          Добавить новый сервер
+        </button>
+        <button 
+          type="button" 
+          className="btn btn-success"
+          onClick={handleSaveChanges}
+          disabled={loading}
+        >
+          {loading ? (
+            <>
+              <IconRefresh className="icon me-2 spin" />
+              Сохранение...
+            </>
+          ) : (
+            <>
+              <IconDatabase className="icon me-2" />
+              Сохранить в S3
+            </>
+          )}
+        </button>
+        <button 
+          type="button" 
+          className="btn btn-outline-primary"
+          onClick={exportAllLinks}
+          disabled={servers.length === 0}
+        >
+          <IconDownload className="icon me-2" />
+          Экспорт всех ссылок (CSV)
+        </button>
+      </div>
+
       <div className="row">
         <div className="col-lg-4">
           {/* Add New Server Card */}
@@ -405,14 +445,7 @@ function ServerManager() {
             </div>
             <div className="card-body">
               <div className="form-footer">
-                <button 
-                  type="button" 
-                  className="btn btn-primary w-100"
-                  onClick={handleOpenAddServerModal}
-                >
-                  <IconPlus className="icon me-2" />
-                  Добавить новый сервер
-                </button>
+                {/* The button for adding new server is now outside this column */}
               </div>
             </div>
           </div>
@@ -430,33 +463,7 @@ function ServerManager() {
                 Все изменения сохраняются в файл servers.json в S3 хранилище.
               </p>
               <div className="form-footer">
-                <button 
-                  type="button" 
-                  className="btn btn-success w-100 mb-2"
-                  onClick={handleSaveChanges}
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <>
-                      <IconRefresh className="icon me-2 spin" />
-                      Сохранение...
-                    </>
-                  ) : (
-                    <>
-                      <IconDatabase className="icon me-2" />
-                      Сохранить в S3
-                    </>
-                  )}
-                </button>
-                <button 
-                  type="button" 
-                  className="btn btn-outline-primary w-100"
-                  onClick={exportAllLinks}
-                  disabled={servers.length === 0}
-                >
-                  <IconDownload className="icon me-2" />
-                  Экспорт всех ссылок (CSV)
-                </button>
+                {/* The save changes buttons are now outside this column */}
               </div>
             </div>
           </div>
@@ -545,7 +552,14 @@ function ServerManager() {
                         </span>
                       )}
                     </th>
-                    <th className="text-center">Основной шлюз</th>
+                    <th style={{cursor:'pointer'}} onClick={() => handleSort('gateway')}>
+                      Основной шлюз
+                      {sortField === 'gateway' && (
+                        <span className="ms-1">
+                          {sortOrder === 'asc' ? '▲' : '▼'}
+                        </span>
+                      )}
+                    </th>
                     <th className="text-center">Статус</th>
                     <th className="text-end">Ссылка</th>
                     <th className="text-end">Действия</th>
@@ -561,7 +575,7 @@ function ServerManager() {
                       <td><span className="badge bg-green-lt text-green">{server.tunnel}</span></td>
                       <td className="text-center">
                         <span className="badge bg-blue-lt text-blue">
-                          {server.provider}
+                          {server.gateway}
                         </span>
                       </td>
                       <td className="text-center">
@@ -1088,6 +1102,17 @@ function AddServerModal({ show, newServer, customProvider, onNewServerChange, on
                   <option value="OpenVPN">OpenVPN</option>
                 </select>
               </div>
+              <div className="mb-3">
+                <label className="form-label">Основной шлюз *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="Cloudflare, Hetzner, Мой шлюз и т.д."
+                  value={newServer.gateway}
+                  onChange={(e) => handleChange('gateway', e.target.value)}
+                  required
+                />
+              </div>
             </form>
           </div>
           <div className="modal-footer">