e.target === e.currentTarget && onClose()}>

Review · {DOCTYPE_LABEL[form.document_type] || form.document_type} {form.invoice_number ? ` · ${form.invoice_number}` : ''} {invoice?.ref_id && {invoice.ref_id}}

{/* Pending supplier warning */} {supplierPending && (

⚠

{supplierRecord.name} was auto-created and is pending approval. Review in Relations before processing this invoice.

)} {/* PDF actions */} {invoice?.file_r2_key && (

View PDF ↗ {form.ai_extracted ? AI-filled : null}

)} {/* Multi-currency / RC info bar */} {form.currency && form.currency !== 'EUR' && (

{form.currency} invoice {form.exchange_rate && form.exchange_rate !== 1 ? ` · 1 ${form.currency} = €${Number(form.exchange_rate).toFixed(4)}` : ''} {form.amount_eur != null && · subtotal {fmtEur(form.amount_eur)} EUR} {form.reverse_charge ? ( BTW VERLEGD · {fmtEur(form.vat_eur)} self-assessed @ 21% ) : null}

)} {/* Invoice fields */}

Supplier

Document type

Invoice / document number

PO number

Payment reference

Currency

Invoice date

Due date

Subtotal (excl. VAT)

VAT rate

VAT amount

Total (incl. VAT)

Cost category

Business use %

Notes

</div>
          </div>

{/* Payment section */}
          <div style={{marginTop:20,paddingTop:16,borderTop:'1px solid var(--border)'}}>
            <div style={{fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:10}}>Payment</div>
            <div className="form-grid">
              <div className="field">
                <label className="field-label">Payment method</label>
                <select className="field-select" value={form.payment_method_id} onChange={f('payment_method_id')}>
                  <option value="">— not set —</option>
                  {paymentMethods.map(m => (
                    <option key={m.id} value={m.id}>{m.name}{m.account_ref ? ` (${m.account_ref})` : ''}</option>
                  ))}
                </select>
              </div>
              <div className="field">
                <label className="field-label">Payment date</label>
                <div style={{position:'relative',display:'flex',alignItems:'center'}}>
                  <input className="field-input" type="date" value={form.payment_date} onChange={f('payment_date')} style={{paddingRight:'2rem'}} />
                  {form.invoice_date && (
                    <button
                      type="button"
                      title="Copy invoice date"
                      onClick={() => setForm(p => ({...p, payment_date: p.invoice_date}))}
                      style={{position:'absolute',right:'2rem',background:'none',border:'none',cursor:'pointer',color:'var(--accent)',fontSize:'1rem',lineHeight:1,padding:'0 4px',opacity:0.7}}
                      onMouseEnter={e=>e.currentTarget.style.opacity=1}
                      onMouseLeave={e=>e.currentTarget.style.opacity=0.7}
                    >+</button>
                  )}
                </div>
              </div>
              <div className="field" style={{display:'flex',flexDirection:'column',justifyContent:'flex-end'}}>
                <label className="field-label">Proof of payment</label>
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  <input ref={proofRef} type="file" accept=".pdf,.jpg,.jpeg,.png" style={{display:'none'}}
                    onChange={e => uploadProof(e.target.files[0])} />
                  <button className="btn btn--ghost btn--sm" style={{fontSize:'0.72rem'}}
                    disabled={uploadingProof}
                    onClick={() => proofRef.current?.click()}>
                    {uploadingProof ? 'Uploading…' : form.payment_proof_r2_key ? 'Replace proof' : 'Upload proof'}
                  </button>
                  {form.payment_proof_r2_key && (
                    <a className="btn btn--ghost btn--sm" style={{fontSize:'0.72rem'}}
                      href={`/api/upload?key=${encodeURIComponent(form.payment_proof_r2_key)}`} target="_blank">
                      View ↗
                    </a>
                  )}
                </div>
              </div>
            </div>
          </div>

{/* Pass-through billing */}
          <div style={{marginTop:20,paddingTop:16,borderTop:'1px solid var(--border)'}}>
            <AllocationManager invoiceId={invoiceId} companies={companies} />
          </div>

{/* Linked documents (children) */}
          {children.length > 0 && (
            <div style={{marginTop:20,paddingTop:16,borderTop:'1px solid var(--border)'}}>
              <div style={{fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:8}}>
                Linked documents ({children.length})
              </div>
              {children.map(ch => <LinkedDocRow key={ch.id} doc={ch} />)}
            </div>
          )}

