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

refactor: Update BillingManager UI for better readability and consistency, including larger icons, improved card layouts, and enhanced button styles.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m0s
Details

Browse Source
This commit is contained in:
denozord
2025-12-06 03:10:36 +07:00
parent e086d04131
commit ad75ca8ff5
1 changed files with 32 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/BillingManager.jsx
+32 -38
View File
@@ -494,55 +494,49 @@ function BillingManager() {
</div>
)}
{/* Компактная статистика */}
{/* Статистика */}
<div className="row g-3 mb-4">
<div className="col-md-4">
<div className="card">
<div className="card-body py-3">
<div className="d-flex align-items-center">
<span className="avatar avatar-md me-3 bg-blue-lt text-blue border-0">
<IconCurrencyDollar size={24} />
</span>
<div>
<div className="h4 mb-0 fw-bold">
{formatCurrencyInRUB(totalMonthlyCosts, 'RUB')}
</div>
<div className="text-muted small">в месяц</div>
<div className="card h-100">
<div className="card-body d-flex align-items-center">
<span className="avatar avatar-lg me-3 bg-blue-lt text-blue border-0">
<IconCurrencyDollar size={32} />
</span>
<div>
<div className="h3 mb-0 fw-bold">
{formatCurrencyInRUB(totalMonthlyCosts, 'RUB')}
</div>
<div className="text-muted small">Месячные затраты</div>
</div>
</div>
</div>
</div>
<div className="col-md-4">
<div className="card">
<div className="card-body py-3">
<div className="d-flex align-items-center">
<span className={`avatar avatar-md me-3 ${overduePayments.length > 0 ? 'bg-red-lt text-red' : 'bg-green-lt text-green'} border-0`}>
<IconAlertTriangle size={24} />
</span>
<div>
<div className="h4 mb-0 fw-bold">
{overduePayments.length}
</div>
<div className="text-muted small">просрочено</div>
<div className="card h-100">
<div className="card-body d-flex align-items-center">
<span className={`avatar avatar-lg me-3 ${overduePayments.length > 0 ? 'bg-red-lt text-red' : 'bg-green-lt text-green'} border-0`}>
<IconAlertTriangle size={32} />
</span>
<div>
<div className="h3 mb-0 fw-bold">
{overduePayments.length}
</div>
<div className="text-muted small">Просрочено платежей</div>
</div>
</div>
</div>
</div>
<div className="col-md-4">
<div className="card">
<div className="card-body py-3">
<div className="d-flex align-items-center">
<span className={`avatar avatar-md me-3 ${urgentPayments.length > 0 ? 'bg-yellow-lt text-yellow' : 'bg-azure-lt text-azure'} border-0`}>
<IconClock size={24} />
</span>
<div>
<div className="h4 mb-0 fw-bold">
{urgentPayments.length}
</div>
<div className="text-muted small">на этой неделе</div>
<div className="card h-100">
<div className="card-body d-flex align-items-center">
<span className={`avatar avatar-lg me-3 ${urgentPayments.length > 0 ? 'bg-yellow-lt text-yellow' : 'bg-azure-lt text-azure'} border-0`}>
<IconClock size={32} />
</span>
<div>
<div className="h3 mb-0 fw-bold">
{urgentPayments.length}
</div>
<div className="text-muted small">Оплата на этой неделе</div>
</div>
</div>
</div>
@@ -596,8 +590,8 @@ function BillingManager() {
</div>
<div className="card-actions">
<button className="btn btn-primary btn-sm" onClick={handleAddItem}>
<IconPlus size={16} className="me-1" />
<button className="btn btn-primary" onClick={handleAddItem}>
<IconPlus size={18} className="me-1" />
Добавить
</button>
</div>
@@ -766,13 +760,13 @@ function BillingManager() {
</h3>
<div className="card-actions">
<button
className="btn btn-primary btn-sm"
className="btn btn-primary"
onClick={() => {
setPaymentDraft({ serverId: '', date: '', amount: 0, currency: 'USD', note: '' });
setShowPaymentModal(true);
}}
>
<IconPlus size={16} className="me-1" />
<IconPlus size={18} className="me-1" />
Добавить
</button>
</div>