Tablero Ejecutivo de Control de Obras

Constructoras Prompts Finni Dashboard
1

Información General

Campo Detalle
Módulo Finnegans Construcción / Proyectos / Control de Obras
Nivel de Dificultad Avanzado
Versión Compatibilidad v2024 o superior
Autor/Responsable Sabrina AF Producto

1. Objetivo del Tablero

Proporciona una visualización integral del desempeño de obras en ejecución, permitiendo a gestores y directores monitorear en tiempo real:

  • Avance físico real vs. planificado por obra

  • Indicadores de rentabilidad (CPI/SPI) con semáforo de estados

  • Flujo financiero (certificado vs. cobrado) y facturación por obra

  • Desvíos presupuestarios con alertas automáticas

Resuelve la necesidad de tomar decisiones rápidas sobre reasignación de recursos y ajustes presupuestarios.

2. Datasets requeridos:

Tabla Campo Clave Uso
certificado_de_avance_de_obra obranombre, fecha, bruto, total Avance físico real
contrato_de_venta_de_obra empresanombre, bruto, total, moneda Planificación y presupuesto
facturas_de_venta fechacomprobante, importemonedaprincipal, importemonedasecundaria Flujo de facturación
asientoscontables importedebe, importehaber, centrodecostonombre Costos reales (para CPI)
partes_de_trabajo_de_maquina fecha, empresanombre Actividad por obra

3. El Prompt

Copiar

--- PROMPT TABLERO EJECUTIVO DE CONTROL DE OBRAS ---

