huge update

static/js/hod/utils/navigation.js

@@ -0,0 +1,24 @@
+// Function to show a specific section
+function showSection(sectionId) {
+    // Hide all sections
+    document.querySelectorAll('.content-section').forEach(section => {
+        section.style.display = 'none';
+    });
+
+    // Show selected section
+    const targetSection = document.getElementById(sectionId);
+    if (targetSection) {
+        targetSection.style.display = 'block';
+    }
+
+    // Update active nav item
+    document.querySelectorAll('.nav-item').forEach(item => {
+        item.classList.remove('active');
+        if (item.getAttribute('data-section') === sectionId.replace('Section', '')) {
+            item.classList.add('active');
+        }
+    });
+}
+
+// Export functions
+export { showSection }; 

static/js/hod/utils/notifications.js

@@ -0,0 +1,42 @@
+// Toast notification function
+export function showToast(type, message) {
+    const toast = document.createElement('div');
+    toast.className = `toast align-items-center text-white bg-${type} border-0`;
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'assertive');
+    toast.setAttribute('aria-atomic', 'true');
+    
+    toast.innerHTML = `
+        <div class="d-flex">
+            <div class="toast-body">
+                ${message}
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    `;
+    
+    const toastContainer = document.createElement('div');
+    toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+    toastContainer.appendChild(toast);
+    document.body.appendChild(toastContainer);
+    
+    const bsToast = new bootstrap.Toast(toast);
+    bsToast.show();
+    
+    toast.addEventListener('hidden.bs.toast', function () {
+        toastContainer.remove();
+    });
+}
+
+// Message modal functions
+export function showMessageModal(title, message) {
+    document.getElementById('messageModalTitle').textContent = title;
+    document.getElementById('messageModalContent').textContent = message;
+    document.getElementById('messageModal').style.display = 'block';
+    document.body.style.overflow = 'hidden';
+}
+
+export function closeMessageModal() {
+    document.getElementById('messageModal').style.display = 'none';
+    document.body.style.overflow = '';
+}