Fintree Solutions – B2I Master Evaluator
https://cdn.jsdelivr.net/npm/chart.js
:root {
–slate-50: #f8fafc;
–slate-100: #f1f5f9;
–slate-200: #e2e8f0;
–slate-300: #cbd5e1;
–slate-400: #94a3b8;
–slate-500: #64748b;
–slate-600: #475569;
–slate-900: #0f172a;
–blue-50: #eff6ff;
–blue-100: #dbeafe;
–blue-300: #93c5fd;
–blue-400: #60a5fa;
–blue-500: #3b82f6;
–blue-600: #2563eb;
–emerald-400: #34d399;
–emerald-500: #10b981;
–red-400: #f87171;
–red-500: #ef4444;
–red-600: #dc2626;
–orange-400: #fb923c;
–orange-600: #ea580c;
}
body {
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
background: var(–slate-50);
color: var(–slate-900);
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem;
}
@media (min-width: 768px) {
.container { padding: 2rem; }
}
.card {
background: white;
border-radius: 1.5rem;
border: 1px solid var(–slate-200);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
overflow: hidden;
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.input {
width: 100%;
padding: 0.5rem;
border: 1px solid var(–slate-200);
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
th, td {
padding: 1rem 1.25rem;
text-align: right;
}
th {
background: white;
font-weight: 900;
text-transform: uppercase;
font-size: 0.6875rem;
color: var(–slate-400);
letter-spacing: 0.05em;
}
tr:hover {
background: rgba(248,250,252,0.5);
}
.highlight-blue { background: rgba(37,99,235,0.05); }
FINTREE SOLUTIONS
B2I MASTER EVALUATOR (Full Lifecycle)
Core Parameters
Loan Principal ($)
AB
BC
MB
NB
NL
NS
ON
PE
QC
SK
Peak Asset Value
$1,234,567
Phase 1 Ledger: Accumulation & Servicing (Y1–Y15)
| Yr |
Start Bal |
Growth (+) |
Interest (-) |
Withdraw Tax |
Loan Paydown |
Repayment Tax |
End Balance |
Debt O/S |
// Very simplified placeholder logic – real version needs full simulation
const dummyData = Array.from({length:15}, (_,i) => ({
year: i+1,
startValue: 100000 + i*15000,
growth: 7500 + i*800,
interestPaid: 5400 – i*200,
withdrawalTax: i>5 ? 1200 : 0,
principalRepaid: i===10 ? 20000 : 0,
repaymentTax: i===10 ? 1000 : 0,
portfolioValue: 110000 + i*18000 – (i>8?15000:0),
outstandingLoan: 100000 – (i>9 ? 20000 : 0)
}));
// Populate table (simplified)
const tbody = document.getElementById(‘tableBody’);
dummyData.forEach(row => {
const tr = document.createElement(‘tr’);
if (row.principalRepaid > 0) tr.classList.add(‘highlight-blue’);
tr.innerHTML = `
Y${row.year} |
$${row.startValue.toLocaleString()} |
+$${row.growth.toLocaleString()} |
-$${row.interestPaid.toLocaleString()} |
${row.withdrawalTax > 0 ? `-$${row.withdrawalTax.toLocaleString()}` : ‘—’} |
${row.principalRepaid > 0 ? `-$${row.principalRepaid.toLocaleString()}` : ‘—’} |
${row.repaymentTax > 0 ? `-$${row.repaymentTax.toLocaleString()}` : ‘—’} |
$${row.portfolioValue.toLocaleString()} |
$${row.outstandingLoan.toLocaleString()} |
`;
tbody.appendChild(tr);
});
// Simple Chart.js placeholder
const ctx = document.getElementById(‘trajectoryChart’).getContext(‘2d’);
new Chart(ctx, {
type: ‘line’,
data: {
labels: dummyData.map(d => `Y${d.year}`),
datasets: [
{ label: ‘Portfolio Value’, data: dummyData.map(d => d.portfolioValue), borderColor: ‘#2563eb’, fill: false, tension: 0.2 },
{ label: ‘Debt Liability’, data: dummyData.map(d => d.outstandingLoan), borderColor: ‘#ef4444’, borderWidth: 3 },
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: { y: { beginAtZero: true } }
}
});
Fintreesolutions 