dcbc9f19fc
Complete French→English translation across all frontend pages and backend services — every label, button, header, empty state, toast, and nav item is now in English. Build verified clean (tsc + vite). No i18n library added; direct string replacement throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
565 lines
25 KiB
TypeScript
565 lines
25 KiB
TypeScript
import { useState } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import {
|
|
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine,
|
|
} from 'recharts'
|
|
import { History, TrendingUp, TrendingDown, Plus, Minus, RefreshCw, ArrowRight, AlertTriangle } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
// ─── API ─────────────────────────────────────────────────────────────────────
|
|
|
|
async function fetchSnapshots() {
|
|
const r = await fetch('/api/var/pnl/snapshots?limit=200')
|
|
if (!r.ok) throw new Error(`${r.status}`)
|
|
return r.json()
|
|
}
|
|
|
|
async function fetchSnapshotDetail(id: number) {
|
|
const r = await fetch(`/api/var/pnl/snapshots/${id}`)
|
|
if (!r.ok) throw new Error(`${r.status}`)
|
|
return r.json()
|
|
}
|
|
|
|
async function fetchDiff(a: number, b: number) {
|
|
const r = await fetch(`/api/var/pnl/diff?a=${a}&b=${b}`)
|
|
if (!r.ok) throw new Error(`${r.status}`)
|
|
return r.json()
|
|
}
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
|
|
const fmt = (v: number | null | undefined, digits = 2) =>
|
|
v == null ? '—' : `${v >= 0 ? '+' : ''}${v.toFixed(digits)}%`
|
|
|
|
const fmtEur = (v: number | null | undefined) =>
|
|
v == null ? '—' : `${v < 0 ? '' : '+'}${v.toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €`
|
|
|
|
const fmtDate = (s: string) => s?.replace('T', ' ').slice(0, 16)
|
|
|
|
function DeltaBadge({ v, unit = '%' }: { v: number; unit?: string }) {
|
|
if (Math.abs(v) < 0.001) return <span className="text-slate-500 text-xs">≈ 0</span>
|
|
return (
|
|
<span className={clsx('text-xs font-semibold', v > 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{v > 0 ? '▲' : '▼'} {Math.abs(v).toFixed(unit === '%' ? 3 : 0)}{unit}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// ─── Snapshot list item ───────────────────────────────────────────────────────
|
|
|
|
function SnapRow({
|
|
snap, selectedA, selectedB, onSelectA, onSelectB,
|
|
}: {
|
|
snap: any; selectedA: number | null; selectedB: number | null
|
|
onSelectA: (id: number) => void; onSelectB: (id: number) => void
|
|
}) {
|
|
const isA = selectedA === snap.id
|
|
const isB = selectedB === snap.id
|
|
const pnl = snap.total_pnl_pct ?? 0
|
|
|
|
return (
|
|
<div className={clsx(
|
|
'flex items-center gap-3 px-3 py-2.5 rounded-lg border text-xs cursor-default transition-colors',
|
|
isA ? 'bg-blue-900/20 border-blue-700/50'
|
|
: isB ? 'bg-violet-900/20 border-violet-700/50'
|
|
: 'bg-dark-800 border-slate-700/30 hover:border-slate-600/50'
|
|
)}>
|
|
{/* Date */}
|
|
<span className="text-slate-400 font-mono w-32 shrink-0">{fmtDate(snap.snapped_at)}</span>
|
|
{/* Positions */}
|
|
<span className="text-slate-500 w-16 shrink-0">{snap.n_open} pos.</span>
|
|
{/* PnL */}
|
|
<span className={clsx('font-semibold w-20 shrink-0', pnl >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{fmt(pnl)}
|
|
</span>
|
|
<span className={clsx('w-24 shrink-0', pnl >= 0 ? 'text-emerald-400/60' : 'text-red-400/60')}>
|
|
{fmtEur(snap.total_pnl_eur)}
|
|
</span>
|
|
{/* Actions */}
|
|
<div className="flex gap-1.5 ml-auto">
|
|
<button
|
|
onClick={() => onSelectA(snap.id)}
|
|
className={clsx('px-2 py-0.5 rounded text-[10px] font-semibold border transition-colors',
|
|
isA ? 'bg-blue-600 border-blue-500 text-white'
|
|
: 'border-slate-600 text-slate-500 hover:text-blue-400 hover:border-blue-600/50')}
|
|
>A</button>
|
|
<button
|
|
onClick={() => onSelectB(snap.id)}
|
|
className={clsx('px-2 py-0.5 rounded text-[10px] font-semibold border transition-colors',
|
|
isB ? 'bg-violet-600 border-violet-500 text-white'
|
|
: 'border-slate-600 text-slate-500 hover:text-violet-400 hover:border-violet-600/50')}
|
|
>B</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Diff view ───────────────────────────────────────────────────────────────
|
|
|
|
function DiffView({ diffData }: { diffData: any }) {
|
|
const { snapshot_a: sa, snapshot_b: sb, portfolio_delta: pd,
|
|
new_positions, closed_positions, changed_positions } = diffData
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Portfolio delta header */}
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-xl p-4">
|
|
<div className="flex items-center gap-3 mb-4 flex-wrap">
|
|
<div className="flex items-center gap-2 text-xs text-blue-400 bg-blue-900/20 border border-blue-700/40 px-3 py-1.5 rounded-lg">
|
|
<span className="font-mono font-semibold">A</span>
|
|
<span className="text-slate-400">{fmtDate(sa.snapped_at)}</span>
|
|
{sa.macro_regime && <span className="text-slate-500 capitalize">· {sa.macro_regime}</span>}
|
|
</div>
|
|
<ArrowRight className="w-4 h-4 text-slate-600" />
|
|
<div className="flex items-center gap-2 text-xs text-violet-400 bg-violet-900/20 border border-violet-700/40 px-3 py-1.5 rounded-lg">
|
|
<span className="font-mono font-semibold">B</span>
|
|
<span className="text-slate-400">{fmtDate(sb.snapped_at)}</span>
|
|
{sb.macro_regime && <span className="text-slate-500 capitalize">· {sb.macro_regime}</span>}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<div className="text-[10px] text-slate-500 uppercase mb-1">Δ PnL %</div>
|
|
<DeltaBadge v={pd.pnl_pct_delta} />
|
|
<div className="text-[10px] text-slate-600 mt-0.5">
|
|
{fmt(sa.total_pnl_pct)} → {fmt(sb.total_pnl_pct)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[10px] text-slate-500 uppercase mb-1">Δ PnL €</div>
|
|
<DeltaBadge v={pd.pnl_eur_delta} unit="€" />
|
|
<div className="text-[10px] text-slate-600 mt-0.5">
|
|
{fmtEur(sa.total_pnl_eur)} → {fmtEur(sb.total_pnl_eur)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[10px] text-slate-500 uppercase mb-1">Δ Capital</div>
|
|
<DeltaBadge v={pd.capital_delta_eur} unit="€" />
|
|
</div>
|
|
<div className="flex gap-3">
|
|
{pd.positions_opened > 0 && (
|
|
<div className="text-center">
|
|
<div className="text-emerald-400 font-bold text-lg">+{pd.positions_opened}</div>
|
|
<div className="text-[10px] text-slate-500">opened</div>
|
|
</div>
|
|
)}
|
|
{pd.positions_closed > 0 && (
|
|
<div className="text-center">
|
|
<div className="text-red-400 font-bold text-lg">-{pd.positions_closed}</div>
|
|
<div className="text-[10px] text-slate-500">closed</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* New positions */}
|
|
{new_positions.length > 0 && (
|
|
<div className="bg-dark-800 border border-emerald-700/30 rounded-xl p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Plus className="w-4 h-4 text-emerald-400" />
|
|
<h3 className="text-sm font-semibold text-emerald-400">
|
|
New positions ({new_positions.length})
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{new_positions.map((p: any) => (
|
|
<div key={p.id} className="flex items-center justify-between text-xs bg-emerald-900/10 rounded px-3 py-2">
|
|
<div>
|
|
<span className="text-white font-semibold">{p.ticker}</span>
|
|
<span className="text-slate-400 ml-2">{p.strategy}</span>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<span className="text-slate-500">Entry: {p.entry_price?.toFixed(2) ?? '—'}</span>
|
|
<span className={clsx('font-semibold', (p.pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{fmt(p.pnl_pct)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Closed positions */}
|
|
{closed_positions.length > 0 && (
|
|
<div className="bg-dark-800 border border-red-700/30 rounded-xl p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Minus className="w-4 h-4 text-red-400" />
|
|
<h3 className="text-sm font-semibold text-red-400">
|
|
Closed positions ({closed_positions.length})
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{closed_positions.map((p: any) => (
|
|
<div key={p.id} className="flex items-center justify-between text-xs bg-red-900/10 rounded px-3 py-2">
|
|
<div>
|
|
<span className="text-slate-400 font-semibold">{p.ticker}</span>
|
|
<span className="text-slate-500 ml-2">{p.strategy}</span>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<span className="text-slate-500">Last val.: {fmt(p.pnl_pct)}</span>
|
|
<span className={clsx('font-semibold', (p.pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{fmtEur(p.pnl_eur)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Changed positions */}
|
|
{changed_positions.length > 0 && (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-xl p-4">
|
|
<h3 className="text-sm font-semibold text-white mb-3">
|
|
Position changes ({changed_positions.length})
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="text-slate-500 border-b border-slate-700/40">
|
|
<th className="text-left pb-2 font-medium">Position</th>
|
|
<th className="text-right pb-2 font-medium">PnL A</th>
|
|
<th className="text-right pb-2 font-medium">PnL B</th>
|
|
<th className="text-right pb-2 font-medium">Δ PnL %</th>
|
|
<th className="text-right pb-2 font-medium">Δ PnL €</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{changed_positions.map((p: any) => (
|
|
<tr key={p.id} className="border-b border-slate-700/20 last:border-0">
|
|
<td className="py-2">
|
|
<span className="text-white font-semibold">{p.ticker}</span>
|
|
<span className="text-slate-500 ml-2">{p.strategy}</span>
|
|
</td>
|
|
<td className={clsx('text-right py-2', (p.pnl_pct_a ?? 0) >= 0 ? 'text-emerald-400/70' : 'text-red-400/70')}>
|
|
{fmt(p.pnl_pct_a)}
|
|
</td>
|
|
<td className={clsx('text-right py-2 font-semibold', (p.pnl_pct_b ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{fmt(p.pnl_pct_b)}
|
|
</td>
|
|
<td className="text-right py-2">
|
|
<DeltaBadge v={p.delta_pct} />
|
|
</td>
|
|
<td className="text-right py-2">
|
|
<DeltaBadge v={p.delta_eur} unit="€" />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Snapshot detail ──────────────────────────────────────────────────────────
|
|
|
|
function SnapshotDetail({ snapId }: { snapId: number }) {
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['pnl-snap-detail', snapId],
|
|
queryFn: () => fetchSnapshotDetail(snapId),
|
|
staleTime: 300_000,
|
|
})
|
|
|
|
if (isLoading) return <div className="text-slate-600 text-sm p-4">Loading…</div>
|
|
if (!data) return null
|
|
|
|
const trades: any[] = data.trades_snapshot ?? []
|
|
const macro = data.macro_regime
|
|
|
|
return (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-xl p-4 space-y-4">
|
|
<div className="flex items-center justify-between flex-wrap gap-2">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-white">{fmtDate(data.snapped_at)} UTC</h3>
|
|
{macro?.dominant && (
|
|
<span className="text-xs text-slate-500 capitalize">Regime: {macro.dominant}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-4 text-xs">
|
|
<div>
|
|
<span className="text-slate-500">Capital </span>
|
|
<span className="text-white font-semibold">
|
|
{(data.total_capital_eur ?? 0).toLocaleString('fr-FR', { maximumFractionDigits: 0 })} €
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">PnL </span>
|
|
<span className={clsx('font-semibold', (data.total_pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{fmt(data.total_pnl_pct)} · {fmtEur(data.total_pnl_eur)}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-500">{data.n_open} open · {data.n_closed} closed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{trades.length > 0 ? (
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="text-slate-500 border-b border-slate-700/40">
|
|
<th className="text-left pb-2 font-medium">Ticker</th>
|
|
<th className="text-left pb-2 font-medium">Strategy</th>
|
|
<th className="text-right pb-2 font-medium">Entry</th>
|
|
<th className="text-right pb-2 font-medium">Current price</th>
|
|
<th className="text-right pb-2 font-medium">PnL %</th>
|
|
<th className="text-right pb-2 font-medium">PnL €</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{trades.map((t: any, i: number) => (
|
|
<tr key={i} className="border-b border-slate-700/20 last:border-0">
|
|
<td className="py-2 font-semibold text-white">{t.ticker}</td>
|
|
<td className="py-2 text-slate-400">{t.strategy}</td>
|
|
<td className="py-2 text-right text-slate-400 font-mono">{t.entry_price?.toFixed(2) ?? '—'}</td>
|
|
<td className="py-2 text-right text-slate-300 font-mono">{t.current_price?.toFixed(2) ?? '—'}</td>
|
|
<td className={clsx('py-2 text-right font-semibold', (t.pnl_pct ?? 0) >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{fmt(t.pnl_pct)}
|
|
</td>
|
|
<td className={clsx('py-2 text-right', (t.pnl_eur ?? 0) >= 0 ? 'text-emerald-400/70' : 'text-red-400/70')}>
|
|
{fmtEur(t.pnl_eur)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="text-slate-600 text-sm">No positions in this snapshot</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── PnL sparkline tooltip ────────────────────────────────────────────────────
|
|
|
|
function SparkTooltip({ active, payload, label }: any) {
|
|
if (!active || !payload?.length) return null
|
|
return (
|
|
<div className="bg-dark-800 border border-slate-700 rounded px-2.5 py-1.5 text-xs">
|
|
<div className="text-slate-500 mb-0.5">{label}</div>
|
|
<div className={clsx('font-semibold', payload[0].value >= 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
PnL: {fmt(payload[0].value)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Main page ────────────────────────────────────────────────────────────────
|
|
|
|
export default function PositionHistory() {
|
|
const [selectedA, setSelectedA] = useState<number | null>(null)
|
|
const [selectedB, setSelectedB] = useState<number | null>(null)
|
|
const [viewMode, setViewMode] = useState<'detail' | 'diff'>('detail')
|
|
const [activeDetail, setActiveDetail] = useState<number | null>(null)
|
|
|
|
const { data, isLoading, error, refetch } = useQuery({
|
|
queryKey: ['pnl-snapshots-all'],
|
|
queryFn: fetchSnapshots,
|
|
staleTime: 60_000,
|
|
})
|
|
|
|
const { data: diffData, isLoading: diffLoading, error: diffError } = useQuery({
|
|
queryKey: ['pnl-diff', selectedA, selectedB],
|
|
queryFn: () => fetchDiff(selectedA!, selectedB!),
|
|
enabled: selectedA != null && selectedB != null && selectedA !== selectedB,
|
|
staleTime: 60_000,
|
|
})
|
|
|
|
const snapshots: any[] = data?.snapshots ?? []
|
|
|
|
// Build sparkline data (chronological)
|
|
const sparkData = [...snapshots].reverse().map(s => ({
|
|
date: s.snapped_at?.slice(5, 16).replace('T', ' '),
|
|
pnl: s.total_pnl_pct ?? 0,
|
|
}))
|
|
|
|
const handleSelectA = (id: number) => {
|
|
setSelectedA(id)
|
|
setViewMode('diff')
|
|
}
|
|
const handleSelectB = (id: number) => {
|
|
setSelectedB(id)
|
|
setViewMode('diff')
|
|
}
|
|
|
|
const canDiff = selectedA != null && selectedB != null && selectedA !== selectedB
|
|
|
|
return (
|
|
<div className="p-6 space-y-5 max-w-screen-xl mx-auto">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between flex-wrap gap-3">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<History className="w-6 h-6 text-violet-400" />
|
|
<h1 className="text-xl font-bold text-white">Position History</h1>
|
|
</div>
|
|
<p className="text-slate-400 text-sm">
|
|
{snapshots.length} PnL snapshot{snapshots.length !== 1 ? 's' : ''} recorded
|
|
{snapshots.length > 0 && ` · from ${fmtDate(snapshots[snapshots.length - 1]?.snapped_at)} to ${fmtDate(snapshots[0]?.snapped_at)}`}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{canDiff && (
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={() => setViewMode('detail')}
|
|
className={clsx('px-3 py-1.5 rounded text-xs font-semibold transition-colors',
|
|
viewMode === 'detail' ? 'bg-slate-600 text-white' : 'bg-dark-700 text-slate-400 hover:text-white')}
|
|
>
|
|
Detail
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('diff')}
|
|
className={clsx('px-3 py-1.5 rounded text-xs font-semibold transition-colors',
|
|
viewMode === 'diff' ? 'bg-violet-600 text-white' : 'bg-dark-700 text-slate-400 hover:text-white')}
|
|
>
|
|
Diff A→B
|
|
</button>
|
|
</div>
|
|
)}
|
|
{(selectedA || selectedB) && (
|
|
<button
|
|
onClick={() => { setSelectedA(null); setSelectedB(null); setViewMode('detail') }}
|
|
className="px-3 py-1.5 rounded text-xs text-slate-500 hover:text-slate-300 bg-dark-700"
|
|
>
|
|
Clear selection
|
|
</button>
|
|
)}
|
|
<button onClick={() => refetch()}
|
|
className="flex items-center gap-1 px-3 py-1.5 rounded text-xs bg-dark-700 text-slate-400 hover:text-white">
|
|
<RefreshCw className="w-3.5 h-3.5" /> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="bg-red-900/20 border border-red-700/40 rounded-xl p-3 text-red-400 text-sm flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4 shrink-0" /> {String(error)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Selection banner */}
|
|
{(selectedA || selectedB) && (
|
|
<div className="flex items-center gap-3 bg-dark-800 border border-slate-700/40 rounded-xl px-4 py-3 text-xs flex-wrap">
|
|
<span className="text-slate-500">Diff selection:</span>
|
|
{selectedA ? (
|
|
<span className="flex items-center gap-1.5 bg-blue-900/30 text-blue-400 border border-blue-700/40 px-2.5 py-1 rounded">
|
|
<span className="font-bold">A</span>
|
|
{fmtDate(snapshots.find(s => s.id === selectedA)?.snapped_at ?? '')}
|
|
</span>
|
|
) : <span className="text-slate-600">A: not selected</span>}
|
|
<ArrowRight className="w-3.5 h-3.5 text-slate-600" />
|
|
{selectedB ? (
|
|
<span className="flex items-center gap-1.5 bg-violet-900/30 text-violet-400 border border-violet-700/40 px-2.5 py-1 rounded">
|
|
<span className="font-bold">B</span>
|
|
{fmtDate(snapshots.find(s => s.id === selectedB)?.snapped_at ?? '')}
|
|
</span>
|
|
) : <span className="text-slate-600">B: not selected</span>}
|
|
{canDiff && (
|
|
<button onClick={() => setViewMode('diff')}
|
|
className="ml-auto bg-violet-600 hover:bg-violet-500 text-white px-3 py-1 rounded text-xs font-semibold">
|
|
View diff
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty state */}
|
|
{!isLoading && snapshots.length === 0 && (
|
|
<div className="text-center py-20">
|
|
<History className="w-14 h-14 text-slate-700 mx-auto mb-4" />
|
|
<div className="text-slate-400 font-semibold mb-2">No PnL snapshots available</div>
|
|
<p className="text-slate-600 text-sm max-w-md mx-auto">
|
|
Enable the PnL Scheduler in Configuration or trigger a snapshot manually
|
|
from the Configuration → Auto-Cycle & Logging page.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{snapshots.length > 0 && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
|
|
|
|
{/* Left: timeline list */}
|
|
<div className="lg:col-span-1 space-y-3">
|
|
{/* Mini sparkline */}
|
|
{sparkData.length > 2 && (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-xl p-3">
|
|
<div className="text-xs text-slate-500 mb-2">Portfolio PnL over time</div>
|
|
<ResponsiveContainer width="100%" height={80}>
|
|
<LineChart data={sparkData} margin={{ top: 4, right: 4, left: -30, bottom: 0 }}>
|
|
<XAxis dataKey="date" hide />
|
|
<YAxis tick={{ fontSize: 9, fill: '#64748b' }} unit="%" />
|
|
<Tooltip content={<SparkTooltip />} />
|
|
<ReferenceLine y={0} stroke="#475569" strokeDasharray="3 2" />
|
|
<Line type="monotone" dataKey="pnl" stroke="#a78bfa" dot={false} strokeWidth={1.5} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
|
|
{/* Snapshot list */}
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-xl p-3 space-y-1.5 max-h-[calc(100vh-320px)] overflow-y-auto">
|
|
<div className="text-[10px] text-slate-600 uppercase tracking-wider px-1 mb-2">
|
|
{snapshots.length} snapshots — click for detail · A/B to diff
|
|
</div>
|
|
{snapshots.map(s => (
|
|
<div key={s.id} onClick={() => { setActiveDetail(s.id); setViewMode('detail') }}>
|
|
<SnapRow
|
|
snap={s}
|
|
selectedA={selectedA}
|
|
selectedB={selectedB}
|
|
onSelectA={id => { handleSelectA(id); setActiveDetail(null) }}
|
|
onSelectB={id => { handleSelectB(id); setActiveDetail(null) }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: detail or diff */}
|
|
<div className="lg:col-span-2">
|
|
{viewMode === 'diff' && canDiff && (
|
|
diffLoading
|
|
? <div className="text-slate-500 text-sm p-4">Computing diff…</div>
|
|
: diffError
|
|
? <div className="text-red-400 text-sm p-4">{String(diffError)}</div>
|
|
: diffData ? <DiffView diffData={diffData} />
|
|
: null
|
|
)}
|
|
|
|
{viewMode === 'detail' && activeDetail && (
|
|
<SnapshotDetail snapId={activeDetail} />
|
|
)}
|
|
|
|
{viewMode === 'detail' && !activeDetail && !canDiff && (
|
|
<div className="flex flex-col items-center justify-center py-20 text-center">
|
|
<TrendingUp className="w-12 h-12 text-slate-700 mb-4" />
|
|
<div className="text-slate-500 text-sm">
|
|
Click a snapshot to see the detail<br />
|
|
or select A and B to compare two valuations
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{viewMode === 'diff' && !canDiff && (
|
|
<div className="flex flex-col items-center justify-center py-20 text-center">
|
|
<TrendingDown className="w-12 h-12 text-slate-700 mb-4" />
|
|
<div className="text-slate-500 text-sm">
|
|
Select two snapshots (A and B) from the list to view the diff
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|