From 93f52f1ae15e8bf20c3f95a045cca67ff66941dd Mon Sep 17 00:00:00 2001
From: Sven Carstensen <sven.carstensen@appcreation.de>
Date: Tue, 17 Mar 2026 09:00:19 +0100
Subject: [PATCH] style: Display invoice statistics in a table layout

- Replace stat cards with table layout
- Keep consistent text size with rest of UI
- Align values to the right for better readability
---
 frontend/src/pages/InvoiceManagementPage.tsx | 58 +++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/InvoiceManagementPage.tsx b/frontend/src/pages/InvoiceManagementPage.tsx
index 2233363..49972a1 100644
--- a/frontend/src/pages/InvoiceManagementPage.tsx
+++ b/frontend/src/pages/InvoiceManagementPage.tsx
@@ -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>