From ce76a290384efe39bb75d3ea29bdaea74f0ed375 Mon Sep 17 00:00:00 2001
From: Sven Carstensen <sven.carstensen@appcreation.de>
Date: Tue, 17 Mar 2026 08:59:08 +0100
Subject: [PATCH] style: Improve invoice statistics layout with vertical
 spacing

- Change stats grid to vertical list layout
- Add more spacing between stat cards
- Display value and label horizontally aligned with proper gap
---
 frontend/src/pages/InvoiceManagementPage.tsx | 28 +++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/InvoiceManagementPage.tsx b/frontend/src/pages/InvoiceManagementPage.tsx
index 2233363..d9383b5 100644
--- a/frontend/src/pages/InvoiceManagementPage.tsx
+++ b/frontend/src/pages/InvoiceManagementPage.tsx
@@ -158,32 +158,34 @@ 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 className="stats-list" style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
+          <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
+            <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
+              {invoices.length}
+            </span>
+            <span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Gesamtrechnungen</span>
           </div>
-          <div className="stat-card">
-            <span className="stat-card__value">
+          <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
+            <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
               {invoices.filter((i) => i.status === "PAID").length}
             </span>
-            <span className="stat-card__label">Bezahlt</span>
+            <span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Bezahlt</span>
           </div>
-          <div className="stat-card">
-            <span className="stat-card__value">
+          <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
+            <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
               {invoices.filter((i) => i.status === "OVERDUE").length}
             </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 className="stat-card">
-            <span className="stat-card__value">
+          <div className="stat-card" style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "1.25rem" }}>
+            <span className="stat-card__value" style={{ fontSize: "2rem", fontWeight: 700, minWidth: "100px" }}>
               {formatCurrency(
                 invoices
                   .filter((i) => i.status === "PAID")
                   .reduce((sum, i) => sum + i.totalAmount, 0)
               )}
             </span>
-            <span className="stat-card__label">Gesamtumsatz</span>
+            <span className="stat-card__label" style={{ fontSize: "1rem", color: "var(--text-muted)" }}>Gesamtumsatz</span>
           </div>
         </div>
       </section>