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)

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)

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.