// Reusable premium components for the rates page.
const { useState, useEffect, useMemo, useRef } = React;
// ───────── SVG Icons ─────────
const SvgSearch = () => (
);
// ───────── HEADER ─────────
function Header({ onSignOut, currentUser, mode = 'workspace', onHome }) {
const initials = currentUser && currentUser.name
? currentUser.name.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
: currentUser && currentUser.email
? currentUser.email.slice(0, 2).toUpperCase()
: 'LO';
const isLauncher = mode === 'launcher';
return (
Tri Valley
Home Loans
Home
{!isLauncher && (
<>
Pricing
)}
);
}
function AppTileIcon({ kind }) {
if (kind === 'pricing') {
return (
);
}
if (kind === 'borrower') {
return (
);
}
if (kind === 'ops') {
return (
);
}
return (
);
}
function AppLauncherScreen({ onLaunchApp }) {
const tiles = [
{ id: 'pricing', label: 'Pricing App', icon: 'pricing', onClick: onLaunchApp },
];
const MAX_COLUMNS = 4;
const columnCount = Math.max(1, Math.min(MAX_COLUMNS, tiles.length));
const mobileColumnCount = Math.max(1, Math.min(2, tiles.length));
return (
{tiles.map((tile) => (
{tile.label}
))}
);
}
// ───────── Sign-in Overlay (Google OAuth) ─────────
function SignInOverlay({ onSignIn }) {
// Check for an auth_error query param passed back from the OAuth callback
const authError = new URLSearchParams(window.location.search).get('auth_error');
return (
Sign In
Internal pricing portal — staff access only.
{authError && (
Sign in failed: {authError}
)}
Continue with Google
);
}
// ───────── Upload Zone (T10) ─────────
function UploadZone() {
const [dragOver, setDragOver] = useState(false);
const [file, setFile] = useState(null);
const [status, setStatus] = useState('idle'); // idle | uploading | success | error
const [errorMsg, setErrorMsg] = useState('');
const inputRef = useRef(null);
const processFile = async (f) => {
const ALLOWED = new Set(['application/pdf', 'image/jpeg', 'image/png', 'image/jpg']);
if (!ALLOWED.has(f.type)) {
setStatus('error'); setErrorMsg('Only PDF, JPG, or PNG files are allowed.'); return;
}
if (f.size > 10 * 1024 * 1024) {
setStatus('error'); setErrorMsg('File must be under 10 MB.'); return;
}
setFile(f); setStatus('uploading'); setErrorMsg('');
const form = new FormData();
form.append('file', f);
try {
const res = await fetch('/api/upload', { method: 'POST', body: form });
const json = await res.json();
if (!res.ok) throw new Error(json?.error?.message || `HTTP ${res.status}`);
setStatus('success');
} catch (err) {
setStatus('error'); setErrorMsg(err.message);
}
};
const reset = () => { setFile(null); setStatus('idle'); setErrorMsg(''); };
const fmtSize = (b) => b < 1048576 ? `${(b / 1024).toFixed(1)} KB` : `${(b / 1048576).toFixed(1)} MB`;
return (
{ e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={(e) => { e.preventDefault(); setDragOver(false); const f = e.dataTransfer.files[0]; if (f) processFile(f); }}
onClick={() => status === 'idle' && inputRef.current?.click()}
>
{ const f = e.target.files[0]; if (f) processFile(f); e.target.value = ''; }}
/>
{status === 'idle' && (
<>
Mortgage Statement
Drag & drop or tap to browse PDF/JPG
{ e.stopPropagation(); inputRef.current?.click(); }}>Select File
)}
{status === 'uploading' && (
<>
⏳
Uploading {file?.name}…
{file && fmtSize(file.size)}
)}
{status === 'success' && (
<>
✅
{file?.name}
{file && fmtSize(file.size)} · uploaded successfully
{ e.stopPropagation(); reset(); }}>Upload another
)}
{status === 'error' && (
<>
❌
Upload failed
{errorMsg}
{ e.stopPropagation(); reset(); }}>Try again
)}
{tip}
);
}
// ───────── Empty State (U3) ─────────
// Reusable enterprise-grade empty state — no emojis, uses design tokens.
function EmptyState({ title, body }) {
return (
);
}
// ───────── Scenario Form (Left Sidebar) ─────────
function ScenarioForm({ scenario, setScenario, onPrice }) {
const [activeTab, setActiveTab] = useState("upload"); // "upload" | "manual"
const set = (patch) => setScenario({ ...scenario, ...patch });
const dpPct = ((scenario.downPayment / scenario.homePrice) * 100) || 0;
return (
{activeTab === 'upload' ? 'Secure Documents' : 'Submit Loan Details'}
{activeTab === 'upload' ? 'Upload your mortgage statement to begin extraction.' : 'Provide your loan estimate to get the best competitive rates instantly.'}
setActiveTab("upload")}
>
Upload Document
setActiveTab("manual")}
>
Manual Entry
{activeTab === "upload" ? (
) : (
Loan Purpose *
set({ loanPurpose: e.target.value })}>
Purchase
Refinance
Cash-Out
Credit Score *
Occupancy *
set({ occupancy: e.target.value })}>
Primary
2nd Home
Investment
Property Type *
set({ propertyType: e.target.value })}>
Single Family
Condo
Townhouse
2–4 Unit
Loan Type *
set({ loanType: e.target.value })}>
Conventional
FHA
VA
Jumbo
Lock Days *
set({ lockDays: e.target.value })}>
15 Days
30 Days
45 Days
60 Days
Search By
set({ searchBy: e.target.value })}>
Rate
APR
Fees
Generate Pricing
)}
);
}
// ───────── Recent Submissions ─────────
function RecentSubmissions() {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/submissions/recent')
.then((r) => r.json())
.then((d) => { setItems(d.items || []); setLoading(false); })
.catch(() => setLoading(false));
}, []);
const fmtDate = (iso) => {
if (!iso) return '';
return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
};
// Map DB session state to badge CSS class and label
const TAG = {
active: { cls: 'pending', label: 'active' },
compared: { cls: 'verified', label: 'compared' },
abandoned: { cls: 'archived', label: 'archived' },
};
return (
{loading && (
Loading…
)}
{!loading && items.length === 0 && (
No submissions yet.
)}
{items.map((item) => {
const tag = TAG[item.state] || { cls: 'pending', label: item.state };
return (
{item.name}
{fmtDate(item.lastActivityAt)}
{tag.label}
);
})}
);
}
// ───────── Adjustment Reason Panel ─────────
function AdjustmentPanel({ row }) {
if (!row || !row.adjustments || row.adjustments.length === 0) return null;
const fmt = (n) => {
if (n === 0) return 0.000 ;
const s = (n > 0 ? '+' : '') + n.toFixed(3);
return 0 ? 'var(--color-success)' : 'var(--color-error)', fontWeight: 600 }}>{s} ;
};
return (
Adjustment reason
for {row.label} @ {row.rate?.toFixed(3)}%
Description
Price
Rate
{row.adjustments.map((a, i) => (
{a.desc}
{fmt(a.priceAdj)}
{fmt(a.rateAdj)}
))}
Total adjustments
{fmt(row.totalPriceAdj)}
{fmt(row.totalRateAdj)}
);
}
// ───────── Price / Rate Tiers Grid (T2) ─────────
function PriceTiersGrid({ rows, activeRow, selectedRows = [], onSelectTier }) {
if (!activeRow) return null;
const tiers = useMemo(() => {
return rows
.filter(r => r.label.trim() === activeRow.label.trim())
.sort((a, b) => a.rate - b.rate);
}, [rows, activeRow]);
if (tiers.length === 0) return null;
const loanAmt = activeRow.loanAmount || 680000;
const TAX_INS = 450;
const fmtPct = (n) => {
if (n === 0) return — ;
const s = (n > 0 ? '+' : '') + n.toFixed(3) + '%';
return 0 ? 'var(--color-success)' : 'var(--color-error)', fontWeight: 600 }}>{s} ;
};
return (
Rate / Price Tiers
{activeRow.label} — {tiers.length} option{tiers.length !== 1 ? 's' : ''}
);
}
// ───────── Rates Table ─────────
// ───────── Lock Period Panel (Screen C) ─────────
function LockPeriodPanel({ lockDays, onLockDaysChange, fetchedAt }) {
const LOCK_OPTIONS = [15, 30, 45, 60];
const currentDays = parseInt(lockDays || 15);
const today = new Date(); today.setHours(0, 0, 0, 0);
const lockExpiry = new Date(today); lockExpiry.setDate(today.getDate() + currentDays);
const minDate = new Date(today); minDate.setDate(today.getDate() + 1);
const fmtDate = (d) =>
`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
const onExpiryChange = (val) => {
if (!val) return;
const [yr, mo, dy] = val.split('-').map(Number);
const picked = new Date(yr, mo - 1, dy);
const daysAway = Math.round((picked - today) / 86400000);
const snapped = LOCK_OPTIONS.reduce((best, opt) =>
Math.abs(opt - daysAway) < Math.abs(best - daysAway) ? opt : best);
onLockDaysChange(String(snapped));
};
const fmtTimestamp = (ts) => {
if (!ts) return '—';
return new Date(ts).toLocaleString('en-US', {
month: 'short', day: 'numeric', year: 'numeric',
hour: 'numeric', minute: '2-digit'
});
};
return (
Lock Period
{LOCK_OPTIONS.map(opt => (
onLockDaysChange(String(opt))}
>
{opt}d
))}
Lock Expiration On
Last Pricing Update
{fmtTimestamp(fetchedAt)}
);
}
// ───────── Rate Table ─────────
function RateTable({ rows, filter, selectedRows = [], onToggleSelect, onSelectTier, scenario, onLockDaysChange, fetchedAt }) {
const [expandedKey, setExpandedKey] = useState(null);
const toggleExpand = (key) => setExpandedKey(prev => prev === key ? null : key);
const filtered = useMemo(() => {
if (filter === "all") return rows;
if (filter === "fixed") return rows.filter((r) => /fixed/i.test(r.label) && !/fha|va|jumbo/i.test(r.label));
if (filter === "arm") return rows.filter((r) => /ARM/.test(r.label) || r.key.includes("arm"));
if (filter === "gov") return rows.filter((r) => /FHA|VA/.test(r.label) || r.key.startsWith("fha") || r.key.startsWith("va"));
if (filter === "jumbo") return rows.filter((r) => /Jumbo/i.test(r.label) || r.key.startsWith("jumbo"));
return rows;
}, [rows, filter]);
// Derived columns calculations based on row data to match table specification
const computedRows = useMemo(() => {
return filtered.map((r, i) => {
// Small dynamic mock calculations matching typical values
const investor = r.investor || '—';
const rebatePct = r.points < 0 ? -r.points : (r.key.includes('fha') ? 0.25 : (r.key.includes('va') ? 0.375 : 0.125));
const rebateAmt = Math.round(r.loanAmount * (rebatePct / 100));
const price = (100 + rebatePct).toFixed(3);
const lenderFees = 1495;
const taxesAndIns = 450;
const piti = Math.round(r.payment + taxesAndIns);
return {
...r,
investor,
rebatePct,
rebateAmt,
price,
lenderFees,
taxesAndIns,
piti
};
});
}, [filtered]);
return (
);
}
// ───────── Market Trend Block ─────────
function MarketTrend() {
const [stats, setStats] = useState(null);
useEffect(() => {
fetch('/api/dashboard-stats')
.then((r) => r.json())
.then((d) => setStats(d))
.catch(() => { });
}, []);
const rate = stats?.bestRate30y;
// A8: Contextual market summary — computes bps delta from rates30y session data
const rates30y = (stats?.rates30y || []).map((r) => r.rate);
let heading, body;
if (rate != null) {
heading = `Best 30Y Fixed: ${rate.toFixed(3)}%`;
if (rates30y.length >= 2) {
const first = rates30y[0], last = rates30y[rates30y.length - 1];
const deltaBps = Math.round((last - first) * 100);
if (Math.abs(deltaBps) >= 1) {
const dir = deltaBps < 0 ? 'dropped' : 'rose';
body = `Avg. 30Y Fixed ${dir} ${Math.abs(deltaBps)}bps this session.`;
} else {
body = 'Avg. 30Y Fixed holding steady this session.';
}
} else {
body = 'Based on your most recent pricing run.';
}
} else {
heading = 'Rates Trending Down';
// A8 fallback: structured, not generic marketing language
body = 'Price a scenario to generate a live market summary.';
}
return (
Market Trend
{heading}
{body}
);
}
// ───────── Stats Widgets ─────────
function StatsWidgets() {
const [stats, setStats] = useState(null);
useEffect(() => {
fetch('/api/dashboard-stats')
.then((r) => r.json())
.then((d) => setStats(d))
.catch(() => { });
}, []);
const fmtDollar = (n) => {
if (n == null) return '—';
if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`;
if (n >= 1e3) return `$${(n / 1e3).toFixed(0)}K`;
return `$${n}`;
};
const lockVol = stats?.lockVolume ?? null;
const avgScore = stats?.avgCreditScore ?? null;
const count = stats?.scenarioCount ?? null;
// Progress bars: lock vol cap at $10M = 100%; credit score range 300–850
const lockPct = lockVol != null ? Math.min(100, Math.round((lockVol / 10e6) * 100)) : 0;
const scorePct = avgScore != null ? Math.round(((avgScore - 300) / 550) * 100) : 0;
return (
Lock Volume (30d)
{fmtDollar(lockVol)}
Avg. Credit Score (30d)
{avgScore != null ? avgScore : '—'}
{/* A5: month-over-month trend — placeholder until backend analytics API ships */}
+1 from last month
);
}
// ───────── Live Market Trends (T6) ─────────
function LiveMarketTrends({ fetchedAt }) {
const [stats, setStats] = useState(null);
useEffect(() => {
fetch('/api/dashboard-stats').then((r) => r.json()).then((d) => setStats(d)).catch(() => { });
}, []);
// Discrete bar chart sparkline — 3 green shades, matches Figma
const DEMO_BARS = [0.55, 0.80, 0.65, 0.90, 0.70, 0.50, 0.85];
const BAR_SHADES = ['#256521', '#256521', '#3d7a1a', '#3d7a1a', '#5fa622', '#5fa622', '#8BC638'];
const BarSparkline = ({ rates }) => {
const hasData = rates && rates.length >= 2;
const W = 200, H = 56, P = 4;
const n = 7;
const slotW = (W - P * 2) / n;
const barW = Math.max(10, slotW - 6);
let barHeights;
if (hasData) {
const trimmed = rates.slice(-7);
const padded = trimmed.length < 7
? [...Array(7 - trimmed.length).fill(trimmed[0] || 0), ...trimmed]
: trimmed;
const min = Math.min(...padded), max = Math.max(...padded), rng = max - min || 0.5;
barHeights = padded.map(v => Math.max(8, ((v - min) / rng) * (H - P * 2 - 8) + 8));
} else {
barHeights = DEMO_BARS.map(f => Math.round(f * (H - P * 2)));
}
return (
{barHeights.map((barH, i) => {
const x = P + i * slotW + (slotW - barW) / 2;
const y = H - P - barH;
return (
);
};
// D5: Relative timestamp
const relativeTime = (ts) => {
if (!ts) return null;
const diff = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
if (diff < 60) return 'just now';
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
return `${Math.floor(diff / 86400)}d ago`;
};
const ts = relativeTime(fetchedAt);
const rates30y = (stats?.rates30y || []).map((r) => r.rate);
const rates15y = (stats?.rates15y || []).map((r) => r.rate);
// Delta vs yesterday's best rate; falls back to session-start delta if no yesterday data
const computeDelta = (best, yesterday) => {
if (best != null && yesterday != null) return Math.round((best - yesterday) * 1000) / 1000;
return null;
};
const delta30y = computeDelta(stats?.bestRate30y, stats?.yesterdayBest30y);
const delta15y = computeDelta(stats?.bestRate15y, stats?.yesterdayBest15y);
const hasYesterday = stats?.yesterdayBest30y != null || stats?.yesterdayBest15y != null;
const DeltaChip = ({ delta }) => {
if (delta === null) {
return — vs yesterday ;
}
const up = delta > 0;
return (
{up ? '↑' : '↓'} {Math.abs(delta).toFixed(2)}%
);
};
return (
Live Market Trends
{ts && Last update: {ts} }
30-Year Fixed
{stats?.bestRate30y != null ? `${stats.bestRate30y.toFixed(3)}%` : '—'}
15-Year Fixed
{stats?.bestRate15y != null ? `${stats.bestRate15y.toFixed(3)}%` : '—'}
);
}
// ───────── Quick Calculator (T7) ─────────
function QuickCalculator({ scenario }) {
const [homePrice, setHomePrice] = useState(750000);
const [downPct, setDownPct] = useState(20);
const [rate, setRate] = useState(6.5);
const loanAmt = homePrice * (1 - downPct / 100);
const r = rate / 100 / 12;
const n = 30 * 12; // fixed 30yr for purchasing power calc
const pmt = r > 0 ? loanAmt * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1) : loanAmt / n;
const maxLoan = r > 0 ? pmt * (Math.pow(1 + r, n) - 1) / (r * Math.pow(1 + r, n)) : pmt * n;
const purchasingPower = Math.round(maxLoan / (1 - downPct / 100));
const fmtShort = (n) => n >= 1e6 ? `$${(n / 1e6).toFixed(2)}M` : n >= 1e3 ? `$${Math.round(n / 1e3)}K` : `$${n}`;
const creditScoreLabel = (() => {
const score = scenario?.credit;
if (!score) return null;
if (score >= 760) return { label: score + '+', cls: 'qc-score-excellent' };
if (score >= 740) return { label: score + ' · Very Good', cls: 'qc-score-very-good' };
if (score >= 720) return { label: score + ' · Good', cls: 'qc-score-good' };
if (score >= 700) return { label: score + ' · Fair', cls: 'qc-score-fair' };
return { label: score + ' · Below Avg', cls: 'qc-score-low' };
})();
return (
Quick Calculator
Home Price
${homePrice.toLocaleString()}
setHomePrice(Number(e.target.value))} />
$100K $3M
Down Payment (%)
{downPct}%
setDownPct(Number(e.target.value))} />
3% 50%
Interest Rate
{rate.toFixed(1)}%
setRate(Number(e.target.value))} />
1% 15%
{ }}
aria-label="Personalize this quote with your full loan details"
>
Personalize Quote
Purchasing Power
{fmtShort(purchasingPower)}
Credit Score Range
{creditScoreLabel ? creditScoreLabel.label : '—'}
);
}
// ───────── Bottom Loan Comparison horizontal card deck ─────────
function LoanComparisonDeck({ rows = [], selectedRows = [], scenario, onCompare }) {
const TAX_INS = 450;
const selected = selectedRows
.map(k => rows.find(r => r.key === k))
.filter(Boolean);
const [baseline, ...options] = selected;
const loanAmt = (scenario?.homePrice || 850000) - (scenario?.downPayment || 170000);
const ltv = Math.round((loanAmt / (scenario?.homePrice || 850000)) * 100);
const miMo = ltv > 80 ? Math.round(loanAmt * 0.005 / 12) : 0;
const totalMonthly = (row) => row ? Math.round(row.payment + TAX_INS + miMo) : 0;
const totalInterest = (row) => row
? Math.round(row.payment * 360 - loanAmt)
: 0;
const fd = (n) => `$${Math.abs(Math.round(n)).toLocaleString()}`;
const maxSavings = baseline
? Math.max(0, ...options.map(o => totalInterest(baseline) - totalInterest(o)))
: 0;
const labelForOption = (idx) => {
const labels = ['Option A', 'Option B', 'Option C', 'Option D', 'Option E', 'Option F'];
return labels[idx] || `Option ${idx + 1}`;
};
const LOAN_PURPOSE_LABELS = { purchase: 'Purchase', refi: 'Refinance', cashout: 'Cash-Out' };
const loanTypeBadge = LOAN_PURPOSE_LABELS[scenario?.loanPurpose] || 'Option';
return (
Loan Comparison
{baseline
? `Comparing ${baseline.label}${options.length ? ` vs. ${options[0].label}` : ''}`
: 'Check rows in the rate table above to compare'}
{selected.length === 0 ? (
) : (
<>
{/* Baseline card */}
Baseline
{baseline.label}
Interest Rate
{baseline.rate.toFixed(3)}%
APR
{baseline.apr.toFixed(3)}%
Total Monthly
{fd(totalMonthly(baseline))}
{/* Option cards — one per additional selection */}
{options.map((o, i) => (
{loanTypeBadge}
{labelForOption(i)}
Interest Rate
{o.rate.toFixed(3)}%
APR
{o.apr.toFixed(3)}%
Total Monthly
{fd(totalMonthly(o))}
))}
{maxSavings > 500
? <>You save {fd(maxSavings)} in interest with the best option
: <>Compare options to find the best rate for your borrower}
{selected.length >= 2 && (
→ Compare
)}
)}
);
}
// ───────── Disclosure / Footer ─────────
function Disclosure() {
return (
Rate & APR Assumptions
Rates shown are illustrative for a pilot LO application and are not an absolute commitment to lend.
Annual Percentage Rate (APR) assumes a single-family primary residence in the requested ZIP code,
a 15 to 30-day rate lock, and standard lender fees plus discount points as shown.
Conforming loan limits apply. Loans above conforming levels use jumbo pricing. FHA pricing assumes minimum 3.5% down with required upfront and monthly
MIP. VA pricing assumes a qualifying veteran with no down payment and an applicable funding fee.
Adjustable-rate mortgages (ARMs) carry an introductory fixed period after which the rate adjusts
based on the SOFR index plus a margin. Property taxes, homeowners insurance, HOA dues, and mortgage insurance (if required) are not
included in the rate but are reflected in the estimated monthly payment breakdowns.
{/* TODO: Add real NMLS number before any production deployment */}
© {new Date().getFullYear()} Trivalley Home Loans, Inc.
⌂
Equal Housing Lender
Rates as of {new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })} PT
);
}
// ───────── Full-page Comparison Screen ─────────
function ComparisonScreen({ rows, selectedKeys, onBack, fetchedAt, scenario }) {
const selected = selectedKeys.map(k => rows.find(r => r.key === k)).filter(Boolean);
const [baseline, ...options] = selected;
const [activeOptIdx, setActiveOptIdx] = useState(0);
const [showAmort, setShowAmort] = useState(false);
const opt = options[activeOptIdx] || null;
const fd = (n) => `$${Math.abs(Math.round(n)).toLocaleString()}`;
const fdr = (n) => `${n.toFixed(3)}%`;
const TAX_INS = 450;
const miMo = (row) => {
if (!row) return 0;
const lv = Math.round(((row.loanAmount - (row.loanAmount * 0)) / row.loanAmount) * 100);
return lv > 80 ? Math.round(row.loanAmount * 0.005 / 12) : 0;
};
const totalMonthly = (row) => row ? row.payment + TAX_INS + miMo(row) : 0;
const cc = (row) => row ? 1495 + Math.max(0, Math.round(row.loanAmount * 0.005)) : 0;
const totalInterest = (row) => {
if (!row) return 0;
const r = row.rate / 100 / 12;
const n = 360;
const p = r > 0 ? row.payment : 0;
return Math.round(p * n - (row.loanAmount || 0));
};
const lifeSavings = baseline && opt ? totalInterest(baseline) - totalInterest(opt) : 0;
const monthlySavings = baseline && opt ? Math.round(totalMonthly(baseline) - totalMonthly(opt)) : 0;
const computeAmort = (row, termYrs = 30) => {
if (!row) return [];
const r = row.rate / 100 / 12;
const n = termYrs * 12;
const pmt = r > 0 ? row.loanAmount * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1) : row.loanAmount / n;
const amortRows = [];
let bal = row.loanAmount;
for (let i = 1; i <= 12; i++) {
const int = bal * r;
const prin = pmt - int;
bal = Math.max(0, bal - prin);
amortRows.push({ month: i, pmt: Math.round(pmt), prin: Math.round(prin), int: Math.round(int), bal: Math.round(bal) });
}
return amortRows;
};
const DETAIL_ROWS = baseline && opt ? [
['Loan Type', 'Conforming', 'Conforming'],
['Loan Term', '30 yr', '30 yr'],
['Monthly P&I', fd(baseline.payment), fd(opt.payment)],
['Interest Rate', fdr(baseline.rate), fdr(opt.rate)],
['APR', fdr(baseline.apr), fdr(opt.apr)],
['Mortgage Ins.', miMo(baseline) ? fd(miMo(baseline)) : '$0', miMo(opt) ? fd(miMo(opt)) : '$0'],
['Taxes & Ins.', fd(TAX_INS), fd(TAX_INS)],
['Total Monthly', fd(totalMonthly(baseline)), fd(totalMonthly(opt))],
['Closing Costs', fd(cc(baseline)), fd(cc(opt))],
['Points', '0.00', '1.125'],
['Lender Credits', '$0.00', `(${fd(Math.max(0, cc(baseline) - cc(opt)))})`],
['Est. Closing Savings', '—', fd(Math.max(0, cc(baseline) - cc(opt)))],
['Total Interest', fd(totalInterest(baseline)), fd(totalInterest(opt))],
['Amortization', '30 yrs', '30 yrs'],
] : [];
const amortBaseline = computeAmort(baseline);
const amortRows = computeAmort(opt || baseline);
const labelForOption = (idx) => {
const labels = ['Option A', 'Option B', 'Option C'];
return labels[idx] || `Option ${idx + 1}`;
};
if (!baseline) return null;
return (
{/* Header */}
← Loan Comparison
Baseline vs. {opt ? opt.label : 'select an option'}
{/* Comparison cards */}
{/* Baseline card */}
Baseline
{baseline.label}
Interest Rate
{fdr(baseline.rate)}
APR
{fdr(baseline.apr)}
Total Monthly
{fd(totalMonthly(baseline))}
{/* Option cards */}
{options.map((o, i) => (
setActiveOptIdx(i)}
>
{labelForOption(i)}
{o.label}
Interest Rate
{fdr(o.rate)}
APR
{fdr(o.apr)}
Total Monthly
{fd(totalMonthly(o))}
))}
{/* Savings banner */}
{lifeSavings > 0 && (
EST. LIFE OF LOAN SAVINGS*
{fd(lifeSavings)}
Significant reduction in interest expense over the full 30-year term.
)}
{/* Detailed comparison table */}
{opt && (
Detailed Comparison
Metric
Current
{labelForOption(activeOptIdx)}
{DETAIL_ROWS.map(([label, base, optVal], i) => (
{label}
{base}
{optVal}
))}
setShowAmort(v => !v)}>
{showAmort ? '▲ Hide' : '▼ Show'} Amortization Schedule · First 12 Months
{showAmort && (
Month
Baseline P&I
Baseline Interest
Baseline Balance
{opt ? labelForOption(activeOptIdx) : 'Option'} P&I
{opt ? labelForOption(activeOptIdx) : 'Option'} Interest
{opt ? labelForOption(activeOptIdx) : 'Option'} Balance
{amortBaseline.map((b, i) => {
const o = amortRows[i];
const saves = b.int - (o ? o.int : b.int);
return (
{b.month}
${b.pmt.toLocaleString()}
${b.int.toLocaleString()}
${b.bal.toLocaleString()}
{o ? `$${o.pmt.toLocaleString()}` : '—'}
0 ? ' detail-col-highlight' : ''}`}>{o ? `$${o.int.toLocaleString()}` : '—'}
{o ? `$${o.bal.toLocaleString()}` : '—'}
);
})}
)}
* Est. Life of Loan Savings is based on total interest paid over the full loan term assuming no early payoff.
)}
{/* Right sidebar */}
);
}
// Export components to global window context so app.jsx can access them.
Object.assign(window, {
Header,
AppLauncherScreen,
ScenarioForm,
RateTable,
AdjustmentPanel,
PriceTiersGrid,
LockPeriodPanel,
MarketTrend,
StatsWidgets,
LiveMarketTrends,
QuickCalculator,
LoanComparisonDeck,
ComparisonScreen,
Disclosure,
SignInOverlay,
TooltipIcon,
EmptyState,
});