krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Rearrange client invoice card layout

Browse Source 
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>
This commit is contained in:
Krao Hasanee
2026-05-13 12:14:49 -04:00
parent ed30bb3a18
commit a8bce851a9
1 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/client/MyInvoices.jsx
+14 -15
View File
@@ -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>
);
})}