# Tablero Ejecutivo de Control de Obras

**URL:** <https://bc.finneg.com/t/tablero-ejecutivo-de-control-de-obras/6721>\
**Category:** Prompts Finni Dashboard\
**Tags:** soluciones\
**Created:** [21 Abril, 2026 14:09 UTC](https://bc.finneg.com/t/tablero-ejecutivo-de-control-de-obras/6721 "2026-04-21T14:09:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sabrina\_Gomez](https://bc.finneg.com/user_avatar/bc.finneg.com/sabrina_gomez/32/19158_2.png) [@Sabrina\_Gomez](https://bc.finneg.com/u/Sabrina_Gomez)\
**Post date:** [21 Abril, 2026 14:09 UTC](https://bc.finneg.com/t/tablero-ejecutivo-de-control-de-obras/6721/1 "2026-04-21T14:09:39Z")

</div>

## **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**

```auto
--- 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](https://bc.finneg.com/uploads/default/original/3X/b/e/be6c50d1919e9058be02dce958d70136c25da39f.png)

 ![image](https://bc.finneg.com/uploads/default/original/3X/2/c/2c2491cb56c64e96fd61ae7b3b291be87abf18ed.png)

 ![image](https://bc.finneg.com/uploads/default/original/3X/d/0/d0bd833fedbbb3c7b7c79919db0dc2be56e15ead.png)

**Filtros:**

 ![image](https://bc.finneg.com/uploads/default/original/3X/c/a/cae2ffda53beaf7c13330bb067e531e47c5a9229.png)

- 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 | ✅ |
| `fecha` | certificado\_de\_avance\_de\_obra | Date | ✅ |
| `bruto` | certificado\_de\_avance\_de\_obra | Numeric | ✅ |
| `total` | certificado\_de\_avance\_de\_obra | Numeric | ✅ |
| `empresanombre` | contrato\_de\_venta\_de\_obra | Text | ✅ |
| `bruto` | contrato\_de\_venta\_de\_obra | Numeric | ✅ |
| `total` | contrato\_de\_venta\_de\_obra | Numeric | ✅ |
| `moneda` | contrato\_de\_venta\_de\_obra | Text | ✅ |
| `importemonedaprincipal` | facturas\_de\_venta | Numeric | ✅ |
| `importemonedasecundaria` | facturas\_de\_venta | Numeric | ✅ |
| `fechacomprobante` | facturas\_de\_venta | Date | ✅ |
| `importedebe` / `importehaber` | asientoscontables | Numeric | ✅ |
| `centrodecostonombre` | asientoscontables | Text | ✅ |

### **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**

### **❌ 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

* * *

### **❌ 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

* * *

### **❌ 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)

* * *

### **❌ 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

* * *

### **❌ 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

* * *

### **⚠ 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 ✅