[OQI-009] feat: Add MT4 live trading components
- MT4ConnectionStatus: Connection indicator with account info display - LivePositionCard: Real-time position card with P&L, modify/close actions - RiskMonitor: Risk management dashboard with metrics and warnings - index.ts: Centralized exports for all trading components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
fc0ab528c3
commit
423be4062c
307
src/modules/trading/components/LivePositionCard.tsx
Normal file
307
src/modules/trading/components/LivePositionCard.tsx
Normal file
@ -0,0 +1,307 @@
|
|||||||
|
/**
|
||||||
|
* LivePositionCard Component
|
||||||
|
* Displays a single live MT4 position with real-time P&L and actions
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
X,
|
||||||
|
Edit3,
|
||||||
|
Target,
|
||||||
|
Shield,
|
||||||
|
Clock,
|
||||||
|
Loader2,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronUp,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import type { MT4Position } from '../../../services/trading.service';
|
||||||
|
|
||||||
|
interface LivePositionCardProps {
|
||||||
|
position: MT4Position;
|
||||||
|
currentPrice?: number;
|
||||||
|
onClose?: (ticket: number) => Promise<void>;
|
||||||
|
onModify?: (ticket: number, stopLoss?: number, takeProfit?: number) => Promise<void>;
|
||||||
|
loading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LivePositionCard: React.FC<LivePositionCardProps> = ({
|
||||||
|
position,
|
||||||
|
currentPrice,
|
||||||
|
onClose,
|
||||||
|
onModify,
|
||||||
|
loading = false,
|
||||||
|
}) => {
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const [isClosing, setIsClosing] = useState(false);
|
||||||
|
const [isModifying, setIsModifying] = useState(false);
|
||||||
|
const [modifyMode, setModifyMode] = useState(false);
|
||||||
|
const [newStopLoss, setNewStopLoss] = useState<string>(position.stop_loss?.toString() || '');
|
||||||
|
const [newTakeProfit, setNewTakeProfit] = useState<string>(position.take_profit?.toString() || '');
|
||||||
|
|
||||||
|
const isBuy = position.type === 'buy';
|
||||||
|
const isProfit = position.profit >= 0;
|
||||||
|
const displayPrice = currentPrice || position.current_price;
|
||||||
|
|
||||||
|
// Calculate pips
|
||||||
|
const pipMultiplier = position.symbol.includes('JPY') ? 100 : 10000;
|
||||||
|
const priceDiff = isBuy
|
||||||
|
? (displayPrice - position.open_price)
|
||||||
|
: (position.open_price - displayPrice);
|
||||||
|
const pips = priceDiff * pipMultiplier;
|
||||||
|
|
||||||
|
const formatTime = (timeString: string) => {
|
||||||
|
const date = new Date(timeString);
|
||||||
|
return date.toLocaleString('es-ES', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = async () => {
|
||||||
|
if (!onClose) return;
|
||||||
|
setIsClosing(true);
|
||||||
|
try {
|
||||||
|
await onClose(position.ticket);
|
||||||
|
} finally {
|
||||||
|
setIsClosing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleModify = async () => {
|
||||||
|
if (!onModify) return;
|
||||||
|
setIsModifying(true);
|
||||||
|
try {
|
||||||
|
const sl = newStopLoss ? parseFloat(newStopLoss) : undefined;
|
||||||
|
const tp = newTakeProfit ? parseFloat(newTakeProfit) : undefined;
|
||||||
|
await onModify(position.ticket, sl, tp);
|
||||||
|
setModifyMode(false);
|
||||||
|
} finally {
|
||||||
|
setIsModifying(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateRiskReward = () => {
|
||||||
|
if (!position.stop_loss || !position.take_profit) return null;
|
||||||
|
const risk = Math.abs(position.open_price - position.stop_loss);
|
||||||
|
const reward = Math.abs(position.take_profit - position.open_price);
|
||||||
|
if (risk === 0) return null;
|
||||||
|
return (reward / risk).toFixed(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const riskReward = calculateRiskReward();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`bg-gray-800 rounded-xl border ${
|
||||||
|
isProfit ? 'border-green-500/30' : 'border-red-500/30'
|
||||||
|
} overflow-hidden transition-all`}>
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="p-4">
|
||||||
|
{/* Header Row */}
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Direction Badge */}
|
||||||
|
<div className={`p-2 rounded-lg ${
|
||||||
|
isBuy ? 'bg-green-500/20' : 'bg-red-500/20'
|
||||||
|
}`}>
|
||||||
|
{isBuy ? (
|
||||||
|
<TrendingUp className="w-5 h-5 text-green-400" />
|
||||||
|
) : (
|
||||||
|
<TrendingDown className="w-5 h-5 text-red-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-bold text-white">{position.symbol}</span>
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded font-medium ${
|
||||||
|
isBuy ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
|
||||||
|
}`}>
|
||||||
|
{isBuy ? 'BUY' : 'SELL'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
{position.volume} lots • #{position.ticket}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* P&L */}
|
||||||
|
<div className="text-right">
|
||||||
|
<p className={`text-lg font-bold ${isProfit ? 'text-green-400' : 'text-red-400'}`}>
|
||||||
|
{isProfit ? '+' : ''}{position.profit.toFixed(2)} USD
|
||||||
|
</p>
|
||||||
|
<p className={`text-sm ${isProfit ? 'text-green-400/70' : 'text-red-400/70'}`}>
|
||||||
|
{pips >= 0 ? '+' : ''}{pips.toFixed(1)} pips
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price Info */}
|
||||||
|
<div className="grid grid-cols-3 gap-4 text-sm mb-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-xs mb-0.5">Entry</p>
|
||||||
|
<p className="text-white font-mono">{position.open_price.toFixed(5)}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-xs mb-0.5">Current</p>
|
||||||
|
<p className={`font-mono ${isProfit ? 'text-green-400' : 'text-red-400'}`}>
|
||||||
|
{displayPrice.toFixed(5)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-gray-500 text-xs mb-0.5">Open Time</p>
|
||||||
|
<p className="text-gray-300 text-xs">{formatTime(position.open_time)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SL/TP Indicators */}
|
||||||
|
<div className="flex items-center gap-4 text-sm">
|
||||||
|
{position.stop_loss ? (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Shield className="w-4 h-4 text-red-400" />
|
||||||
|
<span className="text-gray-400">SL:</span>
|
||||||
|
<span className="text-red-400 font-mono">{position.stop_loss.toFixed(5)}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-1.5 text-gray-500">
|
||||||
|
<Shield className="w-4 h-4" />
|
||||||
|
<span>No SL</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{position.take_profit ? (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<Target className="w-4 h-4 text-green-400" />
|
||||||
|
<span className="text-gray-400">TP:</span>
|
||||||
|
<span className="text-green-400 font-mono">{position.take_profit.toFixed(5)}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-1.5 text-gray-500">
|
||||||
|
<Target className="w-4 h-4" />
|
||||||
|
<span>No TP</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{riskReward && (
|
||||||
|
<div className="ml-auto text-gray-400">
|
||||||
|
R:R <span className="text-white font-medium">1:{riskReward}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expand/Collapse Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
className="w-full mt-3 pt-3 border-t border-gray-700 flex items-center justify-center gap-1 text-sm text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{isExpanded ? (
|
||||||
|
<>
|
||||||
|
<ChevronUp className="w-4 h-4" />
|
||||||
|
Less
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<ChevronDown className="w-4 h-4" />
|
||||||
|
More
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expanded Content */}
|
||||||
|
{isExpanded && (
|
||||||
|
<div className="px-4 pb-4 space-y-4">
|
||||||
|
{/* Comment */}
|
||||||
|
{position.comment && (
|
||||||
|
<div className="p-3 bg-gray-900/50 rounded-lg">
|
||||||
|
<p className="text-xs text-gray-500 mb-1">Comment</p>
|
||||||
|
<p className="text-sm text-gray-300">{position.comment}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modify Mode */}
|
||||||
|
{modifyMode ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Stop Loss</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.00001"
|
||||||
|
value={newStopLoss}
|
||||||
|
onChange={(e) => setNewStopLoss(e.target.value)}
|
||||||
|
placeholder="0.00000"
|
||||||
|
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white font-mono text-sm focus:outline-none focus:border-red-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Take Profit</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.00001"
|
||||||
|
value={newTakeProfit}
|
||||||
|
onChange={(e) => setNewTakeProfit(e.target.value)}
|
||||||
|
placeholder="0.00000"
|
||||||
|
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white font-mono text-sm focus:outline-none focus:border-green-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setModifyMode(false)}
|
||||||
|
className="flex-1 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleModify}
|
||||||
|
disabled={isModifying}
|
||||||
|
className="flex-1 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isModifying ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
'Save Changes'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* Action Buttons */
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{onModify && (
|
||||||
|
<button
|
||||||
|
onClick={() => setModifyMode(true)}
|
||||||
|
disabled={loading}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<Edit3 className="w-4 h-4" />
|
||||||
|
Modify
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{onClose && (
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
disabled={isClosing || loading}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 py-2 bg-red-600 hover:bg-red-500 text-white rounded-lg text-sm transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isClosing ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
Close Position
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LivePositionCard;
|
||||||
310
src/modules/trading/components/MT4ConnectionStatus.tsx
Normal file
310
src/modules/trading/components/MT4ConnectionStatus.tsx
Normal file
@ -0,0 +1,310 @@
|
|||||||
|
/**
|
||||||
|
* MT4ConnectionStatus Component
|
||||||
|
* Displays MT4 broker connection status with account info
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Wifi,
|
||||||
|
WifiOff,
|
||||||
|
RefreshCw,
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle,
|
||||||
|
Server,
|
||||||
|
DollarSign,
|
||||||
|
TrendingUp,
|
||||||
|
Settings,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { getMT4Account, type MT4Account } from '../../../services/trading.service';
|
||||||
|
|
||||||
|
interface MT4ConnectionStatusProps {
|
||||||
|
onAccountLoad?: (account: MT4Account | null) => void;
|
||||||
|
onSettingsClick?: () => void;
|
||||||
|
compact?: boolean;
|
||||||
|
autoRefresh?: boolean;
|
||||||
|
refreshInterval?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error';
|
||||||
|
|
||||||
|
const MT4ConnectionStatus: React.FC<MT4ConnectionStatusProps> = ({
|
||||||
|
onAccountLoad,
|
||||||
|
onSettingsClick,
|
||||||
|
compact = false,
|
||||||
|
autoRefresh = true,
|
||||||
|
refreshInterval = 30000,
|
||||||
|
}) => {
|
||||||
|
const [connectionState, setConnectionState] = useState<ConnectionState>('connecting');
|
||||||
|
const [account, setAccount] = useState<MT4Account | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||||
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||||
|
|
||||||
|
const fetchAccount = useCallback(async () => {
|
||||||
|
setIsRefreshing(true);
|
||||||
|
try {
|
||||||
|
const data = await getMT4Account();
|
||||||
|
if (data && data.connected) {
|
||||||
|
setAccount(data);
|
||||||
|
setConnectionState('connected');
|
||||||
|
setError(null);
|
||||||
|
onAccountLoad?.(data);
|
||||||
|
} else if (data && !data.connected) {
|
||||||
|
setAccount(data);
|
||||||
|
setConnectionState('disconnected');
|
||||||
|
setError('MT4 terminal not connected');
|
||||||
|
onAccountLoad?.(null);
|
||||||
|
} else {
|
||||||
|
setConnectionState('disconnected');
|
||||||
|
setError('No MT4 account configured');
|
||||||
|
onAccountLoad?.(null);
|
||||||
|
}
|
||||||
|
setLastUpdate(new Date());
|
||||||
|
} catch (err) {
|
||||||
|
setConnectionState('error');
|
||||||
|
setError(err instanceof Error ? err.message : 'Connection error');
|
||||||
|
onAccountLoad?.(null);
|
||||||
|
} finally {
|
||||||
|
setIsRefreshing(false);
|
||||||
|
}
|
||||||
|
}, [onAccountLoad]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAccount();
|
||||||
|
|
||||||
|
if (autoRefresh) {
|
||||||
|
const interval = setInterval(fetchAccount, refreshInterval);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, [fetchAccount, autoRefresh, refreshInterval]);
|
||||||
|
|
||||||
|
const getStatusColor = () => {
|
||||||
|
switch (connectionState) {
|
||||||
|
case 'connected':
|
||||||
|
return 'text-green-400';
|
||||||
|
case 'connecting':
|
||||||
|
return 'text-yellow-400';
|
||||||
|
case 'disconnected':
|
||||||
|
return 'text-gray-400';
|
||||||
|
case 'error':
|
||||||
|
return 'text-red-400';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = () => {
|
||||||
|
switch (connectionState) {
|
||||||
|
case 'connected':
|
||||||
|
return <Wifi className="w-4 h-4" />;
|
||||||
|
case 'connecting':
|
||||||
|
return <RefreshCw className="w-4 h-4 animate-spin" />;
|
||||||
|
case 'disconnected':
|
||||||
|
return <WifiOff className="w-4 h-4" />;
|
||||||
|
case 'error':
|
||||||
|
return <AlertTriangle className="w-4 h-4" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusText = () => {
|
||||||
|
switch (connectionState) {
|
||||||
|
case 'connected':
|
||||||
|
return 'Connected';
|
||||||
|
case 'connecting':
|
||||||
|
return 'Connecting...';
|
||||||
|
case 'disconnected':
|
||||||
|
return 'Disconnected';
|
||||||
|
case 'error':
|
||||||
|
return 'Error';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (value: number, currency: string = 'USD') => {
|
||||||
|
return new Intl.NumberFormat('en-US', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: currency,
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
}).format(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const marginLevel = account?.margin && account.margin > 0
|
||||||
|
? ((account.equity / account.margin) * 100)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
if (compact) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`flex items-center gap-1.5 ${getStatusColor()}`}>
|
||||||
|
{getStatusIcon()}
|
||||||
|
<span className="text-sm font-medium">{getStatusText()}</span>
|
||||||
|
</div>
|
||||||
|
{connectionState === 'connected' && account && (
|
||||||
|
<span className="text-sm text-gray-400">
|
||||||
|
{formatCurrency(account.balance, account.currency)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={fetchAccount}
|
||||||
|
disabled={isRefreshing}
|
||||||
|
className="p-1 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
|
||||||
|
title="Refresh"
|
||||||
|
>
|
||||||
|
<RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-gray-700">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-2 rounded-lg ${
|
||||||
|
connectionState === 'connected' ? 'bg-green-500/20' : 'bg-gray-700'
|
||||||
|
}`}>
|
||||||
|
<Server className={`w-5 h-5 ${getStatusColor()}`} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-white">MT4 Connection</h3>
|
||||||
|
<div className={`flex items-center gap-1.5 text-sm ${getStatusColor()}`}>
|
||||||
|
{getStatusIcon()}
|
||||||
|
<span>{getStatusText()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={fetchAccount}
|
||||||
|
disabled={isRefreshing}
|
||||||
|
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
|
||||||
|
title="Refresh connection"
|
||||||
|
>
|
||||||
|
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||||
|
</button>
|
||||||
|
{onSettingsClick && (
|
||||||
|
<button
|
||||||
|
onClick={onSettingsClick}
|
||||||
|
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
|
||||||
|
title="Connection settings"
|
||||||
|
>
|
||||||
|
<Settings className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
{connectionState === 'connected' && account ? (
|
||||||
|
<div className="p-4 space-y-4">
|
||||||
|
{/* Broker Info */}
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Broker</span>
|
||||||
|
<span className="text-white font-medium">{account.broker}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Account</span>
|
||||||
|
<span className="text-white font-mono">{account.account_id}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Leverage</span>
|
||||||
|
<span className="text-white">1:{account.leverage}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-700 pt-4 space-y-3">
|
||||||
|
{/* Balance */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400">
|
||||||
|
<DollarSign className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Balance</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-white font-medium">
|
||||||
|
{formatCurrency(account.balance, account.currency)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Equity */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400">
|
||||||
|
<TrendingUp className="w-4 h-4" />
|
||||||
|
<span className="text-sm">Equity</span>
|
||||||
|
</div>
|
||||||
|
<span className={`font-medium ${
|
||||||
|
account.equity >= account.balance ? 'text-green-400' : 'text-red-400'
|
||||||
|
}`}>
|
||||||
|
{formatCurrency(account.equity, account.currency)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Free Margin */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-gray-400">Free Margin</span>
|
||||||
|
<span className="text-white">
|
||||||
|
{formatCurrency(account.free_margin, account.currency)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Margin Level */}
|
||||||
|
{marginLevel !== null && account.margin > 0 && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center justify-between text-sm mb-1">
|
||||||
|
<span className="text-gray-400">Margin Level</span>
|
||||||
|
<span className={`font-medium ${
|
||||||
|
marginLevel > 200 ? 'text-green-400' :
|
||||||
|
marginLevel > 100 ? 'text-yellow-400' : 'text-red-400'
|
||||||
|
}`}>
|
||||||
|
{marginLevel.toFixed(0)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full transition-all ${
|
||||||
|
marginLevel > 200 ? 'bg-green-500' :
|
||||||
|
marginLevel > 100 ? 'bg-yellow-500' : 'bg-red-500'
|
||||||
|
}`}
|
||||||
|
style={{ width: `${Math.min(marginLevel / 5, 100)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Last Update */}
|
||||||
|
{lastUpdate && (
|
||||||
|
<p className="text-xs text-gray-500 pt-2">
|
||||||
|
Last updated: {lastUpdate.toLocaleTimeString()}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : connectionState === 'error' || connectionState === 'disconnected' ? (
|
||||||
|
<div className="p-6 text-center">
|
||||||
|
<div className={`w-12 h-12 rounded-full ${
|
||||||
|
connectionState === 'error' ? 'bg-red-500/20' : 'bg-gray-700'
|
||||||
|
} flex items-center justify-center mx-auto mb-3`}>
|
||||||
|
{connectionState === 'error' ? (
|
||||||
|
<AlertTriangle className="w-6 h-6 text-red-400" />
|
||||||
|
) : (
|
||||||
|
<WifiOff className="w-6 h-6 text-gray-400" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h4 className="font-medium text-white mb-1">
|
||||||
|
{connectionState === 'error' ? 'Connection Error' : 'Not Connected'}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-400 mb-4">
|
||||||
|
{error || 'MT4 terminal is not connected'}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={fetchAccount}
|
||||||
|
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm transition-colors"
|
||||||
|
>
|
||||||
|
Retry Connection
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="p-6 flex items-center justify-center">
|
||||||
|
<RefreshCw className="w-6 h-6 text-blue-400 animate-spin" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MT4ConnectionStatus;
|
||||||
385
src/modules/trading/components/RiskMonitor.tsx
Normal file
385
src/modules/trading/components/RiskMonitor.tsx
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
/**
|
||||||
|
* RiskMonitor Component
|
||||||
|
* Displays real-time risk metrics and warnings
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
AlertTriangle,
|
||||||
|
TrendingDown,
|
||||||
|
Percent,
|
||||||
|
DollarSign,
|
||||||
|
Activity,
|
||||||
|
BarChart3,
|
||||||
|
AlertCircle,
|
||||||
|
CheckCircle,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import type { MT4Account, MT4Position } from '../../../services/trading.service';
|
||||||
|
|
||||||
|
interface RiskMetrics {
|
||||||
|
totalExposure: number;
|
||||||
|
marginUsed: number;
|
||||||
|
marginLevel: number;
|
||||||
|
unrealizedPnL: number;
|
||||||
|
dailyPnL: number;
|
||||||
|
dailyPnLPercent: number;
|
||||||
|
maxDrawdown: number;
|
||||||
|
openPositions: number;
|
||||||
|
totalLots: number;
|
||||||
|
largestPosition: number;
|
||||||
|
riskPerTrade: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RiskMonitorProps {
|
||||||
|
account: MT4Account | null;
|
||||||
|
positions: MT4Position[];
|
||||||
|
dailyStartBalance?: number;
|
||||||
|
maxDailyLoss?: number;
|
||||||
|
maxDrawdownLimit?: number;
|
||||||
|
maxPositions?: number;
|
||||||
|
maxLotSize?: number;
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RiskMonitor: React.FC<RiskMonitorProps> = ({
|
||||||
|
account,
|
||||||
|
positions,
|
||||||
|
dailyStartBalance,
|
||||||
|
maxDailyLoss = 5,
|
||||||
|
maxDrawdownLimit = 10,
|
||||||
|
maxPositions = 10,
|
||||||
|
maxLotSize = 1.0,
|
||||||
|
compact = false,
|
||||||
|
}) => {
|
||||||
|
// Calculate risk metrics
|
||||||
|
const calculateMetrics = (): RiskMetrics | null => {
|
||||||
|
if (!account) return null;
|
||||||
|
|
||||||
|
const unrealizedPnL = positions.reduce((sum, p) => sum + p.profit, 0);
|
||||||
|
const totalLots = positions.reduce((sum, p) => sum + p.volume, 0);
|
||||||
|
const largestPosition = positions.length > 0
|
||||||
|
? Math.max(...positions.map(p => p.volume))
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
const marginLevel = account.margin > 0
|
||||||
|
? (account.equity / account.margin) * 100
|
||||||
|
: 9999;
|
||||||
|
|
||||||
|
const dailyPnL = dailyStartBalance
|
||||||
|
? account.equity - dailyStartBalance
|
||||||
|
: unrealizedPnL;
|
||||||
|
const dailyPnLPercent = dailyStartBalance
|
||||||
|
? (dailyPnL / dailyStartBalance) * 100
|
||||||
|
: (dailyPnL / account.balance) * 100;
|
||||||
|
|
||||||
|
// Simple exposure calculation (could be enhanced)
|
||||||
|
const totalExposure = (account.margin / account.balance) * 100;
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalExposure,
|
||||||
|
marginUsed: account.margin,
|
||||||
|
marginLevel,
|
||||||
|
unrealizedPnL,
|
||||||
|
dailyPnL,
|
||||||
|
dailyPnLPercent,
|
||||||
|
maxDrawdown: Math.min(0, dailyPnLPercent), // Simplified
|
||||||
|
openPositions: positions.length,
|
||||||
|
totalLots,
|
||||||
|
largestPosition,
|
||||||
|
riskPerTrade: totalLots > 0 ? (account.margin / positions.length) : 0,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const metrics = calculateMetrics();
|
||||||
|
|
||||||
|
// Risk level assessment
|
||||||
|
const getRiskLevel = (): 'low' | 'medium' | 'high' | 'critical' => {
|
||||||
|
if (!metrics) return 'low';
|
||||||
|
|
||||||
|
if (
|
||||||
|
metrics.marginLevel < 100 ||
|
||||||
|
Math.abs(metrics.dailyPnLPercent) > maxDailyLoss ||
|
||||||
|
metrics.openPositions > maxPositions
|
||||||
|
) {
|
||||||
|
return 'critical';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
metrics.marginLevel < 200 ||
|
||||||
|
Math.abs(metrics.dailyPnLPercent) > maxDailyLoss * 0.7 ||
|
||||||
|
metrics.totalExposure > 50
|
||||||
|
) {
|
||||||
|
return 'high';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
metrics.marginLevel < 500 ||
|
||||||
|
Math.abs(metrics.dailyPnLPercent) > maxDailyLoss * 0.5 ||
|
||||||
|
metrics.totalExposure > 30
|
||||||
|
) {
|
||||||
|
return 'medium';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'low';
|
||||||
|
};
|
||||||
|
|
||||||
|
const riskLevel = getRiskLevel();
|
||||||
|
|
||||||
|
const riskColors = {
|
||||||
|
low: 'text-green-400',
|
||||||
|
medium: 'text-yellow-400',
|
||||||
|
high: 'text-orange-400',
|
||||||
|
critical: 'text-red-400',
|
||||||
|
};
|
||||||
|
|
||||||
|
const riskBgColors = {
|
||||||
|
low: 'bg-green-500/20 border-green-500/30',
|
||||||
|
medium: 'bg-yellow-500/20 border-yellow-500/30',
|
||||||
|
high: 'bg-orange-500/20 border-orange-500/30',
|
||||||
|
critical: 'bg-red-500/20 border-red-500/30',
|
||||||
|
};
|
||||||
|
|
||||||
|
const riskLabels = {
|
||||||
|
low: 'Low Risk',
|
||||||
|
medium: 'Moderate',
|
||||||
|
high: 'High Risk',
|
||||||
|
critical: 'Critical',
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (value: number) => {
|
||||||
|
return new Intl.NumberFormat('en-US', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: account?.currency || 'USD',
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
}).format(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!account || !metrics) {
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 p-6 text-center">
|
||||||
|
<Shield className="w-10 h-10 text-gray-500 mx-auto mb-3" />
|
||||||
|
<h4 className="font-medium text-white mb-1">Risk Monitor</h4>
|
||||||
|
<p className="text-sm text-gray-400">Connect MT4 to view risk metrics</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (compact) {
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-4 p-3 rounded-lg border ${riskBgColors[riskLevel]}`}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Shield className={`w-5 h-5 ${riskColors[riskLevel]}`} />
|
||||||
|
<span className={`font-medium ${riskColors[riskLevel]}`}>
|
||||||
|
{riskLabels[riskLevel]}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||||
|
<span>Margin: {metrics.marginLevel.toFixed(0)}%</span>
|
||||||
|
<span>P&L: {metrics.dailyPnLPercent >= 0 ? '+' : ''}{metrics.dailyPnLPercent.toFixed(2)}%</span>
|
||||||
|
<span>Positions: {metrics.openPositions}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className={`flex items-center justify-between p-4 border-b ${riskBgColors[riskLevel]}`}>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-2 rounded-lg ${riskBgColors[riskLevel]}`}>
|
||||||
|
<Shield className={`w-5 h-5 ${riskColors[riskLevel]}`} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-white">Risk Monitor</h3>
|
||||||
|
<p className={`text-sm ${riskColors[riskLevel]}`}>{riskLabels[riskLevel]}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{riskLevel === 'critical' && (
|
||||||
|
<div className="flex items-center gap-2 px-3 py-1 bg-red-500/30 rounded-full">
|
||||||
|
<AlertTriangle className="w-4 h-4 text-red-400" />
|
||||||
|
<span className="text-sm text-red-400 font-medium">Warning</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metrics Grid */}
|
||||||
|
<div className="p-4 space-y-4">
|
||||||
|
{/* Primary Metrics */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Margin Level */}
|
||||||
|
<div className="p-3 bg-gray-900/50 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400 text-sm mb-2">
|
||||||
|
<Percent className="w-4 h-4" />
|
||||||
|
<span>Margin Level</span>
|
||||||
|
</div>
|
||||||
|
<p className={`text-2xl font-bold ${
|
||||||
|
metrics.marginLevel > 200 ? 'text-green-400' :
|
||||||
|
metrics.marginLevel > 100 ? 'text-yellow-400' : 'text-red-400'
|
||||||
|
}`}>
|
||||||
|
{metrics.marginLevel > 9000 ? '∞' : `${metrics.marginLevel.toFixed(0)}%`}
|
||||||
|
</p>
|
||||||
|
<div className="mt-2 h-1.5 bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full ${
|
||||||
|
metrics.marginLevel > 200 ? 'bg-green-500' :
|
||||||
|
metrics.marginLevel > 100 ? 'bg-yellow-500' : 'bg-red-500'
|
||||||
|
}`}
|
||||||
|
style={{ width: `${Math.min(metrics.marginLevel / 5, 100)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Daily P&L */}
|
||||||
|
<div className="p-3 bg-gray-900/50 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2 text-gray-400 text-sm mb-2">
|
||||||
|
<TrendingDown className="w-4 h-4" />
|
||||||
|
<span>Daily P&L</span>
|
||||||
|
</div>
|
||||||
|
<p className={`text-2xl font-bold ${
|
||||||
|
metrics.dailyPnL >= 0 ? 'text-green-400' : 'text-red-400'
|
||||||
|
}`}>
|
||||||
|
{metrics.dailyPnL >= 0 ? '+' : ''}{metrics.dailyPnLPercent.toFixed(2)}%
|
||||||
|
</p>
|
||||||
|
<p className={`text-sm ${
|
||||||
|
metrics.dailyPnL >= 0 ? 'text-green-400/70' : 'text-red-400/70'
|
||||||
|
}`}>
|
||||||
|
{formatCurrency(metrics.dailyPnL)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secondary Metrics */}
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="text-center p-3 bg-gray-900/50 rounded-lg">
|
||||||
|
<Activity className="w-4 h-4 text-gray-400 mx-auto mb-1" />
|
||||||
|
<p className="text-lg font-semibold text-white">{metrics.openPositions}</p>
|
||||||
|
<p className="text-xs text-gray-500">Positions</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-gray-900/50 rounded-lg">
|
||||||
|
<BarChart3 className="w-4 h-4 text-gray-400 mx-auto mb-1" />
|
||||||
|
<p className="text-lg font-semibold text-white">{metrics.totalLots.toFixed(2)}</p>
|
||||||
|
<p className="text-xs text-gray-500">Total Lots</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-3 bg-gray-900/50 rounded-lg">
|
||||||
|
<DollarSign className="w-4 h-4 text-gray-400 mx-auto mb-1" />
|
||||||
|
<p className="text-lg font-semibold text-white">
|
||||||
|
{formatCurrency(metrics.marginUsed)}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500">Margin Used</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Risk Warnings */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{/* Daily Loss Limit */}
|
||||||
|
<RiskIndicator
|
||||||
|
label="Daily Loss Limit"
|
||||||
|
current={Math.abs(metrics.dailyPnLPercent)}
|
||||||
|
max={maxDailyLoss}
|
||||||
|
unit="%"
|
||||||
|
inverted
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Position Count */}
|
||||||
|
<RiskIndicator
|
||||||
|
label="Open Positions"
|
||||||
|
current={metrics.openPositions}
|
||||||
|
max={maxPositions}
|
||||||
|
unit=""
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Largest Position */}
|
||||||
|
<RiskIndicator
|
||||||
|
label="Largest Position"
|
||||||
|
current={metrics.largestPosition}
|
||||||
|
max={maxLotSize}
|
||||||
|
unit=" lots"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Warnings */}
|
||||||
|
{riskLevel !== 'low' && (
|
||||||
|
<div className={`p-3 rounded-lg border ${riskBgColors[riskLevel]}`}>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<AlertCircle className={`w-5 h-5 flex-shrink-0 mt-0.5 ${riskColors[riskLevel]}`} />
|
||||||
|
<div>
|
||||||
|
<p className={`font-medium ${riskColors[riskLevel]}`}>Risk Warnings</p>
|
||||||
|
<ul className="mt-1 space-y-1 text-sm text-gray-300">
|
||||||
|
{metrics.marginLevel < 200 && (
|
||||||
|
<li>• Margin level below 200%</li>
|
||||||
|
)}
|
||||||
|
{Math.abs(metrics.dailyPnLPercent) > maxDailyLoss * 0.7 && (
|
||||||
|
<li>• Approaching daily loss limit</li>
|
||||||
|
)}
|
||||||
|
{metrics.openPositions > maxPositions * 0.8 && (
|
||||||
|
<li>• Many open positions</li>
|
||||||
|
)}
|
||||||
|
{metrics.totalExposure > 30 && (
|
||||||
|
<li>• High account exposure</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Risk Indicator Sub-component
|
||||||
|
interface RiskIndicatorProps {
|
||||||
|
label: string;
|
||||||
|
current: number;
|
||||||
|
max: number;
|
||||||
|
unit: string;
|
||||||
|
inverted?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RiskIndicator: React.FC<RiskIndicatorProps> = ({
|
||||||
|
label,
|
||||||
|
current,
|
||||||
|
max,
|
||||||
|
unit,
|
||||||
|
inverted = false,
|
||||||
|
}) => {
|
||||||
|
const percentage = (current / max) * 100;
|
||||||
|
const isWarning = inverted ? current > max * 0.7 : percentage > 70;
|
||||||
|
const isDanger = inverted ? current > max : percentage > 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center justify-between text-sm mb-1">
|
||||||
|
<span className="text-gray-400">{label}</span>
|
||||||
|
<span className={`font-medium ${
|
||||||
|
isDanger ? 'text-red-400' :
|
||||||
|
isWarning ? 'text-yellow-400' : 'text-white'
|
||||||
|
}`}>
|
||||||
|
{current.toFixed(current < 10 ? 2 : 0)}{unit} / {max}{unit}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-1.5 bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full transition-all ${
|
||||||
|
isDanger ? 'bg-red-500' :
|
||||||
|
isWarning ? 'bg-yellow-500' : 'bg-green-500'
|
||||||
|
}`}
|
||||||
|
style={{ width: `${Math.min(percentage, 100)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{isDanger ? (
|
||||||
|
<AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
|
||||||
|
) : isWarning ? (
|
||||||
|
<AlertCircle className="w-4 h-4 text-yellow-400 flex-shrink-0" />
|
||||||
|
) : (
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-400 flex-shrink-0" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RiskMonitor;
|
||||||
39
src/modules/trading/components/index.ts
Normal file
39
src/modules/trading/components/index.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
/**
|
||||||
|
* Trading Components - Index Export
|
||||||
|
* OQI-003: Trading y Charts
|
||||||
|
* OQI-009: Trading Execution (MT4 Gateway)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Chart Components
|
||||||
|
export { default as CandlestickChart } from './CandlestickChart';
|
||||||
|
export { default as CandlestickChartWithML } from './CandlestickChartWithML';
|
||||||
|
export { default as TradingChart } from './TradingChart';
|
||||||
|
export { default as ChartToolbar } from './ChartToolbar';
|
||||||
|
|
||||||
|
// Order & Position Components
|
||||||
|
export { default as OrderForm } from './OrderForm';
|
||||||
|
export { default as PositionsList } from './PositionsList';
|
||||||
|
export { default as TradesHistory } from './TradesHistory';
|
||||||
|
|
||||||
|
// Watchlist Components
|
||||||
|
export { default as WatchlistSidebar } from './WatchlistSidebar';
|
||||||
|
export { default as WatchlistItem } from './WatchlistItem';
|
||||||
|
export { default as AddSymbolModal } from './AddSymbolModal';
|
||||||
|
|
||||||
|
// Account & Stats Components
|
||||||
|
export { default as AccountSummary } from './AccountSummary';
|
||||||
|
export { default as TradingStatsPanel } from './TradingStatsPanel';
|
||||||
|
|
||||||
|
// Panel Components
|
||||||
|
export { default as MLSignalsPanel } from './MLSignalsPanel';
|
||||||
|
export { default as AlertsPanel } from './AlertsPanel';
|
||||||
|
export { default as OrderBookPanel } from './OrderBookPanel';
|
||||||
|
export { default as PaperTradingPanel } from './PaperTradingPanel';
|
||||||
|
|
||||||
|
// Utility Components
|
||||||
|
export { default as ExportButton } from './ExportButton';
|
||||||
|
|
||||||
|
// MT4 Gateway Components (OQI-009)
|
||||||
|
export { default as MT4ConnectionStatus } from './MT4ConnectionStatus';
|
||||||
|
export { default as LivePositionCard } from './LivePositionCard';
|
||||||
|
export { default as RiskMonitor } from './RiskMonitor';
|
||||||
Loading…
Reference in New Issue
Block a user