admin/OpenFin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hauteur fixe égale (288px) sur les 4 cards Command Center

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OpenSquared
2026-06-20 06:58:47 +02:00
parent 2a77007dc3
commit a27949e9f7
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/pages/Dashboard.tsx
View File

@@ -351,7 +351,7 @@ export default function Dashboard() {
const pfReal = pf?.realized_pnl ?? null const pfReal = pf?.realized_pnl ?? null
return ( return (
<Link to="/journal" className="card block hover:border-slate-600/60 transition-all cursor-pointer"> <Link to="/journal" className="card flex flex-col h-[288px] overflow-hidden hover:border-slate-600/60 transition-all cursor-pointer">
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<span className="section-title mb-0 text-[10px]">📊 P&L</span> <span className="section-title mb-0 text-[10px]">📊 P&L</span>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
@@ -432,9 +432,9 @@ export default function Dashboard() {
const strokeColor = isPositive ? '#34d399' : '#f87171' const strokeColor = isPositive ? '#34d399' : '#f87171'
const gradId = 'pnlGrad' const gradId = 'pnlGrad'
return ( return (
<div className="mt-2 pt-2 border-t border-slate-700/30"> <div className="mt-1.5 pt-1.5 border-t border-slate-700/30">
<div className="text-[9px] text-slate-600 mb-1">Courbe PnL historique ({snaps.length} pts)</div> <div className="text-[9px] text-slate-600 mb-0.5">Courbe PnL historique ({snaps.length} pts)</div>
<ResponsiveContainer width="100%" height={72}> <ResponsiveContainer width="100%" height={58}>
<AreaChart data={chartData} margin={{ top: 2, right: 0, left: -38, bottom: 0 }}> <AreaChart data={chartData} margin={{ top: 2, right: 0, left: -38, bottom: 0 }}>
<defs> <defs>
<linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1"> <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
@@ -474,7 +474,7 @@ export default function Dashboard() {
.slice(0, 5) .slice(0, 5)
return ( return (
<Link to="/risk" className="card block hover:border-slate-600/60 transition-all cursor-pointer"> <Link to="/risk" className="card flex flex-col h-[288px] overflow-hidden hover:border-slate-600/60 transition-all cursor-pointer">
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<span className="section-title mb-0 text-[10px]">🛡️ Risque</span> <span className="section-title mb-0 text-[10px]">🛡️ Risque</span>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
@@ -524,15 +524,15 @@ export default function Dashboard() {
const mv = snap.mc_var_1d_pct const mv = snap.mc_var_1d_pct
const ts = snap.computed_at?.slice(0, 16).replace('T', ' ') const ts = snap.computed_at?.slice(0, 16).replace('T', ' ')
return ( return (
<div className="mt-2 pt-2 border-t border-slate-700/30"> <div className="mt-1.5 pt-1.5 border-t border-slate-700/30">
<div className="text-[9px] text-slate-600 mb-1.5">VaR 95% · {ts} UTC</div> <div className="text-[9px] text-slate-600 mb-1">VaR 95% · {ts} UTC</div>
<div className="grid grid-cols-3 gap-1.5"> <div className="grid grid-cols-3 gap-1">
{[ {[
{ label: 'Hist.', val: hv, color: 'text-blue-400' }, { label: 'Hist.', val: hv, color: 'text-blue-400' },
{ label: 'CVaR', val: cv, color: 'text-orange-400' }, { label: 'CVaR', val: cv, color: 'text-orange-400' },
{ label: 'MC×1.5', val: mv, color: 'text-red-400' }, { label: 'MC×1.5', val: mv, color: 'text-red-400' },
].map(({ label, val, color }) => ( ].map(({ label, val, color }) => (
<div key={label} className="bg-dark-700/60 rounded px-2 py-1.5 text-center"> <div key={label} className="bg-dark-700/60 rounded px-2 py-1 text-center">
<div className="text-[8px] text-slate-600 mb-0.5">{label}</div> <div className="text-[8px] text-slate-600 mb-0.5">{label}</div>
<div className={clsx('text-xs font-bold font-mono', color)}> <div className={clsx('text-xs font-bold font-mono', color)}>
{val != null ? `${val >= 0 ? '+' : ''}${val.toFixed(2)}%` : '—'} {val != null ? `${val >= 0 ? '+' : ''}${val.toFixed(2)}%` : '—'}
@@ -569,7 +569,7 @@ export default function Dashboard() {
? (() => { try { return typeof last.commentary === 'string' ? JSON.parse(last.commentary) : last.commentary } catch { return null } })() ? (() => { try { return typeof last.commentary === 'string' ? JSON.parse(last.commentary) : last.commentary } catch { return null } })()
: null : null
return ( return (
<Link to="/journal" className="card block hover:border-slate-600/60 transition-all cursor-pointer"> <Link to="/journal" className="card flex flex-col h-[288px] overflow-hidden hover:border-slate-600/60 transition-all cursor-pointer">
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<span className="section-title mb-0 text-[10px]">🔄 Dernier Cycle</span> <span className="section-title mb-0 text-[10px]">🔄 Dernier Cycle</span>
<ArrowUpRight className="w-3 h-3 text-slate-600" /> <ArrowUpRight className="w-3 h-3 text-slate-600" />
@@ -660,7 +660,7 @@ export default function Dashboard() {
] ]
return ( return (
<Link to="/macro" className="card block hover:border-slate-600/60 transition-all cursor-pointer"> <Link to="/macro" className="card flex flex-col h-[288px] overflow-hidden hover:border-slate-600/60 transition-all cursor-pointer">
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<span className="section-title mb-0 text-[10px]">🌐 Régime Macro</span> <span className="section-title mb-0 text-[10px]">🌐 Régime Macro</span>
<ArrowUpRight className="w-3 h-3 text-slate-600" /> <ArrowUpRight className="w-3 h-3 text-slate-600" />
@@ -696,7 +696,7 @@ export default function Dashboard() {
{/* Key macro gauges */} {/* Key macro gauges */}
{Object.keys(gauges).length > 0 && ( {Object.keys(gauges).length > 0 && (
<div className="mt-2 pt-2 border-t border-slate-700/30 space-y-1"> <div className="mt-1.5 pt-1.5 border-t border-slate-700/30 space-y-0.5">
{KEY_GAUGES.map(({ key, label, color, fmt, hint }) => { {KEY_GAUGES.map(({ key, label, color, fmt, hint }) => {
const g = gauges[key] const g = gauges[key]
if (!g) return null if (!g) return null
@@ -719,7 +719,7 @@ export default function Dashboard() {
{/* Trigger signals for dominant regime */} {/* Trigger signals for dominant regime */}
{reasons.length > 0 && ( {reasons.length > 0 && (
<div className="mt-1.5 flex flex-wrap gap-1"> <div className="mt-1 flex flex-wrap gap-1">
{reasons.slice(0, 4).map((r: string, i: number) => ( {reasons.slice(0, 4).map((r: string, i: number) => (
<span key={i} className="text-[8px] bg-blue-900/20 text-blue-400/80 border border-blue-800/30 px-1.5 py-0.5 rounded"> <span key={i} className="text-[8px] bg-blue-900/20 text-blue-400/80 border border-blue-800/30 px-1.5 py-0.5 rounded">
{r} {r}