dashboard - numero corsi attivi + grafico placeholder

resources/views/livewire/dashboard.blade.php

@@ -92,8 +92,12 @@
                 </div>
                 @endif
             </div>
-            <div class="dashboard-card">
-                <div class="dashboard-card-title"></div>
+            <div class="dashboard-card dashboard-stat">
+                <div class="dashboard-card-header">
+                    <div class="dashboard-card-title">Corsi attivi</div>
+                    <i class="dashboard-card-icon fa-solid fa-book-open"></i>
+                </div>
+                <div class="dashboard-card-value">{{count($courses)}}</div>
             </div>
             
             {{-- campi e sale --}}
@@ -262,11 +266,15 @@
             </div>
         </div>
         
-        <div class="dashboard-card"></div>
+        <div class="dashboard-card">
+            <canvas id="dashboard-chart"></canvas>
+        </div>
     </div>
 </div>
 
 @push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
 <script>
     // window.addEventListener('note-saved', event => {
     //     // Show success message
@@ -303,4 +311,147 @@
         }
     });
 </script>
+
+<script>
+    function createDashboardChart() {
+        const chartId = `dashboard-chart`;
+        const canvas = document.getElementById(chartId);
+        if (!canvas) {
+            console.error('Canvas not found for ID:', chartId);
+            return;
+        }
+
+        const ctx = canvas.getContext('2d');
+
+        const incomeGradient = ctx.createLinearGradient(0, 0, 0, 400);
+        incomeGradient.addColorStop(0, 'rgba(0, 184, 148, 1)');
+        incomeGradient.addColorStop(1, 'rgba(0, 184, 148, 1)');
+
+        const expenseGradient = ctx.createLinearGradient(0, 0, 0, 400);
+        expenseGradient.addColorStop(0, 'rgba(255, 107, 107, 1)');
+        expenseGradient.addColorStop(1, 'rgba(255, 107, 107, 1)');
+
+        const chart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: [
+                    'Gennaio',
+                    'Febbraio',
+                    'Marzo',
+                    'Aprile',
+                    'Maggio',
+                    'Giugno',
+                    'Luglio',
+                    'Agosto',
+                    'Settembre',
+                    'Ottobre',
+                    'Novembre',
+                    'Dicembre',
+                ],
+                datasets: [
+                    {
+                        label: 'Entrate',
+                        data: Array.from({length: 12}, () => Math.floor(Math.random() * (100)) + 1),
+                        backgroundColor: incomeGradient,
+                        borderColor: '#00b894',
+                        borderWidth: 0,
+                        borderRadius: {
+                            topLeft: 8,
+                            topRight: 8,
+                            bottomLeft: 0,
+                            bottomRight: 0,
+                        },
+                        borderSkipped: false,
+                        barThickness: "flex",
+                        barPercentage: 0.65,
+                        categoryPercentage: 0.4,
+                    },
+                    {
+                        label: 'Uscite',
+                        data: Array.from({length: 12}, () => Math.floor(Math.random() * (100)) + 1),
+                        backgroundColor: expenseGradient,
+                        borderColor: '#ff6b6b',
+                        borderWidth: 0,
+                        borderRadius: {
+                            topLeft: 8,
+                            topRight: 8,
+                            bottomLeft: 0,
+                            bottomRight: 0,
+                        },
+                        borderSkipped: false,
+                        barThickness: "flex",
+                        barPercentage: 0.65,
+                        categoryPercentage: 0.4,
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            usePointStyle: true,
+                            padding: 20,
+                            pointStyle: "rect",
+                            font: { weight: '500' }
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: 'rgba(255, 255, 255, 1)',
+                        titleColor: '#212529',
+                        bodyColor: '#495057',
+                        borderColor: '#e9ecef',
+                        borderWidth: 2,
+                        cornerRadius: 0,
+                        callbacks: {
+                            label: function (context) {
+                                return context.dataset.label + ': €' +
+                                    new Intl.NumberFormat('it-IT', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(context.parsed.y);
+                            }
+                        }
+                    },
+                },
+                scales: {
+                    x: {
+                        grid: { display: false },
+                        ticks: { font: { weight: '500' } }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        grid: { color: 'rgba(0, 0, 0, 0.05)' },
+                        ticks: {
+                            callback: function (value) {
+                                return '€' + new Intl.NumberFormat('it-IT', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(value);
+                            }
+                        }
+                    }
+                },
+                elements: {
+                    bar: {
+                        borderRadius: {
+                            topLeft: 8,
+                            topRight: 8,
+                            bottomLeft: 0,
+                            bottomRight: 0
+                        }
+                    }
+                },
+                animation: {
+                    duration: 1000,
+                    easing: 'easeOutQuart'
+                }
+            }
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        createDashboardChart();
+    });
+</script>
 @endpush