diff --git a/client/components/BillModal.jsx b/client/components/BillModal.jsx index a275078..3b2e1f8 100644 --- a/client/components/BillModal.jsx +++ b/client/components/BillModal.jsx @@ -67,6 +67,26 @@ function isTransactionLinkedPayment(payment) { return payment?.payment_source === 'transaction_match' || payment?.transaction_id != null; } +function paymentSourceLabel(source) { + const labels = { + manual: 'Manual', + file_import: 'File import', + provider_sync: 'Sync', + transaction_match: 'Transaction', + }; + return labels[source] || source || 'Manual'; +} + +function paymentSourceTone(source) { + const tones = { + manual: 'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400', + file_import: 'border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-400', + provider_sync: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400', + transaction_match: 'border-primary/25 bg-primary/10 text-primary', + }; + return tones[source] || tones.manual; +} + function isDebtCat(categories, catId) { if (!catId || catId === CAT_NONE) return false; const cat = categories.find(c => String(c.id) === catId); @@ -886,8 +906,11 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
{fmt(payment.amount)}
- - {payment.payment_source || 'manual'} + + {paymentSourceLabel(payment.payment_source)}@@ -926,9 +949,14 @@ export default function BillModal({ bill, initialBill, categories, onClose, onSa
Linked transactions
{linkedTransactions.length} confirmed matches
Projected payoff
-{snowball.payoff_display}
-{snowball.months_to_freedom} months remaining
-Interest
-{fmt(snowball.total_interest_paid)}
+ {targetDebt && ( ++ Target debt +
+{targetDebt.name}
++ Clears {targetDebt.payoff_display || 'on the current plan'} +
+Target runway
++ {targetMonths ? `${targetMonths} mo` : '—'} +
+Debt-free
+{snowball.payoff_display}
+Saved
-{comparison ? `${comparison.months_saved} mo` : '—'}
-- Next focus: {nextDebt.name} -
)} -- Add debt balances and minimum payments to see a payoff date here. -
-Choose a first target
++ Add debt balances and minimum payments to see the next payoff milestone here. +
+Suggested matches
+{loading ? 'Checking transactions' : `${suggestions.length} ready for review`}
+{transactionTitle(tx)}
++ {transactionDate(tx)} · {tx.source_label || tx.source_type_label || 'Transaction'} +
++ {formatTransactionAmount(tx.amount, tx.currency)} +
+{bill.name || `Bill ${suggestion.billId}`}
++ Expected ${Number(bill.expected_amount || 0).toFixed(2)} +
+