File size: 3,095 Bytes
d3b1ae8 fca8bb8 d3b1ae8 fca8bb8 d3b1ae8 fca8bb8 d3b1ae8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | // Main application script
document.addEventListener('DOMContentLoaded', function() {
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Handle sidebar toggle - improved for mobile
const sidebarToggle = document.querySelector('custom-navbar')?.shadowRoot?.getElementById('sidebarToggle');
if (sidebarToggle) {
sidebarToggle.addEventListener('click', function() {
const sidebar = document.querySelector('custom-sidebar');
const main = document.querySelector('main');
if (window.innerWidth <= 768) {
sidebar.classList.toggle('open');
} else {
sidebar.classList.toggle('hidden');
main.classList.toggle('ml-0');
main.classList.toggle('ml-64');
}
});
}
// Close sidebar when clicking outside on mobile
document.addEventListener('click', function(event) {
const sidebar = document.querySelector('custom-sidebar');
const navbar = document.querySelector('custom-navbar');
if (window.innerWidth <= 768 && sidebar?.classList.contains('open')) {
if (!sidebar.contains(event.target) && !navbar?.shadowRoot?.contains(event.target)) {
sidebar.classList.remove('open');
}
}
});
// Sample data for charts (these would be replaced with real data)
const salesData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Monthly Sales',
data: [3250, 4250, 3870, 5320, 6100, 4870],
backgroundColor: 'rgba(79, 70, 229, 0.2)',
borderColor: 'rgba(79, 70, 229, 1)',
borderWidth: 1,
tension: 0.4
}]
};
// Initialize charts (you would need to include Chart.js for this to work)
if (typeof Chart !== 'undefined') {
const salesChart = new Chart(
document.getElementById('salesChart'),
{
type: 'line',
data: salesData,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
}
);
}
});
// Notification handler
function showNotification(type, message) {
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'}`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => notification.remove(), 300);
}, 3000);
} |