From ed30bb3a18198297d86d30718760c99302e36934 Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Wed, 13 May 2026 12:12:19 -0400
Subject: [PATCH] Restore summary stats and price to client invoice page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/client/MyInvoices.jsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/pages/client/MyInvoices.jsx b/src/pages/client/MyInvoices.jsx
index 34d7e22..557e8ed 100644
--- a/src/pages/client/MyInvoices.jsx
+++ b/src/pages/client/MyInvoices.jsx
@@ -33,6 +33,10 @@ export default function MyInvoices() {
     }
   };
 
+  const outstanding = invoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total), 0);
+  const paid = invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0);
+  const overdueCount = invoices.filter(inv => inv.status !== 'paid' && new Date(inv.due_date) < new Date()).length;
+
   return (
     <Layout>
       <div className="page-header">
@@ -42,6 +46,21 @@ export default function MyInvoices() {
         </div>
       </div>
 
+      <div className="stats-grid" style={{ marginBottom: 24 }}>
+        <div className="stat-card stat-card-highlight">
+          <div className="stat-value" style={{ fontSize: 22 }}>${outstanding.toFixed(2)}</div>
+          <div className="stat-label">Outstanding</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22 }}>${paid.toFixed(2)}</div>
+          <div className="stat-label">Paid</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22, color: overdueCount > 0 ? 'var(--danger)' : undefined }}>{overdueCount}</div>
+          <div className="stat-label">Overdue</div>
+        </div>
+      </div>
+
       {loading ? (
         <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
       ) : invoices.length === 0 ? (
@@ -68,6 +87,7 @@ export default function MyInvoices() {
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
                   <span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span>
+                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</div>
                   <LoadingButton className="btn btn-outline btn-sm" loading={generatingInvoiceId === inv.id} disabled={Boolean(generatingInvoiceId)} loadingText="Generating..." onClick={() => handleDownload(inv)}>
                     Download PDF
                   </LoadingButton>