- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
This is a React.js/Node.js app generated by the Flatlogic Web App Generator
-
For guides and documentation please check
- your local README.md and the Flatlogic documentation
+
+
+
+
+
+
+
+
+
Trading Bot Studio
+
MVP listo para simular sesiones y visualizar el tablero.
+
+
+
+
-
-
-
-
+
+
+
+ Bot técnico con enfoque moderno
+
+
+ Crea, arranca y supervisa un bot de trading con visualización viva y control total del riesgo.
+
+
+ La primera entrega conecta configuración, estrategias, credenciales, simulación, tablero operativo, ROI por hora y sesiones recientes sin rehacer el CRUD base.
+
+
+
+
+ {strategyPills.map((pill) => (
+
+ {pill}
+
+ ))}
+
+
+
+
+ Qué incluye este MVP
+
+
+
+ Seguridad operativa
+
+
+ Selector de credenciales API para Binance y Kraken con modo simulación activable desde configuración.
+
+
+
+
+ Monitoreo visual
+
+
+ Un tablero elegante para ver todos los movimientos, métricas y eventos relevantes del bot en tiempo real.
+
+
+
+
+
+
+ {featureCards.map((card) => (
+
+
+
+ {card.title}
+ {card.description}
+
+ ))}
+
+
-
© 2026 {title} . All rights reserved
-
- Privacy Policy
-
-
+
);
}
-Starter.getLayout = function getLayout(page: ReactElement) {
+HomePage.getLayout = function getLayout(page: ReactElement) {
return
{page} ;
};
-
diff --git a/frontend/src/pages/trading-bot.tsx b/frontend/src/pages/trading-bot.tsx
new file mode 100644
index 0000000..7a2be58
--- /dev/null
+++ b/frontend/src/pages/trading-bot.tsx
@@ -0,0 +1,1190 @@
+import {
+ mdiAlertCircleOutline,
+ mdiArrowTopRight,
+ mdiChartLine,
+ mdiChartTimelineVariant,
+ mdiCheckCircleOutline,
+ mdiClockOutline,
+ mdiCog,
+ mdiFlash,
+ mdiPause,
+ mdiPlay,
+ mdiRobot,
+ mdiStop,
+ mdiWallet,
+} from '@mdi/js';
+import axios from 'axios';
+import Head from 'next/head';
+import Link from 'next/link';
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+import BaseButton from '../components/BaseButton';
+import BaseButtons from '../components/BaseButtons';
+import BaseDivider from '../components/BaseDivider';
+import BaseIcon from '../components/BaseIcon';
+import CardBox from '../components/CardBox';
+import NotificationBar from '../components/NotificationBar';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { useAppSelector } from '../stores/hooks';
+
+type ExchangeOption = {
+ id: string;
+ name: string;
+ exchange_code: string;
+ supports_spot: boolean;
+ supports_futures: boolean;
+};
+
+type ApiCredentialOption = {
+ id: string;
+ label: string;
+ exchangeId: string | null;
+ exchangeName: string | null;
+ exchangeCode: string | null;
+ last_validated_at: string | null;
+};
+
+type TradingPairOption = {
+ id: string;
+ symbol: string;
+ base_asset: string;
+ quote_asset: string;
+ exchangeId: string | null;
+ exchangeName: string | null;
+ exchangeCode: string | null;
+};
+
+type StrategyOption = {
+ id: string;
+ name: string;
+ category: string;
+ categoryLabel: string;
+ description: string | null;
+};
+
+type SessionSummary = {
+ id: string;
+ status: string;
+ statusLabel: string;
+ simulation_mode: boolean;
+ investmentAmount: number;
+ timeframe: string;
+ startedAt: string | null;
+ stoppedAt: string | null;
+ roiPercent: number;
+ pnlAmount: number;
+ exchange: {
+ id: string;
+ name: string;
+ exchange_code: string;
+ } | null;
+ trading_pair: {
+ id: string;
+ symbol: string;
+ base_asset: string;
+ quote_asset: string;
+ } | null;
+};
+
+type WorkspaceSession = {
+ session: {
+ id: string;
+ status: string;
+ statusLabel: string;
+ simulation_mode: boolean;
+ investment_amount: number;
+ risk_percent: number;
+ target_profit_percent: number;
+ timeframe: string;
+ notes: string | null;
+ started_at: string | null;
+ stopped_at: string | null;
+ latestHeartbeat: string | null;
+ exchange: {
+ id: string;
+ name: string;
+ exchange_code: string;
+ } | null;
+ trading_pair: {
+ id: string;
+ symbol: string;
+ base_asset: string;
+ quote_asset: string;
+ } | null;
+ api_credential: {
+ id: string;
+ label: string;
+ last_validated_at: string | null;
+ } | null;
+ };
+ kpis: {
+ currentEquity: number;
+ roiPercent: number;
+ pnlAmount: number;
+ realizedPnl: number;
+ unrealizedPnl: number;
+ winRate: number;
+ activePositions: number;
+ totalSignals: number;
+ activeStrategies: number;
+ };
+ roiTimeline: Array<{
+ id: string;
+ roiPercent: number;
+ pnlAmount: number;
+ startingEquity: number;
+ endingEquity: number;
+ periodStartAt: string;
+ periodEndAt: string;
+ closedTradesCount: number;
+ }>;
+ eventFeed: Array<{
+ id: string;
+ eventType: string;
+ severity: string;
+ message: string;
+ payload: string | null;
+ eventAt: string;
+ }>;
+ signals: Array<{
+ id: string;
+ type: string;
+ typeLabel: string;
+ confidenceLevel: string;
+ confidenceScore: number;
+ entryPrice: number;
+ stopLossPrice: number;
+ takeProfitPrice: number;
+ rationale: string;
+ signaledAt: string;
+ strategy: {
+ id: string;
+ name: string;
+ category: string;
+ } | null;
+ }>;
+ positions: Array<{
+ id: string;
+ side: string;
+ status: string;
+ entryPrice: number;
+ quantity: number;
+ stopLossPrice: number;
+ takeProfitPrice: number;
+ realizedPnl: number;
+ unrealizedPnl: number;
+ openedAt: string;
+ closedAt: string | null;
+ }>;
+ orders: Array<{
+ id: string;
+ side: string;
+ status: string;
+ type: string;
+ price: number;
+ quantity: number;
+ filledQuantity: number;
+ avgFillPrice: number;
+ submittedAt: string;
+ finalizedAt: string | null;
+ isSimulated: boolean;
+ }>;
+ strategyLeaderboard: Array<{
+ id: string;
+ name: string;
+ category: string;
+ adaptiveScore: number;
+ allocation: number;
+ signalCount: number;
+ recommendation: string;
+ projectedEquity: number;
+ }>;
+};
+
+type WorkspaceBootstrap = {
+ exchanges: ExchangeOption[];
+ apiCredentials: ApiCredentialOption[];
+ tradingPairs: TradingPairOption[];
+ strategies: StrategyOption[];
+ recentSessions: SessionSummary[];
+ latestActiveSessionId: string | null;
+ activeWorkspace: WorkspaceSession | null;
+};
+
+type FormState = {
+ exchangeId: string;
+ apiCredentialId: string;
+ tradingPairId: string;
+ timeframe: string;
+ investmentAmount: string;
+ riskPercent: string;
+ targetProfitPercent: string;
+ notes: string;
+ simulationMode: boolean;
+ strategyIds: string[];
+};
+
+const TIMEFRAME_OPTIONS = ['1m', '5m', '15m', '30m', '1h', '4h', '1d'];
+
+const INITIAL_FORM_STATE: FormState = {
+ exchangeId: '',
+ apiCredentialId: '',
+ tradingPairId: '',
+ timeframe: '15m',
+ investmentAmount: '2500',
+ riskPercent: '1.5',
+ targetProfitPercent: '4.5',
+ notes: 'Sesión inicial con aprendizaje adaptativo y enfoque en ROI horario.',
+ simulationMode: true,
+ strategyIds: [],
+};
+
+const currencyFormatter = new Intl.NumberFormat('es-ES', {
+ style: 'currency',
+ currency: 'USD',
+ maximumFractionDigits: 2,
+});
+
+function formatCurrency(value?: number | null) {
+ return currencyFormatter.format(Number(value || 0));
+}
+
+function formatPercent(value?: number | null) {
+ const numericValue = Number(value || 0);
+ return `${numericValue >= 0 ? '+' : ''}${numericValue.toFixed(2)}%`;
+}
+
+function formatCompactDate(value?: string | null) {
+ if (!value) {
+ return '—';
+ }
+
+ return new Date(value).toLocaleString('es-ES', {
+ day: '2-digit',
+ month: 'short',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+}
+
+function getStatusPill(status: string) {
+ switch (status) {
+ case 'running':
+ return 'bg-emerald-500/15 text-emerald-300 border border-emerald-400/30';
+ case 'paused':
+ return 'bg-amber-500/15 text-amber-200 border border-amber-400/30';
+ case 'stopped':
+ return 'bg-slate-500/15 text-slate-200 border border-slate-400/30';
+ case 'error':
+ return 'bg-rose-500/15 text-rose-200 border border-rose-400/30';
+ default:
+ return 'bg-sky-500/15 text-sky-200 border border-sky-400/30';
+ }
+}
+
+function getSeverityPill(severity: string) {
+ switch (severity) {
+ case 'critical':
+ case 'error':
+ return 'bg-rose-500/15 text-rose-200';
+ case 'warning':
+ return 'bg-amber-500/15 text-amber-200';
+ default:
+ return 'bg-emerald-500/15 text-emerald-200';
+ }
+}
+
+function getSignalPill(type: string) {
+ if (type === 'buy') {
+ return 'bg-emerald-500/15 text-emerald-200';
+ }
+
+ if (type === 'sell') {
+ return 'bg-rose-500/15 text-rose-200';
+ }
+
+ if (type === 'close') {
+ return 'bg-violet-500/15 text-violet-200';
+ }
+
+ return 'bg-slate-500/15 text-slate-200';
+}
+
+const StatCard = ({ icon, label, value, helper }: { icon: string; label: string; value: string; helper: string }) => (
+
+
+
+
{label}
+
{value}
+
{helper}
+
+
+
+
+);
+
+const TradingBotWorkspacePage = () => {
+ const { currentUser } = useAppSelector((state) => state.auth);
+ const [activeTab, setActiveTab] = useState<'dashboard' | 'config'>('dashboard');
+ const [bootstrap, setBootstrap] = useState
(null);
+ const [workspace, setWorkspace] = useState(null);
+ const [activeSessionId, setActiveSessionId] = useState(null);
+ const [formState, setFormState] = useState(INITIAL_FORM_STATE);
+ const [loading, setLoading] = useState(true);
+ const [errorMessage, setErrorMessage] = useState('');
+ const [successMessage, setSuccessMessage] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isRuntimeActionLoading, setIsRuntimeActionLoading] = useState(false);
+
+ const filteredPairs = useMemo(() => {
+ if (!bootstrap?.tradingPairs) {
+ return [];
+ }
+
+ return formState.exchangeId
+ ? bootstrap.tradingPairs.filter((pair) => pair.exchangeId === formState.exchangeId)
+ : bootstrap.tradingPairs;
+ }, [bootstrap?.tradingPairs, formState.exchangeId]);
+
+ const filteredCredentials = useMemo(() => {
+ if (!bootstrap?.apiCredentials) {
+ return [];
+ }
+
+ return formState.exchangeId
+ ? bootstrap.apiCredentials.filter((credential) => credential.exchangeId === formState.exchangeId)
+ : bootstrap.apiCredentials;
+ }, [bootstrap?.apiCredentials, formState.exchangeId]);
+
+ const selectedPair = useMemo(
+ () => bootstrap?.tradingPairs.find((pair) => pair.id === formState.tradingPairId) || null,
+ [bootstrap?.tradingPairs, formState.tradingPairId],
+ );
+
+ const loadBootstrap = async (preferDashboard = false) => {
+ setLoading(true);
+ setErrorMessage('');
+
+ try {
+ const { data } = await axios.get('/bot_sessions/workspace/bootstrap');
+ setBootstrap(data);
+ setWorkspace(data.activeWorkspace);
+ setActiveSessionId(data.activeWorkspace?.session.id || data.latestActiveSessionId || null);
+
+ setFormState((current) => {
+ const preferredExchangeId = current.exchangeId || data.exchanges[0]?.id || '';
+ const defaultStrategies = current.strategyIds.length
+ ? current.strategyIds
+ : data.strategies.slice(0, 3).map((strategy) => strategy.id);
+ const availablePairs = preferredExchangeId
+ ? data.tradingPairs.filter((pair) => pair.exchangeId === preferredExchangeId)
+ : data.tradingPairs;
+ const availableCredentials = preferredExchangeId
+ ? data.apiCredentials.filter((credential) => credential.exchangeId === preferredExchangeId)
+ : data.apiCredentials;
+
+ return {
+ ...current,
+ exchangeId: preferredExchangeId,
+ tradingPairId:
+ current.tradingPairId && availablePairs.some((pair) => pair.id === current.tradingPairId)
+ ? current.tradingPairId
+ : availablePairs[0]?.id || '',
+ apiCredentialId:
+ current.apiCredentialId && availableCredentials.some((credential) => credential.id === current.apiCredentialId)
+ ? current.apiCredentialId
+ : availableCredentials[0]?.id || '',
+ strategyIds: defaultStrategies,
+ };
+ });
+
+ if (preferDashboard && data.activeWorkspace) {
+ setActiveTab('dashboard');
+ }
+ } catch (error: any) {
+ setErrorMessage(error?.response?.data || 'No se pudo cargar el centro de control del bot.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const loadWorkspace = async (sessionId: string) => {
+ try {
+ const { data } = await axios.get(`/bot_sessions/${sessionId}/workspace`);
+ setWorkspace(data);
+ } catch (error: any) {
+ setErrorMessage(error?.response?.data || 'No se pudo actualizar el tablero en tiempo real.');
+ }
+ };
+
+ useEffect(() => {
+ loadBootstrap().then();
+ }, []);
+
+ useEffect(() => {
+ if (!formState.exchangeId) {
+ return;
+ }
+
+ if (formState.tradingPairId && filteredPairs.some((pair) => pair.id === formState.tradingPairId)) {
+ return;
+ }
+
+ setFormState((current) => ({
+ ...current,
+ tradingPairId: filteredPairs[0]?.id || '',
+ }));
+ }, [filteredPairs, formState.exchangeId, formState.tradingPairId]);
+
+ useEffect(() => {
+ if (formState.simulationMode) {
+ return;
+ }
+
+ if (formState.apiCredentialId && filteredCredentials.some((credential) => credential.id === formState.apiCredentialId)) {
+ return;
+ }
+
+ setFormState((current) => ({
+ ...current,
+ apiCredentialId: filteredCredentials[0]?.id || '',
+ }));
+ }, [filteredCredentials, formState.apiCredentialId, formState.simulationMode]);
+
+ useEffect(() => {
+ if (!activeSessionId || !workspace || workspace.session.status === 'stopped') {
+ return undefined;
+ }
+
+ const interval = window.setInterval(() => {
+ loadWorkspace(activeSessionId).then();
+ }, 5000);
+
+ return () => window.clearInterval(interval);
+ }, [activeSessionId, workspace?.session.status]);
+
+ const handleFieldChange = (field: keyof FormState, value: string | boolean) => {
+ setFormState((current) => ({
+ ...current,
+ [field]: value,
+ }));
+ };
+
+ const toggleStrategy = (strategyId: string) => {
+ setFormState((current) => {
+ const exists = current.strategyIds.includes(strategyId);
+ const nextStrategyIds = exists
+ ? current.strategyIds.filter((id) => id !== strategyId)
+ : [...current.strategyIds, strategyId];
+
+ return {
+ ...current,
+ strategyIds: nextStrategyIds,
+ };
+ });
+ };
+
+ const validateForm = () => {
+ if (!formState.exchangeId) {
+ return 'Selecciona un exchange.';
+ }
+
+ if (!formState.tradingPairId) {
+ return 'Selecciona una moneda o par de trading.';
+ }
+
+ if (!formState.strategyIds.length) {
+ return 'Selecciona al menos una estrategia.';
+ }
+
+ if (Number(formState.investmentAmount) <= 0) {
+ return 'La cantidad a invertir debe ser mayor a cero.';
+ }
+
+ if (Number(formState.riskPercent) <= 0 || Number(formState.riskPercent) > 25) {
+ return 'El riesgo permitido debe estar entre 0.1% y 25%.';
+ }
+
+ if (Number(formState.targetProfitPercent) <= 0 || Number(formState.targetProfitPercent) > 80) {
+ return 'El objetivo de beneficio debe estar entre 0.1% y 80%.';
+ }
+
+ if (!formState.simulationMode && !formState.apiCredentialId) {
+ return 'Para operar en vivo necesitas seleccionar credenciales activas.';
+ }
+
+ return '';
+ };
+
+ const handleLaunch = async () => {
+ const validationError = validateForm();
+
+ if (validationError) {
+ setErrorMessage(validationError);
+ setSuccessMessage('');
+ setActiveTab('config');
+ return;
+ }
+
+ setIsSubmitting(true);
+ setErrorMessage('');
+ setSuccessMessage('');
+
+ try {
+ const { data } = await axios.post('/bot_sessions/workspace/launch', {
+ data: formState,
+ });
+ setWorkspace(data);
+ setActiveSessionId(data.session.id);
+ setActiveTab('dashboard');
+ setSuccessMessage('Bot iniciado correctamente. El tablero ya está mostrando el flujo en tiempo real.');
+ await loadBootstrap(true);
+ } catch (error: any) {
+ setErrorMessage(error?.response?.data || 'No se pudo iniciar el bot.');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleRuntimeAction = async (action: 'pause' | 'resume' | 'stop') => {
+ if (!activeSessionId) {
+ return;
+ }
+
+ setIsRuntimeActionLoading(true);
+ setErrorMessage('');
+ setSuccessMessage('');
+
+ try {
+ const { data } = await axios.post(`/bot_sessions/${activeSessionId}/runtime-action`, {
+ action,
+ });
+ setWorkspace(data);
+ setSuccessMessage(
+ action === 'pause'
+ ? 'Bot pausado.'
+ : action === 'resume'
+ ? 'Bot reanudado.'
+ : 'Bot detenido y listo para revisión.',
+ );
+ await loadBootstrap();
+ } catch (error: any) {
+ setErrorMessage(error?.response?.data || 'No se pudo aplicar la acción solicitada.');
+ } finally {
+ setIsRuntimeActionLoading(false);
+ }
+ };
+
+ const sessionIsRunning = workspace?.session.status === 'running';
+ const sessionIsPaused = workspace?.session.status === 'paused';
+ const hasActiveWorkspace = Boolean(workspace?.session.id);
+
+ return (
+ <>
+
+ {getPageTitle('Trading Bot')}
+
+
+
+
+ setActiveTab('dashboard')}
+ />
+ setActiveTab('config')}
+ />
+
+
+
+
+
+
+
+ Simulación multi-estrategia en tiempo real
+
+
+ {currentUser?.firstName ? `${currentUser.firstName}, ` : ''}controla un bot técnico con foco en ROI horario, riesgo y aprendizaje adaptativo.
+
+
+ Esta primera versión conecta configuración, arranque, tablero vivo, eventos, señales, órdenes y sesiones recientes en un único flujo usable.
+
+
+ setActiveTab('config')} />
+
+
+
+
+
+ Capital sugerido
+
+
{formState.investmentAmount || '2500'} USDT
+
Riesgo {formState.riskPercent}% · Objetivo {formState.targetProfitPercent}% · {formState.simulationMode ? 'Paper mode' : 'Live mode'}
+
+
+
+ Señales activas
+
+
{workspace?.kpis.totalSignals || 0}
+
Motor preparado para velas, mechas, ruptura, reversión y noticias.
+
+
+
+
+ {errorMessage && (
+
+ {errorMessage}
+
+ )}
+
+ {successMessage && (
+
+ {successMessage}
+
+ )}
+
+ {loading ? (
+
+ Cargando centro de control del bot…
+
+ ) : (
+ <>
+ {activeTab === 'dashboard' ? (
+ <>
+ {hasActiveWorkspace ? (
+ <>
+
+
+
+
+
+
+
+
+ {workspace?.session.statusLabel}
+
+
+ {workspace?.session.exchange?.name} · {workspace?.session.trading_pair?.symbol}
+
+
+ {workspace?.session.simulation_mode ? 'Simulación' : 'Operativa live'} · {workspace?.session.timeframe}
+
+
+
Centro de decisiones y ejecución
+
+ Configuración activa con riesgo {workspace?.session.risk_percent}% y objetivo {workspace?.session.target_profit_percent}%. Último latido: {formatCompactDate(workspace?.session.latestHeartbeat)}.
+
+
+
+ {sessionIsRunning && (
+ handleRuntimeAction('pause')}
+ />
+ )}
+ {sessionIsPaused && (
+ handleRuntimeAction('resume')}
+ />
+ )}
+ {workspace?.session.status !== 'stopped' && (
+ handleRuntimeAction('stop')}
+ />
+ )}
+
+
+
+
+
+
+
+
ROI por hora
+
Curva de beneficio y pérdida
+
+
+ Últimas {workspace?.roiTimeline.length || 0} lecturas
+
+
+ {workspace?.roiTimeline.length ? workspace.roiTimeline.map((snapshot) => {
+ const height = Math.max(18, Math.min(180, Math.abs(snapshot.roiPercent) * 18 + 26));
+ return (
+
+
= 0 ? 'bg-gradient-to-t from-emerald-500 to-cyan-400' : 'bg-gradient-to-t from-rose-500 to-orange-300'}`}
+ style={{ height }}
+ />
+
+
= 0 ? 'text-emerald-300' : 'text-rose-200'}`}>
+ {formatPercent(snapshot.roiPercent)}
+
+
{formatCompactDate(snapshot.periodEndAt)}
+
+
+ );
+ }) : (
+
+ Aún no hay snapshots horarios.
+
+ )}
+
+
+
+
+ Motor adaptativo
+ Ranking de estrategias
+
+ {workspace?.strategyLeaderboard.map((strategy) => (
+
+
+
+
{strategy.name}
+
{strategy.category} · {strategy.recommendation}
+
+
+ {strategy.adaptiveScore}%
+
+
+
+
+ Asignación {strategy.allocation}%
+ {strategy.signalCount} señales
+ Equidad proyectada {formatCurrency(strategy.projectedEquity)}
+
+
+ ))}
+
+
+
+
+
+
Eventos del bot
+
Movimiento y telemetría
+
+
+ live feed
+
+
+ {workspace?.eventFeed.map((event) => (
+
+
+
+ {event.severity}
+
+ {formatCompactDate(event.eventAt)}
+
+
{event.message}
+
+ ))}
+
+
+
+
+
+
Señales y órdenes
+
Lecturas operativas
+
+
+ Ver órdenes completas
+
+
+ {workspace?.signals.map((signal) => (
+
+
+
+ {signal.typeLabel}
+
+
+ {signal.strategy?.name || 'Motor adaptativo'}
+
+
+ Confianza {signal.confidenceScore}%
+
+
+
{signal.rationale}
+
+
+
Entrada
+
{signal.entryPrice}
+
+
+
Stop loss
+
{signal.stopLossPrice}
+
+
+
Take profit
+
{signal.takeProfitPrice}
+
+
+
+ ))}
+
+
+
+
+
+
Posiciones
+
Gestión de riesgo actual
+
+
+ Ver posiciones
+
+
+
+ Lado
+ Estado
+ Entrada
+ PnL
+ Cantidad
+
+ {workspace?.positions.length ? workspace.positions.map((position) => (
+
+ {position.side}
+ {position.status}
+ {position.entryPrice}
+ = 0 ? 'text-emerald-300' : 'text-rose-300'}>
+ {formatCurrency(position.realizedPnl + position.unrealizedPnl)}
+
+ {position.quantity}
+
+ )) : (
+
Aún no hay posiciones abiertas o cerradas.
+ )}
+
+
+
+
+
+
Sesiones recientes
+
Iteraciones del bot
+
+
setActiveTab('config')} />
+
+ {bootstrap?.recentSessions.length ? bootstrap.recentSessions.map((session) => (
+
{
+ setActiveSessionId(session.id);
+ loadWorkspace(session.id).then();
+ }}
+ >
+
+
+
{session.exchange?.name || 'Exchange'} · {session.trading_pair?.symbol || 'Pair'}
+
{session.timeframe} · {session.simulation_mode ? 'Simulación' : 'Live'} · {formatCompactDate(session.startedAt)}
+
+
+ {session.statusLabel}
+
+
+ Capital {formatCurrency(session.investmentAmount)}
+ ROI {formatPercent(session.roiPercent)}
+ PnL {formatCurrency(session.pnlAmount)}
+
+
+ )) : (
+
+ Todavía no hay sesiones. Arranca la primera desde Configuración.
+
+ )}
+
+
+
+
+
+
Todavía no hay un bot corriendo
+
+ Configura exchange, par, riesgo, beneficio, credenciales y estrategias para lanzar la primera iteración del bot. Cuando lo inicies verás señales, eventos, ROI y movimientos en este tablero.
+
+
+ setActiveTab('config')} />
+
+
+ )}
+
+ ) : (
+
+
+ Configuración operativa
+ Conexión, capital y control de riesgo
+
+ Esta primera iteración permite escoger exchange, moneda, API de seguridad, modo simulación y una cesta de estrategias para crear una sesión completa.
+
+
+
+
+ Exchange
+ handleFieldChange('exchangeId', event.target.value)}
+ >
+ {bootstrap?.exchanges.map((exchange) => (
+
+ {exchange.name} ({exchange.exchange_code})
+
+ ))}
+
+
+
+ Moneda / Par
+ handleFieldChange('tradingPairId', event.target.value)}
+ >
+ {filteredPairs.map((pair) => (
+
+ {pair.symbol} · {pair.base_asset}/{pair.quote_asset}
+
+ ))}
+
+
+
+ Timeframe
+ handleFieldChange('timeframe', event.target.value)}
+ >
+ {TIMEFRAME_OPTIONS.map((timeframe) => (
+
+ {timeframe}
+
+ ))}
+
+
+
+
Modo
+
+ handleFieldChange('simulationMode', true)}
+ >
+ Simulación
+
+ handleFieldChange('simulationMode', false)}
+ >
+ Live mode
+
+
+
+
+ Cantidad a invertir
+
+
+ Riesgo %
+
+
+ Beneficio objetivo %
+
+
+ API de seguridad
+ handleFieldChange('apiCredentialId', event.target.value)}
+ disabled={formState.simulationMode}
+ >
+ {formState.simulationMode ? 'Opcional en simulación' : 'Selecciona credenciales'}
+ {filteredCredentials.map((credential) => (
+
+ {credential.label} · {credential.exchangeName}
+
+ ))}
+
+
+
+ Notas / contexto
+