feat: heleo#

public/admin.html

@@ -126,8 +126,14 @@
                 <p class="label">Total Clicks</p>
             </div>
 
+            <!-- Chart -->
+            <div class="chart-container"
+                style="background: white; padding: 1.5rem; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); grid-column: 1 / -1;">
+                <canvas id="activityChart"></canvas>
+            </div>
+
             <!-- Logs -->
-            <div class="recent-activity">
+            <div class="recent-activity" style="grid-column: 1 / -1;">
                 <div class="activity-header">Recent Activity</div>
                 <div id="logs-container">
                     <p style="text-align: center; color: #999;">Waiting for data...</p>
@@ -136,11 +142,13 @@
         </main>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>
         const socket = io();
         const logsContainer = document.getElementById('logs-container');
         const adminCount = document.getElementById('admin-count');
+        let chartInstance = null;
 
         socket.on('connect', () => {
             socket.emit('join_admin');
@@ -152,12 +160,72 @@
 
         socket.on('admin_data', (data) => {
             renderLogs(data.logs);
+            renderChart(data.stats);
         });
 
         socket.on('new_log', (log) => {
             prependLog(log);
+            // Optionally update chart in real-time or just let it refresh on reload/reconnect
+            // For simplicity, we won't real-time update the chart bars individually right now
         });
 
+        function renderChart(stats) {
+            const ctx = document.getElementById('activityChart').getContext('2d');
+
+            // Process stats for Chart.js
+            // Fill in missing hours for the last 24h if you wanted to be fancy, but let's just show what we have
+            const labels = stats.map(s => {
+                const date = new Date(); // roughly based on server time but local rendering
+                // Actually server sends %H:00 string like "14:00"
+                return s.hour;
+            });
+            const dataPoints = stats.map(s => s.count);
+
+            if (chartInstance) {
+                chartInstance.destroy();
+            }
+
+            chartInstance = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Clicks per Hour',
+                        data: dataPoints,
+                        backgroundColor: 'rgba(255, 107, 107, 0.5)',
+                        borderColor: 'rgba(255, 107, 107, 1)',
+                        borderWidth: 1,
+                        borderRadius: 4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                precision: 0
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        title: {
+                            display: true,
+                            text: 'Activity (Last 24 Hours)',
+                            font: {
+                                size: 16,
+                                family: 'Outfit'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
         function renderLogs(logs) {
             logsContainer.innerHTML = '';
             logs.forEach(log => {