301 lines
8.3 KiB
Markdown
301 lines
8.3 KiB
Markdown
# 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`
|