refactor(ui): remove legacy badge style debt
This commit is contained in:
parent
45e389fd2a
commit
5f38adac62
@ -23,7 +23,7 @@ excluded_parts = {"test", "assets"}
|
||||
|
||||
patterns = [
|
||||
("raw interactive controls outside approved primitives", "Raw Interactive Controls", re.compile(r"<(button|input|textarea|select)(\s|>)"), True),
|
||||
("legacy global surface classes", "Legacy Global Surface Classes", re.compile(r"\b(surface-card|surface-muted|badge|input-shell)\b"), False),
|
||||
("legacy global surface classes", "Legacy Global Surface Classes", re.compile(r"(?<![-\w])(surface-card|surface-muted|badge|input-shell)\b"), False),
|
||||
("hardcoded color literals", "Hardcoded Color Literals", re.compile(r"(#[0-9a-f]{3,8}\b|rgba?\()", re.IGNORECASE), False),
|
||||
("direct @bytelyst/ui imports outside product adapter", "Direct Common UI Imports Outside Adapter", re.compile(r"@bytelyst/ui"), True),
|
||||
]
|
||||
|
||||
@ -591,24 +591,6 @@ body {
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 100px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.badge.live {
|
||||
background: #e67e22;
|
||||
}
|
||||
|
||||
.badge.paper {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.badge.alerts {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.kill-switch {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
@ -1,144 +1,127 @@
|
||||
.symbol-card {
|
||||
background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.symbol-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.symbol-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.session-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.session-badge {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.vol-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vol-label.high {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.vol-label.med {
|
||||
color: #ffaa00;
|
||||
}
|
||||
|
||||
.vol-label.low {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.symbol-header h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.change-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.change-item {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.change-item.up {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.change-item.down {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.signal-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.signal-time {
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rules-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.rules-section h3,
|
||||
.indicators-section h3 {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rules-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.symbol-card {
|
||||
background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.symbol-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.symbol-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.session-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vol-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vol-label.high {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.vol-label.med {
|
||||
color: #ffaa00;
|
||||
}
|
||||
|
||||
.vol-label.low {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.symbol-header h2 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.change-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.change-item {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.change-item.up {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.change-item.down {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.signal-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.signal-time {
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rules-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.rules-section h3,
|
||||
.indicators-section h3 {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rules-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rule-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -194,212 +177,143 @@
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.rule-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.rule-badge.passed {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
color: #00ff88;
|
||||
border-color: rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.rule-badge.failed {
|
||||
background: rgba(255, 51, 102, 0.15);
|
||||
color: #ff3366;
|
||||
border-color: rgba(255, 51, 102, 0.3);
|
||||
}
|
||||
|
||||
.rule-badge.pending {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #888;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.rule-badge.skipped {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: #555;
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.rule-badge:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.ai-details {
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
margin-top: -4px;
|
||||
border-left: 3px solid transparent;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.ai-details.passed {
|
||||
background: rgba(0, 255, 136, 0.05);
|
||||
border-color: #00ff88;
|
||||
}
|
||||
|
||||
.ai-details.failed {
|
||||
background: rgba(255, 51, 102, 0.05);
|
||||
border-color: #ff3366;
|
||||
}
|
||||
|
||||
.ai-confidence {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ai-details.passed .ai-confidence {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.ai-details.failed .ai-confidence {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.ai-reasoning {
|
||||
color: #aaa;
|
||||
line-height: 1.4;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rule-icon {
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.indicators-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.indicator-label {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.indicator-value {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Mode Badge */
|
||||
.mode-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mode-badge.alerts {
|
||||
background: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mode-badge.paper {
|
||||
background: #3498db;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mode-badge.live {
|
||||
background: #e67e22;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Active Position Panel */
|
||||
.active-position-panel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 15px 0;
|
||||
border-left: 4px solid #888;
|
||||
}
|
||||
|
||||
.active-position-panel.buy {
|
||||
border-left-color: #00ff88;
|
||||
}
|
||||
|
||||
.active-position-panel.sell {
|
||||
border-left-color: #ff3366;
|
||||
}
|
||||
|
||||
.pos-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pos-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.buy .pos-label {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.sell .pos-label {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.pos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pos-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pos-item .label {
|
||||
font-size: 0.65rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pos-item .value {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pos-item.sl .value {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.pos-item.tp .value {
|
||||
color: #00ff88;
|
||||
|
||||
.rule-status {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ai-details {
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
margin-top: -4px;
|
||||
border-left: 3px solid transparent;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.ai-details.passed {
|
||||
background: rgba(0, 255, 136, 0.05);
|
||||
border-color: #00ff88;
|
||||
}
|
||||
|
||||
.ai-details.failed {
|
||||
background: rgba(255, 51, 102, 0.05);
|
||||
border-color: #ff3366;
|
||||
}
|
||||
|
||||
.ai-confidence {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ai-details.passed .ai-confidence {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.ai-details.failed .ai-confidence {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.ai-reasoning {
|
||||
color: #aaa;
|
||||
line-height: 1.4;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.indicators-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.indicator-label {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.indicator-value {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Active Position Panel */
|
||||
|
||||
.active-position-panel {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 15px 0;
|
||||
border-left: 4px solid #888;
|
||||
}
|
||||
|
||||
.active-position-panel.buy {
|
||||
border-left-color: #00ff88;
|
||||
}
|
||||
|
||||
.active-position-panel.sell {
|
||||
border-left-color: #ff3366;
|
||||
}
|
||||
|
||||
.pos-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pos-label {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.buy .pos-label {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.sell .pos-label {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.pos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pos-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pos-item .label {
|
||||
font-size: 0.65rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pos-item .value {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pos-item.sl .value {
|
||||
color: #ff3366;
|
||||
}
|
||||
|
||||
.pos-item.tp .value {
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
import './SymbolCard.css';
|
||||
import { PriceChart } from './PriceChart';
|
||||
|
||||
interface SymbolCardProps {
|
||||
symbol: string;
|
||||
data: {
|
||||
price: number;
|
||||
change24h: number;
|
||||
changeToday: number;
|
||||
session: string;
|
||||
volatility: string;
|
||||
signal: string;
|
||||
signalTime?: number;
|
||||
tradingMode?: 'Paper' | 'Live' | 'Alerts';
|
||||
activePosition?: {
|
||||
side: 'BUY' | 'SELL';
|
||||
entryPrice: number;
|
||||
size: number;
|
||||
stopLoss: number;
|
||||
takeProfit: number;
|
||||
unrealizedPnl?: number;
|
||||
unrealizedPnlPercent?: number;
|
||||
marketValue?: number;
|
||||
} | null;
|
||||
priceHistory: Array<{ timestamp: number; price: number }>;
|
||||
import './SymbolCard.css';
|
||||
import { PriceChart } from './PriceChart';
|
||||
import { Badge, ProductStatusBadge } from './ui/Primitives';
|
||||
|
||||
interface SymbolCardProps {
|
||||
symbol: string;
|
||||
data: {
|
||||
price: number;
|
||||
change24h: number;
|
||||
changeToday: number;
|
||||
session: string;
|
||||
volatility: string;
|
||||
signal: string;
|
||||
signalTime?: number;
|
||||
tradingMode?: 'Paper' | 'Live' | 'Alerts';
|
||||
activePosition?: {
|
||||
side: 'BUY' | 'SELL';
|
||||
entryPrice: number;
|
||||
size: number;
|
||||
stopLoss: number;
|
||||
takeProfit: number;
|
||||
unrealizedPnl?: number;
|
||||
unrealizedPnlPercent?: number;
|
||||
marketValue?: number;
|
||||
} | null;
|
||||
priceHistory: Array<{ timestamp: number; price: number }>;
|
||||
rules: {
|
||||
[ruleName: string]: {
|
||||
passed: boolean;
|
||||
@ -57,61 +58,58 @@ interface SymbolCardProps {
|
||||
ema20_1h?: number;
|
||||
ema20_15m?: number;
|
||||
ema50_4h?: number;
|
||||
ema200_4h?: number;
|
||||
rsi_1h?: number;
|
||||
rsi_15m?: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const ruleDisplayNames: { [key: string]: string } = {
|
||||
'TrendBiasRule': 'Trend',
|
||||
'SessionRule': 'Session',
|
||||
'ZoneRule': 'Zone',
|
||||
'MomentumRule': 'Momentum',
|
||||
'EntryTriggerRule': 'Entry',
|
||||
'AIAnalysisRule': 'AI',
|
||||
'RiskManagementRule': 'Risk'
|
||||
};
|
||||
|
||||
ema200_4h?: number;
|
||||
rsi_1h?: number;
|
||||
rsi_15m?: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const ruleDisplayNames: { [key: string]: string } = {
|
||||
'TrendBiasRule': 'Trend',
|
||||
'SessionRule': 'Session',
|
||||
'ZoneRule': 'Zone',
|
||||
'MomentumRule': 'Momentum',
|
||||
'EntryTriggerRule': 'Entry',
|
||||
'AIAnalysisRule': 'AI',
|
||||
'RiskManagementRule': 'Risk'
|
||||
};
|
||||
|
||||
export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
const signalColor = data.signal === 'BUY' ? '#00ff88' : data.signal === 'SELL' ? '#ff3366' : '#888';
|
||||
const profileSignalEntries = Object.entries(data.profileSignals || {});
|
||||
|
||||
return (
|
||||
<div className="symbol-card">
|
||||
<div className="symbol-header">
|
||||
<div className="title-area">
|
||||
<h2>{symbol}</h2>
|
||||
<div className="session-info">
|
||||
<span className={`mode-badge ${data.tradingMode?.toLowerCase()}`}>
|
||||
{data.tradingMode}
|
||||
</span>
|
||||
<span className="session-badge">{data.session}</span>
|
||||
<span className={`vol-label ${data.volatility.toLowerCase()}`}>
|
||||
{data.volatility} Vol
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="price-info">
|
||||
<div className="price">${data.price.toLocaleString()}</div>
|
||||
<div className="change-grid">
|
||||
<div className={`change-item ${data.changeToday >= 0 ? 'up' : 'down'}`}>
|
||||
Today: {data.changeToday >= 0 ? '+' : ''}{data.changeToday.toFixed(2)}%
|
||||
</div>
|
||||
<div className={`change-item ${data.change24h >= 0 ? 'up' : 'down'}`}>
|
||||
24h: {data.change24h >= 0 ? '+' : ''}{data.change24h.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="signal-badge" style={{ backgroundColor: signalColor }}>
|
||||
{data.signal || 'NONE'}
|
||||
|
||||
return (
|
||||
<div className="symbol-card">
|
||||
<div className="symbol-header">
|
||||
<div className="title-area">
|
||||
<h2>{symbol}</h2>
|
||||
<div className="session-info">
|
||||
<ProductStatusBadge status={data.tradingMode}>{data.tradingMode}</ProductStatusBadge>
|
||||
<Badge variant="neutral" size="sm">{data.session}</Badge>
|
||||
<span className={`vol-label ${data.volatility.toLowerCase()}`}>
|
||||
{data.volatility} Vol
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="price-info">
|
||||
<div className="price">${data.price.toLocaleString()}</div>
|
||||
<div className="change-grid">
|
||||
<div className={`change-item ${data.changeToday >= 0 ? 'up' : 'down'}`}>
|
||||
Today: {data.changeToday >= 0 ? '+' : ''}{data.changeToday.toFixed(2)}%
|
||||
</div>
|
||||
<div className={`change-item ${data.change24h >= 0 ? 'up' : 'down'}`}>
|
||||
24h: {data.change24h >= 0 ? '+' : ''}{data.change24h.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="signal-status">
|
||||
<ProductStatusBadge status={data.signal}>{data.signal || 'NONE'}</ProductStatusBadge>
|
||||
{data.signalTime && (
|
||||
<span className="signal-time">
|
||||
{Math.floor((Date.now() - data.signalTime) / 60000)}m ago
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -120,13 +118,6 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
<h3>Profile Signals</h3>
|
||||
<div className="rules-grid">
|
||||
{profileSignalEntries.map(([profileId, profileSignal]) => {
|
||||
const badgeClass = profileSignal.signal === 'BUY'
|
||||
? 'passed'
|
||||
: profileSignal.signal === 'SELL'
|
||||
? 'failed'
|
||||
: profileSignal.signal === 'MIXED'
|
||||
? 'pending'
|
||||
: 'skipped';
|
||||
const executionState = profileSignal.execution?.status;
|
||||
const executionClass = executionState === 'EXECUTED'
|
||||
? 'executed'
|
||||
@ -135,12 +126,16 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
: 'skipped';
|
||||
return (
|
||||
<div key={profileId} className="rule-container">
|
||||
<div className={`rule-badge ${badgeClass}`} title={profileSignal.reason || profileSignal.signal}>
|
||||
<Badge
|
||||
className="rule-status"
|
||||
variant={profileSignal.signal === 'BUY' ? 'success' : profileSignal.signal === 'SELL' ? 'danger' : profileSignal.signal === 'MIXED' ? 'warning' : 'neutral'}
|
||||
title={profileSignal.reason || profileSignal.signal}
|
||||
>
|
||||
<span className="rule-name">
|
||||
{(profileSignal.profileName || profileId).slice(0, 18)}
|
||||
</span>
|
||||
<span className="rule-icon">{profileSignal.signal}</span>
|
||||
</div>
|
||||
</Badge>
|
||||
{profileSignal.execution && (
|
||||
<div className={`profile-execution ${executionClass}`} title={profileSignal.execution.reason}>
|
||||
<div className="profile-execution-head">
|
||||
@ -156,113 +151,114 @@ export const SymbolCard = ({ symbol, data }: SymbolCardProps) => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.activePosition && (
|
||||
<div className={`active-position-panel ${data.activePosition.side.toLowerCase()}`}>
|
||||
<div className="pos-header">
|
||||
<span className="pos-label">ACTIVE {data.activePosition.side}</span>
|
||||
<span className="pos-size">{data.activePosition.size.toFixed(4)} Units</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-item">
|
||||
<span className="label">Entry</span>
|
||||
<span className="value">${data.activePosition.entryPrice.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className={`pos-item pnl ${data.activePosition.unrealizedPnl! >= 0 ? 'up' : 'down'}`}>
|
||||
<span className="label">P/L ($)</span>
|
||||
<span className="value">
|
||||
{data.activePosition.unrealizedPnl! >= 0 ? '+' : ''}
|
||||
{data.activePosition.unrealizedPnl!.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`pos-item pnl-percent ${data.activePosition.unrealizedPnlPercent! >= 0 ? 'up' : 'down'}`}>
|
||||
<span className="label">Return</span>
|
||||
<span className="value">
|
||||
{data.activePosition.unrealizedPnlPercent! >= 0 ? '+' : ''}
|
||||
{data.activePosition.unrealizedPnlPercent!.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-item">
|
||||
<span className="label">Value</span>
|
||||
<span className="value">${data.activePosition.marketValue?.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="pos-item sl">
|
||||
<span className="label">SL</span>
|
||||
<span className="value">${data.activePosition.stopLoss.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="pos-item tp">
|
||||
<span className="label">TP</span>
|
||||
<span className="value">${data.activePosition.takeProfit.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PriceChart data={data.priceHistory || []} currentPrice={data.price} />
|
||||
|
||||
<div className="rules-section">
|
||||
<h3>Rules</h3>
|
||||
<div className="rules-grid">
|
||||
{Object.entries(data.rules).map(([ruleName, ruleData]) => {
|
||||
const isAI = ruleName === 'AIAnalysisRule';
|
||||
const aiData = isAI ? ruleData.metadata : null;
|
||||
|
||||
return (
|
||||
<div key={ruleName} className="rule-container">
|
||||
<div
|
||||
className={`rule-badge ${ruleData.isSkipped ? 'skipped' : (ruleData.isPending ? 'pending' : (ruleData.passed ? 'passed' : 'failed'))}`}
|
||||
title={ruleData.reason}
|
||||
>
|
||||
<span className="rule-icon">
|
||||
{ruleData.isSkipped ? '➖' : (ruleData.isPending ? '⏳' : (ruleData.passed ? '✓' : '✗'))}
|
||||
</span>
|
||||
<span className="rule-name">{ruleDisplayNames[ruleName] || ruleName}</span>
|
||||
</div>
|
||||
{isAI && aiData && (
|
||||
<div className={`ai-details ${ruleData.passed ? 'passed' : 'failed'}`}>
|
||||
{aiData.confidence !== undefined && (
|
||||
<div className="ai-confidence">Confidence: {aiData.confidence}%</div>
|
||||
)}
|
||||
{aiData.reasoning && (
|
||||
<div className="ai-reasoning">{aiData.reasoning}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="indicators-section">
|
||||
<h3>Indicators</h3>
|
||||
<div className="indicators-grid">
|
||||
{data.indicators.rsi_15m !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">RSI 15m:</span>
|
||||
<span className="indicator-value">{data.indicators.rsi_15m.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.indicators.rsi_1h !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">RSI 1h:</span>
|
||||
<span className="indicator-value">{data.indicators.rsi_1h.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.indicators.ema20_15m !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">EMA20 15m:</span>
|
||||
<span className="indicator-value">${data.indicators.ema20_15m.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.indicators.ema20_1h !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">EMA20 1h:</span>
|
||||
<span className="indicator-value">${data.indicators.ema20_1h.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
{data.activePosition && (
|
||||
<div className={`active-position-panel ${data.activePosition.side.toLowerCase()}`}>
|
||||
<div className="pos-header">
|
||||
<span className="pos-label">ACTIVE {data.activePosition.side}</span>
|
||||
<span className="pos-size">{data.activePosition.size.toFixed(4)} Units</span>
|
||||
</div>
|
||||
<div className="pos-grid">
|
||||
<div className="pos-item">
|
||||
<span className="label">Entry</span>
|
||||
<span className="value">${data.activePosition.entryPrice.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className={`pos-item pnl ${data.activePosition.unrealizedPnl! >= 0 ? 'up' : 'down'}`}>
|
||||
<span className="label">P/L ($)</span>
|
||||
<span className="value">
|
||||
{data.activePosition.unrealizedPnl! >= 0 ? '+' : ''}
|
||||
{data.activePosition.unrealizedPnl!.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`pos-item pnl-percent ${data.activePosition.unrealizedPnlPercent! >= 0 ? 'up' : 'down'}`}>
|
||||
<span className="label">Return</span>
|
||||
<span className="value">
|
||||
{data.activePosition.unrealizedPnlPercent! >= 0 ? '+' : ''}
|
||||
{data.activePosition.unrealizedPnlPercent!.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="pos-item">
|
||||
<span className="label">Value</span>
|
||||
<span className="value">${data.activePosition.marketValue?.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="pos-item sl">
|
||||
<span className="label">SL</span>
|
||||
<span className="value">${data.activePosition.stopLoss.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="pos-item tp">
|
||||
<span className="label">TP</span>
|
||||
<span className="value">${data.activePosition.takeProfit.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PriceChart data={data.priceHistory || []} currentPrice={data.price} />
|
||||
|
||||
<div className="rules-section">
|
||||
<h3>Rules</h3>
|
||||
<div className="rules-grid">
|
||||
{Object.entries(data.rules).map(([ruleName, ruleData]) => {
|
||||
const isAI = ruleName === 'AIAnalysisRule';
|
||||
const aiData = isAI ? ruleData.metadata : null;
|
||||
|
||||
return (
|
||||
<div key={ruleName} className="rule-container">
|
||||
<Badge
|
||||
className="rule-status"
|
||||
variant={ruleData.isSkipped ? 'neutral' : (ruleData.isPending ? 'warning' : (ruleData.passed ? 'success' : 'danger'))}
|
||||
title={ruleData.reason}
|
||||
>
|
||||
<span className="rule-icon">
|
||||
{ruleData.isSkipped ? '➖' : (ruleData.isPending ? '⏳' : (ruleData.passed ? '✓' : '✗'))}
|
||||
</span>
|
||||
<span className="rule-name">{ruleDisplayNames[ruleName] || ruleName}</span>
|
||||
</Badge>
|
||||
{isAI && aiData && (
|
||||
<div className={`ai-details ${ruleData.passed ? 'passed' : 'failed'}`}>
|
||||
{aiData.confidence !== undefined && (
|
||||
<div className="ai-confidence">Confidence: {aiData.confidence}%</div>
|
||||
)}
|
||||
{aiData.reasoning && (
|
||||
<div className="ai-reasoning">{aiData.reasoning}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="indicators-section">
|
||||
<h3>Indicators</h3>
|
||||
<div className="indicators-grid">
|
||||
{data.indicators.rsi_15m !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">RSI 15m:</span>
|
||||
<span className="indicator-value">{data.indicators.rsi_15m.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.indicators.rsi_1h !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">RSI 1h:</span>
|
||||
<span className="indicator-value">{data.indicators.rsi_1h.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.indicators.ema20_15m !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">EMA20 15m:</span>
|
||||
<span className="indicator-value">${data.indicators.ema20_15m.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{data.indicators.ema20_1h !== undefined && (
|
||||
<div className="indicator">
|
||||
<span className="indicator-label">EMA20 1h:</span>
|
||||
<span className="indicator-value">${data.indicators.ema20_1h.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user