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,46 +394,19 @@ function ServerManager() {
         </div>
       )}
 
-      <div className="row">
+      {/* Кнопки управления */}
-        <div className="col-lg-4">
+      <div className="d-flex flex-wrap gap-2 mb-3 align-items-center">
-          {/* Add New Server Card */}
-          <div className="card card-md">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconPlus className="icon me-2" />
-                Управление серверами
-              </h3>
-            </div>
-            <div className="card-body">
-              <div className="form-footer">
         <button 
           type="button" 
-                  className="btn btn-primary w-100"
+          className="btn btn-primary"
           onClick={handleOpenAddServerModal}
         >
           <IconPlus className="icon me-2" />
           Добавить новый сервер
         </button>
-              </div>
-            </div>
-          </div>
-
-          {/* Save Changes Card */}
-          <div className="card card-md mt-3">
-            <div className="card-header">
-              <h3 className="card-title">
-                <IconDatabase className="icon me-2" />
-                Сохранение изменений
-              </h3>
-            </div>
-            <div className="card-body">
-              <p className="text-muted mb-3">
-                Все изменения сохраняются в файл servers.json в S3 хранилище.
-              </p>
-              <div className="form-footer">
         <button 
           type="button" 
-                  className="btn btn-success w-100 mb-2"
+          className="btn btn-success"
           onClick={handleSaveChanges}
           disabled={loading}
         >
@@ -450,7 +424,7 @@ function ServerManager() {
         </button>
         <button 
           type="button" 
-                  className="btn btn-outline-primary w-100"
+          className="btn btn-outline-primary"
           onClick={exportAllLinks}
           disabled={servers.length === 0}
         >
@@ -458,6 +432,39 @@ function ServerManager() {
           Экспорт всех ссылок (CSV)
         </button>
       </div>
+
+      <div className="row">
+        <div className="col-lg-4">
+          {/* Add New Server Card */}
+          <div className="card card-md">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconPlus className="icon me-2" />
+                Управление серверами
+              </h3>
+            </div>
+            <div className="card-body">
+              <div className="form-footer">
+                {/* The button for adding new server is now outside this column */}
+              </div>
+            </div>
+          </div>
+
+          {/* Save Changes Card */}
+          <div className="card card-md mt-3">
+            <div className="card-header">
+              <h3 className="card-title">
+                <IconDatabase className="icon me-2" />
+                Сохранение изменений
+              </h3>
+            </div>
+            <div className="card-body">
+              <p className="text-muted mb-3">
+                Все изменения сохраняются в файл servers.json в S3 хранилище.
+              </p>
+              <div className="form-footer">
+                {/* The save changes buttons are now outside this column */}
+              </div>
             </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">