- Fixed layout conflicts by removing minimal layout.tsx in favor of complete layout.js - Restored original AI Analysis page with full TradingView integration - Connected enhanced screenshot API to real TradingView automation service - Fixed screenshot gallery to handle both string and object formats - Added image serving API route for screenshot display - Resolved hydration mismatch issues with suppressHydrationWarning - All navigation pages working (Analysis, Trading, Automation, Settings) - TradingView automation successfully capturing screenshots from AI and DIY layouts - Docker Compose v2 compatibility ensured Working features: - Homepage with hero section and status cards - Navigation menu with Trading Bot branding - Real TradingView screenshot capture - AI-powered chart analysis - Multi-layout support (AI + DIY module) - Screenshot gallery with image serving - API endpoints for balance, status, screenshots, trading
70 lines
3.3 KiB
JavaScript
70 lines
3.3 KiB
JavaScript
'use client'
|
||
|
||
import StatusOverview from '../components/StatusOverview.js'
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<div className="space-y-8">
|
||
{/* Hero Section */}
|
||
<div className="text-center py-8">
|
||
<h1 className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent mb-4">
|
||
AI Trading Dashboard
|
||
</h1>
|
||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||
Advanced cryptocurrency trading with AI-powered analysis, automated execution, and real-time monitoring.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Status Overview */}
|
||
<StatusOverview />
|
||
|
||
{/* Quick Actions */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div className="card card-gradient text-center">
|
||
<div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-blue-400 text-2xl">📊</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">AI Analysis</h3>
|
||
<p className="text-gray-400 text-sm mb-4">Get market insights and TradingView analysis</p>
|
||
<a href="/analysis" className="inline-flex items-center px-4 py-2 bg-blue-600/20 text-blue-400 rounded-lg hover:bg-blue-600/30 transition-colors text-sm">
|
||
View Analysis
|
||
</a>
|
||
</div>
|
||
|
||
<div className="card card-gradient text-center">
|
||
<div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-green-400 text-2xl">💰</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">Manual Trading</h3>
|
||
<p className="text-gray-400 text-sm mb-4">Execute trades and view history</p>
|
||
<a href="/trading" className="inline-flex items-center px-4 py-2 bg-green-600/20 text-green-400 rounded-lg hover:bg-green-600/30 transition-colors text-sm">
|
||
Trade Now
|
||
</a>
|
||
</div>
|
||
|
||
<div className="card card-gradient text-center">
|
||
<div className="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-purple-400 text-2xl">🤖</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">Auto Trading</h3>
|
||
<p className="text-gray-400 text-sm mb-4">Configure automation</p>
|
||
<a href="/automation" className="inline-flex items-center px-4 py-2 bg-purple-600/20 text-purple-400 rounded-lg hover:bg-purple-600/30 transition-colors text-sm">
|
||
Setup Bot
|
||
</a>
|
||
</div>
|
||
|
||
<div className="card card-gradient text-center">
|
||
<div className="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-orange-400 text-2xl">⚙️</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">Settings</h3>
|
||
<p className="text-gray-400 text-sm mb-4">Developer configuration</p>
|
||
<a href="/settings" className="inline-flex items-center px-4 py-2 bg-orange-600/20 text-orange-400 rounded-lg hover:bg-orange-600/30 transition-colors text-sm">
|
||
Configure
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|