mirror of
https://github.com/RomySaputraSihananda/ares.git
synced 2026-08-07 07:57:47 +00:00
romysaputrasihananda
9716fc0955
- Linear design system (dark canvas, lavender accent) - Live account stats, open positions, pending orders (30s polling) - Trade history with equity curve chart - Backtest results table - Proxy API routes — MT5_BASE_URL server-side only, never exposed to browser - Deploy on Vercel: set MT5_BASE_URL env var Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import Link from "next/link";
|
||
import LiveDashboard from "@/components/LiveDashboard";
|
||
|
||
export default function DashboardPage() {
|
||
return (
|
||
<>
|
||
{/* Hero */}
|
||
<section className="pt-6 pb-16">
|
||
<p className="eyebrow mb-5">Live Forward Test · Demo Account</p>
|
||
<h1 className="text-5xl font-semibold tracking-[-0.032em] text-ink leading-[1.10] mb-5">
|
||
ARES Trading Bot
|
||
</h1>
|
||
<p className="text-[18px] text-ink-md leading-relaxed max-w-2xl mb-8">
|
||
M5 Momentum FVG scalper built in Rust. Targets Fair Value Gaps on XAUUSDm
|
||
with EMA-20 trend filter, automatic position sizing, and Telegram alerts.
|
||
</p>
|
||
<div className="flex gap-3 flex-wrap">
|
||
<Link href="/trades" className="btn-primary">View Trades</Link>
|
||
<Link href="/backtest" className="btn-secondary">Backtest Results</Link>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Live data — client-side polling */}
|
||
<LiveDashboard />
|
||
|
||
{/* Strategy */}
|
||
<section className="mb-16">
|
||
<p className="eyebrow mb-6">Strategy</p>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
<FeatureCard
|
||
icon="◈"
|
||
title="Momentum FVG"
|
||
body="3-candle pattern: pre → impulse → post. Body ≥ 60% of range, close in top/bottom 20%."
|
||
/>
|
||
<FeatureCard
|
||
icon="◎"
|
||
title="EMA-20 Filter"
|
||
body="Long only above EMA-20, short only below. Eliminates counter-trend signals entirely."
|
||
/>
|
||
<FeatureCard
|
||
icon="◉"
|
||
title="Risk Management"
|
||
body="Fixed % risk per trade. Minimum 1.5× RR. SL auto-set at FVG boundary."
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Backtest CTA */}
|
||
<section className="card-featured p-10 mb-16">
|
||
<div className="flex flex-col sm:flex-row sm:items-center gap-6 mb-8">
|
||
<div>
|
||
<p className="eyebrow mb-2">Backtest Highlight</p>
|
||
<h2 className="text-2xl font-semibold tracking-tight-sm text-ink">
|
||
M5 · 1 Month · 1% Risk
|
||
</h2>
|
||
<p className="text-sm text-ink-sub mt-1">XAUUSDm · 159 trades · Exness Demo</p>
|
||
</div>
|
||
<Link href="/backtest" className="btn-primary sm:ml-auto shrink-0">
|
||
Full Results →
|
||
</Link>
|
||
</div>
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 pt-6 border-t border-hl">
|
||
{[
|
||
{ label: "Profit Factor", value: "1.42" },
|
||
{ label: "Net Return", value: "+43.2%" },
|
||
{ label: "Max Drawdown", value: "−11.5%" },
|
||
{ label: "Win Rate", value: "55.3%" },
|
||
].map(({ label, value }) => (
|
||
<div key={label}>
|
||
<p className="text-xs text-ink-sub mb-1.5">{label}</p>
|
||
<p className="font-mono text-xl font-semibold tracking-tight-md">{value}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function FeatureCard({ icon, title, body }: { icon: string; title: string; body: string }) {
|
||
return (
|
||
<div className="card">
|
||
<span className="text-accent text-lg mb-4 block">{icon}</span>
|
||
<p className="font-medium text-[15px] text-ink mb-2 tracking-tight">{title}</p>
|
||
<p className="text-sm text-ink-sub leading-relaxed">{body}</p>
|
||
</div>
|
||
);
|
||
}
|