# 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

```yaml
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*