857 lines
42 KiB
TypeScript
857 lines
42 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
||
import {
|
||
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ResponsiveContainer,
|
||
} from 'recharts'
|
||
import { Layers, Plus, Trash2, RefreshCw, AlertTriangle, Search, Save, FolderOpen, X } from 'lucide-react'
|
||
import clsx from 'clsx'
|
||
import {
|
||
useOptionChainSlice, usePriceStrategy, useOptimizeStrategy,
|
||
useScenarios, useSaveScenario, useDeleteScenario,
|
||
useSavedStrategies, useSaveStrategyRecord, useDeleteSavedStrategy,
|
||
useWatchlistTickers, useSaxoCatalog, useIvForTrade,
|
||
type StrategyLeg, type StrategyScenario, type PriceCombo, type StrategyCandidate,
|
||
type OptimizeConstraints, type SavedScenario,
|
||
} from '../hooks/useApi'
|
||
import { fmtPrice, fmtAsOf } from '../lib/format'
|
||
|
||
type WatchlistEntry = { ticker: string; is_active: number | boolean; added_by: string }
|
||
|
||
const STRIKE_PCTS = [80, 85, 90, 95, 100, 105, 110, 115, 120]
|
||
const DELTA_NEUTRAL_THRESHOLD = 0.15
|
||
|
||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||
|
||
function emptyLeg(expiryDate: string, daysToExpiry: number, strike: number): StrategyLeg {
|
||
return { expiry_date: expiryDate, days_to_expiry: daysToExpiry, strike, option_type: 'call', position: 'long', quantity: 1 }
|
||
}
|
||
|
||
function fmtMoney(v: number | null | undefined) {
|
||
if (v == null) return '—'
|
||
return `${v >= 0 ? '+' : ''}${v.toFixed(2)}`
|
||
}
|
||
|
||
function pnlColor(v: number | null | undefined) {
|
||
if (v == null) return 'text-slate-400'
|
||
return v >= 0 ? 'text-emerald-400' : 'text-red-400'
|
||
}
|
||
|
||
/** Rough client-side smile preview (avg call/put IV at nearest strike) — mirrors the
|
||
* cubic-spline surface computed server-side closely enough to preview shocks live. */
|
||
function estimateBaseIv(chain: any, daysToExpiry: number, strikePct: number, spot: number): number | null {
|
||
if (!chain) return null
|
||
const exp = chain.expiries.reduce((best: any, e: any) =>
|
||
Math.abs(e.days_to_expiry - daysToExpiry) < Math.abs((best?.days_to_expiry ?? Infinity) - daysToExpiry) ? e : best, null)
|
||
if (!exp) return null
|
||
const targetStrike = spot * (strikePct / 100)
|
||
const rows = [...exp.calls, ...exp.puts].filter((r: any) => r.iv > 0.01)
|
||
if (!rows.length) return null
|
||
const nearest = rows.reduce((best: any, r: any) =>
|
||
Math.abs(r.strike - targetStrike) < Math.abs(best.strike - targetStrike) ? r : best)
|
||
return nearest.iv
|
||
}
|
||
|
||
// ── Payoff chart ──────────────────────────────────────────────────────────────
|
||
|
||
function PayoffChart({ priced, spot, scenarioSpot }: { priced: PriceCombo; spot: number; scenarioSpot: number }) {
|
||
const data = priced.at_expiry.map((p, i) => ({
|
||
underlying: p.underlying,
|
||
expiry: p.pnl,
|
||
scenario: priced.at_scenario[i]?.pnl,
|
||
}))
|
||
// Decimals scale with the underlying's own magnitude — an equity at ~740 reads fine
|
||
// rounded to the unit, but an FX rate at ~1.15 needs several decimals or every tick
|
||
// collapses to the same rounded label.
|
||
const decimals = spot < 5 ? 4 : spot < 50 ? 2 : 0
|
||
return (
|
||
<ResponsiveContainer width="100%" height={280}>
|
||
<LineChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
|
||
<CartesianGrid strokeDasharray="3 3" stroke="#1e2d4d" />
|
||
<XAxis dataKey="underlying" type="number" domain={['dataMin', 'dataMax']}
|
||
tick={{ fill: '#475569', fontSize: 10 }} tickLine={false}
|
||
tickFormatter={(v) => v.toFixed(decimals)} />
|
||
<YAxis tick={{ fill: '#475569', fontSize: 10 }} tickLine={false} axisLine={false}
|
||
tickFormatter={(v) => `${v}`} />
|
||
<Tooltip
|
||
contentStyle={{ background: '#0f1623', border: '1px solid #1e2d4d', fontSize: 11 }}
|
||
labelFormatter={(v) => `Sous-jacent: ${Number(v).toFixed(decimals)}`}
|
||
formatter={(v: number, name: string) => [fmtMoney(v), name]}
|
||
/>
|
||
<Legend wrapperStyle={{ fontSize: 11 }} />
|
||
<ReferenceLine y={0} stroke="#475569" strokeDasharray="4 4" />
|
||
<ReferenceLine x={spot} stroke="#3b82f6" strokeDasharray="2 2" label={{ value: 'Spot', fill: '#3b82f6', fontSize: 9, position: 'top' }} />
|
||
<ReferenceLine x={scenarioSpot} stroke="#f59e0b" strokeDasharray="2 2" label={{ value: 'Scénario J+8', fill: '#f59e0b', fontSize: 9, position: 'insideTopRight' }} />
|
||
<Line type="monotone" dataKey="expiry" name="À échéance jambe proche" stroke="#3b82f6" strokeWidth={2} dot={false} />
|
||
<Line type="monotone" dataKey="scenario" name="À J+8 (scénario)" stroke="#f59e0b" strokeWidth={2} dot={false} />
|
||
</LineChart>
|
||
</ResponsiveContainer>
|
||
)
|
||
}
|
||
|
||
function GreeksTile({ label, now, scenario }: { label: string; now: number; scenario: number }) {
|
||
return (
|
||
<div className="card-sm">
|
||
<div className="stat-label">{label}</div>
|
||
<div className="flex items-baseline gap-2 mt-1">
|
||
<span className="text-lg font-bold text-white">{now.toFixed(4)}</span>
|
||
<span className="text-xs text-slate-500">→</span>
|
||
<span className={clsx('text-sm font-semibold', scenario >= now ? 'text-emerald-400' : 'text-red-400')}>{scenario.toFixed(4)}</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Scenario panel ────────────────────────────────────────────────────────────
|
||
|
||
function ScenarioPanel({
|
||
symbol, setSymbol, onCommitSymbol, horizonDays, setHorizonDays, scenario, setScenario, watchlistTickers,
|
||
}: {
|
||
symbol: string; setSymbol: (v: string) => void; onCommitSymbol: (v?: string) => void
|
||
horizonDays: number; setHorizonDays: (v: number) => void
|
||
scenario: StrategyScenario; setScenario: (v: StrategyScenario) => void
|
||
watchlistTickers: string[]
|
||
}) {
|
||
const slider = (
|
||
key: 'spot_shock_pct' | 'iv_level_shift' | 'skew_tilt' | 'term_shift',
|
||
label: string, min: number, max: number, step: number, fmt: (v: number) => string,
|
||
) => (
|
||
<div>
|
||
<div className="flex items-center justify-between text-xs text-slate-400 mb-1">
|
||
<span>{label}</span>
|
||
<span className="text-white font-semibold">{fmt(scenario[key])}</span>
|
||
</div>
|
||
<input
|
||
type="range" min={min} max={max} step={step} value={scenario[key]}
|
||
onChange={(e) => setScenario({ ...scenario, [key]: parseFloat(e.target.value) })}
|
||
className="w-full accent-blue-500"
|
||
/>
|
||
</div>
|
||
)
|
||
|
||
return (
|
||
<div className="card space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex-1">
|
||
<label className="stat-label block mb-1">Symbole</label>
|
||
<input
|
||
value={symbol}
|
||
onChange={(e) => {
|
||
const v = e.target.value.toUpperCase()
|
||
setSymbol(v)
|
||
// Native datalist pick lands here as a single onChange with the full value —
|
||
// commit immediately rather than waiting for a blur that may not follow.
|
||
if (watchlistTickers.includes(v)) onCommitSymbol(v)
|
||
}}
|
||
onBlur={() => onCommitSymbol()}
|
||
onKeyDown={(e) => e.key === 'Enter' && onCommitSymbol()}
|
||
className="w-full bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-sm text-white"
|
||
placeholder="SPY, QQQ, GLD…"
|
||
list="strategy-builder-watchlist"
|
||
/>
|
||
<datalist id="strategy-builder-watchlist">
|
||
{watchlistTickers.map(t => <option key={t} value={t} />)}
|
||
</datalist>
|
||
</div>
|
||
<div className="w-28">
|
||
<label className="stat-label block mb-1">Horizon (j)</label>
|
||
<input
|
||
type="number" min={1} max={90} value={horizonDays}
|
||
onChange={(e) => setHorizonDays(parseInt(e.target.value) || 8)}
|
||
className="w-full bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-sm text-white"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{slider('spot_shock_pct', 'Choc spot', -20, 20, 0.5, (v) => `${v >= 0 ? '+' : ''}${v.toFixed(1)}%`)}
|
||
{slider('iv_level_shift', 'Choc niveau IV', -0.15, 0.15, 0.005, (v) => `${v >= 0 ? '+' : ''}${(v * 100).toFixed(1)}pts`)}
|
||
{slider('skew_tilt', 'Tilt skew', -0.1, 0.1, 0.005, (v) => v.toFixed(3))}
|
||
{slider('term_shift', 'Choc terme (/30j)', -0.1, 0.1, 0.005, (v) => `${v >= 0 ? '+' : ''}${(v * 100).toFixed(1)}pts`)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Manual grid override ──────────────────────────────────────────────────────
|
||
|
||
function ScenarioGrid({
|
||
chain, spot, scenario, setScenario,
|
||
}: {
|
||
chain: any; spot: number; scenario: StrategyScenario; setScenario: (v: StrategyScenario) => void
|
||
}) {
|
||
if (!chain) return null
|
||
const overrides = scenario.manual_grid || []
|
||
|
||
const cellValue = (daysToExpiry: number, strikePct: number): number | null => {
|
||
const hit = overrides.find(o => o.days_to_expiry === daysToExpiry && o.strike_pct === strikePct)
|
||
if (hit) return hit.iv
|
||
const base = estimateBaseIv(chain, daysToExpiry, strikePct, spot)
|
||
if (base == null) return null
|
||
const moneyness = Math.log(strikePct / 100)
|
||
return Math.max(0.01, base + scenario.iv_level_shift + scenario.skew_tilt * moneyness + scenario.term_shift * (daysToExpiry / 30))
|
||
}
|
||
|
||
const setOverride = (daysToExpiry: number, strikePct: number, iv: number | null) => {
|
||
const next = overrides.filter(o => !(o.days_to_expiry === daysToExpiry && o.strike_pct === strikePct))
|
||
if (iv != null) next.push({ days_to_expiry: daysToExpiry, strike_pct: strikePct, iv })
|
||
setScenario({ ...scenario, manual_grid: next })
|
||
}
|
||
|
||
const isOverridden = (daysToExpiry: number, strikePct: number) =>
|
||
overrides.some(o => o.days_to_expiry === daysToExpiry && o.strike_pct === strikePct)
|
||
|
||
return (
|
||
<div className="card">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="stat-label">Grille IV scénario (éditable — clic sur une cellule)</div>
|
||
{overrides.length > 0 && (
|
||
<button onClick={() => setScenario({ ...scenario, manual_grid: [] })} className="text-xs text-slate-500 hover:text-slate-300">
|
||
Réinitialiser overrides
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-xs">
|
||
<thead>
|
||
<tr className="text-slate-500">
|
||
<th className="text-left py-1 pr-3">Expiry / Strike%</th>
|
||
{STRIKE_PCTS.map(p => <th key={p} className="px-2 py-1 text-right">{p}%</th>)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{chain.expiries.map((exp: any) => (
|
||
<tr key={exp.expiry_date} className="border-t border-slate-700/30">
|
||
<td className="py-1 pr-3 text-slate-400 whitespace-nowrap">{exp.expiry_date} ({exp.days_to_expiry}j)</td>
|
||
{STRIKE_PCTS.map(pct => {
|
||
const v = cellValue(exp.days_to_expiry, pct)
|
||
const overridden = isOverridden(exp.days_to_expiry, pct)
|
||
return (
|
||
<td key={pct} className="px-1 py-1">
|
||
<input
|
||
type="number" step={0.005}
|
||
value={v != null ? Math.round(v * 1000) / 1000 : ''}
|
||
onChange={(e) => {
|
||
const val = e.target.value === '' ? null : parseFloat(e.target.value)
|
||
setOverride(exp.days_to_expiry, pct, val)
|
||
}}
|
||
className={clsx(
|
||
'w-16 text-right bg-dark-700 border rounded px-1 py-0.5',
|
||
overridden ? 'border-amber-500 text-amber-300' : 'border-slate-700/40 text-slate-300',
|
||
)}
|
||
/>
|
||
</td>
|
||
)
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Volatility surface heatmap ────────────────────────────────────────────────
|
||
// Sequential single-hue ramp (light → dark), light steps get dark text for contrast —
|
||
// magnitude encoding per dataviz convention, no rainbow, no dual-hue diverging misuse.
|
||
const IV_RAMP = ['#1e2d4d', '#1e3a6e', '#1d4f9e', '#1a63c4', '#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe']
|
||
|
||
function ivCellColor(value: number, min: number, max: number): { bg: string; fg: string } {
|
||
const range = max - min || 1
|
||
const t = Math.min(1, Math.max(0, (value - min) / range))
|
||
const idx = Math.min(IV_RAMP.length - 1, Math.floor(t * IV_RAMP.length))
|
||
const bg = IV_RAMP[IV_RAMP.length - 1 - idx] // low IV -> light, high IV -> dark
|
||
const fg = idx >= IV_RAMP.length - 3 ? '#0f1623' : '#ffffff'
|
||
return { bg, fg }
|
||
}
|
||
|
||
function VolSurfaceHeatmap({ chain, spot }: { chain: any; spot: number }) {
|
||
const cells = useMemo(() => {
|
||
if (!chain) return []
|
||
const out: { expiry: string; days: number; pct: number; iv: number | null }[] = []
|
||
for (const exp of chain.expiries) {
|
||
for (const pct of STRIKE_PCTS) {
|
||
const target = spot * (pct / 100)
|
||
const rows = [...exp.calls, ...exp.puts].filter((r: any) => r.iv > 0.01)
|
||
if (!rows.length) {
|
||
out.push({ expiry: exp.expiry_date, days: exp.days_to_expiry, pct, iv: null })
|
||
continue
|
||
}
|
||
const nearest = rows.reduce((best: any, r: any) =>
|
||
Math.abs(r.strike - target) < Math.abs(best.strike - target) ? r : best)
|
||
out.push({ expiry: exp.expiry_date, days: exp.days_to_expiry, pct, iv: nearest.iv })
|
||
}
|
||
}
|
||
return out
|
||
}, [chain, spot])
|
||
|
||
if (!chain) return null
|
||
const ivValues = cells.map(c => c.iv).filter((v): v is number => v != null)
|
||
if (!ivValues.length) return <div className="card-sm text-xs text-slate-500">Pas assez de données d'IV pour construire la surface.</div>
|
||
const min = Math.min(...ivValues)
|
||
const max = Math.max(...ivValues)
|
||
|
||
return (
|
||
<div className="card">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="stat-label">Surface de volatilité (strike × expiry)</div>
|
||
<div className="flex items-center gap-2 text-[10px] text-slate-500">
|
||
<span>{(min * 100).toFixed(1)}%</span>
|
||
<div className="flex h-2 w-24 rounded overflow-hidden">
|
||
{[...IV_RAMP].reverse().map(c => <div key={c} className="flex-1" style={{ background: c }} />)}
|
||
</div>
|
||
<span>{(max * 100).toFixed(1)}%</span>
|
||
</div>
|
||
</div>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-[10px] border-separate" style={{ borderSpacing: 2 }}>
|
||
<thead>
|
||
<tr>
|
||
<th className="text-left text-slate-500 pr-2">Expiry</th>
|
||
{STRIKE_PCTS.map(p => <th key={p} className="text-slate-500 font-normal px-1">{p}%</th>)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{chain.expiries.map((exp: any) => (
|
||
<tr key={exp.expiry_date}>
|
||
<td className="text-slate-400 pr-2 whitespace-nowrap">{exp.expiry_date} ({exp.days_to_expiry}j)</td>
|
||
{STRIKE_PCTS.map(pct => {
|
||
const cell = cells.find(c => c.expiry === exp.expiry_date && c.pct === pct)
|
||
if (!cell || cell.iv == null) {
|
||
return <td key={pct} className="text-center text-slate-700 bg-dark-700/40 rounded">—</td>
|
||
}
|
||
const { bg, fg } = ivCellColor(cell.iv, min, max)
|
||
return (
|
||
<td key={pct} className="text-center rounded font-semibold" style={{ background: bg, color: fg }}
|
||
title={`${exp.expiry_date} · ${pct}% (${fmtPrice(spot * pct / 100)}) · IV ${(cell.iv * 100).toFixed(1)}%`}>
|
||
{(cell.iv * 100).toFixed(1)}
|
||
</td>
|
||
)
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Manual leg builder ────────────────────────────────────────────────────────
|
||
|
||
function LegRow({
|
||
leg, chain, onChange, onRemove,
|
||
}: {
|
||
leg: StrategyLeg; chain: any
|
||
onChange: (leg: StrategyLeg) => void
|
||
onRemove: () => void
|
||
}) {
|
||
const expiry = chain?.expiries.find((e: any) => e.expiry_date === leg.expiry_date)
|
||
const rows = expiry ? (leg.option_type === 'call' ? expiry.calls : expiry.puts) : []
|
||
|
||
return (
|
||
<div className="grid grid-cols-12 gap-2 items-center text-xs">
|
||
<select
|
||
className="col-span-3 bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
value={leg.expiry_date}
|
||
onChange={(e) => {
|
||
const exp = chain.expiries.find((x: any) => x.expiry_date === e.target.value)
|
||
onChange({ ...leg, expiry_date: e.target.value, days_to_expiry: exp?.days_to_expiry ?? leg.days_to_expiry })
|
||
}}
|
||
>
|
||
{chain?.expiries.map((e: any) => (
|
||
<option key={e.expiry_date} value={e.expiry_date}>{e.expiry_date} ({e.days_to_expiry}j)</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
className="col-span-2 bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
value={leg.option_type}
|
||
onChange={(e) => onChange({ ...leg, option_type: e.target.value as 'call' | 'put' })}
|
||
>
|
||
<option value="call">Call</option>
|
||
<option value="put">Put</option>
|
||
</select>
|
||
<select
|
||
className="col-span-3 bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
value={leg.strike}
|
||
onChange={(e) => onChange({ ...leg, strike: parseFloat(e.target.value) })}
|
||
>
|
||
{rows.map((r: any) => (
|
||
<option key={r.strike} value={r.strike}>{fmtPrice(r.strike)} (bid {fmtPrice(r.bid)} / ask {fmtPrice(r.ask)})</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
className="col-span-2 bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
value={leg.position}
|
||
onChange={(e) => onChange({ ...leg, position: e.target.value as 'long' | 'short' })}
|
||
>
|
||
<option value="long">Achat</option>
|
||
<option value="short">Vente</option>
|
||
</select>
|
||
<input
|
||
type="number" min={1} value={leg.quantity}
|
||
onChange={(e) => onChange({ ...leg, quantity: parseInt(e.target.value) || 1 })}
|
||
className="col-span-1 bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
/>
|
||
<button onClick={onRemove} className="col-span-1 text-slate-500 hover:text-red-400 flex justify-center">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Optimizer panel ───────────────────────────────────────────────────────────
|
||
|
||
const OBJECTIVES: { value: OptimizeConstraints['objective']; label: string }[] = [
|
||
{ value: 'net_pnl', label: 'P&L net max' },
|
||
{ value: 'return_on_risk', label: 'Retour sur risque (P&L / perte max)' },
|
||
{ value: 'prob_weighted', label: 'Espérance pondérée par probabilité' },
|
||
]
|
||
|
||
function OptimizerPanel({
|
||
constraints, setConstraints, onRun, isRunning,
|
||
}: {
|
||
constraints: OptimizeConstraints; setConstraints: (v: OptimizeConstraints) => void
|
||
onRun: () => void; isRunning: boolean
|
||
}) {
|
||
return (
|
||
<div className="card space-y-3">
|
||
<div className="stat-label">Optimiseur — contraintes & objectif</div>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
|
||
<div>
|
||
<label className="text-slate-400 block mb-1">Max jambes</label>
|
||
<select
|
||
value={constraints.max_legs}
|
||
onChange={(e) => setConstraints({ ...constraints, max_legs: parseInt(e.target.value) })}
|
||
className="w-full bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
>
|
||
{[1, 2, 3, 4].map(n => <option key={n} value={n}>{n}</option>)}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-slate-400 block mb-1">Seuil neutralité Δ (optionnel)</label>
|
||
<input
|
||
type="number" step={0.01} min={0} placeholder="illimité"
|
||
value={constraints.delta_threshold ?? ''}
|
||
onChange={(e) => setConstraints({ ...constraints, delta_threshold: e.target.value === '' ? null : parseFloat(e.target.value) })}
|
||
className="w-full bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-slate-400 block mb-1">Plafond perte max (optionnel)</label>
|
||
<input
|
||
type="number" placeholder="illimité"
|
||
value={constraints.max_loss_cap ?? ''}
|
||
onChange={(e) => setConstraints({ ...constraints, max_loss_cap: e.target.value === '' ? null : parseFloat(e.target.value) })}
|
||
className="w-full bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-slate-400 block mb-1">Objectif</label>
|
||
<select
|
||
value={constraints.objective}
|
||
onChange={(e) => setConstraints({ ...constraints, objective: e.target.value as OptimizeConstraints['objective'] })}
|
||
className="w-full bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-slate-200"
|
||
>
|
||
{OBJECTIVES.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={onRun}
|
||
disabled={isRunning}
|
||
className="flex items-center gap-1.5 text-xs bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white px-3 py-1.5 rounded font-semibold"
|
||
>
|
||
<Search className={clsx('w-3.5 h-3.5', isRunning && 'animate-pulse')} />
|
||
{isRunning ? 'Recherche parmi des milliers de combinaisons…' : 'Trouver la stratégie optimale'}
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ResultsTable({ results, onSelect }: { results: StrategyCandidate[]; onSelect: (c: StrategyCandidate) => void }) {
|
||
if (!results.length) return <div className="card-sm text-xs text-slate-500">Aucun candidat ne satisfait les contraintes — élargissez le seuil de delta ou le plafond de perte.</div>
|
||
return (
|
||
<div className="card overflow-x-auto">
|
||
<div className="stat-label mb-2">{results.length} candidats classés</div>
|
||
<table className="w-full text-xs">
|
||
<thead>
|
||
<tr className="text-slate-500 text-left">
|
||
<th className="py-1 pr-3">Structure</th>
|
||
<th className="py-1 pr-3">Jambes</th>
|
||
<th className="py-1 pr-3 text-right">Score</th>
|
||
<th className="py-1 pr-3 text-right">P&L net</th>
|
||
<th className="py-1 pr-3 text-right" title="À l'échéance de la jambe la plus proche, sous la même vue de vol que le scénario. Approximatif (balayage rapide pour classer des centaines de candidats) — se précise après «Charger».">Max gain</th>
|
||
<th className="py-1 pr-3 text-right" title="À l'échéance de la jambe la plus proche, sous la même vue de vol que le scénario. Approximatif (balayage rapide pour classer des centaines de candidats) — se précise après «Charger».">Max perte</th>
|
||
<th className="py-1 pr-3 text-right">Δ net</th>
|
||
<th className="py-1 pr-1"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{results.map((r, i) => (
|
||
<tr key={i} className="border-t border-slate-700/30 hover:bg-dark-700/40 cursor-pointer" onClick={() => onSelect(r)}>
|
||
<td className="py-1.5 pr-3 text-slate-200">{r.template_name}</td>
|
||
<td className="py-1.5 pr-3 text-slate-400">{r.legs.length}</td>
|
||
<td className="py-1.5 pr-3 text-right font-semibold text-white">{r.score.toFixed(2)}</td>
|
||
<td className={clsx('py-1.5 pr-3 text-right font-semibold', pnlColor(r.net_pnl))}>{fmtMoney(r.net_pnl)}</td>
|
||
<td className="py-1.5 pr-3 text-right text-emerald-400">{r.max_gain != null ? fmtMoney(r.max_gain) : '∞'}</td>
|
||
<td className="py-1.5 pr-3 text-right text-red-400">{r.max_loss != null ? fmtMoney(r.max_loss) : '−∞'}</td>
|
||
<td className="py-1.5 pr-3 text-right text-slate-400">{r.net_delta_now.toFixed(3)}</td>
|
||
<td className="py-1.5 pr-1 text-blue-400 text-right">Charger →</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Scenario save/load ────────────────────────────────────────────────────────
|
||
|
||
function ScenarioLibrary({
|
||
symbol, scenario, onLoad,
|
||
}: {
|
||
symbol: string; scenario: StrategyScenario; onLoad: (s: SavedScenario) => void
|
||
}) {
|
||
const { data: saved = [] } = useScenarios(symbol)
|
||
const saveScenario = useSaveScenario()
|
||
const deleteScenario = useDeleteScenario()
|
||
const [label, setLabel] = useState('')
|
||
|
||
return (
|
||
<div className="card-sm space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Nom du scénario…"
|
||
className="flex-1 bg-dark-700 border border-slate-700/50 rounded px-2 py-1 text-xs text-white"
|
||
/>
|
||
<button
|
||
onClick={() => { saveScenario.mutate({ ...scenario, label }); setLabel('') }}
|
||
disabled={!label || saveScenario.isPending}
|
||
className="flex items-center gap-1 text-xs bg-dark-700 hover:bg-dark-600 border border-slate-700/50 text-slate-300 px-2 py-1 rounded disabled:opacity-40"
|
||
>
|
||
<Save className="w-3 h-3" /> Sauvegarder
|
||
</button>
|
||
</div>
|
||
{saved.length > 0 && (
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{saved.map(s => (
|
||
<span key={s.id} className="badge-blue flex items-center gap-1">
|
||
<button onClick={() => onLoad(s)} className="flex items-center gap-1">
|
||
<FolderOpen className="w-3 h-3" /> {s.label || s.id}
|
||
</button>
|
||
<button onClick={() => deleteScenario.mutate(s.id)}><X className="w-3 h-3" /></button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Saved strategies library ──────────────────────────────────────────────────
|
||
|
||
function SavedStrategiesLibrary({ symbol, onLoad }: { symbol: string; onLoad: (legs: StrategyLeg[], templateName: string) => void }) {
|
||
const { data: saved = [] } = useSavedStrategies(symbol)
|
||
const deleteStrategy = useDeleteSavedStrategy()
|
||
|
||
if (!saved.length) return null
|
||
|
||
return (
|
||
<div className="card-sm space-y-2">
|
||
<div className="stat-label">Stratégies sauvegardées ({symbol})</div>
|
||
<div className="space-y-1">
|
||
{saved.map(s => (
|
||
<div key={s.id} className="flex items-center justify-between text-xs bg-dark-700/50 rounded px-2 py-1.5">
|
||
<button onClick={() => onLoad(s.legs, s.template_name)} className="flex items-center gap-2 text-slate-300 hover:text-white">
|
||
<FolderOpen className="w-3 h-3 text-blue-400" />
|
||
<span>{s.template_name}</span>
|
||
<span className={pnlColor(s.net_pnl_scenario)}>{fmtMoney(s.net_pnl_scenario)}</span>
|
||
<span className="text-slate-600">{s.legs.length} jambes</span>
|
||
</button>
|
||
<button onClick={() => deleteStrategy.mutate(s.id)} className="text-slate-500 hover:text-red-400">
|
||
<Trash2 className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||
|
||
export default function StrategyBuilder() {
|
||
const [symbol, setSymbol] = useState('')
|
||
const [debouncedSymbol, setDebouncedSymbol] = useState('')
|
||
const [horizonDays, setHorizonDays] = useState(8)
|
||
const [scenario, setScenario] = useState<StrategyScenario>({
|
||
symbol: '', horizon_days: 8, spot_shock_pct: 0, iv_level_shift: 0, skew_tilt: 0, term_shift: 0, manual_grid: [],
|
||
contract_size: 100_000,
|
||
})
|
||
|
||
// Chain lookup only commits on blur/Enter/datalist-pick, never mid-keystroke — typing
|
||
// "EUU" while aiming for "EUU:XCME" must never flash a "ticker not found" error. Takes
|
||
// an optional explicit value so the datalist-pick path (which calls this synchronously
|
||
// right after setSymbol in the same onChange) doesn't read a stale pre-update closure.
|
||
const commitSymbol = (v?: string) => setDebouncedSymbol((v ?? symbol).trim())
|
||
|
||
const [legs, setLegs] = useState<StrategyLeg[]>([])
|
||
const [constraints, setConstraints] = useState<OptimizeConstraints>({
|
||
max_legs: 4, delta_threshold: 0.15, max_loss_cap: null, objective: 'net_pnl', top_n: 20,
|
||
})
|
||
const [activeTemplate, setActiveTemplate] = useState<string | null>(null)
|
||
|
||
const { data: watchlistData } = useWatchlistTickers()
|
||
const { data: saxoCatalog } = useSaxoCatalog(undefined, undefined, { enabled: true, limit: 500 })
|
||
const watchlistTickers = Array.from(new Set([
|
||
...((watchlistData?.tickers ?? []) as WatchlistEntry[]).filter(t => t.is_active).map(t => t.ticker),
|
||
...(saxoCatalog ?? []).map(c => c.symbol),
|
||
])).sort()
|
||
|
||
const { data: chain, isLoading: chainLoading, isError: chainError, error: chainErrorObj, refetch: refetchChain, isFetching } =
|
||
useOptionChainSlice(debouncedSymbol, horizonDays, 3)
|
||
const { data: ivForTrade } = useIvForTrade(debouncedSymbol)
|
||
|
||
useEffect(() => {
|
||
setScenario(s => ({ ...s, symbol: debouncedSymbol, horizon_days: horizonDays }))
|
||
}, [debouncedSymbol, horizonDays])
|
||
|
||
useEffect(() => {
|
||
if (chain && chain.expiries.length && legs.length === 0) {
|
||
const exp = chain.expiries[0]
|
||
const atm = exp.calls.reduce((best: any, r: any) =>
|
||
Math.abs(r.strike - chain.spot) < Math.abs(best.strike - chain.spot) ? r : best, exp.calls[0])
|
||
if (atm) setLegs([emptyLeg(exp.expiry_date, exp.days_to_expiry, atm.strike)])
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [chain])
|
||
|
||
const priceMutation = usePriceStrategy()
|
||
|
||
useEffect(() => {
|
||
if (!chain || legs.length === 0) return
|
||
const t = setTimeout(() => {
|
||
priceMutation.mutate({ scenario, legs })
|
||
}, 400)
|
||
return () => clearTimeout(t)
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [JSON.stringify(scenario), JSON.stringify(legs), chain])
|
||
|
||
const priced = priceMutation.data
|
||
|
||
const isNonDirectional = useMemo(() => {
|
||
if (!priced) return null
|
||
return Math.abs(priced.net_delta_now) <= DELTA_NEUTRAL_THRESHOLD
|
||
}, [priced])
|
||
|
||
const addLeg = () => {
|
||
if (!chain || legs.length >= 4) return
|
||
const exp = chain.expiries[0]
|
||
setLegs([...legs, emptyLeg(exp.expiry_date, exp.days_to_expiry, chain.spot)])
|
||
}
|
||
|
||
const optimizeMutation = useOptimizeStrategy()
|
||
const saveStrategy = useSaveStrategyRecord()
|
||
|
||
const handleOptimize = () => {
|
||
setActiveTemplate(null)
|
||
optimizeMutation.mutate({ scenario, constraints })
|
||
}
|
||
|
||
const handleSelectCandidate = (c: StrategyCandidate) => {
|
||
setActiveTemplate(c.template_name)
|
||
setLegs(c.legs)
|
||
}
|
||
|
||
const handleLoadScenario = (s: SavedScenario) => {
|
||
setSymbol(s.symbol)
|
||
setHorizonDays(s.horizon_days)
|
||
setScenario(prev => ({
|
||
symbol: s.symbol, horizon_days: s.horizon_days, spot_shock_pct: s.spot_shock_pct,
|
||
iv_level_shift: s.iv_level_shift, skew_tilt: s.skew_tilt, term_shift: s.term_shift,
|
||
manual_grid: s.manual_grid, contract_size: prev.contract_size,
|
||
}))
|
||
}
|
||
|
||
const handleSaveStrategy = () => {
|
||
if (!priced) return
|
||
saveStrategy.mutate({
|
||
symbol, template_name: activeTemplate || 'Manuel', objective: constraints.objective, legs,
|
||
entry_cost: priced.entry_cost, max_gain: priced.max_gain, max_loss: priced.max_loss,
|
||
net_pnl_scenario: priced.net_pnl, net_delta: priced.net_delta_now,
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="p-6 space-y-5">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-xl font-bold text-white flex items-center gap-2">
|
||
<Layers className="w-5 h-5 text-blue-400" /> Strategy Builder
|
||
</h1>
|
||
<p className="text-xs text-slate-500 mt-0.5">
|
||
Scénario spot/IV/surface à J+N · builder manuel 1-4 jambes · payoff & greeks avec spread broker réel
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={() => refetchChain()}
|
||
disabled={isFetching}
|
||
className="flex items-center gap-1.5 text-xs border border-slate-600 text-slate-400 hover:text-slate-200 hover:border-slate-500 px-3 py-1.5 rounded transition-all disabled:opacity-50"
|
||
>
|
||
<RefreshCw className={clsx('w-3.5 h-3.5', isFetching && 'animate-spin')} />
|
||
{isFetching ? 'Chargement...' : 'Rafraîchir la chaîne'}
|
||
</button>
|
||
</div>
|
||
|
||
{chainError && (
|
||
<div className="px-4 py-3 rounded border border-red-700/40 bg-red-900/10 text-xs text-red-300 flex items-center gap-2">
|
||
<AlertTriangle className="w-4 h-4" />
|
||
{(chainErrorObj as any)?.response?.data?.detail ?? `Chaîne d'options indisponible pour ${debouncedSymbol}. Essayez un autre symbole.`}
|
||
</div>
|
||
)}
|
||
|
||
<ScenarioPanel symbol={symbol} setSymbol={setSymbol} onCommitSymbol={commitSymbol} horizonDays={horizonDays} setHorizonDays={setHorizonDays}
|
||
scenario={scenario} setScenario={setScenario} watchlistTickers={watchlistTickers} />
|
||
|
||
<ScenarioLibrary symbol={debouncedSymbol} scenario={scenario} onLoad={handleLoadScenario} />
|
||
<SavedStrategiesLibrary symbol={debouncedSymbol} onLoad={(legs, templateName) => { setActiveTemplate(templateName); setLegs(legs) }} />
|
||
|
||
{chainLoading && <div className="card-sm text-xs text-slate-500">Chargement de la chaîne réelle ({debouncedSymbol})…</div>}
|
||
|
||
{chain && <ScenarioGrid chain={chain} spot={chain.spot} scenario={scenario} setScenario={setScenario} />}
|
||
{chain && <VolSurfaceHeatmap chain={chain} spot={chain.spot} />}
|
||
|
||
{chain && (
|
||
<div className="card space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="stat-label flex items-center gap-2 flex-wrap">
|
||
<span>Jambes (1-4) — Spot {fmtPrice(chain.spot)}</span>
|
||
{fmtAsOf(chain.as_of) && (
|
||
<span className="text-slate-600 font-normal text-[10px]" title="Date de capture de la chaîne d'options (dernier snapshot Saxo)">
|
||
· données du {fmtAsOf(chain.as_of)}
|
||
</span>
|
||
)}
|
||
{ivForTrade?.iv_current_pct != null && (
|
||
<span className="text-slate-500 font-normal text-[10px]">
|
||
· IV ATM {ivForTrade.iv_current_pct.toFixed(1)}%
|
||
{ivForTrade.iv_change_1d_pct != null && Math.abs(ivForTrade.iv_change_1d_pct) >= 0.1 && (
|
||
<span className={ivForTrade.iv_change_1d_pct > 0 ? 'text-orange-400' : 'text-blue-400'}>
|
||
{' '}({ivForTrade.iv_change_1d_pct >= 0 ? '+' : ''}{ivForTrade.iv_change_1d_pct.toFixed(1)}pt vs veille)
|
||
</span>
|
||
)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<label className="flex items-center gap-1.5 text-xs text-slate-400" title="Notionnel par contrat (ex. 100 000 = 1 lot standard EURUSD). S'applique à chaque jambe, multiplié par sa quantité.">
|
||
Nominal (USD)
|
||
<input
|
||
type="number" step={1000} min={1}
|
||
value={scenario.contract_size ?? 100_000}
|
||
onChange={(e) => setScenario(s => ({ ...s, contract_size: parseFloat(e.target.value) || 100_000 }))}
|
||
className="w-28 bg-dark-700 border border-slate-700/50 rounded px-2 py-1 text-slate-200"
|
||
/>
|
||
</label>
|
||
<button
|
||
onClick={addLeg}
|
||
disabled={legs.length >= 4}
|
||
className="flex items-center gap-1 text-xs bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-white px-2.5 py-1 rounded"
|
||
>
|
||
<Plus className="w-3.5 h-3.5" /> Ajouter une jambe
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{legs.map((leg, i) => (
|
||
<LegRow
|
||
key={i} leg={leg} chain={chain}
|
||
onChange={(l) => setLegs(legs.map((x, j) => j === i ? l : x))}
|
||
onRemove={() => setLegs(legs.filter((_, j) => j !== i))}
|
||
/>
|
||
))}
|
||
{legs.length === 0 && <div className="text-xs text-slate-500">Aucune jambe — ajoutez-en une pour commencer.</div>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{chain && (
|
||
<OptimizerPanel constraints={constraints} setConstraints={setConstraints} onRun={handleOptimize} isRunning={optimizeMutation.isPending} />
|
||
)}
|
||
|
||
{optimizeMutation.isError && (
|
||
<div className="px-4 py-3 rounded border border-red-700/40 bg-red-900/10 text-xs text-red-300">
|
||
{(optimizeMutation.error as any)?.response?.data?.detail ?? "Erreur lors de l'optimisation."}
|
||
</div>
|
||
)}
|
||
{optimizeMutation.data && (
|
||
<ResultsTable results={optimizeMutation.data} onSelect={handleSelectCandidate} />
|
||
)}
|
||
|
||
{priceMutation.isPending && <div className="card-sm text-xs text-slate-500">Calcul en cours…</div>}
|
||
{priceMutation.isError && (
|
||
<div className="px-4 py-3 rounded border border-red-700/40 bg-red-900/10 text-xs text-red-300">
|
||
Erreur de pricing — vérifiez les jambes sélectionnées.
|
||
</div>
|
||
)}
|
||
|
||
{priced && (
|
||
<>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
<div className="card-sm">
|
||
<div className="stat-label">Coût d'entrée (spread inclus)</div>
|
||
<div className={clsx('text-lg font-bold', priced.entry_cost >= 0 ? 'text-white' : 'text-emerald-400')}>{fmtMoney(priced.entry_cost)}</div>
|
||
</div>
|
||
<div className="card-sm">
|
||
<div className="stat-label">P&L net scénario J+{horizonDays}</div>
|
||
<div className={clsx('text-lg font-bold', pnlColor(priced.net_pnl))}>{fmtMoney(priced.net_pnl)}</div>
|
||
</div>
|
||
<div className="card-sm">
|
||
<div className="stat-label">Coût spread broker</div>
|
||
<div className="text-lg font-bold text-amber-400">{fmtMoney(priced.broker_spread_cost)}</div>
|
||
</div>
|
||
<div className="card-sm" title="Borne théorique à l'échéance de la jambe la plus proche, sous la même vue de volatilité que votre scénario. Pour les structures mono-échéance (condor, butterfly...), c'est un calcul purement intrinsèque, indépendant de la vol. Le P&L net scénario est une valorisation avant échéance (mark-to-market) : sur une structure vendeuse de vega, un choc de vol important dans le scénario peut transitoirement le faire sortir de cette fourchette — risque vega réel, pas un bug.">
|
||
<div className="stat-label">Max gain / Max perte (à échéance)</div>
|
||
<div className="text-sm font-semibold">
|
||
<span className="text-emerald-400">{priced.max_gain != null ? fmtMoney(priced.max_gain) : '∞'}</span>
|
||
<span className="text-slate-500"> / </span>
|
||
<span className="text-red-400">{priced.max_loss != null ? fmtMoney(priced.max_loss) : '−∞'}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<span className={clsx('badge', priced.bounded_risk ? 'badge-green' : 'badge-red')}>
|
||
{priced.bounded_risk ? 'Risque borné' : 'Risque non borné'}
|
||
</span>
|
||
<span className={clsx('badge', isNonDirectional ? 'badge-blue' : 'badge-orange')}>
|
||
Δ net {priced.net_delta_now.toFixed(3)} — {isNonDirectional ? 'non-directionnel' : 'directionnel'}
|
||
</span>
|
||
<button
|
||
onClick={handleSaveStrategy}
|
||
disabled={saveStrategy.isPending}
|
||
className="ml-auto flex items-center gap-1 text-xs bg-dark-700 hover:bg-dark-600 border border-slate-700/50 text-slate-300 px-2.5 py-1 rounded disabled:opacity-40"
|
||
>
|
||
<Save className="w-3 h-3" /> {saveStrategy.isSuccess ? 'Sauvegardé ✓' : 'Sauvegarder cette stratégie'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<div className="stat-label mb-2">Diagramme payoff</div>
|
||
<PayoffChart priced={priced} spot={priced.spot} scenarioSpot={priced.scenario_spot} />
|
||
<p className="text-[11px] text-slate-500 mt-1">
|
||
Les deux courbes utilisent la même vue de volatilité (celle du scénario) — seule la date diffère : bleu = à l'échéance de la jambe la plus proche, orange = à J+{horizonDays}.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
<GreeksTile label="Delta net" now={priced.greeks_now.delta} scenario={priced.greeks_scenario.delta} />
|
||
<GreeksTile label="Gamma net" now={priced.greeks_now.gamma} scenario={priced.greeks_scenario.gamma} />
|
||
<GreeksTile label="Theta net" now={priced.greeks_now.theta} scenario={priced.greeks_scenario.theta} />
|
||
<GreeksTile label="Vega net" now={priced.greeks_now.vega} scenario={priced.greeks_scenario.vega} />
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|