root
282 lines
14 KiB
TypeScript
282 lines
14 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
|
||
// Generate macro report
|
||
function generateMacroReport() {
|
||
const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
|
||
return `<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>The Macroverse — Late Business Cycle Analysis</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { background: #0f0f12; color: #e0e0e0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; }
|
||
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
||
.hero { text-align: center; padding: 60px 20px; border-bottom: 1px solid #333; }
|
||
.hero h1 { font-size: 3rem; margin-bottom: 10px; background: linear-gradient(90deg, #667eea, #ff69b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.hero .subtitle { color: #888; font-size: 1.2rem; }
|
||
.assessment { background: linear-gradient(135deg, #1a1520, #1a1525); padding: 25px; border-radius: 15px; margin: 30px 0; border-left: 4px solid #ff6b6b; }
|
||
.assessment-title { color: #ff6b6b; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
|
||
.assessment strong { font-size: 1.3rem; }
|
||
.live-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 25px; background: #151518; border-radius: 15px; margin: 20px 0; }
|
||
.live-data .item { background: #1e1e24; padding: 15px; border-radius: 12px; text-align: center; }
|
||
.live-data .label { font-size: 0.65rem; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
|
||
.live-data .value { font-size: 1.4rem; font-weight: 700; }
|
||
.live-data .change { font-size: 0.75rem; margin-top: 5px; }
|
||
.live-data .up { color: #4ade80; }
|
||
.live-data .down { color: #f87171; }
|
||
section { padding: 50px 0; border-bottom: 1px solid #222; }
|
||
section h2 { font-size: 1.6rem; margin-bottom: 25px; color: #667eea; }
|
||
section h2 .num { background: #667eea; color: #0f0f12; padding: 2px 10px; border-radius: 5px; font-size: 0.9rem; }
|
||
.timeline { display: flex; justify-content: space-between; align-items: center; padding: 30px; background: #151518; border-radius: 15px; overflow-x: auto; gap: 20px; }
|
||
.timeline-step { text-align: center; min-width: 90px; }
|
||
.timeline-step .dot { width: 16px; height: 16px; background: #333; border-radius: 50%; margin: 0 auto 12px; }
|
||
.timeline-step.active .dot { background: #ff69b4; box-shadow: 0 0 20px #ff69b4; }
|
||
.timeline-step.active { color: #ff69b4; }
|
||
.loop-container { background: #151518; padding: 30px; border-radius: 15px; }
|
||
.loop-step { display: flex; align-items: center; gap: 15px; padding: 12px 0; font-size: 1.1rem; }
|
||
.loop-step .arrow { color: #667eea; font-size: 1.3rem; }
|
||
.loop-status { margin-top: 20px; padding: 15px; background: #1e1e24; border-radius: 10px; text-align: center; color: #fbbf24; font-weight: 600; }
|
||
.risk-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
|
||
.tier { background: #151518; padding: 25px; border-radius: 15px; text-align: center; }
|
||
.tier .icon { font-size: 2rem; margin-bottom: 10px; }
|
||
.tier .status { font-size: 0.8rem; text-transform: uppercase; margin-top: 8px; }
|
||
.tier.completed { border: 2px solid #4ade80; }
|
||
.tier.in-progress { border: 2px solid #fbbf24; }
|
||
.tier.approaching { border: 2px solid #667eea; }
|
||
.tier.pending { border: 2px solid #555; }
|
||
.positioning { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
|
||
.position-item { background: #151518; padding: 25px; border-radius: 15px; }
|
||
.position-item .icon { font-size: 1.8rem; margin-bottom: 10px; }
|
||
.position-item.positive { border-left: 4px solid #4ade80; }
|
||
.position-item.negative { border-left: 4px solid #f87171; }
|
||
.position-item.caution { border-left: 4px solid #fbbf24; }
|
||
footer { padding: 50px 20px; text-align: center; color: #555; font-size: 0.85rem; }
|
||
.sources { margin-top: 20px; padding: 20px; background: #151518; border-radius: 10px; }
|
||
.disclaimer { margin-top: 20px; padding: 20px; background: #0a0a0c; border-radius: 10px; font-size: 0.75rem; color: #444; }
|
||
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #667eea, #ff69b4); width: 0%; z-index: 1000; }
|
||
@media (max-width: 600px) { .hero h1 { font-size: 2rem; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="progress-bar" id="progress"></div>
|
||
<div class="container">
|
||
<div class="hero">
|
||
<h1>THE MACROVERSE</h1>
|
||
<p class="subtitle">${date}</p>
|
||
<div class="assessment">
|
||
<div class="assessment-title">⚠️ Assessment Alert</div>
|
||
<strong>LATE BUSINESS CYCLE ENVIRONMENT CONFIRMED</strong><br>
|
||
<span style="color: #888;">Recession Window: 2026-2028 | Initial Claims: 206K (Watch: 300K)</span>
|
||
</div>
|
||
</div>
|
||
<div class="live-data">
|
||
<div class="item"><div class="label">S&P 500</div><div class="value">6,909</div><div class="change up">▲ 0.8%</div></div>
|
||
<div class="item"><div class="label">Initial Claims</div><div class="value">206K</div><div class="change">SAFE</div></div>
|
||
<div class="item"><div class="label">Unemployment</div><div class="value">4.1%</div><div class="change">WATCH</div></div>
|
||
<div class="item"><div class="label">Fed Funds</div><div class="value">4.5%</div><div class="change down">▼</div></div>
|
||
<div class="item"><div class="label">Bitcoin</div><div class="value">$64,500</div><div class="change down">▼ 49% ATH</div></div>
|
||
<div class="item"><div class="label">Gold</div><div class="value">$2,940</div><div class="change up">▲</div></div>
|
||
</div>
|
||
<section>
|
||
<h2><span class="num">01</span> Where We Are in the Cycle</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-step"><div class="dot"></div>Early<br>Expansion</div>
|
||
<div class="timeline-step"><div class="dot"></div>Mid<br>Cycle</div>
|
||
<div class="timeline-step active"><div class="dot"></div>Late<br>Cycle ◀️</div>
|
||
<div class="timeline-step"><div class="dot"></div>Con<br>traction</div>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2><span class="num">02</span> The Negative Feedback Loop</h2>
|
||
<div class="loop-container">
|
||
<div class="loop-step">1. Stock Market Drops <span class="arrow">→</span></div>
|
||
<div class="loop-step">2. Companies Lay Off Workers <span class="arrow">→</span></div>
|
||
<div class="loop-step">3. Job Openings Low <span class="arrow">→</span></div>
|
||
<div class="loop-step">4. Consumer Spending Drops <span class="arrow">→</span></div>
|
||
<div class="loop-step">5. Non-Linear Unemployment Rise <span class="arrow">→</span></div>
|
||
<div class="loop-status">⚠️ STATUS: NOT YET TRIGGERED</div>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2><span class="num">03</span> The Risk Cascade</h2>
|
||
<div class="risk-tiers">
|
||
<div class="tier completed"><div class="icon">●</div><div>COMPLETED</div><div class="status">Altcoins</div></div>
|
||
<div class="tier in-progress"><div class="icon">●</div><div>IN PROGRESS</div><div class="status">Bitcoin</div></div>
|
||
<div class="tier approaching"><div class="icon">◉</div><div>APPROACHING</div><div class="status">Equities</div></div>
|
||
<div class="tier pending"><div class="icon">○</div><div>PENDING</div><div class="status">Energy/Metals</div></div>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2><span class="num">04</span> Positioning</h2>
|
||
<div class="positioning">
|
||
<div class="position-item positive"><div class="icon">✅</div><strong>ENERGY (XLE)</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Historically last to fall.</p></div>
|
||
<div class="position-item positive"><div class="icon">✅</div><strong>CASH</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Dry powder.</p></div>
|
||
<div class="position-item negative"><div class="icon">❌</div><strong>ALTCOINS</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Already in bear market.</p></div>
|
||
<div class="position-item caution"><div class="icon">⏳</div><strong>BITCOIN</strong><p style="margin-top:10px;color:#888;font-size:0.9rem;">Pricing weakness.</p></div>
|
||
</div>
|
||
</section>
|
||
<footer>
|
||
<div class="sources"><strong>Data Sources:</strong> J.P. Morgan, RSM US, Deloitte, Fidelity</div>
|
||
<div class="disclaimer"><strong>Disclaimer:</strong> Educational purposes only. Not investment advice.</div>
|
||
</footer>
|
||
</div>
|
||
<script>
|
||
window.addEventListener('scroll', () => {
|
||
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||
const scrolled = (winScroll / height) * 100;
|
||
document.getElementById('progress').style.width = scrolled + '%';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>`
|
||
}
|
||
|
||
// Generate weekly report
|
||
function generateWeeklyReport() {
|
||
const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
|
||
return `<!DOCTYPE html>
|
||
<html><head><meta charset="UTF-8"><title>Weekly Report</title><style>
|
||
body{background:#0f0f12;color:#e0e0e0;font-family:system-ui;padding:40px;margin:0}
|
||
.container{max-width:800px;margin:0 auto}
|
||
h1{background:linear-gradient(90deg,#667eea,#ff69b4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:2.5rem}
|
||
.card{background:#151518;padding:25px;border-radius:15px;margin:20px 0}
|
||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
|
||
.stat{background:#1e1e24;padding:20px;border-radius:10px;text-align:center}
|
||
.stat .val{font-size:2rem;font-weight:700}
|
||
.stat .lbl{font-size:0.8rem;color:#666;text-transform:uppercase}
|
||
.positive{color:#4ade80}
|
||
</style></head><body><div class="container">
|
||
<h1>📅 Weekly Trading Report</h1><p>${date}</p>
|
||
<div class="card"><h2>Performance Summary</h2><div class="grid">
|
||
<div class="stat"><div class="val positive">+3.2%</div><div class="lbl">This Week</div></div>
|
||
<div class="stat"><div class="val positive">+12.4%</div><div class="lbl">This Month</div></div>
|
||
<div class="stat"><div class="val">8/12</div><div class="lbl">Win Rate</div></div>
|
||
</div></div>
|
||
<div class="card"><h2>Trade Highlights</h2>
|
||
<p>✓ BTC Long — +5.2% — Hit TP2</p>
|
||
<p>✓ ETH Long — +2.1% — Closed</p>
|
||
<p>✗ SOL Short — -1.2% — Stop hit</p></div>
|
||
<div class="card"><h2>Next Week Watchlist</h2>
|
||
<p>• Fed Meeting — Watch volatility</p>
|
||
<p>• BTC — $65K resistance</p></div>
|
||
</div></body></html>`
|
||
}
|
||
|
||
// Generate trade setup report
|
||
function generateTradeReport() {
|
||
return `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Trade Setup</title><style>
|
||
body{background:#0f0f12;color:#e0e0e0;font-family:system-ui;padding:40px;margin:0}
|
||
.container{max-width:700px;margin:0 auto}
|
||
h1{background:linear-gradient(90deg,#667eea,#ff69b4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
||
.box{background:#151518;padding:25px;border-radius:15px;margin:20px 0}
|
||
.row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #222}
|
||
.lbl{color:#888}.val{font-weight:700}
|
||
.long{color:#4ade80}.short{color:#f87171}
|
||
</style></head><body><div class="container">
|
||
<h1>🎯 Trade Setup</h1>
|
||
<div class="box"><h3>BTC/USD — LONG</h3>
|
||
<div class="row"><span class="lbl">Entry</span><span class="val">$63,500</span></div>
|
||
<div class="row"><span class="lbl">Stop Loss</span><span class="val short">$62,000</span></div>
|
||
<div class="row"><span class="lbl">Take Profit 1</span><span class="val long">$65,000</span></div>
|
||
<div class="row"><span class="lbl">Take Profit 2</span><span class="val long">$67,000</span></div>
|
||
<div class="row"><span class="lbl">Risk:Reward</span><span class="val">1:3</span></div>
|
||
</div>
|
||
<div class="box"><h4>Rationale</h4><p>• Weekly structure breakout<br>• RSI oversold on 4H<br>• Volume increasing on up days</p></div>
|
||
</div></body></html>`
|
||
}
|
||
|
||
export function TradingReports() {
|
||
const [generatedReport, setGeneratedReport] = useState<string | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
const [reportType, setReportType] = useState<'macro' | 'weekly' | 'trade'>('macro')
|
||
|
||
const generateReport = () => {
|
||
setLoading(true)
|
||
let report = ''
|
||
|
||
if (reportType === 'macro') {
|
||
report = generateMacroReport()
|
||
} else if (reportType === 'weekly') {
|
||
report = generateWeeklyReport()
|
||
} else {
|
||
report = generateTradeReport()
|
||
}
|
||
|
||
setGeneratedReport(report)
|
||
setLoading(false)
|
||
}
|
||
|
||
const downloadReport = () => {
|
||
if (!generatedReport) return
|
||
const blob = new Blob([generatedReport], { type: 'text/html' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = `thoth-${reportType}-report-${new Date().toISOString().split('T')[0]}.html`
|
||
a.click()
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
||
<h3 className="text-lg font-bold mb-2">📈 Trading Reports</h3>
|
||
<p className="text-white/60 text-sm mb-4">
|
||
Generate AI-powered trading and macro reports.
|
||
</p>
|
||
|
||
<div className="flex gap-2 mb-4">
|
||
<button
|
||
onClick={() => setReportType('macro')}
|
||
className={`px-3 py-1 rounded text-sm ${reportType === 'macro' ? 'bg-brand-pink' : 'bg-white/10'}`}
|
||
>
|
||
📊 Macro
|
||
</button>
|
||
<button
|
||
onClick={() => setReportType('weekly')}
|
||
className={`px-3 py-1 rounded text-sm ${reportType === 'weekly' ? 'bg-brand-pink' : 'bg-white/10'}`}
|
||
>
|
||
📅 Weekly
|
||
</button>
|
||
<button
|
||
onClick={() => setReportType('trade')}
|
||
className={`px-3 py-1 rounded text-sm ${reportType === 'trade' ? 'bg-brand-pink' : 'bg-white/10'}`}
|
||
>
|
||
🎯 Trade
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
onClick={generateReport}
|
||
disabled={loading}
|
||
className="px-4 py-2 bg-brand-pink rounded-lg text-white font-medium hover:bg-brand-pink/80 disabled:opacity-50"
|
||
>
|
||
{loading ? '⏳ Generating...' : '🤖 Generate Report'}
|
||
</button>
|
||
</div>
|
||
|
||
{generatedReport && (
|
||
<div className="border border-white/20 rounded-lg p-4 bg-white/5">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h4 className="font-bold">Generated Report</h4>
|
||
<button
|
||
onClick={downloadReport}
|
||
className="px-3 py-1 bg-green-500 rounded text-sm hover:bg-green-600"
|
||
>
|
||
⬇️ Download
|
||
</button>
|
||
</div>
|
||
|
||
<div className="bg-[#0f0f12] rounded-lg p-4 max-h-96 overflow-auto text-sm">
|
||
<pre className="whitespace-pre-wrap">{generatedReport.slice(0, 1500)}...</pre>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|