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

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

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