Assecutor/muh
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Display invoice statistics in a table layout

Browse Source 
- Replace stat cards with table layout
- Keep consistent text size with rest of UI
- Align values to the right for better readability
This commit is contained in:
Sven Carstensen
2026-03-17 09:00:19 +01:00
parent b9919828e4
commit 93f52f1ae1
1 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/pages/InvoiceManagementPage.tsx
View File

@@ -158,33 +158,37 @@ export default function InvoiceManagementPage() {
</div>
</div>
<div className="stats-grid">
<div className="stat-card">
<span className="stat-card__value">{invoices.length}</span>
<span className="stat-card__label">Gesamtrechnungen</span>
</div>
<div className="stat-card">
<span className="stat-card__value">
{invoices.filter((i) => i.status === "PAID").length}
</span>
<span className="stat-card__label">Bezahlt</span>
</div>
<div className="stat-card">
<span className="stat-card__value">
{invoices.filter((i) => i.status === "OVERDUE").length}
</span>
<span className="stat-card__label">Überfällig</span>
</div>
<div className="stat-card">
<span className="stat-card__value">
{formatCurrency(
invoices
.filter((i) => i.status === "PAID")
.reduce((sum, i) => sum + i.totalAmount, 0)
)}
</span>
<span className="stat-card__label">Gesamtumsatz</span>
</div>
<div className="table-shell">
<table className="data-table">
<tbody>
<tr>
<td style={{ fontWeight: 500 }}>Gesamtrechnungen</td>
<td style={{ textAlign: "right" }}>{invoices.length}</td>
</tr>
<tr>
<td style={{ fontWeight: 500 }}>Bezahlt</td>
<td style={{ textAlign: "right" }}>
{invoices.filter((i) => i.status === "PAID").length}
</td>
</tr>
<tr>
<td style={{ fontWeight: 500 }}>Überfällig</td>
<td style={{ textAlign: "right" }}>
{invoices.filter((i) => i.status === "OVERDUE").length}
</td>
</tr>
<tr>
<td style={{ fontWeight: 500 }}>Gesamtumsatz</td>
<td style={{ textAlign: "right" }}>
{formatCurrency(
invoices
.filter((i) => i.status === "PAID")
.reduce((sum, i) => sum + i.totalAmount, 0)
)}
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>