denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Replace status selection in BillingManager forms with button group for improved user interaction and visual clarity, enhancing the overall UI experience.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m35s
Details

Browse Source
This commit is contained in:
denozord
2025-12-01 16:28:40 +07:00
parent ded3d8c618
commit e73d5e2721
1 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/BillingManager.jsx
+38 -26
View File
@@ -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>
{/* Текущие платежи */}