From e8513125b95d7ada83387293c9a1d1b0df7b67dd Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Mon, 8 Jun 2026 14:03:58 -0400
Subject: [PATCH] fix: lock company/email fields on sent/paid invoices

Company dropdown and Email To input only editable on draft invoices.
Sent and paid invoices show read-only text values instead.
Applied to both popup (embedded) and standalone page views.

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

diff --git a/src/pages/team/TeamInvoiceDetail.jsx b/src/pages/team/TeamInvoiceDetail.jsx
index f049098..ee348c2 100644
--- a/src/pages/team/TeamInvoiceDetail.jsx
+++ b/src/pages/team/TeamInvoiceDetail.jsx
@@ -400,13 +400,19 @@ export function TeamInvoiceDetailPanel({
           </div>
           <div>
             <div style={F}>Company</div>
-            <select className="input" style={{ margin: 0 }} value={invoice.company_id || ''} onChange={e => handleCompanyChange(e.target.value)} disabled={saving}>
-              {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
-            </select>
+            {invoice.status === 'draft'
+              ? <select className="input" style={{ margin: 0 }} value={invoice.company_id || ''} onChange={e => handleCompanyChange(e.target.value)} disabled={saving}>
+                  {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+                </select>
+              : <div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{company?.name || '—'}</div>
+            }
           </div>
           <div>
             <div style={F}>Email To</div>
-            <input type="email" className="input" style={{ margin: 0 }} value={emailRecipient} onChange={e => setEmailRecipient(e.target.value)} onBlur={handleEmailBlur} placeholder="client@example.com" disabled={saving} />
+            {invoice.status === 'draft'
+              ? <input type="email" className="input" style={{ margin: 0 }} value={emailRecipient} onChange={e => setEmailRecipient(e.target.value)} onBlur={handleEmailBlur} placeholder="client@example.com" disabled={saving} />
+              : <div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{invoice.invoice_email || emailRecipient || '—'}</div>
+            }
           </div>
           <div>
             <div style={F}>Total</div>
@@ -516,28 +522,19 @@ export function TeamInvoiceDetailPanel({
             <div className="detail-item"><label>Terms</label><p>Net 30</p></div>
             <div className="detail-item">
               <label>Company</label>
-              <select
-                className="input"
-                style={{ margin: 0 }}
-                value={invoice.company_id || ''}
-                onChange={e => handleCompanyChange(e.target.value)}
-                disabled={saving}
-              >
-                {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
-              </select>
+              {invoice.status === 'draft'
+                ? <select className="input" style={{ margin: 0 }} value={invoice.company_id || ''} onChange={e => handleCompanyChange(e.target.value)} disabled={saving}>
+                    {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+                  </select>
+                : <p>{company?.name || '—'}</p>
+              }
             </div>
             <div className="detail-item">
               <label>Email To</label>
-              <input
-                type="email"
-                className="input"
-                style={{ margin: 0 }}
-                value={emailRecipient}
-                onChange={e => setEmailRecipient(e.target.value)}
-                onBlur={handleEmailBlur}
-                placeholder="client@example.com"
-                disabled={saving}
-              />
+              {invoice.status === 'draft'
+                ? <input type="email" className="input" style={{ margin: 0 }} value={emailRecipient} onChange={e => setEmailRecipient(e.target.value)} onBlur={handleEmailBlur} placeholder="client@example.com" disabled={saving} />
+                : <p>{invoice.invoice_email || emailRecipient || '—'}</p>
+              }
             </div>
             <div className="detail-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 400, color: 'var(--accent)' }}>${Number(invoice.total).toFixed(2)}</p></div>
             {invoice.paid_at && (