""" Dashboard Layout Manager - Clean Trading Dashboard Manages the layout and structure of the trading dashboard """ import dash from dash import dcc, html from datetime import datetime class DashboardLayoutManager: """Manages dashboard layout and structure""" def __init__(self, starting_balance: float = 100.0, trading_executor=None): self.starting_balance = starting_balance self.trading_executor = trading_executor def create_main_layout(self): """Create the main dashboard layout""" return html.Div([ self._create_header(), self._create_interval_component(), self._create_main_content() ], className="container-fluid") def _create_header(self): """Create the dashboard header""" trading_mode = "SIMULATION" if (not self.trading_executor or getattr(self.trading_executor, 'simulation_mode', True)) else "LIVE" return html.Div([ html.H2([ html.I(className="fas fa-chart-line me-2"), "Clean Trading Dashboard" ], className="text-light mb-0"), html.P( f"Ultra-Fast Updates • Portfolio: ${self.starting_balance:,.0f} • {trading_mode}", className="text-light mb-0 opacity-75 small" ) ], className="bg-dark p-2 mb-2") def _create_interval_component(self): """Create the auto-refresh interval component""" return dcc.Interval( id='interval-component', interval=1000, # Update every 1 second for maximum responsiveness n_intervals=0 ) def _create_main_content(self): """Create the main content area""" return html.Div([ self._create_metrics_and_signals_row(), self._create_charts_row(), self._create_analytics_row(), self._create_performance_row() ]) def _create_metrics_and_signals_row(self): """Create the top row with key metrics and recent signals""" return html.Div([ # Left side - Key metrics (compact cards) self._create_metrics_grid(), # Right side - Recent Signals & Model Training self._create_signals_and_training_panels() ], className="d-flex mb-3") def _create_metrics_grid(self): """Create the metrics grid with compact cards""" metrics_cards = [ ("current-price", "Live Price", "text-success"), ("session-pnl", "Session P&L", ""), ("total-fees", "Total Fees", "text-warning"), ("current-position", "Position", "text-info"), ("trade-count", "Trades", "text-warning"), ("portfolio-value", "Portfolio", "text-secondary"), ("mexc-status", "MEXC API", "text-info") ] cards = [] for card_id, label, text_class in metrics_cards: card = html.Div([ html.Div([ html.H5(id=card_id, className=f"{text_class} mb-0 small"), html.P(label, className="text-muted mb-0 tiny") ], className="card-body text-center p-2") ], className="card bg-light", style={"height": "60px"}) cards.append(card) return html.Div( cards, style={ "display": "grid", "gridTemplateColumns": "repeat(4, 1fr)", "gap": "8px", "width": "60%" } ) def _create_signals_and_training_panels(self): """Create the signals and training panels""" return html.Div([ # Recent Trading Signals Column (50%) html.Div([ html.Div([ html.H6([ html.I(className="fas fa-robot me-2"), "Recent Trading Signals" ], className="card-title mb-2"), html.Div(id="recent-decisions", style={"height": "160px", "overflowY": "auto"}) ], className="card-body p-2") ], className="card", style={"width": "48%"}), # Model Training + COB Buckets Column (50%) html.Div([ html.Div([ html.H6([ html.I(className="fas fa-brain me-2"), "Training Progress & COB $1 Buckets" ], className="card-title mb-2"), html.Div(id="training-metrics", style={"height": "160px", "overflowY": "auto"}) ], className="card-body p-2") ], className="card", style={"width": "48%", "marginLeft": "4%"}), ], style={"width": "48%", "marginLeft": "2%", "display": "flex"}) def _create_charts_row(self): """Create the charts row with price chart and manual trading buttons""" return html.Div([ html.Div([ html.Div([ # Chart header with manual trading buttons html.Div([ html.H6([ html.I(className="fas fa-chart-candlestick me-2"), "Live 1m Price Chart (3h) + 1s Mini Chart (5min) - Updated Every Second" ], className="card-title mb-0"), html.Div([ html.Button([ html.I(className="fas fa-arrow-up me-1"), "BUY" ], id="manual-buy-btn", className="btn btn-success btn-sm me-2", style={"fontSize": "10px", "padding": "2px 8px"}), html.Button([ html.I(className="fas fa-arrow-down me-1"), "SELL" ], id="manual-sell-btn", className="btn btn-danger btn-sm", style={"fontSize": "10px", "padding": "2px 8px"}) ], className="d-flex") ], className="d-flex justify-content-between align-items-center mb-2"), html.Div([ dcc.Graph(id="price-chart", style={"height": "500px"}) ]) ], className="card-body p-2") ], className="card") ]) def _create_analytics_row(self): """Create the analytics row with COB data and system status""" return html.Div([ # COB Status html.Div([ html.Div([ html.H6([ html.I(className="fas fa-server me-2"), "System Status" ], className="card-title mb-2"), html.Div(id="cob-status-content") ], className="card-body p-2") ], className="card", style={"width": "32%"}), # ETH/USDT COB html.Div([ html.Div([ html.H6([ html.I(className="fab fa-ethereum me-2"), "ETH/USDT COB" ], className="card-title mb-2"), html.Div(id="eth-cob-content") ], className="card-body p-2") ], className="card", style={"width": "32%", "marginLeft": "2%"}), # BTC/USDT COB html.Div([ html.Div([ html.H6([ html.I(className="fab fa-bitcoin me-2"), "BTC/USDT COB" ], className="card-title mb-2"), html.Div(id="btc-cob-content") ], className="card-body p-2") ], className="card", style={"width": "32%", "marginLeft": "2%"}) ], className="d-flex mb-3") def _create_performance_row(self): """Create the performance row with closed trades and session controls""" return html.Div([ # Closed Trades Table html.Div([ html.Div([ html.H6([ html.I(className="fas fa-history me-2"), "Closed Trades" ], className="card-title mb-2"), html.Div(id="closed-trades-table", style={"height": "200px", "overflowY": "auto"}) ], className="card-body p-2") ], className="card", style={"width": "70%"}), # Session Controls html.Div([ html.Div([ html.H6([ html.I(className="fas fa-cog me-2"), "Session Controls" ], className="card-title mb-2"), html.Button([ html.I(className="fas fa-trash me-1"), "Clear Session" ], id="clear-session-btn", className="btn btn-warning btn-sm w-100") ], className="card-body p-2") ], className="card", style={"width": "28%", "marginLeft": "2%"}) ], className="d-flex")