Dashboard

Descripción

El dashboard de Kangusoft v3 concentra los indicadores operacionales más relevantes para usuarios autorizados. La vista combina tarjetas de aprobaciones pendientes, gráficos comparativos y tarjetas de actividad, cargadas mediante consultas GraphQL optimizadas y renderizadas con AG Charts y componentes PrimeVue.

---

Secciones principales

Tarjetas de aprobaciones pendientes

• Cuatro tarjetas (Órdenes de Compra, Pedidos, Subcontratos, Estados de Pago) que muestran el contador de pendientes correspondiente a cada módulo.
• Cada tarjeta despliega un badge de color según nivel de alerta (verde por defecto) y se utiliza con fines informativos; no posee navegación directa.
• Los datos provienen de la query GET_APROBACIONES_PENDIENTES, filtrada por usuario autenticado.

Gráficos comparativos

• Cuatro gráficos (OC, PED, SC y EPA) que combinan barras y líneas para mostrar cantidad de documentos y montos convertidos a CLP.
• Los montos aplican factores de moneda (UF, USD, EUR) obtenidos desde GET_INDICADORES_ECONOMICOS.
• Para cada gráfico se calculan rangos de 7, 30 y 90 días y se formatean los tooltips con separador de miles chileno.

Tarjetas de actividad

• Componentes de tipo card que muestran últimos pedidos, subcontratos y estados de pago creados.
• Incluye tarjetas de actividad general, todas usando datos obtenidos a través de useDashboard.
• Cada tarjeta ofrece accesos rápidos a la vista de detalle correspondiente.

---

Experiencia de usuario

• Skeleton inteligente: mientras se cargan las queries, se despliega KSkeleton con placeholders configurados para simular la grilla del dashboard.
• Timeout seguro: se establece window.dashboardStartTime para evitar estados de carga infinitos.
• Responsive: se utiliza grid de PrimeVue y Bulma para adaptar la información a distintos tamaños de pantalla.
• Internacionalización: los textos y formatos están en español, incluyendo traducciones de PrimeVue (dayNames, accept, etc.).

---

Datos y consultas

Propósito	Query/Composición
Pendientes por módulo	GET_APROBACIONES_PENDIENTES
Totales por período (OC/PED/SC/EPA)	GET_DOCUMENTOS_POR_FECHA
Indicadores económicos	GET_INDICADORES_ECONOMICOS
Últimas órdenes	GET_ULTIMAS_OC
Últimos pedidos	GET_ULTIMOS_PED
Últimos subcontratos	GET_ULTIMOS_SC
Últimos estados de pago	GET_ULTIMOS_EPA

Todas las consultas se gestionan a través del composable useDashboard, que se encarga de:

• Normalizar montos a CLP aplicando factores por moneda.
• Calcular flujos acumulados para gráficos y tarjetas.
• Sincronizar el estado global de carga (loading) y manejar errores.

---

Consideraciones multimedia

Actualmente no existen gifs actualizados para el dashboard en la carpeta docs/public/gifs-webapp. Si se requiere material visual, se debe capturar un nuevo recorrido que cubra:

• Estado inicial con skeleton.
• Interacción con tarjetas y revisión de los conteos presentados.
• Comparativa de gráficos tras cambiar de rango de fechas (si aplica).

Advertencia: registrar un recordatorio cuando se generen cambios significativos en el dashboard para reemplazar o agregar gifs según corresponda.