Buscar en la documentación

Módulo de dashboard (frontend)

Página de inicio con los widgets de cada persona, en las cuatro vistas, y cómo cada cifra lleva al listado.

7 min de lecturaVer en GitHub

El dashboard es la página de inicio (/). Muestra los widgets que la persona tiene visibles, en el lugar que eligió. El front no calcula nada: las cifras, los porcentajes, qué es “vencido” y a qué filtro del listado lleva cada cifra llegan de la API (ver Módulo Dashboard).

Pantalla

VistaForma
Portátil y monitorGrilla de 12 columnas con el lugar y el tamaño que guardó la persona (x, y, w, h). Cada fila de la grilla mide $dashboard-row-height
TabletDos columnas, en el orden de lectura de la persona (de arriba abajo y de izquierda a derecha). Los widgets anchos (8 columnas o más) ocupan la fila completa
CelularLos indicadores de a dos por fila; el resto, a lo ancho
  • Encabezado: desde tablet, el título, “Actualizado hace…” y los botones van en una sola fila. “Resumen general” (quien ve todo) o “Mi resumen” (quien ve lo suyo), “Actualizado hace…” con la explicación en el ícono de información, y los botones “Personalizar” (portátil y monitor) y “Actualizar”.
  • Cada cifra es un enlace al listado con el filtro que la explica: “Vencidos” abre el listado con overdue=1, cada barra de estado abre ese estado, y así con todas.
  • Al volver a la pestaña, si los datos tienen más de un minuto, se actualizan solos.
  • En vivo: cuando cambia un incidente, las cifras se refrescan solas, como máximo una vez cada 10 segundos y nunca en modo Personalizar (tiempo real).
  • Estados: esqueleto mientras carga; error con “Reintentar” (del diseño o de las cifras); y un mensaje claro si la persona ocultó todos sus widgets.

Widgets

El diseño original está centrado en el riesgo (ADR-0081): pulso, mapa de riesgo, flujo de estados, balance del backlog, próximos a vencer y, según el permiso, asignados a mí y carga por agente. Los demás se agregan desde “Agregar widget”.

WidgetCómo se ve
Pulso de la operaciónUna frase: “370 vencidos, el 59 % de los pendientes. Hoy se crearon 22 y se resolvieron 12: el backlog sube” (los vencidos llevan al listado). El anillo del cumplimiento del plazo (AppRing) y las cifras del total, los pendientes y la prioridad más alta. En portátil y monitor, todo en una fila; en tablet y celular, uno debajo del otro
Mapa de riesgoTabla de prioridad (de Crítica a Baja) por vencimiento (Vencido, Hoy, 7 días, Después). Cada celda es un enlace al listado filtrado; su color crece con la cantidad frente a la celda más cargada ($risk-levels, riskLevel), con texto negro o blanco según el contraste. Al final, separada por una línea, la columna “Total”: todos los de esa prioridad en cualquier estado
Flujo de estadosLas etapas en orden, unidas por flechas, cada una con su cantidad; aparte, “Salen sin resolverse: Cancelado”. En columna, y en fila cuando el propio widget mide 32rem o más ($flow-row-from, por ancho del widget y no de la pantalla)
Balance del backlogÁrea con los pendientes de cada día (AppAreaChart), con el mismo periodo de la tendencia (7, 30 o 90 días), “Pendientes hoy” y cuánto subieron (rojo) o bajaron (verde)
Total, Pendientes, Vencidos, Sin asignarCifra grande. “Vencidos” va en rojo cuando es mayor que cero y dice qué parte de los pendientes son
Por estadoBarras horizontales con el color de cada estado
Por prioridadDona con el total en el centro y una leyenda con cantidad y porcentaje
Creados vs. resueltosColumnas por día, con 7, 30 o 90 días (AppSegmented) y los totales en texto
Próximos a vencer, Asignados a míLista corta: código, título, prioridad, “Vencido” si aplica y cuándo vence; al final, “Ver los N en el listado”
Carga por agenteBarras con los pendientes de cada persona y cuántos ya vencieron

