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

app/analytics/page.tsx

@@ -0,0 +1,289 @@
+/**
+ * Trading Bot v4 - Analytics Dashboard
+ * 
+ * Comprehensive view of trading performance and statistics
+ */
+
+'use client'
+
+import { useState, useEffect } from 'react'
+
+interface Stats {
+  period: string
+  realTrades: {
+    total: number
+    winning: number
+    losing: number
+    winRate: string
+    totalPnL: string
+    avgWin: string
+    avgLoss: string
+    profitFactor: string
+  }
+  testTrades: {
+    count: number
+    note: string
+  }
+}
+
+interface NetPosition {
+  symbol: string
+  longUSD: number
+  shortUSD: number
+  netUSD: number
+  netSOL: number
+  netDirection: 'long' | 'short' | 'flat'
+  tradeCount: number
+}
+
+interface PositionSummary {
+  summary: {
+    individualTrades: number
+    testTrades: number
+    totalIndividualExposure: string
+    netExposure: string
+    explanation: string
+  }
+  netPositions: NetPosition[]
+}
+
+export default function AnalyticsPage() {
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [positions, setPositions] = useState<PositionSummary | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [selectedDays, setSelectedDays] = useState(30)
+
+  useEffect(() => {
+    loadData()
+  }, [selectedDays])
+
+  const loadData = async () => {
+    setLoading(true)
+    try {
+      const [statsRes, positionsRes] = await Promise.all([
+        fetch(`/api/analytics/stats?days=${selectedDays}`),
+        fetch('/api/analytics/positions'),
+      ])
+
+      const statsData = await statsRes.json()
+      const positionsData = await positionsRes.json()
+
+      setStats(statsData.stats)
+      setPositions(positionsData.summary)
+    } catch (error) {
+      console.error('Failed to load analytics:', error)
+    }
+    setLoading(false)
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center">
+        <div className="text-center">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
+          <p className="text-gray-400">Loading analytics...</p>
+        </div>
+      </div>
+    )
+  }
+
+  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-4">
+              <a href="/" className="text-gray-400 hover:text-white transition">
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+              </a>
+              <div>
+                <h1 className="text-2xl font-bold text-white">📊 Analytics Dashboard</h1>
+                <p className="text-sm text-gray-400">Trading performance and statistics</p>
+              </div>
+            </div>
+            
+            {/* Time Period Selector */}
+            <div className="flex items-center space-x-2">
+              <span className="text-sm text-gray-400">Period:</span>
+              <select
+                value={selectedDays}
+                onChange={(e) => setSelectedDays(Number(e.target.value))}
+                className="bg-gray-700 text-white rounded-lg px-4 py-2 border border-gray-600 focus:border-blue-500 focus:outline-none"
+              >
+                <option value={7}>7 days</option>
+                <option value={30}>30 days</option>
+                <option value={90}>90 days</option>
+                <option value={365}>1 year</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Position Summary */}
+        {positions && (
+          <div className="mb-8">
+            <h2 className="text-xl font-bold text-white mb-4">📍 Current Positions</h2>
+            <div className="grid md:grid-cols-4 gap-4">
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Open Trades</div>
+                <div className="text-3xl font-bold text-white">{positions.summary.individualTrades}</div>
+              </div>
+              
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Test Trades</div>
+                <div className="text-3xl font-bold text-yellow-500">{positions.summary.testTrades}</div>
+              </div>
+              
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Total Exposure</div>
+                <div className="text-3xl font-bold text-blue-400">{positions.summary.totalIndividualExposure}</div>
+              </div>
+              
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Net Exposure</div>
+                <div className="text-3xl font-bold text-purple-400">{positions.summary.netExposure}</div>
+              </div>
+            </div>
+
+            {positions.netPositions.length > 0 && (
+              <div className="mt-4 bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <h3 className="text-lg font-semibold text-white mb-4">Net Positions (Drift View)</h3>
+                <div className="space-y-3">
+                  {positions.netPositions.map((pos, i) => (
+                    <div key={i} className="flex items-center justify-between p-4 bg-gray-700/30 rounded-lg">
+                      <div className="flex items-center space-x-4">
+                        <div className="text-2xl">🎯</div>
+                        <div>
+                          <div className="text-white font-medium">{pos.symbol}</div>
+                          <div className="text-sm text-gray-400">{pos.tradeCount} trade{pos.tradeCount > 1 ? 's' : ''}</div>
+                        </div>
+                      </div>
+                      
+                      <div className="text-right">
+                        <div className={`text-lg font-bold ${pos.netDirection === 'long' ? 'text-green-400' : pos.netDirection === 'short' ? 'text-red-400' : 'text-gray-400'}`}>
+                          {pos.netDirection.toUpperCase()}: {Math.abs(pos.netSOL).toFixed(4)} SOL
+                        </div>
+                        <div className="text-sm text-gray-400">${Math.abs(pos.netUSD).toFixed(2)}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {positions.summary.individualTrades === 0 && (
+              <div className="mt-4 bg-gray-800/30 backdrop-blur-sm rounded-xl p-8 border border-gray-700 text-center">
+                <div className="text-4xl mb-2">📭</div>
+                <p className="text-gray-400">No open positions</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Trading Statistics */}
+        {stats && (
+          <div>
+            <h2 className="text-xl font-bold text-white mb-4">📈 Performance ({stats.period})</h2>
+            
+            {/* Main Stats Grid */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Total Trades</div>
+                <div className="text-3xl font-bold text-white">{stats.realTrades.total}</div>
+                <div className="text-xs text-gray-500 mt-2">
+                  {stats.testTrades.count} test trade{stats.testTrades.count !== 1 ? 's' : ''} excluded
+                </div>
+              </div>
+              
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Win Rate</div>
+                <div className="text-3xl font-bold text-green-400">{stats.realTrades.winRate}</div>
+                <div className="text-xs text-gray-500 mt-2">
+                  {stats.realTrades.winning}W / {stats.realTrades.losing}L
+                </div>
+              </div>
+              
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Total P&L</div>
+                <div className={`text-3xl font-bold ${parseFloat(stats.realTrades.totalPnL.replace('$', '')) >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                  {stats.realTrades.totalPnL}
+                </div>
+              </div>
+              
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div className="text-sm text-gray-400 mb-1">Profit Factor</div>
+                <div className="text-3xl font-bold text-blue-400">{stats.realTrades.profitFactor}</div>
+              </div>
+            </div>
+
+            {/* Detailed Stats */}
+            <div className="grid md:grid-cols-2 gap-6">
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+                  <span className="text-2xl mr-2">✅</span>
+                  Winning Trades
+                </h3>
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Count:</span>
+                    <span className="text-white font-medium">{stats.realTrades.winning}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Average Win:</span>
+                    <span className="text-green-400 font-medium">{stats.realTrades.avgWin}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
+                  <span className="text-2xl mr-2">❌</span>
+                  Losing Trades
+                </h3>
+                <div className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Count:</span>
+                    <span className="text-white font-medium">{stats.realTrades.losing}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-400">Average Loss:</span>
+                    <span className="text-red-400 font-medium">{stats.realTrades.avgLoss}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {stats.realTrades.total === 0 && (
+              <div className="mt-6 bg-gray-800/30 backdrop-blur-sm rounded-xl p-8 border border-gray-700 text-center">
+                <div className="text-4xl mb-2">📊</div>
+                <p className="text-gray-400 mb-2">No trading data yet</p>
+                <p className="text-sm text-gray-500">Start trading to see your performance statistics</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Info Note */}
+        <div className="mt-8 bg-blue-900/20 backdrop-blur-sm rounded-xl p-6 border border-blue-500/30">
+          <div className="flex items-start space-x-3">
+            <div className="text-2xl">💡</div>
+            <div>
+              <h4 className="text-white font-semibold mb-2">Understanding Position Netting</h4>
+              <p className="text-gray-300 text-sm leading-relaxed">
+                Drift perpetual futures automatically NET opposite positions in the same market. 
+                If you have both LONG and SHORT positions in SOL-PERP, Drift shows only the net exposure. 
+                The database tracks individual trades for complete history, while this dashboard shows 
+                your actual market exposure.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/page.tsx

@@ -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>
+  )
+}