# PROXIMA-ACCION.md - Trading Platform Frontend

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

---

## Estado Actual

### Completado - Frontend Trading Platform

- [x] Migracion de tema STC (Gold/Black)
- [x] 23 componentes UI shadcn/ui migrados
- [x] 20 paginas de modulos creadas/migradas
- [x] Dashboard Page con overview completo
- [x] Settings Page con perfil, seguridad y preferencias
- [x] Configuracion Tailwind CSS con paleta dorada
- [x] Variables CSS para modo dark
- [x] Build validado (1997 modules, 3.49s)
- [x] 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

```bash
# 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
```tsx
// 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

```bash
# 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)

```bash
# 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`