From a8bce851a94d1a533623472e3a2c78b4fc73125e Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Wed, 13 May 2026 12:14:49 -0400
Subject: [PATCH] Rearrange client invoice card layout

Line 1: invoice name + issued date / item count
Line 2: status badge + overdue flag + price
Right: Download PDF button

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

diff --git a/src/pages/client/MyInvoices.jsx b/src/pages/client/MyInvoices.jsx
index 557e8ed..52dd15d 100644
--- a/src/pages/client/MyInvoices.jsx
+++ b/src/pages/client/MyInvoices.jsx
@@ -73,25 +73,24 @@ export default function MyInvoices() {
           {invoices.map(inv => {
             const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
             return (
-              <div key={inv.id} className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
+              <div key={inv.id} className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 16 }}>
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', marginBottom: 4 }}>{inv.invoice_number}</div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                    Issued {new Date(inv.invoice_date).toLocaleDateString()} · Due{' '}
-                    <span style={{ color: isOverdue ? 'var(--danger)' : 'inherit' }}>
-                      {new Date(inv.due_date).toLocaleDateString()}
+                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', marginBottom: 4 }}>
+                    {inv.invoice_number}
+                    <span style={{ fontWeight: 400, fontSize: 12, color: 'var(--text-muted)', marginLeft: 10 }}>
+                      Issued {new Date(inv.invoice_date).toLocaleDateString()}
+                      {inv.items?.length > 0 && ` · ${inv.items.length} item${inv.items.length !== 1 ? 's' : ''}`}
                     </span>
-                    {isOverdue && ' · Overdue'}
-                    {inv.items?.length > 0 && ` · ${inv.items.length} item${inv.items.length !== 1 ? 's' : ''}`}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span>
+                    {isOverdue && <span style={{ fontSize: 12, color: 'var(--danger)' }}>Overdue</span>}
+                    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</span>
                   </div>
                 </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>
-                </div>
+                <LoadingButton className="btn btn-outline btn-sm" loading={generatingInvoiceId === inv.id} disabled={Boolean(generatingInvoiceId)} loadingText="Generating..." onClick={() => handleDownload(inv)} style={{ flexShrink: 0 }}>
+                  Download PDF
+                </LoadingButton>
               </div>
             );
           })}