Feat: clickable graphs

resources/views/admin/dashboard.blade.php

@@ -90,6 +90,18 @@
                     if (window.comparisonChartInstance) {
                         window.comparisonChartInstance.destroy();
                     }
+                    // Map each bar to its corresponding page
+                    const modelPages = [
+                        'ActivitiesAttendedResponses',
+                        'ActivitiesOrganisedResponses',
+                        'BooksPublishedResponses',
+                        'ExternalEngagementResponses',
+                        'IvOrganisedResponses',
+                        'OnlineCoursesResponses',
+                        'PatentsResponses',
+                        'PublicationsResponses'
+                    ];
+                    const barLinks = modelPages.map(page => `/admin/${page}`);
                     window.comparisonChartInstance = new Chart(ctx, {
                         type: 'bar',
                         data: {
@@ -152,6 +164,16 @@
                                 y: {
                                     beginAtZero: true
                                 }
+                            },
+                            onClick: function(evt, elements) {
+                                if (elements.length > 0) {
+                                    const idx = elements[0].index;
+                                    const departmentId = departmentSelector.value;
+                                    // Only redirect if the bar index is within the modelPages range
+                                    if (idx < barLinks.length) {
+                                        window.location.href = `${barLinks[idx]}?department_id=${departmentId}`;
+                                    }
+                                }
                             }
                         }
                     });
@@ -192,8 +214,13 @@
                     if (window.contributionChartInstance) {
                         window.contributionChartInstance.destroy();
                     }
+                    // Define bar links for each label (customize as needed)
+                    const barLinks = data.labels.map((label, idx) => {
+                        // Example: redirect to /admin/contribution/{id} (replace with your actual route/logic)
+                        return `/admin/contribution/${data.ids ? data.ids[idx] : idx+1}`;
+                    });
                     window.contributionChartInstance = new Chart(ctx, {
-                        type: 'bar', // Changed to bar chart
+                        type: 'bar',
                         data: {
                             labels: data.labels,
                             datasets: [{
@@ -258,6 +285,12 @@
                                 y: {
                                     beginAtZero: true
                                 }
+                            },
+                            onClick: function(evt, elements) {
+                                if (elements.length > 0) {
+                                    const idx = elements[0].index;
+                                    window.location.href = barLinks[idx];
+                                }
                             }
                         }
                     });

resources/views/pages/activities-attended/index.blade.php

@@ -48,9 +48,11 @@
                             </div>
                         </div>
                     </div>
-
+                    
                     <!-- Column Selector -->
-                    <div class="col-md-12 mt-3 mb-4">
+                    <div class="flex justify-between col-md-12 mt-3 mb-4">
+                        <!-- Include the reusable download-proofs component -->
+                        <x-download-proofs :route="route('activitiesAttended.downloadProofs')" />
                         <div class="dropdown">
                             <button class="btn btn-danger dropdown-toggle" type="button" id="columnSelectorDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                 <i class="fas fa-columns me-1"></i> Customize Columns
@@ -139,8 +141,6 @@
                                 </div>
                             </div>
                         </div>
-                        <!-- Include the reusable download-proofs component -->
-                        <x-download-proofs :route="route('activitiesAttended.downloadProofs')" />
                     </div>
 
                     <!-- Table -->
@@ -685,6 +685,15 @@
     $('.dropdown-menu').on('click', function(e) {
         e.stopPropagation();
     });
+
+    // Set department filter from query string if present
+    $(document).ready(function() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const departmentId = urlParams.get('department_id');
+        if (departmentId) {
+            $('#department-filter').val(departmentId).trigger('change');
+        }
+    });
 });
 </script>
 <style>