111 lines
4.4 KiB
TypeScript
111 lines
4.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import type { ExitPolicy } from '../../lib/types';
|
|
import { useExitPolicy, useUpdateExitPolicy } from '../../hooks/usePaperTrades';
|
|
import { SkeletonCard } from '../ui/Skeleton';
|
|
|
|
export function ExitPolicySettings() {
|
|
const { data, isLoading } = useExitPolicy();
|
|
const update = useUpdateExitPolicy();
|
|
const [mode, setMode] = useState<ExitPolicy['mode']>('atr_trailing');
|
|
const [pct, setPct] = useState(12);
|
|
const [atrMultiplier, setAtrMultiplier] = useState(3);
|
|
const [holdDays, setHoldDays] = useState(30);
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
setMode(data.mode);
|
|
setPct(data.trailing_pct);
|
|
setAtrMultiplier(data.atr_multiplier ?? 3);
|
|
setHoldDays(data.hold_days ?? 30);
|
|
}
|
|
}, [data]);
|
|
|
|
if (isLoading) return <SkeletonCard />;
|
|
|
|
return (
|
|
<div className="glass p-5 space-y-4">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-200">Paper-Trade Exit</h3>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
How open paper trades auto-close (in the nightly/intraday outcome job).{' '}
|
|
<span className="text-gray-300">ATR trail</span> is the promoted production exit: initial stop,
|
|
ATR trailing stop, and a max N-trading-day hold;{' '}
|
|
<span className="text-gray-300">Hold</span> keeps only the initial stop until the Nth trading
|
|
day's close; <span className="text-gray-300">Percent trail</span> is the older trailing mode;{' '}
|
|
<span className="text-gray-300">Target / stop</span> closes at the setup's target or stop.
|
|
The setup's initial stop is always the floor.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<label className="block space-y-1">
|
|
<span className="text-xs text-gray-400">Exit mode</span>
|
|
<select
|
|
value={mode}
|
|
onChange={(e) => setMode(e.target.value as ExitPolicy['mode'])}
|
|
className="w-full input-glass px-3 py-2 text-sm"
|
|
>
|
|
<option value="atr_trailing">ATR trail + max hold</option>
|
|
<option value="time">Hold N days + stop</option>
|
|
<option value="trailing">Percent trailing stop</option>
|
|
<option value="target">Target / stop</option>
|
|
</select>
|
|
</label>
|
|
<label className="block space-y-1">
|
|
<span className="text-xs text-gray-400">Hold (trading days)</span>
|
|
<input
|
|
type="number"
|
|
min={2}
|
|
max={250}
|
|
step={1}
|
|
value={holdDays}
|
|
onChange={(e) => setHoldDays(Number(e.target.value))}
|
|
disabled={mode !== 'time' && mode !== 'atr_trailing'}
|
|
className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
|
|
/>
|
|
<span className="text-[11px] text-gray-600">Production max hold: 30 trading days.</span>
|
|
</label>
|
|
<label className="block space-y-1">
|
|
<span className="text-xs text-gray-400">ATR multiplier</span>
|
|
<input
|
|
type="number"
|
|
min={0.5}
|
|
max={10}
|
|
step={0.25}
|
|
value={atrMultiplier}
|
|
onChange={(e) => setAtrMultiplier(Number(e.target.value))}
|
|
disabled={mode !== 'atr_trailing'}
|
|
className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
|
|
/>
|
|
<span className="text-[11px] text-gray-600">Promoted strategy: 3x ATR.</span>
|
|
</label>
|
|
<label className="block space-y-1">
|
|
<span className="text-xs text-gray-400">Trailing width (%)</span>
|
|
<input
|
|
type="number"
|
|
min={0.5}
|
|
max={90}
|
|
step={0.5}
|
|
value={pct}
|
|
onChange={(e) => setPct(Number(e.target.value))}
|
|
disabled={mode !== 'trailing'}
|
|
className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
|
|
/>
|
|
<span className="text-[11px] text-gray-600">Legacy percent trail from the peak.</span>
|
|
</label>
|
|
</div>
|
|
<button
|
|
className="btn-primary px-4 py-2 text-sm disabled:opacity-50"
|
|
disabled={update.isPending}
|
|
onClick={() => update.mutate({
|
|
mode,
|
|
trailing_pct: pct,
|
|
atr_multiplier: atrMultiplier,
|
|
hold_days: holdDays,
|
|
})}
|
|
>
|
|
{update.isPending ? 'Saving…' : 'Save Exit Policy'}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|