Add Net USD Value display to dashboard

- Updated AccountBalance interface to include netUsdValue and unrealizedPnl
- Enhanced getAccountBalance() to calculate Net USD Value (collateral + unrealized PnL)
- Added Net USD Value calculation from all position unrealized PnL
- Updated Dashboard.tsx to display Net USD Value as primary metric
- Added new stats card with emerald styling for Net USD Value
- Reorganized stats grid to 6 columns to accommodate new metric
- Net USD Value = Total Collateral + Total Unrealized PnL from all positions
This commit is contained in:
mindesbunister
2025-07-13 01:02:48 +02:00
parent 6e75a7175e
commit 2fcd3b1120
3 changed files with 226 additions and 134 deletions

View File

@@ -17,7 +17,8 @@ export default function Dashboard() {
dailyPnL: 0,
winRate: 0,
totalTrades: 0,
accountValue: 0
accountValue: 0,
netUsdValue: 0
})
useEffect(() => {
@@ -48,7 +49,8 @@ export default function Dashboard() {
const balanceData = await balanceRes.json()
setStats(prev => ({
...prev,
accountValue: balanceData.accountValue || 0
accountValue: balanceData.accountValue || 0,
netUsdValue: balanceData.netUsdValue || 0
}))
}
} catch (e) {
@@ -62,7 +64,8 @@ export default function Dashboard() {
dailyPnL: 0,
winRate: 0,
totalTrades: 0,
accountValue: 0
accountValue: 0,
netUsdValue: 0
})
}
} else {
@@ -74,7 +77,8 @@ export default function Dashboard() {
dailyPnL: 0,
winRate: 0,
totalTrades: 0,
accountValue: 0
accountValue: 0,
netUsdValue: 0
})
}
} catch (e) {
@@ -86,7 +90,8 @@ export default function Dashboard() {
dailyPnL: 0,
winRate: 0,
totalTrades: 0,
accountValue: 0
accountValue: 0,
netUsdValue: 0
})
}
setLoading(false)
@@ -97,7 +102,21 @@ export default function Dashboard() {
return (
<div className="space-y-8">
{/* Stats Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-6">
<div className="card card-gradient">
<div className="flex items-center justify-between">
<div>
<p className="text-gray-400 text-sm font-medium">Net USD Value</p>
<p className="text-2xl font-bold text-emerald-400">
${stats.netUsdValue.toFixed(2)}
</p>
</div>
<div className="w-12 h-12 bg-emerald-500/20 rounded-full flex items-center justify-center">
<span className="text-emerald-400 text-xl">💎</span>
</div>
</div>
</div>
<div className="card card-gradient">
<div className="flex items-center justify-between">
<div>