Krao Hasanee
6e4e99c33c
All invoice popup modals (team invoice, sub-invoice team, client invoice, external sub-invoice) now share InvoiceDetailPopup + SubcontractorInvoiceDetailView. Same overlay, header, scroll body, footer action row — just different data per role. - New InvoiceDetailPopup component (overlay shell, header, scrollable body, footer) - SubcontractorInvoiceDetailView: respects item._inferredType if pre-set - ClientInvoiceModal: uses shared components, adds sortable headers - TeamInvoiceDetailPanel embedded: uses shared components, keeps edit-dates/email/company - TeamInvoices sub-invoice popup: uses shared components, cleans descriptions - ExternalMyInvoices popup: uses shared components, fixes detailSort vars (was unused) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
341 lines
22 KiB
React
341 lines
22 KiB
React
import { useState, useEffect, useMemo, useRef } from 'react';
|
|
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
import { Link } from 'react-router-dom';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Layout from '../../components/Layout';
|
|
import LoadingButton from '../../components/LoadingButton';
|
|
import SortTh from '../../components/SortTh';
|
|
import StatusBadge from '../../components/StatusBadge';
|
|
import { supabase } from '../../lib/supabase';
|
|
import { generateInvoicePDF, generateReceiptPDF } from '../../lib/invoice';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import { useSortable } from '../../hooks/useSortable';
|
|
import InvoiceDetailPopup from '../../components/InvoiceDetailPopup';
|
|
import SubcontractorInvoiceDetailView from '../../components/SubcontractorInvoiceDetailView';
|
|
|
|
const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
|
|
const invoiceStatusLabel = (status) => {
|
|
if (status === 'sent') return 'Invoiced';
|
|
return status ? status.charAt(0).toUpperCase() + status.slice(1) : '—';
|
|
};
|
|
|
|
function ClientFinanceStatCard({ label, value, sub, iconBg, iconColor, iconPath }) {
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', minHeight: 120 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
|
|
<div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 5 }}>{label}</div>
|
|
<div style={{ width: 27, height: 27, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: iconPath }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: 30, fontWeight: 400, color: 'var(--text-primary)', letterSpacing: -0.5, lineHeight: 1.1 }}>{value}</div>
|
|
{sub ? <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 5 }}>{sub}</div> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ClientFinanceTooltip({ active, payload, label, year }) {
|
|
if (!active || !payload?.length) return null;
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '10px 14px', fontSize: 12 }}>
|
|
<div style={{ fontWeight: 600, marginBottom: 6, color: 'var(--text-primary)' }}>{label} {year}</div>
|
|
{payload.map(p => (
|
|
<div key={p.dataKey} style={{ color: p.color, marginBottom: 2 }}>{p.name}: <strong>${Number(p.value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong></div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ClientInvoiceModal({ invoice, onClose }) {
|
|
const navigate = useNavigate();
|
|
const [downloading, setDownloading] = useState('');
|
|
const { sortKey, sortDir, toggle, sort } = useSortable('description');
|
|
if (!invoice) return null;
|
|
|
|
const items = invoice.items || [];
|
|
const company = invoice.company || null;
|
|
const isOverdue = invoice.status !== 'paid' && invoice.due_date && new Date(invoice.due_date) < new Date();
|
|
const total = Number(invoice.total || 0);
|
|
|
|
const handleDownloadInvoice = async () => {
|
|
if (downloading) return;
|
|
setDownloading('invoice');
|
|
try {
|
|
await generateInvoicePDF(invoice, company, items);
|
|
} finally {
|
|
setDownloading('');
|
|
}
|
|
};
|
|
|
|
const handleDownloadReceipt = async () => {
|
|
if (downloading) return;
|
|
setDownloading('receipt');
|
|
try {
|
|
await generateReceiptPDF(invoice, company, items);
|
|
} finally {
|
|
setDownloading('');
|
|
}
|
|
};
|
|
|
|
const openPay = () => {
|
|
onClose?.();
|
|
navigate(`/pay/${encodeURIComponent(invoice.invoice_number)}`);
|
|
};
|
|
|
|
const baseItems = [...items].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
|
|
const tableItems = sort(baseItems.map(item => ({
|
|
...item,
|
|
_inferredType: item.submission_id
|
|
? { label: 'Revision', badgeClass: 'badge-client_revision' }
|
|
: { label: 'New', badgeClass: 'badge-initial' },
|
|
})), (item, key) => {
|
|
if (key === 'type') return item._inferredType?.label || '';
|
|
if (key === 'description') return item.description || '';
|
|
if (key === 'quantity') return Number(item.quantity || 0);
|
|
if (key === 'unit_price') return Number(item.unit_price || 0);
|
|
if (key === 'line_total') return Number(item.quantity || 0) * Number(item.unit_price || 0);
|
|
return '';
|
|
});
|
|
|
|
return (
|
|
<InvoiceDetailPopup
|
|
title={invoice.invoice_number}
|
|
subtitle={company?.name || invoice.bill_to}
|
|
headerRight={<StatusBadge status={statusColor[invoice.status] || 'not_started'} label={`${invoiceStatusLabel(invoice.status)}${isOverdue ? ' · Overdue' : ''}`} />}
|
|
onClose={onClose}
|
|
blockClose={Boolean(downloading)}
|
|
footerActions={<>
|
|
{invoice.status === 'sent' && <button className="btn btn-outline" onClick={openPay}>Pay Invoice</button>}
|
|
<LoadingButton className="btn btn-outline" loading={downloading === 'invoice'} disabled={Boolean(downloading)} loadingText="Generating…" onClick={handleDownloadInvoice}>Download Invoice</LoadingButton>
|
|
{invoice.status === 'paid' && <LoadingButton className="btn btn-outline" loading={downloading === 'receipt'} disabled={Boolean(downloading)} loadingText="Generating…" onClick={handleDownloadReceipt}>Download Receipt</LoadingButton>}
|
|
<button className="btn btn-outline" onClick={onClose}>Close</button>
|
|
</>}
|
|
>
|
|
<SubcontractorInvoiceDetailView
|
|
leftCardTitle="Bill To"
|
|
leftCardBody={<>
|
|
<div style={{ fontSize: 15, fontWeight: 400 }}>{invoice.bill_to || company?.name || '—'}</div>
|
|
{company?.id && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Link to={`/company/${company.id}`} className="btn btn-outline btn-sm" onClick={onClose}>View Company</Link>
|
|
</div>
|
|
)}
|
|
</>}
|
|
rightCardTitle="Invoice Details"
|
|
rightCardBody={
|
|
<div className="invoice-detail-meta-grid">
|
|
<div className="invoice-detail-meta-item"><label>Invoice Date</label><p>{invoice.invoice_date ? new Date(invoice.invoice_date).toLocaleDateString() : '—'}</p></div>
|
|
<div className="invoice-detail-meta-item"><label>Due Date</label><p style={{ color: isOverdue ? 'var(--danger)' : 'inherit' }}>{invoice.due_date ? new Date(invoice.due_date).toLocaleDateString() : '—'}</p></div>
|
|
<div className="invoice-detail-meta-item"><label>Terms</label><p>Net 30</p></div>
|
|
<div className="invoice-detail-meta-item"><label>Status</label><p><StatusBadge status={statusColor[invoice.status] || 'not_started'} label={invoiceStatusLabel(invoice.status)} /></p></div>
|
|
<div className="invoice-detail-meta-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 400, color: 'var(--accent)' }}>${total.toFixed(2)}</p></div>
|
|
{invoice.paid_at && <div className="invoice-detail-meta-item"><label>Paid On</label><p style={{ color: 'var(--success, #16a34a)' }}>{new Date(invoice.paid_at).toLocaleDateString()}</p></div>}
|
|
</div>
|
|
}
|
|
sortKey={sortKey}
|
|
sortDir={sortDir}
|
|
onSort={toggle}
|
|
items={tableItems}
|
|
notes={invoice.notes}
|
|
total={total}
|
|
/>
|
|
</InvoiceDetailPopup>
|
|
);
|
|
}
|
|
|
|
export default function MyInvoices() {
|
|
const { currentUser } = useAuth();
|
|
const companyIds = (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : []))
|
|
.map(company => company?.id)
|
|
.filter(Boolean);
|
|
|
|
const [invoices, setInvoices] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeInvoice, setActiveInvoice] = useState(null);
|
|
const [yearFilter, setYearFilter] = useState(String(new Date().getFullYear()));
|
|
const [companyFilter, setCompanyFilter] = useState('all');
|
|
const [filterMenuOpen, setFilterMenuOpen] = useState(false);
|
|
const filterMenuRef = useRef(null);
|
|
const { sortKey, sortDir, toggle, sort } = useSortable('invoice_date', 'desc');
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
if (companyIds.length === 0) {
|
|
setInvoices([]);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
const { data } = await supabase
|
|
.from('invoices')
|
|
.select('*, company:companies(id, name), items:invoice_items(*)')
|
|
.in('company_id', companyIds)
|
|
.order('created_at', { ascending: false });
|
|
setInvoices((data || []).filter(inv => inv.status !== 'draft'));
|
|
setLoading(false);
|
|
}
|
|
load();
|
|
}, [currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
useEffect(() => {
|
|
if (!filterMenuOpen) return;
|
|
function onDocClick(e) {
|
|
if (filterMenuRef.current && !filterMenuRef.current.contains(e.target)) setFilterMenuOpen(false);
|
|
}
|
|
document.addEventListener('mousedown', onDocClick);
|
|
return () => document.removeEventListener('mousedown', onDocClick);
|
|
}, [filterMenuOpen]);
|
|
|
|
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
|
const invoiceYears = [...new Set(invoices.map(i => i.invoice_date?.slice(0, 4)).filter(Boolean))].sort((a, b) => b.localeCompare(a));
|
|
const availableCompanyOptions = (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : []))
|
|
.filter(company => company?.id && invoices.some(inv => inv.company_id === company.id))
|
|
.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
|
|
const chartYear = Number(yearFilter) || new Date().getFullYear();
|
|
const filteredInvoices = invoices.filter(inv => {
|
|
if (yearFilter !== 'all' && inv.invoice_date?.slice(0, 4) !== yearFilter) return false;
|
|
if (companyFilter !== 'all' && inv.company_id !== companyFilter) return false;
|
|
return true;
|
|
});
|
|
const chartData = useMemo(() => MONTHS.map((month, mi) => {
|
|
const paidAmt = filteredInvoices.filter(i => i.status === 'paid' && new Date(i.invoice_date).getFullYear() === chartYear && new Date(i.invoice_date).getMonth() === mi).reduce((s, i) => s + Number(i.total || 0), 0);
|
|
const outAmt = filteredInvoices.filter(i => i.status === 'sent' && new Date(i.invoice_date).getFullYear() === chartYear && new Date(i.invoice_date).getMonth() === mi).reduce((s, i) => s + Number(i.total || 0), 0);
|
|
return { month, Paid: +paidAmt.toFixed(2), Outstanding: +outAmt.toFixed(2) };
|
|
}), [filteredInvoices, chartYear]);
|
|
|
|
const outstanding = filteredInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0);
|
|
const paid = filteredInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0);
|
|
const overdueCount = filteredInvoices.filter(inv => inv.status !== 'paid' && inv.due_date && new Date(inv.due_date) < new Date()).length;
|
|
const paidCount = filteredInvoices.filter(i => i.status === 'paid').length;
|
|
|
|
const sortedInvoices = sort(filteredInvoices, (inv, key) => {
|
|
if (key === 'invoice_date' || key === 'due_date') return new Date(inv[key] || 0).getTime();
|
|
if (key === 'total') return Number(inv.total || 0);
|
|
if (key === 'company') return inv.company?.name || '';
|
|
return inv[key] || '';
|
|
});
|
|
|
|
return (
|
|
<Layout loading={loading}>
|
|
<div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 24, flexShrink: 0 }}>
|
|
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Invoice Overview</span>
|
|
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{chartYear}</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={160}>
|
|
<AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="clientPaidGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#4ade80" stopOpacity={0.25}/><stop offset="95%" stopColor="#4ade80" stopOpacity={0}/></linearGradient>
|
|
<linearGradient id="clientOutGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#60a5fa" stopOpacity={0.2}/><stop offset="95%" stopColor="#60a5fa" stopOpacity={0}/></linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
|
|
<XAxis dataKey="month" tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} />
|
|
<YAxis tick={{ fontSize: 11, fill: 'var(--text-muted)' }} axisLine={false} tickLine={false} tickFormatter={v => `$${v >= 1000 ? (v / 1000).toFixed(0) + 'k' : v}`} width={45} />
|
|
<Tooltip content={<ClientFinanceTooltip year={chartYear} />} />
|
|
<Legend wrapperStyle={{ fontSize: 11, paddingTop: 8 }} />
|
|
<Area type="monotone" dataKey="Paid" stroke="#4ade80" strokeWidth={2} fill="url(#clientPaidGrad)" dot={false} activeDot={{ r: 4 }} />
|
|
<Area type="monotone" dataKey="Outstanding" stroke="#60a5fa" strokeWidth={2} fill="url(#clientOutGrad)" dot={false} activeDot={{ r: 4 }} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignContent: 'start' }}>
|
|
<ClientFinanceStatCard label="Paid" value={`$${paid.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`} sub={`${paidCount} settled`} iconBg="rgba(74,222,128,0.15)" iconColor="#4ade80" iconPath={'<polyline points="4,12 9,17 20,6"/>'} />
|
|
<ClientFinanceStatCard label="Outstanding" value={`$${outstanding.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`} sub="ready to pay" iconBg="rgba(96,165,250,0.15)" iconColor="#60a5fa" iconPath={'<circle cx="12" cy="12" r="8"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>'} />
|
|
<ClientFinanceStatCard label="Overdue" value={overdueCount} sub={overdueCount === 1 ? 'needs attention' : 'need attention'} iconBg="rgba(239,68,68,0.15)" iconColor="#ef4444" iconPath={'<path d="M12 9v4"/><path d="M12 16h.01"/><path d="M10.29 3.86l-7.5 13A1 1 0 0 0 3.66 18h16.68a1 1 0 0 0 .87-1.5l-7.5-13a1 1 0 0 0-1.74 0z"/>'} />
|
|
<ClientFinanceStatCard label="Invoices" value={invoices.length} sub={`${companyIds.length} companies`} iconBg="rgba(245,165,35,0.15)" iconColor="#F5A523" iconPath={'<rect x="3" y="4" width="18" height="16" rx="2"/><line x1="7" y1="9" x2="17" y2="9"/><line x1="7" y1="13" x2="17" y2="13"/>'} />
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 24, marginBottom: 10, flexShrink: 0, minHeight: 'var(--btn-height)' }}>
|
|
<div style={{ marginLeft: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }} ref={filterMenuRef}>
|
|
<button className="btn btn-outline" onClick={() => setFilterMenuOpen(o => !o)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }} title="Filter invoices">
|
|
<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 4h12M4 8h8M6 12h4" /></svg>
|
|
</button>
|
|
{filterMenuOpen && (
|
|
<div className="site-header-avatar-menu" style={{ position: 'absolute', top: 'calc(100% + 4px)', right: 0, zIndex: 220, minWidth: 160 }}>
|
|
<div style={{ fontSize: 10, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--text-muted)', padding: '6px 14px 4px' }}>Year</div>
|
|
<button onClick={() => { setYearFilter('all'); setFilterMenuOpen(false); }} className="site-header-avatar-item" style={{ background: yearFilter === 'all' ? 'rgba(245,165,35,0.08)' : 'transparent', color: yearFilter === 'all' ? 'var(--accent)' : 'var(--text-primary)' }}>All Years</button>
|
|
{invoiceYears.map(year => (
|
|
<button key={year} onClick={() => { setYearFilter(year); setFilterMenuOpen(false); }} className="site-header-avatar-item" style={{ background: yearFilter === year ? 'rgba(245,165,35,0.08)' : 'transparent', color: yearFilter === year ? 'var(--accent)' : 'var(--text-primary)' }}>{year}</button>
|
|
))}
|
|
{availableCompanyOptions.length > 1 && (
|
|
<>
|
|
<div style={{ borderTop: '1px solid var(--border)', margin: '4px 0' }} />
|
|
<div style={{ fontSize: 10, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--text-muted)', padding: '4px 14px 4px' }}>Company</div>
|
|
<button onClick={() => { setCompanyFilter('all'); setFilterMenuOpen(false); }} className="site-header-avatar-item" style={{ background: companyFilter === 'all' ? 'rgba(245,165,35,0.08)' : 'transparent', color: companyFilter === 'all' ? 'var(--accent)' : 'var(--text-primary)' }}>All Companies</button>
|
|
{availableCompanyOptions.map(company => (
|
|
<button key={company.id} onClick={() => { setCompanyFilter(company.id); setFilterMenuOpen(false); }} className="site-header-avatar-item" style={{ background: companyFilter === company.id ? 'rgba(245,165,35,0.08)' : 'transparent', color: companyFilter === company.id ? 'var(--accent)' : 'var(--text-primary)' }}>{company.name}</button>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
|
|
<div style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
|
|
{filteredInvoices.length === 0 ? (
|
|
<div className="card-empty-center">No invoices</div>
|
|
) : (
|
|
<div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
|
|
<table className="table-sticky-head table-no-row-hover" style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
|
|
<colgroup>
|
|
<col style={{ width: '15%' }} />
|
|
<col style={{ width: '20%' }} />
|
|
<col style={{ width: '10%' }} />
|
|
<col style={{ width: '10%' }} />
|
|
<col style={{ width: '10%' }} />
|
|
<col style={{ width: '15%' }} />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<SortTh col="invoice_number" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Invoice #</SortTh>
|
|
<SortTh col="company" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Company</SortTh>
|
|
<SortTh col="invoice_date" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Issued</SortTh>
|
|
<SortTh col="due_date" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Due</SortTh>
|
|
<SortTh col="status" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Status</SortTh>
|
|
<SortTh col="total" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Total</SortTh>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sortedInvoices.map(inv => {
|
|
const isOverdue = inv.status !== 'paid' && inv.due_date && new Date(inv.due_date) < new Date();
|
|
return (
|
|
<tr key={inv.id}>
|
|
<td style={{ padding: '5px 0' }}>
|
|
<button type="button" className="table-link" onClick={() => setActiveInvoice(inv)}>{inv.invoice_number}</button>
|
|
</td>
|
|
<td style={{ padding: '5px 0', fontSize: 13 }}>
|
|
{inv.company?.id ? (
|
|
<Link to={`/company/${inv.company.id}`} className="table-link">
|
|
{inv.company?.name || inv.bill_to || '—'}
|
|
</Link>
|
|
) : (
|
|
inv.company?.name || inv.bill_to || '—'
|
|
)}
|
|
</td>
|
|
<td style={{ padding: '5px 0', fontSize: 12, color: 'var(--text-muted)' }}>{inv.invoice_date ? new Date(inv.invoice_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</td>
|
|
<td style={{ padding: '5px 0', fontSize: 12, color: isOverdue ? 'var(--danger)' : 'var(--text-muted)' }}>{inv.due_date ? new Date(inv.due_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</td>
|
|
<td style={{ padding: '5px 0' }}>
|
|
<StatusBadge status={statusColor[inv.status] || 'not_started'} label={invoiceStatusLabel(inv.status)} />
|
|
</td>
|
|
<td style={{ padding: '5px 0', textAlign: 'right', fontSize: 13, color: inv.status === 'paid' ? '#4ade80' : inv.status === 'sent' ? '#F5A523' : 'var(--text-primary)', fontWeight: 400 }}>${Number(inv.total || 0).toFixed(2)}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ClientInvoiceModal invoice={activeInvoice} onClose={() => setActiveInvoice(null)} />
|
|
</Layout>
|
|
);
|
|
}
|