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

refactor(BillingManager): improve layout and styling of subscription section for better user interaction and visual consistency
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m59s
Details

Browse Source
This commit is contained in:
denozord
2026-02-16 21:43:48 +07:00
parent 3dbdb6f794
commit 915304f800
1 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/BillingManager.jsx
+19 -19
View File
@@ -688,15 +688,15 @@ function BillingManager() {
{/* Основная секция: Подписки */} {/* Основная секция: Подписки */}
{activeTab === 'subscriptions' && ( {activeTab === 'subscriptions' && (
<div className="card"> <div className="card">
<div className="card-header"> <div className="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
<div className="d-flex align-items-center gap-3 flex-grow-1"> <h3 className="card-title mb-0">
<h3 className="card-title mb-0"> Подписки
Подписки <span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span>
<span className="badge bg-blue-lt text-blue ms-2">{filteredData.length}</span> </h3>
</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"> <span className="input-icon-addon">
<IconSearch size={16} /> <IconSearch size={16} />
</span> </span>
@@ -710,21 +710,21 @@ function BillingManager() {
</div> </div>
{/* Быстрые фильтры */} {/* Быстрые фильтры */}
<div className="d-flex gap-1"> <div className="btn-group btn-group-sm" role="group">
<button <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); }} onClick={() => { setFilterUrgency(''); setCurrentPage(1); }}
> >
Все Все
</button> </button>
<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); }} onClick={() => { setFilterUrgency('overdue'); setCurrentPage(1); }}
> >
Просрочено Просрочено
</button> </button>
<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); }} onClick={() => { setFilterUrgency('urgent'); setCurrentPage(1); }}
> >
Срочно Срочно
@@ -734,27 +734,27 @@ function BillingManager() {
{/* Переключатель вида */} {/* Переключатель вида */}
<div className="btn-group btn-group-sm" role="group"> <div className="btn-group btn-group-sm" role="group">
<button <button
className={`btn ${viewMode === 'cards' ? 'btn-primary' : 'btn-outline-secondary'}`} className={`btn ${viewMode === 'cards' ? 'btn-outline-primary active' : 'btn-outline-secondary'}`}
onClick={() => setViewMode('cards')} onClick={() => setViewMode('cards')}
title="Карточки" title="Карточки"
> >
<IconLayoutGrid size={16} /> <IconLayoutGrid size={16} />
</button> </button>
<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')} onClick={() => setViewMode('table')}
title="Таблица" title="Таблица"
> >
<IconList size={16} /> <IconList size={16} />
</button> </button>
</div> </div>
</div>
<div className="card-actions"> <div className="card-actions">
<button className="btn btn-primary" onClick={handleAddItem}> <button className="btn btn-primary btn-sm" onClick={handleAddItem}>
<IconPlus size={18} className="me-1" /> <IconPlus size={16} className="me-1" />
Добавить Добавить
</button> </button>
</div>
</div> </div>
</div> </div>