Recreate Next.js source — shadcn components, chart, types, hooks
Source files were untracked and lost during reset. Recreated: - page.tsx (full 3-tab dashboard), layout.tsx, globals.css (shadcn theme) - types.ts, api.ts, utils.ts - strategy-card.tsx, equity-chart.tsx, positions-panel.tsx - ui/ (7 shadcn wrappers: card, badge, button, table, tabs, sheet, collapsible, select) - Config files: next.config.ts, tsconfig.json, postcss.config.mjs, components.json
This commit is contained in:
ramseshk
@@ -0,0 +1,349 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { ChevronDown, ChevronRight, Activity, Database, TrendingUp, TrendingDown, ArrowLeft } from "lucide-react";
|
||||
import { StrategyCard } from "@/components/strategy-card";
|
||||
import { EquityChart } from "@/components/equity-chart";
|
||||
import { PositionsPanel } from "@/components/positions-panel";
|
||||
import { useLiveMetrics, usePaperMetrics, fetchHistorical, fetchBacktestDetail, recalcBacktest } from "@/lib/api";
|
||||
import type { Strategy, BacktestSummary, BacktestFull, Trade, Position, Order } from "@/lib/types";
|
||||
|
||||
type Tab = "live" | "paper" | "historical";
|
||||
|
||||
const STRAT_COLORS = ["#22c55e","#3b82f6","#a855f7","#f59e0b","#ef4444","#06b6d4","#ec4899","#84cc16","#6366f1","#14b8a6","#f97316","#8b5cf6"];
|
||||
|
||||
export default function Dashboard() {
|
||||
const [tab, setTab] = useState<Tab>("live");
|
||||
const { data: liveData, connected: liveConn } = useLiveMetrics();
|
||||
const { data: paperData } = usePaperMetrics();
|
||||
const [historical, setHistorical] = useState<Record<string, BacktestSummary>>({});
|
||||
|
||||
const [detailOpen, setDetailOpen] = useState(false);
|
||||
const [detailName, setDetailName] = useState("");
|
||||
const [detailTab, setDetailTab] = useState<Tab>("live");
|
||||
const [btFull, setBtFull] = useState<BacktestFull | null>(null);
|
||||
const [feeOn, setFeeOn] = useState(true);
|
||||
const [feeTier, setFeeTier] = useState(0);
|
||||
const [stakingTier, setStakingTier] = useState("none");
|
||||
const [posOpen, setPosOpen] = useState(false);
|
||||
|
||||
useEffect(() => { fetchHistorical().then(setHistorical); }, []);
|
||||
|
||||
const strategies = tab === "live" ? liveData?.strategies ?? {}
|
||||
: tab === "paper" ? paperData?.strategies ?? {}
|
||||
: {};
|
||||
|
||||
const handleCardClick = useCallback(async (name: string, t: Tab) => {
|
||||
setDetailName(name);
|
||||
setDetailTab(t);
|
||||
setBtFull(null);
|
||||
setDetailOpen(true);
|
||||
if (t === "historical") {
|
||||
const ht = historical[name];
|
||||
if (ht) {
|
||||
try {
|
||||
const full = await fetchBacktestDetail(ht.name);
|
||||
setBtFull(full);
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
}, [historical]);
|
||||
|
||||
const handleFeeRecalc = useCallback(async () => {
|
||||
if (!detailName || detailTab !== "historical") return;
|
||||
const ht = historical[detailName];
|
||||
if (!ht) return;
|
||||
try {
|
||||
const full = await recalcBacktest(ht.name, feeTier, stakingTier);
|
||||
setBtFull(full);
|
||||
} catch { /* ignore */ }
|
||||
}, [detailName, detailTab, feeTier, stakingTier, historical]);
|
||||
|
||||
const detailStrat = detailTab === "historical" ? null
|
||||
: (tab === "paper" ? paperData : liveData)?.strategies?.[detailName] ?? null;
|
||||
|
||||
let detailEquity: { t: number; v: number }[] = [];
|
||||
let detailTrades: Trade[] = [];
|
||||
let detailPositions: Position[] = [];
|
||||
let detailOrders: Order[] = [];
|
||||
|
||||
if (detailTab === "live" && liveData) {
|
||||
if (detailName) {
|
||||
detailEquity = (liveData.strategy_equity ?? {})[detailName] ?? liveData.equity_history ?? [];
|
||||
}
|
||||
detailTrades = (liveData.trades ?? []).filter((t) => t.strategy === detailName);
|
||||
detailPositions = (liveData.open_positions ?? []).filter((p) => p.strategy === detailName);
|
||||
detailOrders = liveData.open_orders ?? [];
|
||||
} else if (detailTab === "paper" && paperData) {
|
||||
if (detailName) {
|
||||
detailEquity = (paperData.strategy_equity ?? {})[detailName] ?? paperData.equity_history ?? [];
|
||||
}
|
||||
detailTrades = (paperData.per_strategy_trades ?? {})[detailName] ?? [];
|
||||
detailPositions = (paperData.open_positions ?? []).filter((p) => p.strategy === detailName);
|
||||
detailOrders = paperData.open_orders ?? [];
|
||||
} else if (detailTab === "historical" && btFull) {
|
||||
detailEquity = (btFull.equity_curve ?? []).map((e) => ({
|
||||
t: typeof e.t === "string" ? Math.floor(new Date(e.t).getTime() / 1000) : e.t,
|
||||
v: e.v,
|
||||
}));
|
||||
detailTrades = btFull.trades ?? [];
|
||||
}
|
||||
|
||||
if (detailOpen) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="h-8 gap-2" onClick={() => setDetailOpen(false)}>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<span className="text-xs">Back</span>
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-sm font-bold tracking-tight">{detailName}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
{detailStrat && (
|
||||
<>
|
||||
<Badge variant="outline" className="text-[10px]">{detailStrat.type}</Badge>
|
||||
<Badge variant={detailStrat.status === "running" ? "default" : "secondary"} className="text-[10px]">
|
||||
{detailStrat.status?.toUpperCase()}
|
||||
</Badge>
|
||||
<span className="text-[10px] text-muted-foreground">{detailStrat.instrument}</span>
|
||||
</>
|
||||
)}
|
||||
{detailTab === "historical" && btFull && (
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
30d · {btFull.total_trades} trades · {btFull.fee_model ?? "taker"} model
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{detailTab === "historical" && (
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-[10px] text-muted-foreground flex items-center gap-1">
|
||||
<input type="checkbox" checked={feeOn} onChange={(e) => setFeeOn(e.target.checked)} className="rounded" />
|
||||
Fees
|
||||
</label>
|
||||
<select value={feeTier} onChange={(e) => setFeeTier(Number(e.target.value))} className="text-[10px] bg-card border border-border rounded px-2 py-1 text-foreground h-6">
|
||||
{["Tier 0 (0.045/0.015%)","Tier 1 >$5M (0.040/0.012%)","Tier 2 >$25M (0.035/0.008%)","Tier 3 >$100M (0.030/0.004%)","Tier 4 >$500M (0.028/0.000%)","Tier 5 >$2B (0.026/0.000%)","Tier 6 >$7B (0.024/0.000%)"].map((t, i) => <option key={i} value={i}>{t}</option>)}
|
||||
</select>
|
||||
<select value={stakingTier} onChange={(e) => setStakingTier(e.target.value)} className="text-[10px] bg-card border border-border rounded px-2 py-1 text-foreground h-6">
|
||||
{["No Stake","Wood (×0.95)","Bronze (×0.90)","Silver (×0.85)","Gold (×0.80)","Platinum (×0.70)","Diamond (×0.60)"].map((t, i) => <option key={i} value={["none","wood","bronze","silver","gold","platinum","diamond"][i]}>{t}</option>)}
|
||||
</select>
|
||||
<Button size="sm" variant="outline" className="text-[10px] h-6 px-2" onClick={handleFeeRecalc}>
|
||||
Recalc
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="max-w-[1440px] mx-auto px-6 py-6 space-y-6">
|
||||
{detailStrat && (
|
||||
<p className="text-xs text-muted-foreground leading-relaxed p-4 bg-muted/50 rounded-lg border border-border">
|
||||
{detailStrat.description || "No description available."}
|
||||
</p>
|
||||
)}
|
||||
{detailTab === "historical" && btFull && (
|
||||
<p className="text-xs text-muted-foreground leading-relaxed p-4 bg-muted/50 rounded-lg border border-border">
|
||||
{btFull.strategy} — {btFull.num_periods} periods, {btFull.total_trades} trades,
|
||||
total fees ${btFull.fees_total?.toFixed(2)}, model: {btFull.fee_model ?? "taker"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
||||
{detailStrat ? (
|
||||
[
|
||||
{ l: "PnL", v: `$${detailStrat.pnl?.toFixed(4)}` },
|
||||
{ l: "PnL%", v: `${detailStrat.pnl_pct >= 0 ? "+" : ""}${detailStrat.pnl_pct?.toFixed(2)}%`, up: detailStrat.pnl_pct >= 0 },
|
||||
{ l: "Trades", v: String(detailStrat.trades_today ?? 0) },
|
||||
{ l: "Win Rate", v: `${Math.round((detailStrat.win_rate ?? 0) * 100)}%` },
|
||||
{ l: "Fees", v: `$${(detailStrat.fee_paid ?? 0).toFixed(4)}`, up: false },
|
||||
{ l: "Position", v: (detailStrat.position ?? 0).toFixed(4) },
|
||||
].map(({ l, v, up }) => (
|
||||
<div key={l} className="p-3 rounded-lg border border-border bg-card/50">
|
||||
<p className="text-[9px] text-muted-foreground uppercase tracking-wider mb-1">{l}</p>
|
||||
<p className={`text-sm font-mono font-semibold ${up === true ? "text-green-500" : up === false && l !== "Position" ? "text-red-500" : ""}`}>{v}</p>
|
||||
</div>
|
||||
))
|
||||
) : detailTab === "historical" && btFull ? (
|
||||
[
|
||||
{ l: feeOn ? "Net PnL" : "Gross PnL", v: `${(feeOn ? (btFull.pnl_net_pct ?? btFull.pnl_pct ?? 0) : (btFull.pnl_gross_pct ?? btFull.pnl_pct ?? 0)) >= 0 ? "+" : ""}${(feeOn ? (btFull.pnl_net_pct ?? btFull.pnl_pct ?? 0) : (btFull.pnl_gross_pct ?? btFull.pnl_pct ?? 0)).toFixed(2)}%`, up: (feeOn ? (btFull.pnl_net_pct ?? btFull.pnl_pct ?? 0) : (btFull.pnl_gross_pct ?? btFull.pnl_pct ?? 0)) >= 0 },
|
||||
{ l: "Sharpe", v: (btFull.sharpe ?? 0).toFixed(2) },
|
||||
{ l: "Sortino", v: (btFull.sortino ?? 0).toFixed(2) },
|
||||
{ l: "Max DD", v: `${((btFull.max_dd ?? 0) * 100).toFixed(1)}%`, up: false },
|
||||
{ l: "Win Rate", v: `${Math.round((btFull.win_rate ?? 0) * 100)}%` },
|
||||
{ l: "Fees", v: `$${(btFull.fees_total ?? 0).toFixed(2)}`, up: false },
|
||||
].map(({ l, v, up }) => (
|
||||
<div key={l} className="p-3 rounded-lg border border-border bg-card/50">
|
||||
<p className="text-[9px] text-muted-foreground uppercase tracking-wider mb-1">{l}</p>
|
||||
<p className={`text-sm font-mono font-semibold ${up === true ? "text-green-500" : up === false ? "text-red-500" : ""}`}>{v}</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-6 text-center text-muted-foreground text-xs py-8">Loading...</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{detailEquity.length > 0 && (
|
||||
<div className="rounded-lg border border-border overflow-hidden h-[320px]">
|
||||
<EquityChart data={detailEquity} color={STRAT_COLORS[Object.keys(strategies).indexOf(detailName) % STRAT_COLORS.length] ?? "#22c55e"} height={320} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detailTab !== "historical" && (detailPositions.length > 0 || detailOrders.length > 0) && (
|
||||
<div>
|
||||
<h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-3 pb-2 border-b border-border">
|
||||
Open Positions & Orders {detailName ? `for ${detailName}` : ""}
|
||||
</h4>
|
||||
<PositionsPanel positions={detailPositions} orders={detailOrders} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-3 pb-2 border-b border-border">
|
||||
Trade History {detailTrades.length > 0 ? `(${detailTrades.length})` : ""}
|
||||
</h4>
|
||||
{detailTrades.length > 0 ? (
|
||||
<div className="overflow-x-auto rounded-lg border border-border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-border hover:bg-transparent">
|
||||
<TableHead className="text-[9px] h-7">Time</TableHead>
|
||||
<TableHead className="text-[9px] h-7">Side</TableHead>
|
||||
<TableHead className="text-[9px] h-7">Size</TableHead>
|
||||
<TableHead className="text-[9px] h-7">Price</TableHead>
|
||||
<TableHead className="text-[9px] h-7 text-right">PnL</TableHead>
|
||||
<TableHead className="text-[9px] h-7 text-right">Fee</TableHead>
|
||||
<TableHead className="text-[9px] h-7">Reason</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailTrades.slice(-200).reverse().map((t, i) => {
|
||||
const tp = detailTab === "historical"
|
||||
? (feeOn ? (t.pnl_net ?? t.pnl ?? 0) : (t.pnl_gross ?? t.pnl ?? 0))
|
||||
: (t.pnl ?? 0);
|
||||
return (
|
||||
<TableRow key={i} className="border-border/50 hover:bg-muted/30">
|
||||
<TableCell className="text-[10px] py-1.5 font-mono whitespace-nowrap">{(t.time ?? "").substring(0, 16)}</TableCell>
|
||||
<TableCell className="text-[10px] py-1.5">
|
||||
<Badge variant="outline" className={`text-[9px] h-4 px-1.5 border-0 ${(t.side ?? "").indexOf("BUY") >= 0 ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
|
||||
{t.side ?? "—"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-[10px] py-1.5 font-mono">{t.size}</TableCell>
|
||||
<TableCell className="text-[10px] py-1.5 font-mono">${(t.price ?? 0).toFixed(1)}</TableCell>
|
||||
<TableCell className={`text-[10px] py-1.5 font-mono text-right ${tp >= 0 ? "text-green-500" : "text-red-500"}`}>
|
||||
{tp >= 0 ? "+" : ""}${Math.abs(tp).toFixed(4)}
|
||||
</TableCell>
|
||||
<TableCell className="text-[10px] py-1.5 font-mono text-right text-red-400">${(t.fee ?? 0).toFixed(4)}</TableCell>
|
||||
<TableCell className="text-[10px] py-1.5 text-muted-foreground max-w-[300px] truncate" title={t.reason}>
|
||||
{t.reason ?? "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground text-center py-12">No trades recorded yet</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-8" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`w-2 h-2 rounded-full ${liveConn ? "bg-green-500 animate-pulse" : "bg-red-500"}`} />
|
||||
<div>
|
||||
<h1 className="text-sm font-bold tracking-tight">FTDT Quant Lab</h1>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{tab === "live" ? `Live Testnet · Equity $${liveData?.total_equity?.toFixed(2) ?? "—"}`
|
||||
: tab === "paper" ? `Paper Mainnet · Equity $${paperData?.total_equity?.toLocaleString() ?? "—"}`
|
||||
: "Historical · Mainnet Real Data"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={liveConn ? "default" : "destructive"} className="text-[10px] h-5">
|
||||
{liveConn ? "LIVE" : "OFFLINE"}
|
||||
</Badge>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-[49px] z-40">
|
||||
<Tabs value={tab} onValueChange={(v) => setTab(v as Tab)} className="max-w-[1440px] mx-auto px-6">
|
||||
<TabsList className="h-10 bg-transparent border-0 gap-0 p-0">
|
||||
<TabsTrigger value="live" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10">
|
||||
Live<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-amber-500/10 text-amber-400 border-0">Testnet</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="paper" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10">
|
||||
Paper<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-purple-500/10 text-purple-400 border-0">$100K Mainnet</Badge>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="historical" className="data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-5 text-xs h-10">
|
||||
Historical<Badge variant="outline" className="ml-1.5 text-[9px] h-4 px-1.5 bg-purple-500/10 text-purple-400 border-0">Real Data</Badge>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<main className="max-w-[1440px] mx-auto px-6 py-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 mb-6">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{Object.entries(strategies).map(([name, s], i) => (
|
||||
<motion.div key={`${tab}-${name}`} layout initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.2, delay: i * 0.03 }}>
|
||||
<StrategyCard name={name} strategy={s} tab={tab} onClick={() => handleCardClick(name, tab)} />
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
{tab === "historical" && Object.entries(historical).map(([name, b], i) => (
|
||||
<motion.div key={name} layout initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.2, delay: i * 0.03 }}>
|
||||
<StrategyCard name={name} tab="historical" onClick={() => handleCardClick(name, "historical")}
|
||||
badge={`30d · ${b.coin ?? "BTC"} · Mainnet`}
|
||||
stats={[{ label: "Sharpe", value: b.sharpe.toFixed(2) }, { label: "Max DD", value: `${(b.max_dd * 100).toFixed(1)}%`, negative: true }, { label: "Win", value: `${Math.round(b.win_rate * 100)}%` }]}
|
||||
pnlPct={b.pnl_pct} status="REAL DATA" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Collapsible open={posOpen} onOpenChange={setPosOpen} className="mb-6">
|
||||
<CollapsibleTrigger className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1">
|
||||
{posOpen ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
||||
Open Positions & Orders ({liveData?.open_positions?.length ?? 0} pos · {liveData?.open_orders?.length ?? 0} ord)
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<PositionsPanel positions={liveData?.open_positions ?? []} orders={liveData?.open_orders ?? []} />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
|
||||
<a href="https://ftdt.io" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
|
||||
<Activity className="w-4 h-4 text-primary" />
|
||||
<div><p className="text-xs font-medium">ftdt.io</p><p className="text-[10px] text-muted-foreground">Main platform</p></div>
|
||||
</a>
|
||||
<a href="https://app.ftdt.io/quant-lab" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
|
||||
<TrendingUp className="w-4 h-4 text-chart-2" />
|
||||
<div><p className="text-xs font-medium">Quant Lab ↗</p><p className="text-[10px] text-muted-foreground">Web dashboard</p></div>
|
||||
</a>
|
||||
<a href="https://git.ftdt.io/rams/ftdt-quant-lab" target="_blank" className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors">
|
||||
<Database className="w-4 h-4 text-chart-3" />
|
||||
<div><p className="text-xs font-medium">Git Repo</p><p className="text-[10px] text-muted-foreground">rams/ftdt-quant-lab</p></div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user