From 915304f80001e2fb6646d257f74857ac05832ebc Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 21:43:48 +0700
Subject: [PATCH] refactor(BillingManager): improve layout and styling of
 subscription section for better user interaction and visual consistency

---
 frontend/src/BillingManager.jsx | 42 ++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index e0760e3..992f189 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -688,15 +688,15 @@ function BillingManager() {
       {/* Основная секция: Подписки */}
       {activeTab === 'subscriptions' && (
         <div className="card">
-          <div className="card-header">
-            <div className="d-flex align-items-center gap-3 flex-grow-1">
-              <h3 className="card-title mb-0">
-                Подписки
-                <span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
-              </h3>
-              
+          <div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
+            <h3 className="card-title mb-0">
+              Подписки
+              <span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
+            </h3>
+
+            <div className="d-flex flex-wrap align-items-center gap-2 flex-grow-1 justify-content-end">
               {/* Поиск */}
-              <div className="input-icon flex-grow-1" style={{ maxWidth: '280px' }}>
+              <div className="input-icon" style={{ minWidth: '220px', maxWidth: '280px' }}>
                 <span className="input-icon-addon">
                   <IconSearch size={16} />
                 </span>
@@ -710,21 +710,21 @@ function BillingManager() {
               </div>
 
               {/* Быстрые фильтры */}
-              <div className="d-flex gap-1">
+              <div className="btn-group btn-group-sm" role="group">
                 <button 
-                  className={`btn btn-sm ${filterUrgency === '' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  className={`btn ${filterUrgency === '' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
                   onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
                 >
                   Все
                 </button>
                 <button 
-                  className={`btn btn-sm ${filterUrgency === 'overdue' ? 'btn-red' : 'btn-outline-secondary'}`}
+                  className={`btn ${filterUrgency === 'overdue' ? 'btn-outline-danger active' : 'btn-outline-secondary'}`}
                   onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
                 >
                   Просрочено
                 </button>
                 <button 
-                  className={`btn btn-sm ${filterUrgency === 'urgent' ? 'btn-yellow' : 'btn-outline-secondary'}`}
+                  className={`btn ${filterUrgency === 'urgent' ? 'btn-outline-warning active' : 'btn-outline-secondary'}`}
                   onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
                 >
                   Срочно
@@ -734,27 +734,27 @@ function BillingManager() {
               {/* Переключатель вида */}
               <div className="btn-group btn-group-sm" role="group">
                 <button
-                  className={`btn ${viewMode === 'cards' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  className={`btn ${viewMode === 'cards' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
                   onClick={() => setViewMode('cards')}
                   title="Карточки"
                 >
                   <IconLayoutGrid size={16} />
                 </button>
                 <button
-                  className={`btn ${viewMode === 'table' ? 'btn-primary' : 'btn-outline-secondary'}`}
+                  className={`btn ${viewMode === 'table' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
                   onClick={() => setViewMode('table')}
                   title="Таблица"
                 >
                   <IconList size={16} />
                 </button>
               </div>
-            </div>
-            
-            <div className="card-actions">
-              <button className="btn btn-primary" onClick={handleAddItem}>
-                <IconPlus size={18} className="me-1" />
-                Добавить
-              </button>
+
+              <div className="card-actions">
+                <button className="btn btn-primary btn-sm" onClick={handleAddItem}>
+                  <IconPlus size={16} className="me-1" />
+                  Добавить
+                </button>
+              </div>
             </div>
           </div>