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>
)} )}
{/* Компактная статистика */} {/* Статистика */}
<div className="row g-3 mb-4"> <div className="row g-3 mb-4">
<div className="col-md-4"> <div className="col-md-4">
<div className="card"> <div className="card h-100">
<div className="card-body py-3"> <div className="card-body d-flex align-items-center">
<div className="d-flex align-items-center"> <span className="avatar avatar-lg me-3 bg-blue-lt text-blue border-0">
<span className="avatar avatar-md me-3 bg-blue-lt text-blue border-0"> <IconCurrencyDollar size={32} />
<IconCurrencyDollar size={24} /> </span>
</span> <div>
<div> <div className="h3 mb-0 fw-bold">
<div className="h4 mb-0 fw-bold"> {formatCurrencyInRUB(totalMonthlyCosts, 'RUB')}
{formatCurrencyInRUB(totalMonthlyCosts, 'RUB')}
</div>
<div className="text-muted small">в месяц</div>
</div> </div>
<div className="text-muted small">Месячные затраты</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="card"> <div className="card h-100">
<div className="card-body py-3"> <div className="card-body d-flex align-items-center">
<div className="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`}>
<span className={`avatar avatar-md me-3 ${overduePayments.length > 0 ? 'bg-red-lt text-red' : 'bg-green-lt text-green'} border-0`}> <IconAlertTriangle size={32} />
<IconAlertTriangle size={24} /> </span>
</span> <div>
<div> <div className="h3 mb-0 fw-bold">
<div className="h4 mb-0 fw-bold"> {overduePayments.length}
{overduePayments.length}
</div>
<div className="text-muted small">просрочено</div>
</div> </div>
<div className="text-muted small">Просрочено платежей</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<div className="card"> <div className="card h-100">
<div className="card-body py-3"> <div className="card-body d-flex align-items-center">
<div className="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`}>
<span className={`avatar avatar-md me-3 ${urgentPayments.length > 0 ? 'bg-yellow-lt text-yellow' : 'bg-azure-lt text-azure'} border-0`}> <IconClock size={32} />
<IconClock size={24} /> </span>
</span> <div>
<div> <div className="h3 mb-0 fw-bold">
<div className="h4 mb-0 fw-bold"> {urgentPayments.length}
{urgentPayments.length}
</div>
<div className="text-muted small">на этой неделе</div>
</div> </div>
<div className="text-muted small">Оплата на этой неделе</div>
</div> </div>
</div> </div>
</div> </div>
@@ -596,8 +590,8 @@ function BillingManager() {
</div> </div>
<div className="card-actions"> <div className="card-actions">
<button className="btn btn-primary btn-sm" onClick={handleAddItem}> <button className="btn btn-primary" onClick={handleAddItem}>
<IconPlus size={16} className="me-1" /> <IconPlus size={18} className="me-1" />
Добавить Добавить
</button> </button>
</div> </div>
@@ -766,13 +760,13 @@ function BillingManager() {
</h3> </h3>
<div className="card-actions"> <div className="card-actions">
<button <button
className="btn btn-primary btn-sm" className="btn btn-primary"
onClick={() => { onClick={() => {
setPaymentDraft({ serverId: '', date: '', amount: 0, currency: 'USD', note: '' }); setPaymentDraft({ serverId: '', date: '', amount: 0, currency: 'USD', note: '' });
setShowPaymentModal(true); setShowPaymentModal(true);
}} }}
> >
<IconPlus size={16} className="me-1" /> <IconPlus size={18} className="me-1" />
Добавить Добавить
</button> </button>
</div> </div>