market_screener/ui/src/routes/safe-buys/+page.svelte

<script>
  import MarketContext from '$lib/MarketContext.svelte';
  import SignalBadge from '$lib/SignalBadge.svelte';
  import { sorted, verdictShort, vClass } from '$lib/utils.js';

  let { data } = $props();

  const SIGNAL_STRONG = '✅ Strong Buy';

  // Filter to only Strong Buy in both modes — the safest picks
  const strongEtfs  = $derived((data.ETF  ?? []).filter(r => r.signal === SIGNAL_STRONG));
  const strongBonds = $derived((data.BOND ?? []).filter(r => r.signal === SIGNAL_STRONG));

  // All other non-error results — "watch" tier (pass one mode but not both)
  const watchEtfs  = $derived((data.ETF  ?? []).filter(r => r.signal !== SIGNAL_STRONG));
  const watchBonds = $derived((data.BOND ?? []).filter(r => r.signal !== SIGNAL_STRONG));

  const totalScreened = $derived((data.ETF?.length ?? 0) + (data.BOND?.length ?? 0));
  const totalStrong   = $derived(strongEtfs.length + strongBonds.length);
</script>

<div class="page">
  <div class="page-header">
    <div>
      <h1>🛡 Safe Buys</h1>
      <p class="subtitle">
        Low-cost ETFs and investment-grade bonds passing <strong>both</strong> Market-Adjusted and Fundamental gates.
        {totalStrong} of {totalScreened} screened assets qualify.
      </p>
    </div>
  </div>

  {#if data.error}
    <div class="error-banner">⚠ {data.error}</div>
  {/if}

  {#if data.marketContext}
    <MarketContext ctx={data.marketContext} />
  {/if}

  <!-- ── Strong Buy ─────────────────────────────────────────────────── -->
  {#if strongEtfs.length || strongBonds.length}
    <div class="strong-header">
      <span class="strong-badge">✅ Strong Buy</span>
      <span class="strong-sub">Pass both Market-Adjusted and Fundamental gates</span>
    </div>

    {#if strongEtfs.length}
      <section class="section">
        <div class="section-header">
          <h2>ETFs</h2>
          <span class="count">{strongEtfs.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>Expense</th>
                <th>Yield</th>
                <th>AUM</th>
                <th>5Y Ret</th>
                <th>Score</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(strongEtfs) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><span class="vpill {vClass(r.inflated.label)}">{verdictShort(r.inflated.label)}</span></td>
                  <td><span class="vpill {vClass(r.fundamental.label)}">{verdictShort(r.fundamental.label)}</span></td>
                  <td class="num">{m['Exp Ratio%'] ?? '—'}</td>
                  <td class="num">{m['Yield%'] ?? '—'}</td>
                  <td class="num">{m['AUM'] ?? '—'}</td>
                  <td class="num">{m['5Y Return%'] ?? '—'}</td>
                  <td class="score">{r.inflated.scoreSummary}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}

    {#if strongBonds.length}
      <section class="section">
        <div class="section-header">
          <h2>Bond ETFs</h2>
          <span class="count">{strongBonds.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>YTM</th>
                <th>Duration</th>
                <th>Rating</th>
                <th>Score</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(strongBonds) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><span class="vpill {vClass(r.inflated.label)}">{verdictShort(r.inflated.label)}</span></td>
                  <td><span class="vpill {vClass(r.fundamental.label)}">{verdictShort(r.fundamental.label)}</span></td>
                  <td class="num">{m['YTM%'] ?? '—'}</td>
                  <td class="num">{m['Duration'] ?? '—'}</td>
                  <td class="num">{m['Rating'] ?? '—'}</td>
                  <td class="score">{r.inflated.scoreSummary}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}
  {:else}
    <div class="empty-strong">
      No assets currently pass both gates — market conditions may be elevated.
      Check the Watch List below for assets passing at least one mode.
    </div>
  {/if}

  <!-- ── Watch List ─────────────────────────────────────────────────── -->
  {#if watchEtfs.length || watchBonds.length}
    <div class="watch-header">
      <span class="watch-label">👀 Watch List</span>
      <span class="watch-sub">Pass one gate — monitor for entry</span>
    </div>

    {#if watchEtfs.length}
      <section class="section watch-section">
        <div class="section-header">
          <h2>ETFs</h2>
          <span class="count">{watchEtfs.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Signal</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>Expense</th>
                <th>Yield</th>
                <th>AUM</th>
                <th>5Y Ret</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(watchEtfs) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><SignalBadge signal={r.signal} /></td>
                  <td><span class="vpill {vClass(r.inflated.label)}">{verdictShort(r.inflated.label)}</span></td>
                  <td><span class="vpill {vClass(r.fundamental.label)}">{verdictShort(r.fundamental.label)}</span></td>
                  <td class="num">{m['Exp Ratio%'] ?? '—'}</td>
                  <td class="num">{m['Yield%'] ?? '—'}</td>
                  <td class="num">{m['AUM'] ?? '—'}</td>
                  <td class="num">{m['5Y Return%'] ?? '—'}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}

    {#if watchBonds.length}
      <section class="section watch-section">
        <div class="section-header">
          <h2>Bond ETFs</h2>
          <span class="count">{watchBonds.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Signal</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>YTM</th>
                <th>Duration</th>
                <th>Rating</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(watchBonds) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><SignalBadge signal={r.signal} /></td>
                  <td><span class="vpill {vClass(r.inflated.label)}">{verdictShort(r.inflated.label)}</span></td>
                  <td><span class="vpill {vClass(r.fundamental.label)}">{verdictShort(r.fundamental.label)}</span></td>
                  <td class="num">{m['YTM%'] ?? '—'}</td>
                  <td class="num">{m['Duration'] ?? '—'}</td>
                  <td class="num">{m['Rating'] ?? '—'}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}
  {/if}
</div>

<style>
  .page { max-width: 1100px; padding-bottom: 60px; }

  .page-header { margin-bottom: 20px; }
  h1 { font-size: 20px; font-weight: 700; color: #f1f5f9; margin-bottom: 6px; }
  .subtitle { font-size: 12px; color: #475569; line-height: 1.5; }
  .subtitle strong { color: #94a3b8; }

  /* ── Strong Buy banner ───────────────────────────────────────────── */
  .strong-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .strong-badge {
    font-size: 12px;
    font-weight: 700;
    color: #4ade80;
    background: #14532d33;
    padding: 4px 14px;
    border-radius: 20px;
  }

  .strong-sub { font-size: 11px; color: #475569; }

  .empty-strong {
    padding: 32px 20px;
    background: #111827;
    border: 1px solid #1e293b;
    border-radius: 10px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
  }

  /* ── Watch List ──────────────────────────────────────────────────── */
  .watch-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    margin-bottom: 12px;
  }

  .watch-label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    background: #1e293b;
    padding: 4px 14px;
    border-radius: 20px;
  }

  .watch-sub { font-size: 11px; color: #475569; }

  /* ── Section ─────────────────────────────────────────────────────── */
  .section {
    background: #0d1117;
    border: 1px solid #1e293b;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
  }

  .watch-section { opacity: 0.75; }
  .watch-section:hover { opacity: 1; transition: opacity 0.2s; }

  .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #1e293b;
    background: #111827;
  }

  h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin: 0; }
  .count { font-size: 10px; color: #334155; background: #1e293b; padding: 2px 7px; border-radius: 20px; }

  /* ── Table ───────────────────────────────────────────────────────── */
  .table-wrap { overflow-x: auto; }
  table { width: max-content; min-width: 100%; border-collapse: collapse; }

  thead th {
    text-align: left;
    padding: 7px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #334155;
    border-bottom: 1px solid #1e293b;
    white-space: nowrap;
    background: #111827;
  }

  tbody tr { border-bottom: 1px solid #161f2e; }
  tbody tr:hover { background: #131c2b; }
  tbody td { padding: 10px 14px; vertical-align: middle; white-space: nowrap; font-size: 13px; }

  .col-ticker,
  tbody td:first-child { position: sticky; left: 0; background: #0d1117; z-index: 1; }
  thead .col-ticker { background: #111827; }
  tbody tr:hover td:first-child { background: #131c2b; }

  .ticker { font-weight: 700; color: #f1f5f9; letter-spacing: 0.02em; }
  .num    { color: #64748b; font-variant-numeric: tabular-nums; font-size: 12px; }
  .score  { color: #475569; font-size: 11px; }

  /* ── Verdict pills ───────────────────────────────────────────────── */
  .vpill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
  }
  .vpill.green  { background: #14532d33; color: #4ade80; }
  .vpill.yellow { background: #71350033; color: #facc15; }
  .vpill.red    { background: #450a0a33; color: #f87171; }

  .error-banner { background: #450a0a55; border: 1px solid #7f1d1d; border-radius: 8px; color: #f87171; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
</style>