root
211 lines
9.7 KiB
TypeScript
211 lines
9.7 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
|
||
export function TradingReports() {
|
||
const [generatedReport, setGeneratedReport] = useState<string | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
// Sample macro report in HTML
|
||
const sampleReport = `
|
||
<!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: 2.5rem; margin-bottom: 10px; background: linear-gradient(90deg, #667eea, #ff69b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.hero .date { color: #888; font-size: 1.1rem; }
|
||
.assessment { background: #1a1a20; padding: 20px; border-radius: 10px; margin: 30px 0; border-left: 4px solid #ff6b6b; }
|
||
.live-data { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px; background: #151518; border-radius: 10px; margin: 20px 0; }
|
||
.live-data .item { background: #1e1e24; padding: 10px 15px; border-radius: 8px; text-align: center; }
|
||
.live-data .label { font-size: 0.7rem; color: #666; text-transform: uppercase; }
|
||
.live-data .value { font-size: 1.2rem; font-weight: bold; }
|
||
.live-data .change { font-size: 0.8rem; }
|
||
.live-data .up { color: #4ade80; }
|
||
.live-data .down { color: #f87171; }
|
||
section { padding: 40px 0; border-bottom: 1px solid #222; }
|
||
h2 { font-size: 1.5rem; margin-bottom: 20px; color: #667eea; }
|
||
.timeline { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #151518; border-radius: 10px; overflow-x: auto; }
|
||
.timeline-step { text-align: center; min-width: 80px; }
|
||
.timeline-step.active { color: #ff69b4; }
|
||
.timeline-step .dot { width: 12px; height: 12px; background: #333; border-radius: 50%; margin: 0 auto 8px; }
|
||
.timeline-step.active .dot { background: #ff69b4; }
|
||
.feedback-loop { background: #151518; padding: 30px; border-radius: 10px; }
|
||
.loop-step { display: flex; align-items: center; gap: 15px; padding: 10px 0; }
|
||
.loop-step .arrow { color: #667eea; }
|
||
.risk-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
|
||
.tier { background: #151518; padding: 20px; border-radius: 10px; text-align: center; }
|
||
.tier.completed { border: 2px solid #4ade80; }
|
||
.tier.in-progress { border: 2px solid #fbbf24; }
|
||
.tier.approaching { border: 2px solid #667eea; }
|
||
.tier.pending { border: 2px solid #666; }
|
||
.positioning { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
|
||
.position-item { background: #151518; padding: 20px; border-radius: 10px; }
|
||
.position-item .icon { font-size: 1.5rem; 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: 40px 20px; text-align: center; color: #666; font-size: 0.9rem; }
|
||
.disclaimer { margin-top: 20px; padding: 20px; background: #151518; border-radius: 10px; font-size: 0.8rem; color: #555; }
|
||
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #667eea, #ff69b4); width: 0%; z-index: 1000; }
|
||
.ticker { background: #151518; padding: 12px 0; overflow: hidden; white-space: nowrap; }
|
||
.ticker-content { display: inline-block; animation: ticker 30s linear infinite; }
|
||
@keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
|
||
@media (max-width: 600px) { .hero h1 { font-size: 1.8rem; } .live-data { gap: 5px; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="progress-bar" id="progress"></div>
|
||
|
||
<div class="ticker">
|
||
<div class="ticker-content">
|
||
Late-cycle indicators confirm fragile growth environment. Markets pricing recession risk. Initial claims below 300K threshold. Watch April-October 2026 as key weakness window. Bitcoin already discounting late-cycle weakness.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="hero">
|
||
<h1>THE MACROVERSE</h1>
|
||
<p class="date">February 25, 2026</p>
|
||
<div class="assessment">
|
||
<strong>⚠️ ASSESSMENT ALERT:</strong> LATE BUSINESS CYCLE — RECESSION WINDOW: 2026-2028
|
||
</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">▼ 50% 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>01 — Where We Are in the Cycle</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-step"><div class="dot"></div>Early Expansion</div>
|
||
<div class="timeline-step"><div class="dot"></div>Mid Cycle</div>
|
||
<div class="timeline-step active"><div class="dot"></div>Late Cycle ◀️</div>
|
||
<div class="timeline-step"><div class="dot"></div>Contraction</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>02 — The Negative Feedback Loop</h2>
|
||
<div class="feedback-loop">
|
||
<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-step"><strong>STATUS: NOT YET TRIGGERED</strong></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>03 — The Risk Cascade</h2>
|
||
<div class="risk-tiers">
|
||
<div class="tier completed"><div class="icon">●</div><div>COMPLETED</div><small>Altcoins</small></div>
|
||
<div class="tier in-progress"><div class="icon">●</div><div>IN PROGRESS</div><small>Bitcoin</small></div>
|
||
<div class="tier approaching"><div class="icon">◉</div><div>APPROACHING</div><small>Equities</small></div>
|
||
<div class="tier pending"><div class="icon">○</div><div>PENDING</div><small>Energy/Metals</small></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>04 — Positioning</h2>
|
||
<div class="positioning">
|
||
<div class="position-item positive"><div class="icon">✅</div><strong>ENERGY (XLE)</strong><p>Historically last to fall. Late-cycle defensive.</p></div>
|
||
<div class="position-item positive"><div class="icon">✅</div><strong>CASH</strong><p>Dry powder for distressed buying.</p></div>
|
||
<div class="position-item negative"><div class="icon">❌</div><strong>ALTCOINS</strong><p>Already in bear market.</p></div>
|
||
<div class="position-item caution"><div class="icon">⏳</div><strong>BITCOIN</strong><p>Pricing late-cycle weakness.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Analysis derived from macro research. Data sources: J.P. Morgan, RSM US, Deloitte, Fidelity.</p>
|
||
<div class="disclaimer">
|
||
This report is for educational purposes only. Past cycle behavior is instructive but not deterministic.
|
||
Not investment advice. Do your own research.
|
||
</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>`
|
||
|
||
const generateReport = async () => {
|
||
setLoading(true)
|
||
// Simulate generation - in production would call LLM
|
||
await new Promise(r => setTimeout(r, 2000))
|
||
setGeneratedReport(sampleReport)
|
||
setLoading(false)
|
||
}
|
||
|
||
const downloadReport = () => {
|
||
const blob = new Blob([generatedReport], { type: 'text/html' })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = 'macro-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 professional macro analysis reports with dark editorial design.
|
||
</p>
|
||
|
||
<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 Macro 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">Report Preview</h4>
|
||
<button
|
||
onClick={downloadReport}
|
||
className="px-3 py-1 bg-green-500 rounded text-sm hover:bg-green-600"
|
||
>
|
||
⬇️ Download HTML
|
||
</button>
|
||
</div>
|
||
|
||
<div className="bg-[#0f0f12] rounded-lg p-4 max-h-96 overflow-auto">
|
||
<div dangerouslySetInnerHTML={{ __html: generatedReport.slice(0, 2000) + '...' }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|