From c3e0f99ff13fb4f288dcdc6559534f7a0ceab448 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 1 Dec 2025 13:51:51 +0700
Subject: [PATCH] refactor: Streamline BillingManager layout by consolidating
 filter and action buttons. Enhanced UI for better accessibility and user
 experience.

---
 frontend/src/BillingManager.jsx | 172 +++++++++++++++-----------------
 1 file changed, 82 insertions(+), 90 deletions(-)

diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index 88061d8..1c32705 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -510,26 +510,6 @@ function BillingManager() {
         }
       />
 
-      {/* Дополнительные действия */}
-      <div className="mb-4 d-print-none">
-        <div className="btn-list">
-          <button 
-            className="btn btn-outline-secondary"
-            onClick={() => setShowFilters(!showFilters)}
-          >
-            <IconFilter size={16} className="me-1" />
-            Фильтры
-          </button>
-          <button 
-            className="btn btn-primary"
-            onClick={handleAddItem}
-          >
-            <IconPlus size={16} className="me-1" />
-            Добавить
-          </button>
-        </div>
-      </div>
-
       {/* Уведомления */}
       {error && (
         <ErrorAlert
@@ -547,68 +527,6 @@ function BillingManager() {
         </div>
       )}
 
-      {/* Фильтры */}
-      {showFilters && (
-        <div className="card mb-4">
-          <div className="card-header">
-            <h3 className="card-title">Фильтры</h3>
-          </div>
-          <div className="card-body">
-            <div className="row g-3">
-              <div className="col-md-3">
-                <label className="form-label">Поиск</label>
-                <input
-                  type="text"
-                  className="form-control"
-                  placeholder="Поиск по названию, назначению, провайдеру..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-              <div className="col-md-3">
-                <label className="form-label">Провайдер</label>
-                <select
-                  className="form-select"
-                  value={filterProvider}
-                  onChange={(e) => setFilterProvider(e.target.value)}
-                >
-                  <option value="">Все провайдеры</option>
-                  {uniqueProviders.map(provider => (
-                    <option key={provider} value={provider}>{provider}</option>
-                  ))}
-                </select>
-              </div>
-              <div className="col-md-3">
-                <label className="form-label">Страна</label>
-                <select
-                  className="form-select"
-                  value={filterCountry}
-                  onChange={(e) => setFilterCountry(e.target.value)}
-                >
-                  <option value="">Все страны</option>
-                  {uniqueCountries.map(country => (
-                    <option key={country} value={country}>{country}</option>
-                  ))}
-                </select>
-              </div>
-              <div className="col-md-3">
-                <label className="form-label">Статус</label>
-                <select
-                  className="form-select"
-                  value={filterStatus}
-                  onChange={(e) => setFilterStatus(e.target.value)}
-                >
-                  <option value="">Все статусы</option>
-                  {uniqueStatuses.map(status => (
-                    <option key={status} value={status}>{status}</option>
-                  ))}
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
       {/* Статистические карточки */}
       <div className="row g-3 mb-4">
         <div className="col-md-3">
@@ -688,17 +606,91 @@ function BillingManager() {
         <div className="card-header">
           <h3 className="card-title">Оплачиваемые ноды</h3>
           <div className="card-actions">
-            <button 
-              className="btn btn-primary"
-              onClick={handleSaveChanges}
-              disabled={loading}
-            >
-              <IconDatabase size={16} />
-              Сохранить
-            </button>
+            <div className="btn-list">
+              <button 
+                className="btn btn-outline-secondary"
+                onClick={() => setShowFilters(!showFilters)}
+              >
+                <IconFilter size={16} className="me-1" />
+                Фильтры
+              </button>
+              <button 
+                className="btn btn-primary"
+                onClick={handleAddItem}
+              >
+                <IconPlus size={16} className="me-1" />
+                Добавить
+              </button>
+              <button 
+                className="btn btn-primary"
+                onClick={handleSaveChanges}
+                disabled={loading}
+              >
+                <IconDatabase size={16} className="me-1" />
+                Сохранить
+              </button>
+            </div>
           </div>
         </div>
         <div className="card-body">
+          {/* Фильтры */}
+          {showFilters && (
+            <div className="card mb-3">
+              <div className="card-body">
+                <div className="row g-3">
+                  <div className="col-md-3">
+                    <label className="form-label">Поиск</label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Поиск по названию, назначению, провайдеру..."
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                    />
+                  </div>
+                  <div className="col-md-3">
+                    <label className="form-label">Провайдер</label>
+                    <select
+                      className="form-select"
+                      value={filterProvider}
+                      onChange={(e) => setFilterProvider(e.target.value)}
+                    >
+                      <option value="">Все провайдеры</option>
+                      {uniqueProviders.map(provider => (
+                        <option key={provider} value={provider}>{provider}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="col-md-3">
+                    <label className="form-label">Страна</label>
+                    <select
+                      className="form-select"
+                      value={filterCountry}
+                      onChange={(e) => setFilterCountry(e.target.value)}
+                    >
+                      <option value="">Все страны</option>
+                      {uniqueCountries.map(country => (
+                        <option key={country} value={country}>{country}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="col-md-3">
+                    <label className="form-label">Статус</label>
+                    <select
+                      className="form-select"
+                      value={filterStatus}
+                      onChange={(e) => setFilterStatus(e.target.value)}
+                    >
+                      <option value="">Все статусы</option>
+                      {uniqueStatuses.map(status => (
+                        <option key={status} value={status}>{status}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
           <div className="table-responsive">
             <table className="table card-table table-vcenter table-nowrap mb-0">
               <thead>