Dashboard-CAS/docs/plans/2026-02-15-tv-dashboard-design.md

# TV Dashboard para Oficina - Documento de Diseno

**Fecha**: 2026-02-15
**Dispositivo objetivo**: TCL 55" 4K (3840x2160)
**Modo de uso**: Kiosko 24/7, rotacion automatica de vistas

## Resumen

Dashboard web para Smart TV de oficina que muestra topologia de red con credenciales, tareas de proyectos desde Odoo 19 y calendario de actividades desde Odoo Calendar. Tres vistas a pantalla completa rotan automaticamente.

## Arquitectura

### Stack

- **Frontend**: React 18 + TypeScript + Vite + Tailwind CSS + D3.js + Framer Motion
- **Backend**: Python 3.11+ + FastAPI + python-nmap + PyYAML + websockets
- **Odoo**: Version 19 Community, servidor local, conexion via JSON-RPC
- **Despliegue**: Docker Compose (backend + frontend/Nginx)

### Diagrama

```
Smart TV (Chromium 4K)
        │ HTTP / WebSocket
FastAPI Backend
  ├── Odoo Module (JSON-RPC) ──► Odoo 19 Server
  ├── Network Scanner (nmap) ──► Red Local
  └── Config Manager (YAML)  ──► config/services.yaml
```

### Comunicacion

- REST API para carga inicial de datos
- WebSocket para actualizaciones en tiempo real
- Intervalos de refresh: Odoo 5 min, red 10 min, ping servicios 1 min

## Vistas rotativas

Tres vistas a pantalla completa, cada una visible durante 30 segundos (configurable). Transicion con fade suave.

### Vista 1: Topologia de Red

Grafo interactivo (D3.js force-directed) con nodos representando dispositivos de red.

**Cada nodo muestra:**
- Nombre del dispositivo
- Direccion IP
- Usuario
- Contrasena (oculta por defecto `****`, se revela con click)
- URL publica (configurada manualmente)
- Indicador de estado (online/offline via ping)

**Fuentes de datos:**
- Auto-descubrimiento via nmap (detecta dispositivos nuevos)
- Configuracion manual en `config/services.yaml` (define nombres, credenciales, URLs, conexiones)
- Modo hibrido: dispositivos descubiertos automaticamente pueden editarse manualmente

**Barra de estado inferior:** Total nodos online, nodos offline, ultimo refresh.

### Vista 2: Tareas por Proyecto (Odoo)

Vista Kanban a pantalla completa con datos del modulo Project de Odoo 19.

**Estructura:**
- Filas: un proyecto por fila
- Columnas: etapas del proyecto (Nuevo, En Progreso, Hecho, etc.)
- Cada tarjeta muestra: titulo, responsable asignado, prioridad (color), fecha limite

**Datos desde Odoo:**
- `project.project` para proyectos activos
- `project.task` para tareas con etapa, asignado, prioridad, deadline

### Vista 3: Calendario (Odoo)

Agenda vertical con los eventos del dia actual, manana, y resumen de la semana.

**Estructura:**
- Seccion "Hoy": lista cronologica de eventos con hora, titulo, ubicacion
- Seccion "Manana": misma estructura
- Seccion "Esta semana": lista resumida de eventos restantes

**Datos desde Odoo:**
- `calendar.event` filtrado por rango de fechas

## Configuracion

### services.yaml (topologia y credenciales)

```yaml
nodes:
  - name: "Router Principal"
    ip: "192.168.1.1"
    username: "admin"
    password: "router-password"
    icon: "router"
    connections: []

  - name: "Servidor Odoo"
    ip: "192.168.1.10"
    username: "root"
    password: "server-password"
    public_url: "https://odoo.miempresa.com"
    icon: "server"
    connections: ["Router Principal"]

network_scan:
  enabled: true
  subnet: "192.168.1.0/24"
  interval_minutes: 10
```

### settings.yaml (configuracion general)

```yaml
display:
  resolution: "3840x2160"
  rotation_interval_seconds: 30
  transition: "fade"
  theme: "dark"

odoo:
  url: "http://192.168.1.10:8069"
  database: "mi_base"
  username: "admin"
  password: "odoo-password"

refresh:
  odoo_minutes: 5
  network_minutes: 10
  ping_seconds: 60
```

## Estructura del proyecto

```
Dashboard/
├── backend/
│   ├── main.py
│   ├── requirements.txt
│   ├── config/
│   │   ├── services.yaml
│   │   └── settings.yaml
│   ├── modules/
│   │   ├── odoo_client.py
│   │   ├── network_scanner.py
│   │   └── config_manager.py
│   └── routers/
│       ├── calendar.py
│       ├── tasks.py
│       ├── network.py
│       └── services.py
├── frontend/
│   ├── package.json
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   ├── src/
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   ├── components/
│   │   │   ├── Layout/
│   │   │   │   ├── Header.tsx
│   │   │   │   └── ViewRotator.tsx
│   │   │   ├── Topology/
│   │   │   │   ├── NetworkGraph.tsx
│   │   │   │   └── NodeCard.tsx
│   │   │   ├── Tasks/
│   │   │   │   ├── KanbanBoard.tsx
│   │   │   │   └── TaskCard.tsx
│   │   │   └── Calendar/
│   │   │       ├── CalendarView.tsx
│   │   │       └── EventCard.tsx
│   │   ├── hooks/
│   │   │   ├── useOdooData.ts
│   │   │   ├── useWebSocket.ts
│   │   │   └── useRotation.ts
│   │   └── types/
│   │       └── index.ts
│   └── index.html
└── docker-compose.yaml
```

## Decisiones de diseno

1. **4K nativo**: Tipografia base 24px, elementos grandes legibles desde distancia. Sin escalado, usa toda la resolucion.
2. **Tema oscuro**: Reduce fatiga visual en pantalla 24/7 y ahorra energia en pantallas OLED/QLED.
3. **Contrasenas ocultas**: Seguridad basica para ambiente de oficina. Click para revelar.
4. **Hibrido red**: Nmap descubre dispositivos nuevos automaticamente, pero el usuario define nombres, credenciales y conexiones en YAML.
5. **WebSocket**: Actualizaciones push evitan polling excesivo y permiten notificaciones inmediatas de nodos offline.
6. **Docker Compose**: Despliegue reproducible en cualquier servidor de la red local.