📊 KPIs y dashboard personalizado

BLOQUES NATIVOS
- dashtrends: Ventas, pedidos, visitas, tasa de conversion
- dashactivity: Visitantes online, carritos activos, clientes nuevos
- dashproducts: Productos mas vendidos, mas vistos
- dashgoals: Objetivos mensuales configurables

CONFIGURACION
- Periodo: Hoy, ayer, esta semana, este mes, este año
- Comparacion con periodo anterior
- Cada modulo de dashboard tiene su propia configuracion
- Los datos se calculan via AJAX para no bloquear la carga

INTERFAZ
- Zona superior: KPIs numericos en fila (tarjetas)
- Zona central: Graficas de tendencia
- Zona inferior: Tablas de datos (productos, ultimos pedidos)
- Todo drag & drop y redimensionable

<?php

// ── Hooks necesarios ──
public function install(): bool
{
    return parent::install()
        && $this->registerHook('dashboardZoneTwo')  // Zona de graficas
        && $this->registerHook('dashboardData')     // Datos AJAX
        && $this->registerHook('actionAdminControllerSetMedia');
}

// ── Renderizar bloque HTML ──
public function hookDashboardZoneTwo(): string
{
    return $this->display(__FILE__, 'dashboard-block.tpl');
}

// ── Devolver datos via AJAX ──
public function hookDashboardData(array $params): array
{
    $dateFrom = $params['date_from'];
    $dateTo   = $params['date_to'];

    // Calcular KPIs del periodo
    $revenue = $this->getRevenue($dateFrom, $dateTo);
    $orders  = $this->getOrderCount($dateFrom, $dateTo);
    $aov     = $orders > 0 ? $revenue / $orders : 0;

    return [
        'data_value' => [
            'mymodule_revenue' => Tools::displayPrice($revenue),
            'mymodule_orders'  => (int) $orders,
            'mymodule_aov'     => Tools::displayPrice($aov),
        ],
        'data_chart' => [
            'mymodule_chart' => $this->getChartData($dateFrom, $dateTo),
        ],
    ];
}

private function getChartData(string $from, string $to): array
{
    // Datos para Chart.js
    $rows = Db::getInstance()->executeS(
        'SELECT DATE(date_add) AS day, SUM(total_paid_tax_incl) AS total
         FROM `' . _DB_PREFIX_ . "orders`
         WHERE date_add BETWEEN '" . pSQL($from) . "' AND '" . pSQL($to) . "'
           AND valid = 1
         GROUP BY DATE(date_add)
         ORDER BY day ASC"
    );

    return [
        'labels' => array_column($rows, 'day'),
        'data'   => array_map('floatval', array_column($rows, 'total')),
    ];
}

<!-- dashboard-block.tpl -->
<section class="panel" id="mymodule-dashboard">
  <header class="panel-heading">
    <i class="icon-bar-chart"></i> Ventas por dia
  </header>
  <div class="panel-body">
    <canvas id="mymodule-chart" height="200"></canvas>
  </div>
</section>

<script>
// El JS se carga via hookActionAdminControllerSetMedia
// En el JS del modulo:
document.addEventListener('DOMContentLoaded', function() {
    // PS Dashboard llama a hookDashboardData via AJAX
    // Los datos llegan en el callback global
    window.dashboardUpdateCallback = function(data) {
        if (data.data_chart && data.data_chart.mymodule_chart) {
            var chartData = data.data_chart.mymodule_chart;
            new Chart(document.getElementById('mymodule-chart'), {
                type: 'line',
                data: {
                    labels: chartData.labels,
                    datasets: [{
                        label: 'Ventas',
                        data: chartData.data,
                        borderColor: '#25b9d7',
                        tension: 0.3,
                        fill: true
                    }]
                }
            });
        }
    };
});
</script>