workspace-v1/shared/catalog/portales/README.md

Portales y Dashboards

Version: 1.0.0 Origen: projects/gamilit, projects/trading-platform Estado: Produccion Ultima actualizacion: 2025-12-27

---

Descripcion

Sistema de portales y dashboards multi-rol con:

• Dashboards personalizados por rol
• Widgets configurables
• Metricas en tiempo real
• Navegacion contextual
• Preferencias de usuario
• Layouts responsivos

---

Caracteristicas

Caracteristica	Descripcion
Multi-rol	Dashboards diferentes por rol
Widgets	Sistema de widgets arrastrables
Metricas	KPIs y graficos en tiempo real
Personalizacion	Usuario puede reorganizar layout
Preferencias	Guardado de configuracion por usuario
Responsive	Adaptable a diferentes pantallas
Tiempo Real	Actualizacion via WebSocket

---

Stack Tecnologico

frontend:
  framework: React
  state: Zustand
  styling: Tailwind CSS
  charts: Recharts
  drag_drop: react-dnd o @dnd-kit
  grid: react-grid-layout

backend:
  framework: NestJS
  realtime: Socket.io
  cache: Redis (opcional)

database:
  engine: PostgreSQL
  schemas:
    - config (dashboard_layouts, user_preferences)

---

Tipos de Portal

1. Portal de Administrador

• Vision global del sistema
• Metricas de uso
• Gestion de tenants
• Logs de actividad

2. Portal de Usuario

• Dashboard personalizado
• Accesos rapidos
• Notificaciones
• Actividad reciente

3. Portal de Cliente (Self-Service)

• Estado de cuenta
• Historial de transacciones
• Soporte/tickets
• Configuracion de perfil

---

Estructura del Modulo

portales/
├── backend/
│   ├── src/
│   │   ├── modules/
│   │   │   ├── dashboards/
│   │   │   │   ├── dashboard.entity.ts
│   │   │   │   ├── dashboard.service.ts
│   │   │   │   └── dashboard.controller.ts
│   │   │   ├── widgets/
│   │   │   │   ├── widget.registry.ts
│   │   │   │   └── widgets/
│   │   │   │       ├── stats-card.widget.ts
│   │   │   │       ├── chart.widget.ts
│   │   │   │       └── table.widget.ts
│   │   │   └── preferences/
│   │   │       └── user-preferences.service.ts
│   │   └── gateways/
│   │       └── dashboard.gateway.ts
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── dashboard/
│   │   │   │   ├── DashboardGrid.tsx
│   │   │   │   ├── WidgetContainer.tsx
│   │   │   │   └── WidgetToolbar.tsx
│   │   │   └── widgets/
│   │   │       ├── StatsCard.tsx
│   │   │       ├── LineChart.tsx
│   │   │       ├── BarChart.tsx
│   │   │       ├── PieChart.tsx
│   │   │       ├── RecentActivity.tsx
│   │   │       └── QuickActions.tsx
│   │   ├── layouts/
│   │   │   ├── AdminLayout.tsx
│   │   │   ├── UserLayout.tsx
│   │   │   └── ClientPortalLayout.tsx
│   │   └── stores/
│   │       ├── dashboard.store.ts
│   │       └── preferences.store.ts
│
└── docs/
    ├── widget-development.md
    └── layout-customization.md

---

Widgets Incluidos

Widget	Descripcion	Datos
StatsCard	Metrica simple con icono	number, trend
LineChart	Grafico de lineas	time-series
BarChart	Grafico de barras	categories
PieChart	Grafico circular	proportions
RecentActivity	Lista de actividad	events
QuickActions	Accesos rapidos	links
TableWidget	Tabla de datos	array
CalendarWidget	Mini calendario	dates

---

Trade-offs

Ventaja	Desventaja
Altamente personalizable	Complejidad de configuracion
Widgets reutilizables	Overhead de abstraccion
Real-time updates	Consumo de conexiones
Multi-rol	Requiere buen diseño de permisos

---

Proyectos que lo Usan

Proyecto	Version	Notas
gamilit	1.0.0	Portal de estudiantes y maestros
trading-platform	1.0.0	Dashboard de inversiones
erp-core	pendiente	Portal de administracion

---

Referencias

• IMPLEMENTATION.md - Guia paso a paso
• _reference/ - Codigo de referencia
• websocket - Para actualizaciones real-time
• notifications - Para alertas en dashboard

---

Catalogo de Funcionalidades - SIMCO v3.4