root
173 lines
6.8 KiB
TypeScript
173 lines
6.8 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
|
||
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 = async () => {
|
||
setLoading(true)
|
||
|
||
try {
|
||
// Call our API to generate the report using MiniMax
|
||
const response = await fetch('/api/ai/generate-report', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
type: reportType,
|
||
date: new Date().toISOString().split('T')[0]
|
||
})
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (data.report) {
|
||
setGeneratedReport(data.report)
|
||
} else {
|
||
// Fallback sample if API not ready
|
||
setGeneratedReport(getSampleReport())
|
||
}
|
||
} catch (error) {
|
||
console.error('Generation failed:', error)
|
||
setGeneratedReport(getSampleReport())
|
||
}
|
||
|
||
setLoading(false)
|
||
}
|
||
|
||
const getSampleReport = () => `
|
||
<!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; }
|
||
.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; }
|
||
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; }
|
||
.positioning { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
|
||
.position-item { background: #151518; padding: 20px; border-radius: 10px; }
|
||
footer { padding: 40px 20px; text-align: center; color: #666; font-size: 0.9rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="hero">
|
||
<h1>THE MACROVERSE</h1>
|
||
<p class="date">February 25, 2026</p>
|
||
<div class="assessment"><strong>⚠️ ASSESSMENT:</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>
|
||
<div class="item"><div class="label">Initial Claims</div><div class="value">206K</div></div>
|
||
<div class="item"><div class="label">Unemployment</div><div class="value">4.1%</div></div>
|
||
<div class="item"><div class="label">Fed Funds</div><div class="value">4.5%</div></div>
|
||
<div class="item"><div class="label">Bitcoin</div><div class="value">$64,500</div></div>
|
||
</div>
|
||
<section>
|
||
<h2>01 — Where We Are in the Cycle</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-step">Early Expansion</div>
|
||
<div class="timeline-step">Mid Cycle</div>
|
||
<div class="timeline-step active">Late Cycle ◀️</div>
|
||
<div class="timeline-step">Contraction</div>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2>02 — Positioning</h2>
|
||
<div class="positioning">
|
||
<div class="position-item"><strong>✅ ENERGY</strong><p>Historically last to fall.</p></div>
|
||
<div class="position-item"><strong>✅ CASH</strong><p>Dry powder.</p></div>
|
||
<div class="position-item"><strong>⏳ BITCOIN</strong><p>Pricing weakness.</p></div>
|
||
</div>
|
||
</section>
|
||
<footer><p>Generated by Thoth AI</p></footer>
|
||
</div>
|
||
</body>
|
||
</html>`
|
||
|
||
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-report-${reportType}-${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. Thoth creates them using the LLM.
|
||
</p>
|
||
|
||
{/* Report Type Selection */}
|
||
<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 Setup
|
||
</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 ? '⏳ Thoth is generating...' : '🤖 Generate Report with Thoth'}
|
||
</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">🤖 AI Generated Report</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, 3000) + '...' }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|