From e73d5e2721fc987b4a884467fca8223fab572148 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 1 Dec 2025 16:28:40 +0700
Subject: [PATCH] feat: Replace status selection in BillingManager forms with
 button group for improved user interaction and visual clarity, enhancing the
 overall UI experience.

---
 frontend/src/BillingManager.jsx | 64 +++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/frontend/src/BillingManager.jsx b/frontend/src/BillingManager.jsx
index 30b4cdb..9dd8d7b 100644
--- a/frontend/src/BillingManager.jsx
+++ b/frontend/src/BillingManager.jsx
@@ -1578,11 +1578,6 @@ function BillingManager() {
 
 // Компоненты форм для модальных окон
 function AddBillingForm({ item, onItemChange, servers }) {
-  const statusOptions = [
-    { value: 'active', label: 'Активен' },
-    { value: 'inactive', label: 'Неактивен' }
-  ];
-
   const currencyOptions = [
     { value: 'USD', label: 'USD' },
     { value: 'EUR', label: 'EUR' },
@@ -1659,14 +1654,25 @@ function AddBillingForm({ item, onItemChange, servers }) {
         />
       </div>
       <div className="col-md-6">
-        <FormField
-          label="Статус"
-          name="status"
-          type="select"
-          value={item.status}
-          onChange={(value) => onItemChange({ ...item, status: value })}
-          options={statusOptions}
-        />
+        <div className="mb-1 d-flex justify-content-between align-items-center">
+          <label className="form-label mb-0">Статус</label>
+        </div>
+        <div className="btn-group w-100" role="group" aria-label="Статус ноды">
+          <button
+            type="button"
+            className={`btn ${item.status === 'active' ? 'btn-success' : 'btn-outline-success'}`}
+            onClick={() => onItemChange({ ...item, status: 'active' })}
+          >
+            Активен
+          </button>
+          <button
+            type="button"
+            className={`btn ${item.status === 'inactive' ? 'btn-danger' : 'btn-outline-danger'}`}
+            onClick={() => onItemChange({ ...item, status: 'inactive' })}
+          >
+            Неактивен
+          </button>
+        </div>
       </div>
 
       {/* Текущие платежи */}
@@ -1718,11 +1724,6 @@ function AddBillingForm({ item, onItemChange, servers }) {
 }
 
 function EditBillingForm({ item, onItemChange, servers }) {
-  const statusOptions = [
-    { value: 'active', label: 'Активен' },
-    { value: 'inactive', label: 'Неактивен' }
-  ];
-
   const currencyOptions = [
     { value: 'USD', label: 'USD' },
     { value: 'EUR', label: 'EUR' },
@@ -1799,14 +1800,25 @@ function EditBillingForm({ item, onItemChange, servers }) {
         />
       </div>
       <div className="col-md-6">
-        <FormField
-          label="Статус"
-          name="status"
-          type="select"
-          value={item.status || 'active'}
-          onChange={(value) => onItemChange({ ...item, status: value })}
-          options={statusOptions}
-        />
+        <div className="mb-1 d-flex justify-content-between align-items-center">
+          <label className="form-label mb-0">Статус</label>
+        </div>
+        <div className="btn-group w-100" role="group" aria-label="Статус ноды">
+          <button
+            type="button"
+            className={`btn ${item.status === 'active' || !item.status ? 'btn-success' : 'btn-outline-success'}`}
+            onClick={() => onItemChange({ ...item, status: 'active' })}
+          >
+            Активен
+          </button>
+          <button
+            type="button"
+            className={`btn ${item.status === 'inactive' ? 'btn-danger' : 'btn-outline-danger'}`}
+            onClick={() => onItemChange({ ...item, status: 'inactive' })}
+          >
+            Неактивен
+          </button>
+        </div>
       </div>
 
       {/* Текущие платежи */}