From e92d2018b17bca8aba4a299649396e13544c09ec Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Wed, 3 Dec 2025 21:57:49 -0600
Subject: [PATCH] =?UTF-8?q?style(analytics):=20Convertir=20Distribuci?=
 =?UTF-8?q?=C3=B3n=20de=20Clicks=20a=20tabla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convertir visualización de barras de progreso a tabla estructurada
- Columnas: Posición, Clicks (badge), Porcentaje, Distribución (barra)
- Agregar badge con total de clicks en header
- Expandir colores para posiciones 1-10 individuales

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 admin/class-analytics-dashboard.php | 81 +++++++++++++++++++----------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/admin/class-analytics-dashboard.php b/admin/class-analytics-dashboard.php
index ae94693..4ca19a2 100644
--- a/admin/class-analytics-dashboard.php
+++ b/admin/class-analytics-dashboard.php
@@ -606,40 +606,65 @@ final class ROI_APU_Analytics_Dashboard
                     <!-- 📊 Click Distribution -->
                     <?php if (!empty($click_distribution)) : ?>
                     <div class="card mb-4 shadow-sm">
-                        <div class="card-header" style="background-color: #0E2337; color: white;">
+                        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #0E2337; color: white;">
                             <h6 class="mb-0 d-flex align-items-center gap-2">
                                 <i class="bi bi-bar-chart-fill"></i>
                                 <?php esc_html_e('Distribución de Clicks por Posición', 'roi-apu-search'); ?>
                             </h6>
+                            <span class="badge bg-light text-dark"><?php echo esc_html(array_sum(array_column($click_distribution, 'clicks'))); ?> <?php esc_html_e('clicks totales', 'roi-apu-search'); ?></span>
                         </div>
-                        <div class="card-body">
-                            <?php
-                            $position_colors = [
-                                'Pos 1' => '#FF8600',
-                                'Pos 2' => '#1e3a5f',
-                                'Pos 3' => '#2c5282',
-                                'Pos 4' => '#3d6894',
-                                'Pos 5' => '#0E2337',
-                                'Pos 6+' => '#6b7280',
-                            ];
-                            foreach ($click_distribution as $dist) :
-                                $color = $position_colors[$dist['posicion']] ?? '#6b7280';
-                            ?>
-                            <div class="mb-2">
-                                <div class="d-flex justify-content-between mb-1">
-                                    <small><strong><?php echo esc_html($dist['posicion']); ?></strong></small>
-                                    <small><?php echo esc_html($dist['clicks']); ?> clicks (<?php echo esc_html($dist['porcentaje']); ?>%)</small>
-                                </div>
-                                <div class="progress" style="height: 20px;">
-                                    <div class="progress-bar" role="progressbar"
-                                         style="width: <?php echo esc_attr($dist['porcentaje']); ?>%; background-color: <?php echo esc_attr($color); ?>;"
-                                         aria-valuenow="<?php echo esc_attr($dist['porcentaje']); ?>"
-                                         aria-valuemin="0"
-                                         aria-valuemax="100">
-                                    </div>
-                                </div>
+                        <div class="card-body p-0">
+                            <div class="table-responsive">
+                                <table class="table table-striped table-hover mb-0">
+                                    <thead class="table-light">
+                                        <tr>
+                                            <th style="width: 15%;"><?php esc_html_e('Posición', 'roi-apu-search'); ?></th>
+                                            <th class="text-center" style="width: 20%;"><?php esc_html_e('Clicks', 'roi-apu-search'); ?></th>
+                                            <th class="text-center" style="width: 15%;"><?php esc_html_e('Porcentaje', 'roi-apu-search'); ?></th>
+                                            <th style="width: 50%;"><?php esc_html_e('Distribución', 'roi-apu-search'); ?></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <?php
+                                        $position_colors = [
+                                            'Pos 1' => '#FF8600',
+                                            'Pos 2' => '#1e3a5f',
+                                            'Pos 3' => '#2c5282',
+                                            'Pos 4' => '#3d6894',
+                                            'Pos 5' => '#4a7eb0',
+                                            'Pos 6' => '#5a8ec0',
+                                            'Pos 7' => '#6a9ed0',
+                                            'Pos 8' => '#7aaee0',
+                                            'Pos 9' => '#8abef0',
+                                            'Pos 10' => '#9aceff',
+                                            'Pos 11+' => '#6b7280',
+                                        ];
+                                        foreach ($click_distribution as $dist) :
+                                            $color = $position_colors[$dist['posicion']] ?? '#6b7280';
+                                        ?>
+                                        <tr>
+                                            <td><strong><?php echo esc_html($dist['posicion']); ?></strong></td>
+                                            <td class="text-center">
+                                                <span class="badge" style="background-color: <?php echo esc_attr($color); ?>;">
+                                                    <?php echo esc_html(number_format((int)$dist['clicks'])); ?>
+                                                </span>
+                                            </td>
+                                            <td class="text-center"><?php echo esc_html($dist['porcentaje']); ?>%</td>
+                                            <td>
+                                                <div class="progress" style="height: 18px;">
+                                                    <div class="progress-bar" role="progressbar"
+                                                         style="width: <?php echo esc_attr($dist['porcentaje']); ?>%; background-color: <?php echo esc_attr($color); ?>;"
+                                                         aria-valuenow="<?php echo esc_attr($dist['porcentaje']); ?>"
+                                                         aria-valuemin="0"
+                                                         aria-valuemax="100">
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <?php endforeach; ?>
+                                    </tbody>
+                                </table>
                             </div>
-                            <?php endforeach; ?>
                         </div>
                     </div>
                     <?php endif; ?>