);
}
// ---------- Strategy Details Modal ----------
function StrategyModal({ strategy, onClose }) {
if (!strategy) return null;
const s = strategy;
return (
e.stopPropagation()}>
{s.category}{s.complexity}
{s.name}
{s.short}
How it works
{s.description}
Note — Historical metrics are illustrative,
computed on NIFTY 200 constituents. Live performance will vary with market regime,
slippage, and position sizing.
);
}
function MetricTile({ label, value }) {
return (
{label}
{value}
);
}
// ---------- Running Backtest overlay ----------
function BacktestRunning({ strategy, jobStatus }) {
const steps = [
'Fetching historical NSE data',
'Computing indicators & signals',
'Simulating trades with slippage',
'Compiling portfolio metrics',
];
// Drive a smooth client-side progress bar regardless of server polling
// cadence — the server reports QUEUED → RUNNING → COMPLETED, but the
// user wants to see continuous motion. The bar speeds toward each
// milestone but never claims completion until the server says so.
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
if (!jobStatus) return;
const target = jobStatus === 'COMPLETED' ? 1
: jobStatus === 'RUNNING' ? 0.92
: jobStatus === 'QUEUED' ? 0.18
: 0.5;
const interval = setInterval(() => {
setProgress((p) => {
if (p >= target) return p;
return Math.min(target, p + 0.012);
});
}, 60);
return () => clearInterval(interval);
}, [jobStatus]);
const step = Math.min(steps.length - 1, Math.floor(progress * steps.length));
return (
Running backtest
{strategy?.name || 'Strategy'}
{steps.map((label, i) => {
const done = i < step;
const active = i === step;
return (
{done ? : active ? : ''}
{label}
);
})}
);
}
// ---------- KPI Tile ----------
function KPITile({ label, value, delta, deltaLabel, good, highlight, hint }) {
const up = good === 'up';
const down = good === 'down';
return (