Add Macro Report Generator to Trading tab

2026-02-25 10:25:58 +01:00
parent 52ea3044a4
commit 71eb6c76c4
2 changed files with 87 additions and 0 deletions
@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react'
+
+export function MacroReportGenerator() {
+  const [generating, setGenerating] = useState(false)
+  const [report, setReport] = useState('')
+
+  const prompt = `You are a professional macro analyst and front‑end designer building a single‑page HTML report for macro traders and investors. Create one self‑contained HTML file.
+
+DESIGN & UX CONSTRAINTS:
+- Use only native HTML + CSS + minimal inline JS
+- No external fonts (use system-stack)
+- Color scheme: dark background (#0f0f12), light gray text (#e0e0e0), blue/orange accents
+- Large, readable, editorial-style typography
+- All charts/gauges CSS-driven
+- Ticker bar: smooth continuous loop
+- Reading progress bar: thin bar at top
+
+REPORT STRUCTURE:
+
+1. Hero + LIVE DATA BAR with key indicators (S&P 500, Initial Claims, Unemployment, Fed Funds, M2, Bitcoin, ETH, Gold)
+
+2. Header: "THE MACROVERSE — Late Business Cycle Analysis" with date and assessment
+
+3. Scrolling ticker bar with macro text
+
+4. Reading progress bar at top
+
+5. Core sections:
+   - 01: Cycle Indicator Formula
+   - 02: Where We Are in the Cycle (timeline)
+   - 03: Negative Feedback Loop (5-step)
+   - 04: Risk Cascade (tiers)
+   - 05: Midterm Year Window
+   - 06: Recession Arrives
+   - 07: Wall Street Views
+   - 08: Positioning
+
+6. Live Macro Indicators Dashboard (4-6 boxes)
+
+7. Cycle Event Timeline
+
+8. Key Watch Levels
+
+9. Footer with sources and disclaimer
+
+OUTPUT: One complete HTML file, copy-paste ready.`
+
+  const generateReport = async () => {
+    setGenerating(true)
+    // This would call an LLM - for now show placeholder
+    setReport('Report generation would use MiniMax or Claude API')
+    setGenerating(false)
+  }
+
+  return (
+    <div className="border border-white/20 rounded-lg p-4 bg-white/5">
+      <h3 className="text-lg font-bold mb-4">📊 Macro Report Generator</h3>
+      
+      <p className="text-white/70 mb-4">
+        Generate professional macro analysis reports like "The Macroverse" — self-contained HTML files with dark design, live data, and animated charts.
+      </p>
+
+      <button
+        onClick={generateReport}
+        disabled={generating}
+        className="px-4 py-2 bg-brand-pink rounded-lg text-white font-medium hover:bg-brand-pink/80 disabled:opacity-50"
+      >
+        {generating ? 'Generating...' : 'Generate Report'}
+      </button>
+
+      {report && (
+        <div className="mt-4 p-3 bg-white/5 rounded-lg">
+          <p className="text-sm text-white/70">{report}</p>
+        </div>
+      )}
+    </div>
+  )
+}