feat: add advanced device and referral analytics charts

src/resources/views/ecommerce.blade.php

@@ -6,6 +6,7 @@
     <title>E-Commerce Dashboard - Stargas</title>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     
     <style>
         body { background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 30%, #0d0d0d 60%, #0a0a0a 100%); min-height: 100vh; font-family: 'Inter', sans-serif; }
@@ -193,6 +194,37 @@
             </div>
 
         </div>
+
+        <!-- Advanced Analytics Charts Row -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+            <!-- Device Breakthrough -->
+            <div class="glass rounded-2xl p-5 flex flex-col items-center">
+                <div class="w-full flex items-center justify-between mb-4">
+                    <h3 class="font-bold text-white tracking-tight flex items-center gap-2">
+                        <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
+                        Device Breakdown
+                    </h3>
+                </div>
+                <div class="relative w-full max-w-[300px] aspect-square">
+                    <canvas id="deviceChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Top Referral Sources -->
+            <div class="glass rounded-2xl p-5 flex flex-col items-center">
+                <div class="w-full flex items-center justify-between mb-4">
+                    <h3 class="font-bold text-white tracking-tight flex items-center gap-2">
+                        <svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
+                        Top Referral Sources
+                    </h3>
+                </div>
+                <div class="relative w-full h-[300px]">
+                    <canvas id="sourceChart"></canvas>
+                </div>
+            </div>
+
+        </div>
     </main>
 
     <!-- JS Logic -->
@@ -352,11 +384,80 @@ function getStatusBadge(status) {
             } catch(e) { console.error(e); }
         }
 
+        let deviceChartInstance = null;
+        let sourceChartInstance = null;
+
+        // Custom darker Chart JS defaults for dark UI
+        Chart.defaults.color = '#94a3b8';
+        Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.05)';
+        Chart.defaults.font.family = "'Inter', sans-serif";
+
+        async function loadAnalytics() {
+            try {
+                const data = await fetchJson('/api/ecommerce/analytics');
+                
+                // Device Doughnut
+                const ctxDevice = document.getElementById('deviceChart').getContext('2d');
+                if (deviceChartInstance) deviceChartInstance.destroy();
+                deviceChartInstance = new Chart(ctxDevice, {
+                    type: 'doughnut',
+                    data: {
+                        labels: data.devices.labels,
+                        datasets: [{
+                            data: data.devices.values,
+                            backgroundColor: ['#3b82f6', '#8b5cf6', '#10b981', '#64748b'],
+                            borderWidth: 0,
+                            hoverOffset: 4
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        cutout: '75%',
+                        plugins: {
+                            legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true } }
+                        }
+                    }
+                });
+
+                // Source Bar Chart
+                const ctxSource = document.getElementById('sourceChart').getContext('2d');
+                if (sourceChartInstance) sourceChartInstance.destroy();
+                sourceChartInstance = new Chart(ctxSource, {
+                    type: 'bar',
+                    data: {
+                        labels: data.sources.labels,
+                        datasets: [{
+                            label: 'Orders',
+                            data: data.sources.values,
+                            backgroundColor: '#f97316',
+                            borderRadius: 4,
+                            barThickness: 'flex',
+                            maxBarThickness: 40
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: { display: false }
+                        },
+                        scales: {
+                            y: { beginAtZero: true, grid: { color: 'rgba(255, 255, 255, 0.05)' } },
+                            x: { grid: { display: false } }
+                        }
+                    }
+                });
+
+            } catch(e) { console.error(e); }
+        }
+
         function loadAllData() {
             updateFilterStatus();
             loadSummary();
             loadRecentOrders();
             loadTopProducts();
+            loadAnalytics();
             
             const now = new Date();
             document.getElementById('last-updated').textContent = 'Updated ' + now.getHours() + ':' + String(now.getMinutes()).padStart(2, '0');