root/trading_bot_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Restructure UI with navigation and separate pages

Browse Source 
- Add Navigation component with clean tab-based navigation
- Create StatusOverview component for main dashboard indicators
- Split functionality into separate pages:
  * Overview page with status and quick actions
  * Analysis page for AI analysis
  * Trading page for manual trading and history
  * Automation page for auto-trading settings
  * Settings page for developer configuration
- Add React dependencies to package.json
- Maintain clean separation of concerns
This commit is contained in:
mindesbunister
2025-07-14 00:21:44 +02:00
parent 4b9e52278a
commit 3c988b47f2
10 changed files with 366 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/page.tsx
View File

@@ -1,4 +1,4 @@
import Dashboard from '../components/Dashboard'
import StatusOverview from '../components/StatusOverview'
export default function HomePage() {
return (
@@ -13,8 +13,55 @@ export default function HomePage() {
</p>
</div>
{/* Main Dashboard */}
<Dashboard />
{/* 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 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 manual trades</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>
)
}