Los colores salen de los tonos de estados y prioridades (incidentTones.ts). Nada se comunica solo con color: cada valor también va en texto.

Personalizar

Se edita en portátil y monitor con el botón “Personalizar”. En tablet y celular no hay botón: un ícono de información junto al título explica que se personaliza desde un computador, y los widgets siguen el orden elegido allí.

  • Barra fija arriba, con “Agregar widget”, “Restaurar original”, “Cancelar” y “Guardar” (activo solo si hay cambios).
  • Cada widget muestra sus datos reales (sin enlaces activos), con un marco punteado, la agarradera y el menú ⋯ arriba a la derecha, y la manija para cambiar su ancho en la esquina inferior derecha. Mientras se cambia, aparece su medida en columnas.
  • El alto lo pone el contenido: fuera de Personalizar, cada tarjeta mide lo que su gráfico o su lista, con abajo el mismo margen que arriba. Las tarjetas de una misma fila quedan parejas, al alto de la más alta, y la más baja reparte ese alto en vez de dejar un hueco: las barras y las listas separan sus filas, la tendencia estira sus columnas y, en portátil y monitor, la dona crece (hasta 15rem). En las listas, el botón “Ver los N en el listado” queda siempre al pie, a lo ancho y con una flecha. Por eso en Personalizar se cambian el lugar y el ancho, pero no el alto.
  • Topes: la grilla no deja pasar del mínimo ni del máximo de cada widget, los mismos que valida el back.
  • Sin huecos: después de cada cambio, los widgets suben hasta donde no choquen.
  • Teclado: el menú ⋯ ofrece mover arriba, abajo, a la izquierda y a la derecha; más ancho y más angosto; y quitar. Las opciones que chocan con un tope aparecen desactivadas.
  • Agregar widget lista los ocultos con su nombre y qué muestran. El elegido entra al final, con el tamaño que tenía, y un aviso dice dónde quedó.
  • Restaurar original pide confirmación y se aplica de inmediato.
  • Cambios sin guardar: “Cancelar” pide confirmación para descartarlos, y salir de la página también avisa (al cambiar de sección y al cerrar o recargar la pestaña).
  • Ventana angosta: si se achica a tamaño de tablet en pleno modo edición, el borrador se conserva y aparece el aviso para agrandarla.
  • Errores al guardar: cada rechazo del back tiene su mensaje (superposición, tamaño fuera de rango, widget no disponible), visible en la página.

Mientras se personaliza, las cifras siguen al borrador: un widget recién agregado pide sus datos sin esperar a guardar.

Capas

CapaPiezaQué hace
domaindashboard.tsTipos del diseño y de los datos de cada widget; orden de lectura para celular y tablet
domainlayoutEditing.tsReglas puras para mover, estirar, quitar y agregar sin salirse de la grilla ni de los topes, con compactación vertical
infrastructuredashboardApi.ts, mappers.tsLlamadas a la API y traducción de snake_case al modelo
applicationuseDashboardDiseño y cifras de los widgets visibles en una sola consulta, período de la tendencia y actualización al volver a la pestaña
applicationuseDashboardEditorBorrador del modo Personalizar: si hay cambios, guardar, cancelar y restaurar el original
presentationDashboardPage, DashboardGridPágina y grilla en las cuatro vistas
domainrisk.tsRumbo del backlog, intensidad de cada celda del mapa de riesgo y nombres de sus columnas
presentationwidgets/WidgetCard, WidgetContent, PulseWidget, RiskMapWidget, StatusFlowWidget, BacklogWidget, KpiWidget, DigestWidget, TrendWidgetMarco de cada widget y su contenido
presentationedit/EditToolbar, AddWidgetMenu, DashboardEditor, EditableWidgetBarra del modo Personalizar, menú de widgets ocultos, grilla editable (único uso de grid-layout-plus) y marco de cada widget en edición

Para llevar al listado filtrado, el módulo usa incidentListLocation del módulo de incidentes, que traduce el filtro a la URL igual que el propio listado.

Dónde está en el código