feat(analytics): Dashboard v2 con recomendaciones accionables y UX mejorada

- Agregar KPIs con tendencias vs período anterior (↑↓% comparativo)
- Implementar secciones de recomendaciones: Contenido a Crear, CTR 0%,
  Quick Wins, Contenido Estrella, Contenido en Decadencia
- Convertir listados a tablas con columnas separadas para mejor legibilidad
- Agregar botones Editar + Ver en todas las tablas de posts
- Ocultar secciones vacías dinámicamente (Búsquedas Sin Resultados)
- Relajar criterios Quick Wins: pos 2-15, CTR ≥2%, búsquedas ≥2
- Incluir distribución de clicks por posición con barras de progreso
- Agregar exportación a Markdown para análisis con IA

Archivos nuevos:
- admin/class-analytics-dashboard.php (UI del dashboard)
- admin/class-metrics-repository.php (queries de métricas)
- admin/assets/dashboard.css (estilos Bootstrap 5)
- admin/assets/dashboard.js (interactividad y export)
- sql/create-indices.sql (índices para optimización)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-03 20:15:56 -06:00
parent 255d720db6
commit 41fb658ca7
6 changed files with 1821 additions and 2 deletions

138
admin/assets/dashboard.css Normal file
View File

@@ -0,0 +1,138 @@
/**
* ROI APU Search - Analytics Dashboard Styles
*
* @package ROI_APU_Search
* @since 1.2.0
*/
/* =================================================================
WordPress Admin Fixes
================================================================= */
/* Fix: WordPress limita ancho de cards */
body .card {
max-width: none !important;
}
/* Fix: WordPress admin puede afectar tipografia */
.dashboard-analytics-wrap {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Fix: Asegurar que Bootstrap no colisione con WP admin */
.dashboard-analytics-wrap .btn {
text-transform: none;
}
/* Fix: Reset WP admin styles dentro del dashboard */
.dashboard-analytics-wrap h1,
.dashboard-analytics-wrap h2,
.dashboard-analytics-wrap h3,
.dashboard-analytics-wrap h4,
.dashboard-analytics-wrap h5,
.dashboard-analytics-wrap h6 {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* =================================================================
Admin Notice Styles
================================================================= */
.admin-notice {
border-left: 4px solid;
border-radius: 4px;
padding: 1rem;
margin-bottom: 1rem;
}
/* Error - CTR 0% (critico) */
.admin-notice.notice-error {
border-color: #ef4444;
background-color: #fef2f2;
color: #7f1d1d;
}
/* Warning - Posts infraposicionados (oportunidad) */
.admin-notice.notice-warning {
border-color: #f59e0b;
background-color: #fffbeb;
color: #78350f;
}
/* Info - Sin resultados */
.admin-notice.notice-info {
border-color: #0284c7;
background-color: #e7f3ff;
color: #0c4a6e;
}
/* Success - Feedback export */
.admin-notice.notice-success {
border-color: #22c55e;
background-color: #f0fdf4;
color: #166534;
}
/* =================================================================
Loading State
================================================================= */
#loadingState {
display: none;
}
.dashboard-analytics-wrap.is-loading #loadingState {
display: block;
}
.dashboard-analytics-wrap.is-loading #dashboardContent {
display: none;
}
/* =================================================================
KPI Cards - Sin efecto hover
================================================================= */
.dashboard-analytics-wrap .card {
/* Sin transiciones de movimiento */
}
/* =================================================================
Tables
================================================================= */
.dashboard-analytics-wrap .table {
font-size: 0.875rem;
}
.dashboard-analytics-wrap .table th {
font-weight: 600;
white-space: nowrap;
}
/* =================================================================
Export Card
================================================================= */
.export-card {
border: 2px dashed #dee2e6;
transition: border-color 0.2s ease;
}
.export-card:hover {
border-color: #FF8600;
}
/* =================================================================
Responsive
================================================================= */
@media (max-width: 782px) {
.dashboard-analytics-wrap .admin-notice {
padding: 0.75rem;
}
.dashboard-analytics-wrap .card-body {
padding: 0.75rem;
}
}