setExpanded(e => !e)}
style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', userSelect: 'none' }}
>
{/* Status indicator */}
= 60 ? 'var(--green, #22c55e)' : bestScore >= 30 ? 'var(--amber, #f59e0b)' : 'var(--text-dim)' }} />
{/* Date */}
{tx.date}
{/* Description */}
{tx.description}
{keyword &&
keyword: {keyword}
}
{/* Amount */}
{fmtAmount(tx.amount, tx.currency)}
{/* Match count */}
{matches.length > 0 ? (
{matches.length} match{matches.length > 1 ? 'es' : ''}
) : (
sem match
)}
{expanded && (
{matches.length === 0 ? (
Nenhum email encontrado nas caixas configuradas para esta transação.
) : (
{matches.map((m, i) => )}
)}
)}
);
};
// ── Main Screen ────────────────────────────────────────────────────────────
const FinanceReconciliacaoScreen = () => {
const [file, setFile] = React.useState(null);
const [transactions, setTransactions] = React.useState([]);
const [results, setResults] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const [showConfig, setShowConfig] = React.useState(false);
const [stats, setStats] = React.useState(null);
const fileRef = React.useRef();
const [invoiceQuery, setInvoiceQuery] = React.useState('');
const [invoiceResults, setInvoiceResults] = React.useState(null);
const [invoiceLoading, setInvoiceLoading] = React.useState(false);
const [invoiceError, setInvoiceError] = React.useState(null);
const handleFile = async (e) => {
const f = e.target.files?.[0];
if (!f) return;
setFile(f);
setResults([]);
setError(null);
setTransactions([]);
setLoading(true);
try {
const formData = new FormData();
formData.append('statement', f);
const r = await fetch('/api/finance/reconciliation/parse-statement', { method: 'POST', body: formData });
const d = await r.json();
if (!r.ok) throw new Error(d.error || 'Erro ao processar PDF');
setTransactions(d.transactions || []);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
const runSearch = async () => {
if (transactions.length === 0) return;
setLoading(true);
setError(null);
try {
const r = await fetch('/api/finance/reconciliation/search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ transactions }),
});
const d = await r.json();
if (!r.ok) throw new Error(d.error || 'Erro no servidor');
setResults(d.results || []);
const matched = (d.results || []).filter(r => r.matches.length > 0 && r.matches[0].score >= 30).length;
setStats({ total: d.results.length, matched, pct: d.results.length > 0 ? Math.round(matched / d.results.length * 100) : 0 });
} catch (e) {
setError(e.message);
} finally {
setLoading(false);
}
};
const searchInvoice = async () => {
if (!invoiceQuery.trim()) return;
setInvoiceLoading(true);
setInvoiceError(null);
setInvoiceResults(null);
try {
const r = await fetch('/api/finance/reconciliation/search-invoice', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: invoiceQuery.trim() }),
});
const d = await r.json();
if (!r.ok) throw new Error(d.error || 'Erro no servidor');
setInvoiceResults(d.matches || []);
} catch (e) {
setInvoiceError(e.message);
} finally {
setInvoiceLoading(false);
}
};
const expenseCount = transactions.filter(t => t.amount < 0).length;
return (
{showConfig &&
setShowConfig(false)} />}
{/* Header */}
FINANCEIRO · RECONCILIAÇÃO
Reconciliação de Faturas
Upload do extrato Revolut (PDF) → pesquisa automática de faturas nas caixas de email
{/* Upload zone */}
fileRef.current?.click()}
style={{ padding: '32px 24px', textAlign: 'center', cursor: 'pointer', border: '2px dashed var(--border)', background: file ? 'color-mix(in oklch, var(--accent-500) 4%, var(--bg))' : 'var(--bg-sunken)', marginBottom: 20 }}
>
{file ? (
{file.name}
{loading ? 'A processar PDF...' : transactions.length > 0 ? `${transactions.length} transações · ${expenseCount} despesas` : 'Nenhuma transação encontrada'}
) : (
Arrasta o extrato Revolut aqui
ou clica para seleccionar o ficheiro PDF
)}
{stats && (
{stats.matched} de {stats.total} transações com match ({stats.pct}%)
)}
)}
{/* Invoice number search */}
Pesquisa por fornecedor / destinatário
setInvoiceQuery(e.target.value)}
onKeyDown={e => e.key === 'Enter' && searchInvoice()}
style={{ flex: 1 }}
/>
{invoiceError && (
{invoiceError}
)}
{invoiceResults !== null && invoiceResults.length === 0 && (
Nenhum email encontrado com esse número nas caixas configuradas.
)}
{invoiceResults && invoiceResults.length > 0 && (
{invoiceResults.length} resultado{invoiceResults.length > 1 ? 's' : ''}
{invoiceResults.map((m, i) =>
)}
)}
{error && (
{error}
)}
{/* Results */}
{results.length > 0 && [...results].sort((a, b) => (b.matches[0]?.score || 0) - (a.matches[0]?.score || 0)).map((result, i) => (
))}
{/* Empty state before search */}
{transactions.length > 0 && results.length === 0 && !loading && (
Clica em "Pesquisar faturas" para iniciar a reconciliação.
)}
);
};
window.FinanceReconciliacaoScreen = FinanceReconciliacaoScreen;
})();