feat: add TradingSettings component with risk management defaults
This commit is contained in:
@@ -0,0 +1,130 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
interface TradingSettingsProps {
|
||||||
|
settings: Record<string, any>;
|
||||||
|
onSave: (key: string, value: any) => Promise<void>;
|
||||||
|
saveError: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TradingSettings({ settings, onSave, saveError }: TradingSettingsProps) {
|
||||||
|
const [maxLossPercent, setMaxLossPercent] = useState(settings["trading.maxLossPercent"] ?? 2);
|
||||||
|
const [positionSizePercent, setPositionSizePercent] = useState(settings["trading.positionSizePercent"] ?? 10);
|
||||||
|
const [takeProfitPercent, setTakeProfitPercent] = useState(settings["trading.takeProfitPercent"] ?? 5);
|
||||||
|
const [stopLossPercent, setStopLossPercent] = useState(settings["trading.stopLossPercent"] ?? 3);
|
||||||
|
const [riskMethod, setRiskMethod] = useState(settings["trading.riskMethod"] ?? "percentage");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMaxLossPercent(settings["trading.maxLossPercent"] ?? 2);
|
||||||
|
setPositionSizePercent(settings["trading.positionSizePercent"] ?? 10);
|
||||||
|
setTakeProfitPercent(settings["trading.takeProfitPercent"] ?? 5);
|
||||||
|
setStopLossPercent(settings["trading.stopLossPercent"] ?? 3);
|
||||||
|
setRiskMethod(settings["trading.riskMethod"] ?? "percentage");
|
||||||
|
}, [settings]);
|
||||||
|
|
||||||
|
const save = async (key: string, value: any) => {
|
||||||
|
await onSave(key, value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold text-gray-900">Trading Defaults</h2>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">Default risk management and position sizing parameters.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{saveError && (
|
||||||
|
<div className="bg-red-50 text-red-700 px-4 py-2 rounded-lg text-sm">{saveError}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Max Loss %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0.1"
|
||||||
|
max="100"
|
||||||
|
step="0.1"
|
||||||
|
value={maxLossPercent}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = parseFloat(e.target.value) || 0;
|
||||||
|
setMaxLossPercent(v);
|
||||||
|
save("trading.maxLossPercent", v);
|
||||||
|
}}
|
||||||
|
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Maximum portfolio percentage to risk on a single trade.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Position Size %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="100"
|
||||||
|
step="1"
|
||||||
|
value={positionSizePercent}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = parseInt(e.target.value) || 1;
|
||||||
|
setPositionSizePercent(v);
|
||||||
|
save("trading.positionSizePercent", v);
|
||||||
|
}}
|
||||||
|
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Default position size as percentage of available cash.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Take Profit %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0.1"
|
||||||
|
max="100"
|
||||||
|
step="0.1"
|
||||||
|
value={takeProfitPercent}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = parseFloat(e.target.value) || 0;
|
||||||
|
setTakeProfitPercent(v);
|
||||||
|
save("trading.takeProfitPercent", v);
|
||||||
|
}}
|
||||||
|
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Target profit percentage for auto take-profit orders.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Stop Loss %</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0.1"
|
||||||
|
max="100"
|
||||||
|
step="0.1"
|
||||||
|
value={stopLossPercent}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = parseFloat(e.target.value) || 0;
|
||||||
|
setStopLossPercent(v);
|
||||||
|
save("trading.stopLossPercent", v);
|
||||||
|
}}
|
||||||
|
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Stop loss percentage below entry price.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Risk Method</label>
|
||||||
|
<select
|
||||||
|
value={riskMethod}
|
||||||
|
onChange={(e) => {
|
||||||
|
setRiskMethod(e.target.value);
|
||||||
|
save("trading.riskMethod", e.target.value);
|
||||||
|
}}
|
||||||
|
className="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="fixed">Fixed amount</option>
|
||||||
|
<option value="percentage">Percentage of portfolio</option>
|
||||||
|
<option value="atr">ATR-based (Average True Range)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user