diff --git a/admin/assets/dashboard.css b/admin/assets/dashboard.css
index ed0b573..62a71c5 100644
--- a/admin/assets/dashboard.css
+++ b/admin/assets/dashboard.css
@@ -212,6 +212,89 @@ body .card {
font-size: 0.875rem;
}
+/* =================================================================
+ Collapsible Cards
+ ================================================================= */
+
+.dashboard-analytics-wrap .collapsible-section {
+ margin-bottom: 1rem;
+}
+
+.dashboard-analytics-wrap .collapsible-header {
+ cursor: pointer;
+ transition: all 0.2s ease;
+ text-align: left;
+ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.dashboard-analytics-wrap .collapsible-header:hover {
+ filter: brightness(1.1);
+}
+
+.dashboard-analytics-wrap .collapsible-header:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(255, 134, 0, 0.5);
+}
+
+/* Chevron rotation */
+.dashboard-analytics-wrap .collapse-chevron {
+ transition: transform 0.3s ease;
+ font-size: 1rem;
+}
+
+.dashboard-analytics-wrap .collapsible-header:not(.collapsed) .collapse-chevron {
+ transform: rotate(180deg);
+}
+
+/* Header bordes */
+.dashboard-analytics-wrap .collapsible-header {
+ border-radius: 0.375rem;
+}
+
+.dashboard-analytics-wrap .collapsible-header:not(.collapsed) {
+ border-radius: 0.375rem 0.375rem 0 0;
+}
+
+/* Card sin borde superior cuando está expandido */
+.dashboard-analytics-wrap .collapsible-section .card {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ border-top: none;
+}
+
+/* Loading en collapsible section */
+.dashboard-analytics-wrap .collapsible-section.is-loading-table {
+ position: relative;
+ pointer-events: none;
+}
+
+.dashboard-analytics-wrap .collapsible-section.is-loading-table::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(255, 255, 255, 0.7);
+ z-index: 10;
+ border-radius: 0.375rem;
+}
+
+.dashboard-analytics-wrap .collapsible-section.is-loading-table::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 24px;
+ height: 24px;
+ margin: -12px 0 0 -12px;
+ border: 3px solid #f3f3f3;
+ border-top: 3px solid #FF8600;
+ border-radius: 50%;
+ z-index: 11;
+ animation: spin 0.8s linear infinite;
+}
+
/* =================================================================
Responsive
================================================================= */
diff --git a/admin/assets/dashboard.js b/admin/assets/dashboard.js
index e666d44..8d4a2e2 100644
--- a/admin/assets/dashboard.js
+++ b/admin/assets/dashboard.js
@@ -99,10 +99,10 @@
return;
}
- // Find the card container and add loading state (keeps size, shows overlay)
- var card = tbody.closest('.card');
- if (card) {
- card.classList.add('is-loading-table');
+ // Find the collapsible section container and add loading state (keeps size, shows overlay)
+ var section = tbody.closest('.collapsible-section');
+ if (section) {
+ section.classList.add('is-loading-table');
}
// Build form data
@@ -157,8 +157,8 @@
tbody.innerHTML = html;
// Remove loading state
- if (card) {
- card.classList.remove('is-loading-table');
+ if (section) {
+ section.classList.remove('is-loading-table');
}
// Update pagination
@@ -167,16 +167,16 @@
bindPaginationEvents(paginationDiv, tableId);
}
} else {
- if (card) {
- card.classList.remove('is-loading-table');
+ if (section) {
+ section.classList.remove('is-loading-table');
}
showErrorMessage('Error al cargar datos');
console.error('AJAX error:', result);
}
})
.catch(function(error) {
- if (card) {
- card.classList.remove('is-loading-table');
+ if (section) {
+ section.classList.remove('is-loading-table');
}
console.error('Fetch error:', error);
showErrorMessage('Error de conexión');
diff --git a/admin/class-analytics-dashboard.php b/admin/class-analytics-dashboard.php
index bf5c722..6176cd8 100644
--- a/admin/class-analytics-dashboard.php
+++ b/admin/class-analytics-dashboard.php
@@ -480,43 +480,56 @@ final class ROI_APU_Analytics_Dashboard
-
-