a few more dashboard updates

map/app/public/js/dashboard.js

@@ -1,16 +1,21 @@
 // Dashboard functionality
 let supportChart = null;
 let entriesChart = null;
+let signSizesChart = null;
 
 // Load dashboard data
 async function loadDashboardData() {
     try {
+        // Show loading state
+        setLoadingState(true);
+        
         const response = await fetch('/api/admin/dashboard/stats');
         const result = await response.json();
         
         if (result.success) {
             updateDashboardCards(result.data);
             createSupportLevelChart(result.data.supportLevels);
+            createSignSizesChart(result.data.signSizes);
             createEntriesChart(result.data.dailyEntries);
         } else {
             showStatus('Failed to load dashboard data', 'error');
@@ -18,14 +23,29 @@ async function loadDashboardData() {
     } catch (error) {
         console.error('Dashboard loading error:', error);
         showStatus('Error loading dashboard', 'error');
+    } finally {
+        setLoadingState(false);
     }
 }
 
+// Set loading state
+function setLoadingState(isLoading) {
+    const cards = document.querySelectorAll('.card-value');
+    cards.forEach(card => {
+        if (isLoading) {
+            card.textContent = '...';
+            card.style.opacity = '0.6';
+        } else {
+            card.style.opacity = '1';
+        }
+    });
+}
+
 // Update summary cards
 function updateDashboardCards(data) {
     document.getElementById('total-locations').textContent = data.totalLocations.toLocaleString();
     document.getElementById('overall-score').textContent = data.overallScore;
-    document.getElementById('sign-requests').textContent = data.signRequests.toLocaleString();
+    document.getElementById('sign-delivered').textContent = data.signDelivered.toLocaleString();
     document.getElementById('total-users').textContent = data.totalUsers.toLocaleString();
 }
 
@@ -91,6 +111,90 @@ function createSupportLevelChart(supportLevels) {
     });
 }
 
+// Create sign sizes chart
+function createSignSizesChart(signSizes) {
+    const ctx = document.getElementById('sign-sizes-chart');
+    if (!ctx) return;
+    
+    if (signSizesChart) {
+        signSizesChart.destroy();
+    }
+    
+    // Check if mobile
+    const isMobile = window.innerWidth <= 480;
+    
+    signSizesChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: ['Regular', 'Large', 'Unsure'],
+            datasets: [{
+                label: 'Signs Requested',
+                data: [
+                    signSizes['Regular'] || 0,
+                    signSizes['Large'] || 0,
+                    signSizes['Unsure'] || 0
+                ],
+                backgroundColor: [
+                    '#2196F3',  // Blue for Regular
+                    '#4CAF50',  // Green for Large  
+                    '#FF9800'   // Orange for Unsure
+                ],
+                borderColor: [
+                    '#1976D2',
+                    '#388E3C',
+                    '#F57C00'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: !isMobile,
+                    position: 'top'
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.label || '';
+                            const value = context.parsed.y || 0;
+                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
+                            return `${label}: ${value} (${percentage}%)`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        stepSize: 1,
+                        font: {
+                            size: isMobile ? 10 : 12
+                        }
+                    },
+                    grid: {
+                        display: !isMobile
+                    }
+                },
+                x: {
+                    ticks: {
+                        font: {
+                            size: isMobile ? 10 : 12
+                        }
+                    },
+                    grid: {
+                        display: false
+                    }
+                }
+            }
+        }
+    });
+}
+
 // Create daily entries chart
 function createEntriesChart(dailyEntries) {
     const ctx = document.getElementById('entries-chart');
@@ -251,6 +355,16 @@ document.addEventListener('DOMContentLoaded', () => {
                     createSupportLevelChart(supportLevels);
                 }
                 
+                if (signSizesChart) {
+                    const currentData = signSizesChart.data.datasets[0].data;
+                    const signSizes = {
+                        'Regular': currentData[0] || 0,
+                        'Large': currentData[1] || 0,
+                        'Unsure': currentData[2] || 0
+                    };
+                    createSignSizesChart(signSizes);
+                }
+                
                 if (entriesChart) {
                     const currentLabels = entriesChart.data.labels;
                     const currentData = entriesChart.data.datasets[0].data;