</div>
        <div className="modal-foot">
          <button type="button" className="btn btn--ghost" onClick={onClose}>Cancel</button>
          <button type="button" className="btn btn--ghost" disabled={busy} onClick={() => save('approved')}>Approve</button>
          <button type="button" className="btn btn--primary" disabled={busy}
            style={{background: form.status === 'paid' ? 'rgba(111,227,209,0.15)' : ''}}
            onClick={() => save('paid')}>
            {form.status === 'paid' ? '✓ Paid' : 'Mark paid'}
          </button>
          <button type="button" className="btn btn--primary" disabled={busy} onClick={() => save()}>Save</button>
        </div>
      </div>
    </div>
  );
}

const TODAY    = new Date().toISOString().split('T')[0];
const PAGE_SIZES = [20, 50, 100, 250];

function SortTh({ col, label, sort, onSort, style }) {
  const active = sort.col === col;
  return (
    <th
      style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap', ...style }}
      onClick={() => onSort(col)}
    >
      {label}
      <span style={{
        marginLeft: 4,
        fontSize: 9,
        opacity: active ? 1 : 0.25,
        color: active ? 'var(--signal)' : 'inherit',
        fontFamily: 'var(--font-mono)',
      }}>
        {active ? (sort.dir === 'asc' ? '▲' : '▼') : '▲▼'}
      </span>
    </th>
  );
}