Actúa como un Desarrollador Frontend Senior. Tu objetivo es escribir un archivo HTML único (Single Page Application) que replique exactamente un "Tablero Ejecutivo de Control de Obras" basado en los siguientes requisitos técnicos y visuales:1. Tecnologías Requeridas:HTML5, CSS3 puro (sin librerías externas de diseño como Bootstrap) y JavaScript vanilla (ES6+).Gráficos: Utiliza la librería Chart.js desde CDN.Fuentes: Utiliza 'Roboto' desde Google Fonts.2. Diseño y Estilo Visual (UI):Paleta de Colores: Fondo blanco (#ffffff), bordes grises (#CDCFD5), azul principal (#3985ff), verde éxito (#008584), alerta naranja (#fd8100) y crítico rojo (#ff3f01).Estructura:Header: Fondo azul muy claro (#E6F2F8), título a la izquierda y un botón azul a la derecha llamado "!!! Parámetros > Seleccione obras".KPI Cards: Una fila de 5 tarjetas superiores (Obras Analizadas, Avance Promedio, En Término, Alerta, Críticas). Cada una con un borde izquierdo grueso del color correspondiente a su estado.Dashboard Body: Un sistema de rejilla (Grid) con:Gráfico de barras agrupadas (Físico Real vs Planificado).Panel lateral "Detalle por Obra" con barras de progreso horizontales y badges de desvío porcentual (+/-).Tabla inferior "Estado de Obras" con columnas: OBRA, AVANCE FÍSICO (mini barra), CPI, SPI y ESTADO (con badges de colores).Sección "Flujo Financiero" con dos gráficos: uno de líneas con áreas para Certificado/Cobrado y un gráfico de barras horizontales apiladas para Facturación por Obra.3. Lógica de Parámetros (Interactividad):Modal de Filtros: Crea un modal que se abra al pulsar el botón del header. Debe contener un buscador/lista de "Obra" con checkboxes y una opción de "Seleccionar todas".Estado Vacío: Si no hay obras seleccionadas, el dashboard debe ocultarse y mostrar un mensaje central: "Seleccione al menos una obra".Formateo de Datos: Implementa una función formatearNumero que convierta valores grandes en formato abreviado (K, M, B) para los ejes de los gráficos financieros.4. Simulación de Datos (Mock Data):Crea un array de objetos con datos de ejemplo para al menos 5 obras (ej: "FEDERACION CABALLITO", "MIGUEL ANGEL PAPA S.R.L.") que incluya: avance_fisico_real, avance_planificado, cpi, spi, estado_obra, presupuesto_total.Asegúrate de que los gráficos se actualicen dinámicamente al "Aplicar" los filtros del modal.5. Requisito Crítico de Comportamiento:Los índices CPI y SPI deben pintarse de verde si son ≥ 1.0, naranja si son ≥ 0.9 y rojo si son menores.El gráfico de flujo financiero debe usar tension: 0.4 en las líneas para que se vean curvas suaves, tal como en el diseño original.¿Por qué este prompt funciona?Define la jerarquía: No solo pide "un tablero", describe la posición de cada elemento (Header -> KPIs -> Gráficos -> Tablas).Especifica la lógica de negocio: Incluye las reglas de colores para CPI/SPI y el comportamiento de los desvíos.Copia la interactividad: Detalla el funcionamiento del modal de parámetros y el checkbox de "Seleccionar todas".Detalles visuales: Menciona los colores exactos y las sombras/bordes para que el resultado sea visualmente "clonado".

4. Guía Visual y Resultado

image
image1264×442 34.8 KB

image
image1229×371 29.2 KB

image
image1232×293 25.3 KB

Filtros:

image
image792×403 36.5 KB

  • Buscador de obras

  • Checkboxes con scroll

  • Botón “Seleccionar todas”

  • Botones “Aplicar” y “Cancelar”

5. Requisitos de Datos

Entidades Necesarias:

  • Certificado de Avance de Obra (tabla: certificado_de_avance_de_obra)

  • Contrato de Venta de Obra (tabla: contrato_de_venta_de_obra)

  • Facturas de Venta (tabla: facturas_de_venta)

  • Partes de Trabajo de Máquina (tabla: partes_de_trabajo_de_maquina)

  • Asientos Contables (tabla: asientoscontables) - para costos reales

Campos Específicos Requeridos:

Campo Tabla Tipo Obligatorio
obranombre certificado_de_avance_de_obra Text :white_check_mark:
fecha certificado_de_avance_de_obra Date :white_check_mark:
bruto certificado_de_avance_de_obra Numeric :white_check_mark:
total certificado_de_avance_de_obra Numeric :white_check_mark:
empresanombre contrato_de_venta_de_obra Text :white_check_mark:
bruto contrato_de_venta_de_obra Numeric :white_check_mark:
total contrato_de_venta_de_obra Numeric :white_check_mark:
moneda contrato_de_venta_de_obra Text :white_check_mark:
importemonedaprincipal facturas_de_venta Numeric :white_check_mark:
importemonedasecundaria facturas_de_venta Numeric :white_check_mark:
fechacomprobante facturas_de_venta Date :white_check_mark:
importedebe / importehaber asientoscontables Numeric :white_check_mark:
centrodecostonombre asientoscontables Text :white_check_mark:

Campos Personalizados (UDFs):

  • costo_real_acumulado (si existe, sino calcular desde asientos contables)

  • estado_obra (custom field recomendado: “En Término” / “Alerta” / “Crítica”)

6. Tips de Personalización

Elemento Cómo Modificar
Moneda Cambiar @Moneda en el filtro principal. El sistema recalculará automáticamente divisiones en USD si existe cotizacion
Período por defecto Modificar @FechaInicio y @FechaFin en el prompt (ej: últimos 12 meses)
Umbral CPI/SPI En JavaScript, editar los valores >= 1.0, >= 0.9 en la función obtenerColorEstado()
Colores de semáforo Reemplazar en CSS: #008584 (verde), #fd8100 (naranja), #ff3f01 (rojo)
Gráficos adicionales Agregar nuevos endpoints y chart.js configs sin modificar el HTML base
Precisión de decimales Función formatearNumero(): cambiar .toFixed(2) por .toFixed(1) o .toFixed(3)
Agrupar obras por cliente Agregar columna cliente en query y crear agrupador visual en el modal

6. Solución de Problemas Comunes

:cross_mark: El dashboard no muestra datos

Causa probable: Falta de permisos o tablas sin datos en el período seleccionado

Solución:

  1. Verificar permisos del usuario en módulo “Construcción” y “Proyectos”

  2. Confirmar que existen certificados de avance en el rango de fechas seleccionado

  3. Revisar que obranombre no esté vacío en la tabla certificado_de_avance_de_obra

  4. Ejecutar query de validación: SELECT COUNT(*) FROM certificado_de@Fecha@FechaInicionicio@FechaFinvanc@FechaFin_de_obra WHERE fecha BETWEEN @FechaInicio AND @FechaFin

:cross_mark: Los KPIs muestran “0” o valores incorrectos

Causa probable: Cálculo de CPI/SPI con divisores nulos

Solución:

  1. Validar que costo_real no sea NULL: SELECT COUNT(*) FROM asientoscontables WHERE importedebe IS NOT NULL AND centrodecostonombre IS NOT NULL

  2. Si no existen costos reales, usar contrato_total como fallback en la fórmula

  3. Agregar validación en JavaScript: if (costoReal === 0) return 0 antes de dividir

:cross_mark: Error de sintaxis al copiar el prompt

Solución:

  1. Asegurarse de no haber eliminado comas entre parámetros

  2. Verificar que las comillas sean rectas (") no curvas (")

  3. No incluir saltos de línea dentro de valores de texto

  4. Copiar desde un editor de texto plano (Notepad, no Word)

:cross_mark: Los gráficos se ven cortados o deformados

Causa probable: Dimensiones CSS incorrectas o contenedor sin altura definida

Solución:

  1. Verificar que .chart-container tenga height: 400px definido

  2. No usar height: auto en contenedores de gráficos

  3. Agregar overflow: hidden al contenedor

  4. En Chart.js, usar maintainAspectRatio: false en opciones

:cross_mark: El modal de filtros no se abre

Causa probable: Evento onclick no vinculado o JavaScript deshabilitado

Solución:

  1. Abrir consola (F12) y verificar que no haya errores JavaScript

  2. Confirmar que el botón tenga onclick="abrirModalFiltros()"

  3. Verificar que el modal tenga id="modalFiltros" exacto

  4. Revisar que display: none se cambie a display: flex en JavaScript

:warning: Rendimiento lento con muchas obras (>100)

Optimizaciones recomendadas:

  1. Implementar paginación en la tabla de Estado de Obras (máx 20 filas por página)

  2. Agregar debounce al buscador del modal (esperar 300ms antes de filtrar)

  3. Usar chart.destroy() antes de recrear gráficos para liberar memoria

  4. Limitar datos a últimos 24 meses en lugar de histórico completo

Versión del Documento: 1.0
Última Actualización: 2026-04-21
Estado: Listo para Producción :white_check_mark: