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

style: Improve invoice statistics layout with vertical spacing

Browse Source 
- Change stats grid to vertical list layout
- Add more spacing between stat cards
- Display value and label horizontally aligned with proper gap
This commit is contained in:
Sven Carstensen
2026-03-17 08:59:08 +01:00
parent eb0f921464
commit ce76a29038
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -158,32 +158,34 @@ export default function InvoiceManagementPage() {
</div> </div>
</div> </div>
<div className="stats-grid"> <div className="stats-list" style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
<div className="stat-card"> <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
<span className="stat-card__value">{invoices.length}</span> <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
<span className="stat-card__label">Gesamtrechnungen</span> {invoices.length}
</span>
<span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Gesamtrechnungen</span>
</div> </div>
<div className="stat-card"> <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
<span className="stat-card__value"> <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
{invoices.filter((i) => i.status === "PAID").length} {invoices.filter((i) => i.status === "PAID").length}
</span> </span>
<span className="stat-card__label">Bezahlt</span> <span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Bezahlt</span>
</div> </div>
<div className="stat-card"> <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
<span className="stat-card__value"> <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
{invoices.filter((i) => i.status === "OVERDUE").length} {invoices.filter((i) => i.status === "OVERDUE").length}
</span> </span>
<span className="stat-card__label">Überfällig</span> <span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Überfällig</span>
</div> </div>
<div className="stat-card"> <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
<span className="stat-card__value"> <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
{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> </span>
<span className="stat-card__label">Gesamtumsatz</span> <span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Gesamtumsatz</span>
</div> </div>
</div> </div>
</section> </section>