trading-platform-frontend-v2/docs/PROXIMA-ACCION.md

PROXIMA-ACCION.md - Trading Platform Frontend

Sistema: SIMCO v3.8+ | Ciclo CAPVED Ultima actualizacion: 2026-01-13

---

Estado Actual

Completado - Frontend Trading Platform

• Migracion de tema STC (Gold/Black)
• 23 componentes UI shadcn/ui migrados
• 20 paginas de modulos creadas/migradas
• Dashboard Page con overview completo
• Settings Page con perfil, seguridad y preferencias
• Configuracion Tailwind CSS con paleta dorada
• Variables CSS para modo dark
• Build validado (1997 modules, 3.49s)
• Documentacion SIMCO actualizada

Estructura de Modulos

src/
├── components/
│   ├── ui/                    # 23 componentes shadcn/ui
│   ├── Layout.tsx             # Layout principal STC
│   └── ProtectedRoute.tsx     # Rutas protegidas STC
├── routes.tsx                 # PageLoader, 404, rutas STC
├── App.tsx                    # App principal
└── modules/
    ├── auth/
    │   └── pages/
    │       ├── LoginPage.tsx          ✓
    │       ├── RegisterPage.tsx       ✓
    │       ├── ForgotPasswordPage.tsx ✓
    │       └── ResetPasswordPage.tsx  ✓
    ├── dashboard/                     # NUEVO
    │   └── pages/
    │       └── DashboardPage.tsx      ✓
    ├── settings/                      # NUEVO
    │   └── pages/
    │       └── SettingsPage.tsx       ✓
    ├── wallet/
    │   ├── pages/
    │   │   └── WalletPage.tsx ✓
    │   └── components/
    │       ├── WalletCard.tsx ✓
    │       ├── TransactionList.tsx ✓
    │       ├── DepositModal.tsx ✓
    │       └── WithdrawModal.tsx ✓
    ├── products/
    │   ├── pages/
    │   │   └── ProductsPage.tsx ✓
    │   └── components/
    │       ├── ProductGrid.tsx ✓
    │       ├── ProductCard.tsx ✓
    │       └── CartSidebar.tsx ✓
    ├── vip/
    │   ├── pages/
    │   │   └── VipPage.tsx ✓
    │   └── components/
    │       ├── TierCard.tsx ✓
    │       ├── SubscriptionCard.tsx ✓
    │       └── ModelAccessList.tsx ✓
    ├── investment/
    │   ├── pages/
    │   │   └── InvestmentPage.tsx ✓
    │   └── components/
    │       ├── AgentCard.tsx ✓
    │       ├── AllocationCard.tsx ✓
    │       └── AllocationModal.tsx ✓
    ├── predictions/
    │   ├── pages/
    │   │   ├── PredictionsPage.tsx ✓
    │   │   └── PredictionHistoryPage.tsx ✓
    │   └── components/
    │       ├── PackageCard.tsx ✓
    │       ├── PredictionCard.tsx ✓
    │       └── StatsOverview.tsx ✓
    └── rbac/
        └── components/
            └── PermissionGate.tsx ✓ (logico)

---

Proximas Acciones Sugeridas

Prioridad Alta

1. Conectar con Backend Real

   • Configurar variables de entorno para APIs
   • Implementar autenticacion real con backend
   • Conectar hooks con servicios reales
   • Modo: @FULL

2. Implementar datos reales en Dashboard

   • Conectar balance real desde wallet API
   • Mostrar predicciones activas reales
   • Calcular P&L real
   • Modo: @FULL

3. Implementar funcionalidad Settings

   • Conectar cambio de password con API
   • Implementar actualizar perfil
   • Guardar preferencias en backend
   • Modo: @FULL

Prioridad Media

4. Agregar tests unitarios

   • Tests para componentes UI
   • Tests para hooks personalizados
   • Modo: @FULL

5. Optimizar bundle size

   • Analizar con rollup-plugin-visualizer
   • Implementar code-splitting adicional
   • Modo: @ANALYSIS + @FULL

6. Agregar animaciones y transiciones

   • Framer Motion para transiciones de pagina
   • Micro-interacciones en botones y cards
   • Modo: @FULL

Prioridad Baja

7. PWA y offline support

   • Service worker
   • Manifest.json
   • Modo: @FULL

8. Internacionalizacion (i18n)

   • react-intl o i18next
   • Traducciones ES/EN
   • Modo: @FULL

