diff --git a/app/components/TradingSettings.tsx b/app/components/TradingSettings.tsx new file mode 100644 index 0000000..36409c4 --- /dev/null +++ b/app/components/TradingSettings.tsx @@ -0,0 +1,130 @@ +import React, { useState, useEffect } from "react"; + +interface TradingSettingsProps { + settings: Record; + onSave: (key: string, value: any) => Promise; + 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 ( +
+
+

Trading Defaults

+

Default risk management and position sizing parameters.

+
+ + {saveError && ( +
{saveError}
+ )} + +
+
+ + { + 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" + /> +

Maximum portfolio percentage to risk on a single trade.

+
+ +
+ + { + 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" + /> +

Default position size as percentage of available cash.

+
+ +
+ + { + 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" + /> +

Target profit percentage for auto take-profit orders.

+
+ +
+ + { + 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" + /> +

Stop loss percentage below entry price.

+
+ +
+ + +
+
+
+ ); +}