function InboundInvoices() {
  const [invoices, setInvoices]         = useState([]);
  const [companies, setCompanies]       = useState([]);
  const [paymentMethods, setPayMethods] = useState([]);
  const [filter, setFilter]             = useState('all');
  const [sort, setSort]                 = useState({ col: 'invoice_date', dir: 'desc' });
  const [fSupplier, setFSupplier]       = useState('');
  const [fType, setFType]               = useState('');
  const [fCategory, setFCategory]       = useState('');
  const [pageSize, setPageSize]         = useState(50);
  const [page, setPage]                 = useState(1);
  const [modal, setModal]               = useState(null);
  const [uploading, setUploading]       = useState(false);
  const [drag, setDrag]                 = useState(false);
  const dropRef = useRef(null);
  const { toast } = useApp();

const load = useCallback(() => {
    API.get('/inbound').then(setInvoices).catch(() => {});
  }, []);

const loadCompanies = useCallback(() => {
    API.get('/companies').then(setCompanies).catch(() => {});
  }, []);

useEffect(() => {
    load();
    loadCompanies();
    API.get('/payment_methods').then(setPayMethods).catch(() => {});
  }, [load, loadCompanies]);

// Reset to page 1 whenever any filter/sort changes
  useEffect(() => { setPage(1); }, [filter, sort, fSupplier, fType, fCategory, pageSize]);

function handleSort(col) {
    setSort(s => s.col === col
      ? { col, dir: s.dir === 'asc' ? 'desc' : 'asc' }
      : { col, dir: 'desc' }
    );
  }

async function uploadFile(file) {
    if (!file || !file.type.includes('pdf')) { toast('PDF files only', 'error'); return; }
    setUploading(true);
    try {
      const form = new FormData();
      form.append('file', file);
      form.append('source', 'upload');
      await API.upload('/inbound', form);
      toast('Invoice uploaded — open to review');
      load();
    } catch (e) { toast(e.error || 'Upload failed', 'error'); }
    finally { setUploading(false); }
  }

function onDrop(e) {
    e.preventDefault(); setDrag(false);
    uploadFile(e.dataTransfer.files[0]);
  }

async function del(inv) {
    if (!confirm('Delete this invoice and all its linked documents?')) return;
    await API.del(`/inbound/${inv.id}`).catch(e => toast(e.error || 'Error', 'error'));
    toast('Invoice deleted'); load();
  }

const coMap = Object.fromEntries(companies.map(c => [c.id, c.name]));
  const pmMap = Object.fromEntries(paymentMethods.map(m => [m.id, m.name]));

const counts = {
    pending:  invoices.filter(i => i.status === 'pending').length,
    approved: invoices.filter(i => i.status === 'approved').length,
    paid:     invoices.filter(i => i.status === 'paid').length,
  };

// Status filter → column filters → sort → paginate
  const afterStatus = invoices.filter(i => filter === 'all' || i.status === filter);
  const afterFilters = afterStatus.filter(i => {
    if (fSupplier   && i.supplier_id !== fSupplier)            return false;
    if (fType       && i.document_type !== fType)               return false;
    if (fCategory   && i.cost_category !== fCategory)           return false;
    return true;
  });
  const sorted   = sortInvoices(afterFilters, sort, coMap);
  const total    = sorted.length;
  const pages    = Math.max(1, Math.ceil(total / pageSize));
  const safePage = Math.min(page, pages);
  const visible  = sorted.slice((safePage - 1) * pageSize, safePage * pageSize);

const activeFilters = [fSupplier, fType, fCategory].filter(Boolean).length;

const TABS = [
    ['all',      'All'],
    ['pending',  `Pending${counts.pending  ? ` (${counts.pending})`  : ''}`],
    ['approved', `Approved${counts.approved ? ` (${counts.approved})` : ''}`],
    ['paid',     `Paid${counts.paid        ? ` (${counts.paid})`      : ''}`],
  ];

// Unique suppliers that appear in the status-filtered list (for the filter dropdown)
  const supplierOptions = [...new Map(
    afterStatus
      .filter(i => i.supplier_id && coMap[i.supplier_id])
      .map(i => [i.supplier_id, coMap[i.supplier_id]])
  ).entries()].sort((a, b) => a[1].localeCompare(b[1]));

const SH = ({ col, label, style }) => (
    <SortTh col={col} label={label} sort={sort} onSort={handleSort} style={style} />
  );

return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Invoices — inbound</h1>
          <div className="page-subtitle">Supplier invoices · inbox: invoice@lake-project.com</div>
        </div>
      </div>

<div
        ref={dropRef}
        className={`dropzone ${drag ? 'drag-over' : ''}`}
        style={{marginBottom:24}}
        onClick={() => { const inp = document.createElement('input'); inp.type='file'; inp.accept='.pdf'; inp.onchange = e => uploadFile(e.target.files[0]); inp.click(); }}
        onDragOver={e => { e.preventDefault(); setDrag(true); }}
        onDragLeave={() => setDrag(false)}
        onDrop={onDrop}
      >
        <div className="dropzone-icon">{uploading ? '⟳' : '↑'}</div>
        <div className="dropzone-text">{uploading ? 'Uploading…' : 'Drop a PDF here, or click to upload'}</div>
        <div className="dropzone-hint">Or forward supplier invoices to invoice@lake-project.com</div>
      </div>

<div style={{display:'flex',alignItems:'center',gap:0,marginBottom:0,flexWrap:'wrap'}}>
        <div className="tabs" style={{flex:1,marginBottom:0}}>
          {TABS.map(([v, l]) => (
            <button key={v} className={`tab ${filter===v?'is-active':''}`}
              onClick={() => { setFilter(v); setFSupplier(''); setFType(''); setFCategory(''); }}>
              {l}
            </button>
          ))}
        </div>
      </div>

{/* Filter bar */}
      <div style={{
        display:'flex', gap:8, alignItems:'center', flexWrap:'wrap',
        padding:'10px 0', marginBottom:12,
      }}>
        <select className="field-select" style={{flex:'1 1 160px',minWidth:0,maxWidth:220,fontSize:12}}
          value={fSupplier} onChange={e => setFSupplier(e.target.value)}>
          <option value="">All suppliers</option>
          {supplierOptions.map(([id, name]) => <option key={id} value={id}>{name}</option>)}
        </select>
        <select className="field-select" style={{flex:'1 1 120px',minWidth:0,maxWidth:160,fontSize:12}}
          value={fType} onChange={e => setFType(e.target.value)}>
          <option value="">All types</option>
          <option value="invoice">Invoice</option>
          <option value="receipt">Receipt</option>
          <option value="credit_note">Credit note</option>
          <option value="other">Other</option>
        </select>
        <select className="field-select" style={{flex:'1 1 140px',minWidth:0,maxWidth:200,fontSize:12}}
          value={fCategory} onChange={e => setFCategory(e.target.value)}>
          <option value="">All categories</option>
          {COST_CATS.map(c => <option key={c} value={c}>{COST_CAT_LABEL[c]}</option>)}
        </select>
        {activeFilters > 0 && (
          <button className="btn btn--ghost btn--sm" style={{fontSize:11,flexShrink:0}}
            onClick={() => { setFSupplier(''); setFType(''); setFCategory(''); }}>
            Clear filters ({activeFilters})
          </button>
        )}
        <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:6,flexShrink:0}}>
          <span style={{fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)'}}>Rows</span>
          <select className="field-select" style={{width:72,fontSize:12,padding:'4px 6px'}}
            value={pageSize} onChange={e => setPageSize(Number(e.target.value))}>
            {PAGE_SIZES.map(n => <option key={n} value={n}>{n}</option>)}
          </select>
        </div>
      </div>

<div className="card" style={{margin:0}}>
        <div className="table-wrap">
          <table className="data-table">
            <thead><tr>
              <SH col="supplier"       label="Supplier" />
              <SH col="invoice_number" label="Invoice #" />
              <SH col="invoice_date"   label="Date" />
              <SH col="due_date"       label="Due" />
              <SH col="total"          label="Amount" style={{textAlign:'right'}} />
              <th>EUR equiv.</th>
              <th>Payment</th>
              <SH col="status"         label="Status" />
              <th></th>
            </tr></thead>
            <tbody>
              {visible.length === 0 && (
                <tr><td colSpan={9}><div className="empty-state">No inbound invoices</div></td></tr>
              )}
              {visible.map(inv => {
                const unpaid  = inv.status === 'pending' || inv.status === 'approved';
                const overdue = unpaid && inv.due_date && inv.due_date < TODAY;
                return (
                  <tr key={inv.id} style={{cursor:'pointer'}} onClick={() => setModal(inv.id)}>
                    <td>
                      <div>{inv.supplier_id ? (coMap[inv.supplier_id] || '—') : <span className="muted">Unmatched</span>}</div>
                      {inv.child_count > 0 && (
                        <div style={{fontSize:10,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',marginTop:2}}>
                          +{inv.child_count} doc{inv.child_count !== 1 ? 's' : ''}
                        </div>
                      )}
                    </td>
                    <td>
                      <div className="mono" style={{fontSize:12}}>{inv.invoice_number || <span className="muted">—</span>}</div>
                      {inv.ref_id && <div style={{fontSize:10,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',marginTop:2,letterSpacing:'0.06em'}}>{inv.ref_id}</div>}
                    </td>
                    <td className="mono" style={{whiteSpace:'nowrap'}}>{fmtDate(inv.invoice_date)}</td>
                    <td style={{whiteSpace:'nowrap'}}>
                      {unpaid ? (
                        inv.due_date ? (
                          <div style={{display:'flex',alignItems:'center',gap:6}}>
                            <span className="mono" style={{fontSize:11}}>{fmtDate(inv.due_date)}</span>
                            {overdue && (
                              <span style={{
                                fontSize:9,fontFamily:'var(--font-mono)',fontWeight:700,
                                letterSpacing:'0.06em',textTransform:'uppercase',
                                padding:'2px 6px',borderRadius:10,
                                background:'rgba(255,60,60,0.18)',color:'#ff4444',
                                border:'1px solid rgba(255,60,60,0.35)',
                                flexShrink:0,
                              }}>overdue</span>
                            )}
                          </div>
                        ) : <span className="muted" style={{fontSize:11}}>—</span>
                      ) : <span className="muted" style={{fontSize:11}}>—</span>}
                    </td>
                    <td className="mono" style={{textAlign:'right'}}>
                      {fmtAmount(inv.total, inv.currency)}
                      {inv.reverse_charge ? <span title="BTW verlegd" style={{marginLeft:4,color:'var(--ember)',fontSize:10,fontFamily:'var(--font-mono)'}}>RC</span> : null}
                    </td>
                    <td className="mono" style={{color:'var(--fg-subtle)'}}>
                      {inv.currency && inv.currency !== 'EUR' && inv.amount_eur ? fmtEur(inv.amount_eur) : '—'}
                    </td>
                    <td>
                      {inv.payment_method_id && pmMap[inv.payment_method_id]
                        ? <span style={{fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)'}}>{pmMap[inv.payment_method_id]}</span>
                        : <span className="muted" style={{fontSize:11}}>—</span>}
                    </td>
                    <td><span className={`status status--${inv.status}`}>{inv.status}</span></td>
                    <td>
                      <div className="row-actions" onClick={e => e.stopPropagation()}>
                        <button className="btn btn--ghost btn--sm" onClick={() => setModal(inv.id)}>Review</button>
                        <button className="btn btn--danger btn--sm" onClick={() => del(inv)}>Del</button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

{/* Pagination footer */}
        <div style={{
          display:'flex',alignItems:'center',justifyContent:'space-between',
          padding:'10px 16px',borderTop:'1px solid var(--border)',
          fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',
        }}>
          <span>
            {total === 0 ? 'No results' : `${(safePage - 1) * pageSize + 1}–${Math.min(safePage * pageSize, total)} of ${total}`}
          </span>
          <div style={{display:'flex',gap:4,alignItems:'center'}}>
            <button
              className="btn btn--ghost btn--sm"
              style={{padding:'2px 8px',fontSize:13}}
              disabled={safePage <= 1}
              onClick={() => setPage(p => Math.max(1, p - 1))}>
              ‹
            </button>
            <span style={{padding:'0 8px'}}>
              {safePage} / {pages}
            </span>
            <button
              className="btn btn--ghost btn--sm"
              style={{padding:'2px 8px',fontSize:13}}
              disabled={safePage >= pages}
              onClick={() => setPage(p => Math.min(pages, p + 1))}>
              ›
            </button>
          </div>
        </div>
      </div>

{modal && (
        <ReviewModal
          invoiceId={modal}
          companies={companies}
          paymentMethods={paymentMethods}
          onSave={() => { load(); setModal(null); }}
          onClose={() => setModal(null)}
          onSuppliersChanged={loadCompanies}
        />
      )}
    </div>
  );
}
window.InboundInvoices = InboundInvoices;