---

Rutas Disponibles

Ruta	Pagina	Protegida
/	Dashboard	Si
/dashboard	Dashboard	Si
/login	Login	No
/register	Register	No
/forgot-password	Forgot Password	No
/reset-password	Reset Password	No
/wallet	Wallet	Si
/products	Products/Marketplace	Si
/vip	VIP Subscriptions	Si
/investment	Investment Agents	Si
/predictions	Predictions	Si
/predictions/history	Prediction History	Si
/settings	User Settings	Si

---

Comandos de Validacion

# Build de produccion
npm run build

# Lint
npm run lint

# Typecheck
npm run typecheck

# Tests (si existen)
npm run test

# Preview de produccion
npm run preview

---

Notas Tecnicas

Paleta de Colores STC

• Gold: #ffd700 (acento principal)
• Primary-900: #111827 (fondo principal)
• Primary-800: #1f2937 (cards, elementos elevados)
• Primary-700: #374151 (bordes, elementos secundarios)

Patron de Estilos Consistente

// Cards
className="bg-primary-800 border-primary-700"

// Textos
className="text-white"          // Principal
className="text-gray-400"       // Secundario
className="text-gold"           // Destacado

// Gradientes destacados
className="bg-gradient-to-r from-gold/20 to-primary-700/50 rounded-xl border border-gold/30"

// Botones
variant="secondary"  // Accion principal (gold)
variant="ghost"      // Accion secundaria
variant="outline"    // Terciaria

// Loading spinners
className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gold"

// Fondos de pagina
className="min-h-screen bg-primary-900"

// Tabs activos
className="data-[state=active]:bg-gold data-[state=active]:text-primary-900"

// Switches
className="data-[state=checked]:bg-gold"

Componentes UI Disponibles

button, card, input, label, badge, dialog, select, progress,
skeleton, sheet, tabs, avatar, dropdown-menu, separator, switch,
textarea, tooltip, alert, form, scroll-area, table, checkbox, popover

---

Arquitectura MCP Services (Backend)

Servicios MCP y Puertos

Servicio	Puerto	Descripcion	Variable .env
mcp-auth	3095	Autenticacion, RBAC, Teams	VITE_AUTH_SERVICE_URL
mcp-wallet	3090	Wallet virtual, transacciones	VITE_WALLET_SERVICE_URL
mcp-products	3091	Marketplace, productos	VITE_PRODUCTS_SERVICE_URL
mcp-vip	3092	Suscripciones VIP, tiers	VITE_VIP_SERVICE_URL
mcp-investment	3093	Agentes, allocations	VITE_INVESTMENT_SERVICE_URL
mcp-predictions	3094	Predicciones ML	VITE_PREDICTIONS_SERVICE_URL

Cadena de Dependencias

mcp-auth (3095)           <- Servicio base de autenticacion
    │
    └─> mcp-wallet (3090)
            │
            ├─> mcp-products (3091)
            ├─> mcp-vip (3092)
            │       │
            │       └─> mcp-predictions (3094)
            │
            └─> mcp-investment (3093)

Comandos Docker

# Desde trading-platform root
cd /home/isem/workspace-v2/projects/trading-platform

# Crear red (primera vez)
docker network create trading-network

# Levantar servicios MCP
docker-compose -f docker-compose.mcp.yml up -d

# Ver logs
docker-compose -f docker-compose.mcp.yml logs -f

# Verificar estado
docker-compose -f docker-compose.mcp.yml ps

Variables de Entorno (.env)

# API Gateway
VITE_API_BASE_URL=http://localhost:3000/api

# Servicios MCP (desarrollo)
VITE_AUTH_SERVICE_URL=http://localhost:3095
VITE_WALLET_SERVICE_URL=http://localhost:3090
VITE_PRODUCTS_SERVICE_URL=http://localhost:3091
VITE_VIP_SERVICE_URL=http://localhost:3092
VITE_INVESTMENT_SERVICE_URL=http://localhost:3093
VITE_PREDICTIONS_SERVICE_URL=http://localhost:3094

---

Referencias

• Inventario completo: docs/MASTER_INVENTORY.yml
• Configuracion tema: tailwind.config.js, src/index.css
• Componentes UI: src/components/ui/
• Docker MCP: docker-compose.mcp.yml
• Inventario Backend: docs/90-transversal/inventarios/BACKEND_INVENTORY.yml