From 9af7d1081aac41052dad9954d2ba23d3d3e2dd09 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Mon, 14 Jul 2025 08:38:48 +0700
Subject: [PATCH] =?UTF-8?q?=D1=83=D0=BD=D0=B8=D1=84=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=86=D1=8F=D0=B8=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/FilterManager.jsx | 117 ++++++++++++++-------------------
 1 file changed, 48 insertions(+), 69 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index 460b322..7fe31e3 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -356,80 +356,59 @@ function FilterManager() {
       )}
 
       {/* Фильтры и поиск */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <div className="row g-3">
-            <div className="col-md-4">
-              <div className="input-group">
-                <span className="input-group-text">
-                  <IconSearch />
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  placeholder="Поиск по community, gateway или описанию..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-            </div>
-            <div className="col-md-3">
-              <select
-                className="form-select"
-                value={filterGateway}
-                onChange={(e) => setFilterGateway(e.target.value)}
-              >
-                <option value="">Все gateway</option>
-                {uniqueGateways.map(gateway => (
-                  <option key={gateway} value={gateway}>{gateway}</option>
-                ))}
-              </select>
-            </div>
-            <div className="col-md-2">
-              <button 
-                className="btn btn-outline-secondary w-100"
-                onClick={fetchFilters}
-                disabled={loading}
-              >
-                <IconRefresh className="me-2" />
-                Обновить
-              </button>
+      <div className="card w-100">
+        <div className="card-header d-flex justify-content-between align-items-center">
+          <h3 className="card-title mb-0">Список фильтров</h3>
+          <div className="d-flex gap-2 w-75">
+            {/* Фильтры и поиск */}
+            <select className="form-select w-auto" value={filterGateway} onChange={e => setFilterGateway(e.target.value)}>
+              <option value="">Все gateway</option>
+              {uniqueGateways.map(gateway => (
+                <option key={gateway} value={gateway}>{gateway}</option>
+              ))}
+            </select>
+            <div className="input-icon flex-grow-1">
+              <span className="input-icon-addon">
+                <IconSearch size={18} />
+              </span>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Поиск по фильтрам..."
+                value={searchTerm}
+                onChange={e => setSearchTerm(e.target.value)}
+              />
             </div>
           </div>
         </div>
-      </div>
-
-      {/* Таблица фильтров */}
-      <div className="card">
-        <div className="card-header">
-          <h3 className="card-title">Фильтры frouting ({filteredFilters.length})</h3>
-        </div>
         <div className="table-responsive">
-          <table className="table table-vcenter table-sm card-table align-middle">
+          <table className="table card-table table-vcenter table-nowrap mb-0">
             <thead>
               <tr>
-                <th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle"
-                    onClick={() => handleSort('community')}>
-                  Community
+                <th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
+                  COMMUNITY
                   {sortField === 'community' && (
-                    <IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} />
+                    <span className="ms-1">
+                      {sortOrder === 'asc' ? '▲' : '▼'}
+                    </span>
                   )}
                 </th>
-                <th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle"
-                    onClick={() => handleSort('gateway')}>
-                  Gateway
+                <th style={{cursor:'pointer'}} onClick={() => handleSort('gateway')}>
+                  GATEWAY
                   {sortField === 'gateway' && (
-                    <IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} />
+                    <span className="ms-1">
+                      {sortOrder === 'asc' ? '▲' : '▼'}
+                    </span>
                   )}
                 </th>
-                <th style={{minWidth: '180px', maxWidth: '300px', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="align-middle">Описание</th>
-                <th className="w-1 align-middle text-end" style={{width: '110px'}}></th>
+                <th style={{minWidth: '180px', maxWidth: '300px'}}>DESCRIPTION</th>
+                <th className="text-end w-1" style={{ minWidth: 110 }}></th>
               </tr>
             </thead>
             <tbody>
               {filteredFilters.map((filter, index) => (
-                <tr key={index} style={{verticalAlign: 'middle', height: '48px'}}>
-                  <td className="align-middle font-monospace" style={{fontSize: '15px'}}>
+                <tr key={index}>
+                  <td className="font-monospace align-middle" style={{fontSize: '15px'}}>
                     {editingFilter === filter.community ? (
                       <input
                         ref={editInputRef}
@@ -450,7 +429,7 @@ function FilterManager() {
                       <span>{filter.community}</span>
                     )}
                   </td>
-                  <td className="align-middle" style={{fontSize: '15px'}}>
+                  <td className="align-middle text-center" style={{fontSize: '15px'}}>
                     {editingFilter === filter.community ? (
                       <input
                         type="text"
@@ -490,36 +469,36 @@ function FilterManager() {
                       <span>{filter.description}</span>
                     )}
                   </td>
-                  <td className="align-middle text-end" style={{paddingRight: '0.5rem'}}>
-                    <div className="btn-list mb-0" style={{gap: '0.25rem'}}>
+                  <td className="text-end w-1 align-middle" style={{ minWidth: 110 }}>
+                    <div className="btn-list gap-1 mb-0">
                       {editingFilter === filter.community ? (
                         <>
                           <button
-                            className="btn btn-sm btn-success"
+                            className="btn btn-icon btn-sm btn-success rounded"
                             onClick={() => handleSaveEdit(filter.community)}
                           >
-                            <IconCheck />
+                            <IconCheck size={18} />
                           </button>
                           <button
-                            className="btn btn-sm btn-secondary"
+                            className="btn btn-icon btn-sm btn-secondary rounded"
                             onClick={() => handleCancelEdit(filter.community)}
                           >
-                            <IconX />
+                            <IconX size={18} />
                           </button>
                         </>
                       ) : (
                         <>
                           <button
-                            className="btn btn-sm btn-outline-primary"
+                            className="btn btn-icon btn-sm btn-outline-primary rounded"
                             onClick={() => startEdit(filter)}
                           >
-                            <IconEdit />
+                            <IconEdit size={18} />
                           </button>
                           <button
-                            className="btn btn-sm btn-outline-danger"
+                            className="btn btn-icon btn-sm btn-outline-danger rounded"
                             onClick={() => handleDelete(filter)}
                           >
-                            <IconTrash />
+                            <IconTrash size={18} />
                           </button>
                         </>
                       )}