| name | reportes-ggs |
| description | Crear reportes HTML, dashboards, informes ejecutivos y métricas visuales para portales internos de GGSoluciones. Define estructura, estilos, componentes y estándares visuales. Usar cuando el usuario diga "reporte", "dashboard", "informe", "métricas", "exportar".
|
Reportes GGSoluciones - Estándar para Informes y Dashboards
Este skill establece el estándar visual y funcional para todos los reportes, dashboards e informes en portales internos de GGSoluciones.
Cuándo usar este skill
- Usuario dice: "crear reporte", "dashboard", "informe", "métricas", "exportar a PDF/Excel"
- Necesitás mostrar datos tabulares con gráficos o métricas visuales
- Crear informe ejecutivo o presentación de datos
Reglas transversales obligatorias
ANTES de crear cualquier reporte, LEER:
reglas/diseno-reportes-ggs — Estilo visual canónicoequipo/datos/bi-reporting — Agente de BIequipo/diseno/ui — Agente de UI
INYECTAR SIEMPRE:
equipo/datos/bi-reportingequipo/diseno/uireglas/css-arquitecturareglas/diseno-reportes-ggs
Logo obligatorio
{URL_LOGO_EMPRESA}
Usar siempre: En headers, footers, y cualquier elemento visual que represente la marca.
Base visual canónica
{RUTA_REFERENCIA_VISUAL}
Referencia obligatoria: Ese archivo define el estilo canónico de reportes GGSoluciones.
Estructura de un reporte
<header class="report-header">
<div class="report-title">
<img src="LOGO_GGS" alt="GGSoluciones" class="report-logo" />
<h1>Nombre del Reporte</h1>
<span class="report-subtitle">Período: Mayo 2026</span>
</div>
<div class="report-meta">
<span class="report-date">Generado: 09/05/2026</span>
<span class="report-user">Usuario: Alejandro Gallardo</span>
</div>
</header>
<section class="report-kpis">
<div class="kpi-card">
<span class="kpi-label">Ventas Totales</span>
<span class="kpi-value">$12.5M</span>
<span class="kpi-delta positive">+15% vs mes anterior</span>
</div>
</section>
<section class="report-table">
<table>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th class="text-right">Monto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td class="text-right">$1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td class="text-right">$10,000</td>
</tr>
</tfoot>
</table>
</section>
<section class="report-chart">
</section>
<footer class="report-footer">
<span>Reporte generado automáticamente</span>
<span>GGSoluciones - Todos los derechos reservados</span>
</footer>
Componentes de reporte
KPI Card
<div class="kpi-card">
<span class="kpi-label">Label descriptiva</span>
<span class="kpi-value">$12,500,000</span>
<span class="kpi-delta positive">+15%</span>
<span class="kpi-period">vs abril 2026</span>
</div>
.kpi-card {
background: var(--ec-surface);
border: 1px solid var(--ec-border);
border-radius: var(--ec-radius-lg);
padding: var(--ec-space-5);
display: flex;
flex-direction: column;
gap: var(--ec-space-2);
}
.kpi-label {
font-size: 13px;
font-weight: 600;
color: var(--ec-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.kpi-value {
font-size: 32px;
font-weight: 800;
color: var(--ec-text-primary);
}
.kpi-delta {
font-size: 14px;
font-weight: 700;
}
.kpi-delta.positive { color: var(--ec-success); }
.kpi-delta.negative { color: var(--ec-error); }
Tabla de reporte
.report-table table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.report-table th {
background: var(--ec-bg-tertiary);
padding: var(--ec-space-3) var(--ec-space-4);
text-align: left;
font-weight: 700;
color: var(--ec-text-secondary);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.05em;
border-bottom: 2px solid var(--ec-border);
}
.report-table td {
padding: var(--ec-space-3) var(--ec-space-4);
border-bottom: 1px solid var(--ec-border);
color: var(--ec-text-primary);
}
.report-table tr:hover {
background: var(--ec-bg-tertiary);
}
.report-table .text-right {
text-align: right;
font-variant-numeric: tabular-nums;
}
{
: ;
: (--ec-bg-tertiary);
: solid (--ec-border);
}
Tipos de reportes
1. Reporte tabular simple
- Tabla con datos
- Posibles filtros (fecha, categoría)
- Paginación si hay muchos registros
- Exportar a Excel
2. Dashboard ejecutivo
- KPI cards en grid (2-4 columnas)
- Gráficos principales (línea, barra, donut)
- Tabla resumen con links a detalle
- Período seleccionable
3. Informe ejecutivo (PDF)
- Portada con logo y título
- Resumen ejecutivo (textos y KPIs)
- Gráficos con análisis
- Detalle en tablas
- Footer con fecha y usuario
4. Reporte comparativo
- Múltiples columnas (períodos)
- Columnas con variación %
- Gráfico comparativo
- Highlight de cambios significativos
Colores para gráficos
Usar esta paleta para gráficos (evitar colores default):
:root {
--chart-1: #d30027;
--chart-2: #3b82f6;
--chart-3: #10b981;
--chart-4: #f59e0b;
--chart-5: #8b5cf6;
--chart-6: #06b6d4;
--chart-7: #eggs899;
--chart-8: #6366f1;
}
Funcionalidades obligatorias
| Función | Descripción |
|---|
| Filtros | Por fecha, categoría, status. Aplicar y reset |
| Export | PDF y Excel mínimo |
| Ordenar | Click en headers de tabla |
| Paginación | Si > 20 registros |
| Responsivo | Ver en móvil |
| Loading state | Mientras cargan datos |
| Error state | Si falla la consulta |
Errores permitidos vs NO permitidos
PERMITIDO:
- "No se encontraron datos para el período seleccionado"
- "Error al cargar el reporte. Intenta nuevamente."
NO PERMITIDO:
- Stack traces
- Errores de base de datos
- Nombres de tablas/campos internos
- Tokens o credentials
Export a PDF
Recomendación: usar librería de servidor o cliente:
- Servidor: Puppeteer, Playwright, or WeasyPrint
- Cliente: html2pdf.js, jspdf
El PDF debe mantener el estilo visual (colores, tipografía, logo).
Export a Excel
Usar librería como:
- Backend: ClosedXML (C#), xlsx (Node)
- Frontend: SheetJS, ExcelJS
Incluir:
- Headers con formato
- Totales en footer
- Nombre de hoja descriptivo
Checklist de entrega
