Kazuma
291 lines
10 KiB
Svelte
291 lines
10 KiB
Svelte
<script lang="ts">
|
|
import MarketContext from '$lib/MarketContext.svelte';
|
|
import SignalBadge from '$lib/SignalBadge.svelte';
|
|
import VerdictPill from '$lib/VerdictPill.svelte';
|
|
import { sorted } from '$lib/utils.js';
|
|
import type { AssetResult, MarketContext as MarketContextType } from '$lib/types.js';
|
|
|
|
interface PageData {
|
|
ETF: AssetResult[];
|
|
BOND: AssetResult[];
|
|
marketContext: MarketContextType | null;
|
|
error?: string;
|
|
}
|
|
let { data }: { data: PageData } = $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><VerdictPill label={r.inflated.label} /></td>
|
|
<td><VerdictPill label={r.fundamental.label} /></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><VerdictPill label={r.inflated.label} /></td>
|
|
<td><VerdictPill label={r.fundamental.label} /></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><VerdictPill label={r.inflated.label} /></td>
|
|
<td><VerdictPill label={r.fundamental.label} /></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><VerdictPill label={r.inflated.label} /></td>
|
|
<td><VerdictPill label={r.fundamental.label} /></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 ── unique to this route ──────────────────────────────── */
|
|
.page { max-width: 1100px; padding-bottom: 60px; }
|
|
|
|
.page-header { margin-bottom: 20px; }
|
|
h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
|
|
.subtitle { font-size: 12px; color: var(--text-dimmer); line-height: 1.5; }
|
|
.subtitle strong { color: var(--text-muted); }
|
|
|
|
/* ── Strong Buy banner ───────────────────────────────────────────── */
|
|
.strong-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
|
|
|
.strong-badge {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--green);
|
|
background: var(--green-bg);
|
|
padding: 4px 14px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.strong-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
|
|
|
|
.empty-strong {
|
|
padding: var(--space-3xl) 20px;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--fs-md);
|
|
color: var(--text-dim);
|
|
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: var(--text-muted);
|
|
background: var(--bg-card);
|
|
padding: 4px 14px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.watch-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
|
|
|
|
/* Watch sections are slightly dimmed — hover to focus */
|
|
.watch-section { opacity: 0.75; }
|
|
.watch-section:hover { opacity: 1; transition: opacity 0.2s; }
|
|
|
|
/* ── Score cell ─────────────────────────────────────────────────── */
|
|
.score { color: var(--text-dimmer); font-size: var(--fs-sm); }
|
|
</style>
|