Update: Dashboard-Quick Management, check loading for icon-picker

public/js/icon-picker.js

@@ -116,7 +116,9 @@
   }
 
   function _renderGrid(icons) {
+
     const grid = document.getElementById('iconGrid');
+    grid.style.visibility = 'hidden';
     if (!icons.length) {
       grid.innerHTML = '<p class="text-muted small">No icons found.</p>';
       return;
@@ -133,6 +135,10 @@
         <span class="text-truncate w-100 text-center">${icon.label}</span>
       </button>
     `).join('');
+
+    document.fonts.ready.then(() => {
+        grid.style.visibility = 'visible';
+    });
   }
 
   function pick(value) {

views/admin/dashboard.ejs

@@ -65,22 +65,51 @@
           </div>
         </div>
 
-        <!-- About -->
+        <!-- About Section - Accordion -->
-        <div class="col-md-4 border-end border-top">
+        <div class="col-12 border-top">
-          <div class="p-4">
+          <div class="accordion-header d-flex align-items-center justify-content-between p-4" onclick="toggleAbout()"
-            <div class="d-flex align-items-center mb-3">
+            style="cursor: pointer;">
+            <div class="d-flex align-items-center">
               <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                 style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                 <i class="fas fa-users fa-lg" style="color: var(--primary-color);"></i>
               </div>
               <div>
-                <h5 class="mb-0">About Us</h5>
+                <h5 class="mb-0">About Section</h5>
-                <p class="text-muted mb-0 small">Manage about us</p>
+                <p class="text-muted mb-0 small">Manage about pages</p>
               </div>
             </div>
-            <a href="/admin/about" class="btn btn-sm btn-primary w-100 mt-2">
+            <i class="fas fa-chevron-down" id="about-chevron"
-              <i class="fas fa-edit me-2"></i>Edit
+              style="color: var(--primary-color); transition: transform 0.2s;"></i>
-            </a>
+          </div>
+
+          <div id="about-body" style="display: none;" class="px-4 pb-4">
+            <div class="row g-3">
+              <% const aboutPages=[ { label: 'About Us' , href: '/admin/about' , icon: 'fa-users' }, {
+                label: 'Partnerships' , href: '/admin/partnerships' , icon: 'fa-handshake' }, { label: 'History' ,
+                href: '/admin/history' , icon: 'fa-history' }, { label: 'Accreditation' ,
+                href: '/admin/accreditation' , icon: 'fa-certificate' }, { label: 'Admissions' ,
+                href: '/admin/admissions' , icon: 'fa-door-open' }, { label: 'Policies' ,
+                href: '/admin/policies' , icon: 'fa-file-contract' }, ]; %>
+                <% aboutPages.forEach(page=> { %>
+                  <div class="col-md-4">
+                    <div class="border rounded p-3" style="background-color: var(--bs-light);">
+                      <div class="d-flex align-items-center mb-2">
+                        <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
+                          style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
+                          <i class="fas <%= page.icon %>" style="color: var(--primary-color);"></i>
+                        </div>
+                        <span class="fw-500">
+                          <%= page.label %>
+                        </span>
+                      </div>
+                      <a href="<%= page.href %>" class="btn btn-sm btn-primary w-100">
+                        <i class="fas fa-edit me-2"></i>Edit
+                      </a>
+                    </div>
+                  </div>
+                  <% }) %>
+            </div>
           </div>
         </div>
 
@@ -510,4 +539,14 @@
     background-color: var(--primary-color) !important;
     color: white;
   }
-</style>
+</style>
+
+<script>
+  function toggleAbout() {
+    const body = document.getElementById('about-body');
+    const chevron = document.getElementById('about-chevron');
+    const isOpen = body.style.display === 'block';
+    body.style.display = isOpen ? 'none' : 'block';
+    chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
+  }
+</script>