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> </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>
{invoices.filter((i) => i.status === "PAID").length} <tr>
</span> <td style={{ fontWeight: 500 }}>Bezahlt</td>
<span className="stat-card__label">Bezahlt</span> <td style={{ textAlign: "right" }}>
</div> {invoices.filter((i) => i.status === "PAID").length}
<div className="stat-card"> </td>
<span className="stat-card__value"> </tr>
{invoices.filter((i) => i.status === "OVERDUE").length} <tr>
</span> <td style={{ fontWeight: 500 }}>Überfällig</td>
<span className="stat-card__label">Überfällig</span> <td style={{ textAlign: "right" }}>
</div> {invoices.filter((i) => i.status === "OVERDUE").length}
<div className="stat-card"> </td>
<span className="stat-card__value"> </tr>
{formatCurrency( <tr>
invoices <td style={{ fontWeight: 500 }}>Gesamtumsatz</td>
.filter((i) => i.status === "PAID") <td style={{ textAlign: "right" }}>
.reduce((sum, i) => sum + i.totalAmount, 0) {formatCurrency(
)} invoices
</span> .filter((i) => i.status === "PAID")
<span className="stat-card__label">Gesamtumsatz</span> .reduce((sum, i) => sum + i.totalAmount, 0)
</div> )}
</td>
</tr>
</tbody>
</table>
</div> </div>
</section> </section>
</div> </div>