Add landing page and analytics dashboard
- Created landing page at / with navigation to analytics and settings - Built analytics dashboard at /analytics showing: - Current positions (net vs individual) - Trading statistics (win rate, P&L, profit factor) - Time period selector (7/30/90/365 days) - Position netting explanation - Beautiful gradient UI matching settings page style - Real-time data from database via API endpoints - Auto-excludes test trades from statistics - Shows net positions matching Drift UI behavior
This commit is contained in:
mindesbunister
154
app/page.tsx
Normal file
154
app/page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
* Trading Bot v4 - Landing Page
|
||||
*
|
||||
* Main dashboard with navigation to settings and analytics
|
||||
*/
|
||||
|
||||
'use client'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-2xl">🚀</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Trading Bot v4</h1>
|
||||
<p className="text-sm text-gray-400">Autonomous Solana Trading</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span className="text-sm text-gray-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Hero Section */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">
|
||||
Welcome to Your Trading Dashboard
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
Monitor performance, adjust settings, and track your autonomous trading bot
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation Cards */}
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
{/* Analytics Card */}
|
||||
<a
|
||||
href="/analytics"
|
||||
className="group relative bg-gradient-to-br from-blue-900/50 to-purple-900/50 backdrop-blur-sm rounded-2xl p-8 border border-blue-500/20 hover:border-blue-500/40 transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<span className="text-4xl">📊</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-3">Analytics</h3>
|
||||
|
||||
<p className="text-gray-300 mb-6">
|
||||
View trading performance, win rates, P&L statistics, and position analytics
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-blue-400 group-hover:text-blue-300">
|
||||
<span className="font-medium">View Dashboard</span>
|
||||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Settings Card */}
|
||||
<a
|
||||
href="/settings"
|
||||
className="group relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50 hover:border-gray-600 transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-gray-500/10 to-gray-700/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-gray-600 to-gray-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<span className="text-4xl">⚙️</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-3">Settings</h3>
|
||||
|
||||
<p className="text-gray-300 mb-6">
|
||||
Configure trading parameters, risk management, and bot behavior
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-gray-400 group-hover:text-gray-300">
|
||||
<span className="font-medium">Adjust Settings</span>
|
||||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="mt-16 max-w-4xl mx-auto">
|
||||
<h3 className="text-xl font-semibold text-white mb-6 text-center">Quick Access</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<a
|
||||
href="/api/trading/positions"
|
||||
target="_blank"
|
||||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||||
>
|
||||
<div className="text-2xl mb-2">📍</div>
|
||||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Positions API</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/api/analytics/stats"
|
||||
target="_blank"
|
||||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||||
>
|
||||
<div className="text-2xl mb-2">📈</div>
|
||||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Stats API</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/api/analytics/positions"
|
||||
target="_blank"
|
||||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||||
>
|
||||
<div className="text-2xl mb-2">🎯</div>
|
||||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Net Positions</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://app.drift.trade"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||||
>
|
||||
<div className="text-2xl mb-2">🌊</div>
|
||||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Open Drift</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Info */}
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-gray-500 text-sm">
|
||||
Trading Bot v4 • Drift Protocol • Pyth Network • Solana
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user