phase-6: typescript introduction

2026-06-04 22:16:48 -04:00
parent de8427d578
commit 2b785aa861
69 changed files with 2323 additions and 1036 deletions
@@ -0,0 +1,308 @@
+import fs from 'fs';
+import path from 'path';
+import type { MarketContext } from '../types.js';
+
+export class FinanceReporter {
+  render(advice: unknown[], personalFinance: unknown, marketContext: MarketContext): string {
+    return this._build(advice, personalFinance, marketContext);
+  }
+
+  generate(
+    advice: unknown[],
+    personalFinance: unknown,
+    marketContext: MarketContext,
+    outputPath = './finance-report.html',
+  ): string {
+    const html = this._build(advice, personalFinance, marketContext);
+    fs.writeFileSync(outputPath, html, 'utf8');
+    return path.resolve(outputPath);
+  }
+
+  _build(advice: unknown, pf: unknown, ctx: unknown) {
+    const date = new Date().toISOString().slice(0, 10);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Personal Finance — ${date}</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f1117; color: #e2e8f0; font-size: 13px; }
+  h1 { font-size: 20px; font-weight: 600; }
+  h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 12px; }
+  .header { padding: 24px 32px 16px; border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 16px; }
+  .pill { background: #1e293b; border-radius: 6px; padding: 4px 12px; font-size: 12px; color: #94a3b8; margin-left: auto; }
+  .pill span { color: #e2e8f0; font-weight: 600; margin-left: 4px; }
+  .content { padding: 24px 32px; }
+  .section { margin-bottom: 40px; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
+  .card { background: #1e293b; border-radius: 8px; padding: 14px 16px; }
+  .card-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
+  .card-value { font-size: 20px; font-weight: 700; color: #f1f5f9; margin-top: 4px; }
+  .card-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
+  table { width: 100%; border-collapse: collapse; }
+  thead th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; border-bottom: 1px solid #1e293b; white-space: nowrap; }
+  tbody tr { border-bottom: 1px solid #1a2233; }
+  tbody tr:hover { background: #1e293b; }
+  tbody td { padding: 10px 12px; vertical-align: middle; }
+  .ticker { font-weight: 700; font-size: 14px; color: #f1f5f9; }
+  .green  { color: #4ade80; }
+  .yellow { color: #facc15; }
+  .orange { color: #fb923c; }
+  .red    { color: #f87171; }
+  .gray   { color: #64748b; }
+  .advice-green  { color: #4ade80; font-weight: 600; }
+  .advice-yellow { color: #facc15; font-weight: 600; }
+  .advice-orange { color: #fb923c; font-weight: 600; }
+  .advice-red    { color: #f87171; font-weight: 600; }
+  .reason { color: #94a3b8; font-size: 11px; }
+  .bar-bg { background: #1e293b; border-radius: 4px; height: 8px; }
+  .bar-fill { background: #3b82f6; border-radius: 4px; height: 8px; }
+  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>💰 Personal Finance</h1>
+  <div class="pill">Date <span>${date}</span></div>
+</div>
+<div class="content">
+
+  ${pf ? this._netWorthSection(pf) : ''}
+
+  ${this._portfolioSection(advice, ctx)}
+
+  ${pf ? this._spendingSection(pf) : ''}
+
+  ${pf ? this._accountsSection(pf) : ''}
+
+</div>
+</body>
+</html>`;
+  }
+
+  // ── Net worth ──────────────────────────────────────────────────────────────
+
+  _netWorthSection(pf) {
+    const f = (n) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+      }).format(n);
+    return `
+  <div class="section">
+    <h2>Net Worth</h2>
+    <div class="grid">
+      ${this._card('Net Worth', f(pf.netWorth), pf.netWorth >= 0 ? 'green' : 'red')}
+      ${this._card('Total Assets', f(pf.totalAssets))}
+      ${this._card('Liabilities', f(pf.totalLiabilities), 'red')}
+      ${this._card('Cash & Savings', `${f(pf.totalCash)}`, null, `${pf.cashPct}% of assets`)}
+      ${this._card('Investments', `${f(pf.totalInvestments)}`, null, `${pf.investPct}% of assets`)}
+      ${pf.savingsRate != null ? this._card('Savings Rate', `${pf.savingsRate}%`, parseFloat(pf.savingsRate) > 20 ? 'green' : 'yellow') : ''}
+      ${this._card('Monthly Income', f(pf.totalIncome))}
+      ${this._card('Monthly Spend', f(pf.totalSpend))}
+    </div>
+  </div>`;
+  }
+
+  // ── Portfolio with hold/sell advice ───────────────────────────────────────
+
+  _portfolioSection(advice, ctx) {
+    const f = (n) =>
+      n != null
+        ? new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+          }).format(n)
+        : '—';
+    const f2 = (n) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+      }).format(n);
+    const b = ctx?.benchmarks ?? {};
+
+    const stocks = advice.filter((a) => a.type !== 'crypto');
+    const crypto = advice.filter((a) => a.type === 'crypto');
+
+    const totalValue = advice.reduce((s, a) => s + (parseFloat(a.marketValue) || 0), 0);
+    const totalCost = advice.reduce((s, a) => s + (a.costBasis ?? 0) * a.shares, 0);
+    const totalGL = totalValue - totalCost;
+    const totalGLPct = totalCost > 0 ? ((totalGL / totalCost) * 100).toFixed(1) : null;
+
+    const sourceColors = {
+      Robinhood: '#22c55e',
+      Vanguard: '#3b82f6',
+      Fidelity: '#f59e0b',
+      Coinbase: '#8b5cf6',
+    };
+    const sourcePill = (s) => {
+      const color = sourceColors[s] ?? '#64748b';
+      return `<span style="background:${color}22;color:${color};padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600">${s}</span>`;
+    };
+
+    const stockRows = stocks
+      .map((a) => {
+        const glClass = parseFloat(a.gainLossPct) >= 0 ? 'green' : 'red';
+        const advClass = this._adviceClass(a.advice);
+        return `<tr>
+        <td class="ticker">${a.ticker}</td>
+        <td>${sourcePill(a.source)}</td>
+        <td><span style="background:#1e293b;padding:2px 8px;border-radius:4px;font-size:11px">${a.type}</span></td>
+        <td>${a.shares}</td>
+        <td>${f(a.costBasis)}</td>
+        <td>${f(parseFloat(a.currentPrice))}</td>
+        <td>${f(parseFloat(a.marketValue))}</td>
+        <td class="${glClass}">${a.gainLossPct != null ? a.gainLossPct + '%' : '—'}</td>
+        <td class="gray" style="font-size:11px">${a.signal ?? '—'}</td>
+        <td class="${advClass}">${a.advice}</td>
+        <td class="reason">${a.reason}</td>
+      </tr>`;
+      })
+      .join('');
+
+    const cryptoRows = crypto
+      .map((a) => {
+        const glClass = parseFloat(a.gainLossPct) >= 0 ? 'green' : 'red';
+        const advClass = this._adviceClass(a.advice);
+        return `<tr>
+        <td class="ticker">${a.ticker}</td>
+        <td>${sourcePill(a.source)}</td>
+        <td>${a.shares}</td>
+        <td>${f(a.costBasis)}</td>
+        <td>${f(parseFloat(a.currentPrice))}</td>
+        <td>${f(parseFloat(a.marketValue))}</td>
+        <td class="${glClass}">${a.gainLossPct != null ? a.gainLossPct + '%' : '—'}</td>
+        <td class="${advClass}">${a.advice}</td>
+        <td class="reason">${a.reason}</td>
+      </tr>`;
+      })
+      .join('');
+
+    return `
+  <div class="section">
+    <h2>Portfolio — Hold / Sell / Add Advice</h2>
+    <div class="grid" style="margin-bottom:16px">
+      ${this._card('Total Value', f2(totalValue))}
+      ${this._card('Total Cost', f2(totalCost))}
+      ${this._card('Total G/L', f2(totalGL), totalGL >= 0 ? 'green' : 'red', totalGLPct != null ? totalGLPct + '%' : '')}
+      ${this._card('S&P 500 P/E', (b.marketPE?.toFixed(1) ?? '—') + 'x', null, 'Live benchmark')}
+    </div>
+
+    ${
+      stocks.length > 0
+        ? `
+    <h2 style="margin-bottom:10px">Stocks &amp; ETFs</h2>
+    <table>
+      <thead><tr>
+        <th>Ticker</th><th>Source</th><th>Type</th><th>Shares</th>
+        <th>Cost Basis</th><th>Current</th><th>Value</th>
+        <th>G/L</th><th>Signal</th><th>Advice</th><th>Reason</th>
+      </tr></thead>
+      <tbody>${stockRows}</tbody>
+    </table>`
+        : ''
+    }
+
+    ${
+      crypto.length > 0
+        ? `
+    <h2 style="margin-top:24px;margin-bottom:10px">Crypto</h2>
+    <table>
+      <thead><tr>
+        <th>Ticker</th><th>Source</th><th>Shares</th>
+        <th>Cost Basis</th><th>Current</th><th>Value</th>
+        <th>G/L</th><th>Advice</th><th>Note</th>
+      </tr></thead>
+      <tbody>${cryptoRows}</tbody>
+    </table>`
+        : ''
+    }
+  </div>`;
+  }
+
+  // ── Spending breakdown ─────────────────────────────────────────────────────
+
+  _spendingSection(pf) {
+    const f = (n) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(n);
+    const rows = pf.categoryBreakdown
+      .slice(0, 10)
+      .map(
+        (c) => `
+      <tr>
+        <td>${c.category}</td>
+        <td style="text-align:right">${f(c.amount)}</td>
+        <td style="text-align:right; color:#94a3b8">${c.pct}%</td>
+        <td style="width:120px">
+          <div class="bar-bg"><div class="bar-fill" style="width:${Math.min(c.pct, 100)}%"></div></div>
+        </td>
+      </tr>`,
+      )
+      .join('');
+
+    return `
+  <div class="section">
+    <h2>Spending by Category — Last 30 Days</h2>
+    <table>
+      <thead><tr><th>Category</th><th style="text-align:right">Amount</th><th style="text-align:right">Share</th><th></th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+  }
+
+  // ── Accounts ───────────────────────────────────────────────────────────────
+
+  _accountsSection(pf) {
+    const f = (n) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(n);
+    const rows = pf.accounts
+      .map(
+        (a) => `
+      <tr>
+        <td class="ticker">${a.name}</td>
+        <td><span style="background:#1e293b;padding:2px 8px;border-radius:4px;font-size:11px">${a.type}</span></td>
+        <td class="gray">${a.org}</td>
+        <td style="text-align:right" class="${a.balance >= 0 ? 'green' : 'red'}">${f(a.balance)}</td>
+        <td class="gray" style="text-align:right">${a.balanceDate}</td>
+      </tr>`,
+      )
+      .join('');
+
+    return `
+  <div class="section">
+    <h2>Accounts</h2>
+    <table>
+      <thead><tr><th>Account</th><th>Type</th><th>Institution</th><th style="text-align:right">Balance</th><th style="text-align:right">Updated</th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+  }
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+
+  _card(label, value, colorClass = null, sub = null) {
+    return `<div class="card">
+      <div class="card-label">${label}</div>
+      <div class="card-value ${colorClass ? colorClass : ''}">${value}</div>
+      ${sub ? `<div class="card-sub">${sub}</div>` : ''}
+    </div>`;
+  }
+
+  _adviceClass(advice) {
+    if (advice?.includes('🟢')) return 'advice-green';
+    if (advice?.includes('🟡')) return 'advice-yellow';
+    if (advice?.includes('🟠')) return 'advice-orange';
+    if (advice?.includes('🔴')) return 'advice-red';
+    return 'gray';
+  }
+}