Si llevas el control de ingresos y gastos en un Excel o CSV, tienes un problema típico: los datos están, pero las decisiones llegan tarde. En este post te enseño a montar un dashboard financiero moderno en modo oscuro, en una sola página y sin servidores: subes un CSV y el panel calcula métricas, insights y hasta un simulador de escenarios en el navegador.
En el vídeo del post lo hago paso a paso (desde la estructura del CSV hasta cómo se pintan las gráficas), para que puedas replicarlo tal cual y adaptarlo a tu negocio.
Qué vas a conseguir con este dashboard
Con un archivo index.html tendrás:
- Carga de CSV desde un botón “Subir CSV”.
- Cálculo automático de:
- Ingresos totales
- Gastos totales
- Beneficio neto
- Margen de beneficio (%)
- Bloque de “AI Insights” (resumen ejecutivo):
- Mejor mes por beneficio (mes + cantidad)
- Categoría más rentable
- ROI aproximado (en “x veces”)
- Simulador de escenarios:
- Slider de crecimiento de ingresos (%)
- Slider de ajuste de gasto (%)
Todo 100% cliente (nada de backend), con:
- Tailwind CSS por CDN para el estilo
- Chart.js por CDN para gráficas
- PapaParse por CDN para leer el CSV
Formato del CSV (importante)
El archivo debe incluir estas columnas (exactamente con estos nombres):
fechatipocategoríaimporte
Ejemplo rápido (formato orientativo):
- fecha:
2025-01-15 - tipo:
ingreso/gasto - categoría:
ventas/ads/proveedores… - importe: número (mejor con punto decimal, sin símbolo €)
Si tus datos vienen con comas decimales o símbolos, en el vídeo te muestro cómo lo soluciono para que el cálculo no falle.
Prompt usado en Antigravity (cópialo tal cual)
Aquí tienes el prompt exacto que he usado para generar el panel:
Quiero que generes un panel financiero de una sola página en un único archivo HTML.
Objetivo:
Subir un csv con las columnas fecha, tipo, categoría, importe.
Calcula métricas clave del negocio y mostrarlas en un dashboard mederno en modo oscuro.
Requisitos técnicos:
Todo debe ir en un solo archivo "index.html"
Usa Tailwind CSS desde CDN para los estilos
Usa Chart.js dede CDN para las gráficas.
Usa Papaparse o similar desde CDN para leer el CSV en el navegador.
Todo el procesamiento debe hacerse en el lado del cliente. Nada de servidores.
Estructura del panel:
1)Cabecera
Título "Panel Financiero IA
Subtítulo tip Business Intelligence Dashboard
Un botón destadaco "Subir CSV" con un pequeño glow o efecto de foco.
Texto explicando que el archivo debe tener las columnas fecha tipo categoría, importe
2) Métricas principales (tarjetas en fila):
Ingresos totales
Gastos totales.
Beneficios neto (Ingreso-Gastos)
Margen de beneficio en porcentaje.
3) Bloque "Al insights" con tarjetas:
Mejor mes por beneficio (nombre de mes + cantidad).
Catgoría más rentable
Un indicador de ROI aproximado ( por ejemplo "X.x veces")
4) Simulador de escenarios
Un slider para "Crecimiento de ingresos (%)"
Un slider para "Ajuste de gasto %
Todo el interfaz debe ser en ESPAÑOL
Qué aprenderás en el vídeo (resumen del paso a paso)
- Cómo preparar el CSV para que el dashboard lo interprete bien.
- Cómo se procesa el archivo con PapaParse en el navegador.
- Cómo se calculan métricas y se actualizan tarjetas en tiempo real.
- Cómo se construyen las gráficas con Chart.js (sin romper el diseño oscuro).
- Cómo funciona el simulador: aplicar variaciones y recalcular beneficios/margen al vuelo.
Por qué esto es útil de verdad (más allá de “queda bonito”)
- Te obliga a tener un estándar de datos (CSV limpio = control real).
- Convierte números en lectura ejecutiva: métricas + insights + escenarios.
- Es portable: un solo
index.html, lo abres en cualquier equipo. - No dependes de herramientas cerradas: lo puedes ampliar con:
- Comparativas YoY/MoM
- Predicción simple por medias móviles
- Segmentación por categoría/tipo
- Exportación de resumen en PDF
Juande Marín
Profesor de Marketing digital, divulgador de inteligencia artificial y neuroeducación. Especializado en posicionamiento en buscadores y diseño web. Autor de varios libros relacionados con el comercio electrónico y el marketing digital (McGraw Hill, Paraninfo,…) Juande2marin
