feat: add TradingSettings component with risk management defaults

2026-05-16 20:57:16 +02:00
parent c04f35a1b9
commit faf642b043
1 changed files with 130 additions and 0 deletions
@@ -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>
+  );
+}