I'll create a comprehensive admin dashboard with user management capabilities. Here's the implementation: Admin Dashboard

Admin Dashboard

Total Users

Active Users

Admins

.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; padding: 48px 0 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } .sidebar .nav-link { color: #fff; padding: 1rem; } .sidebar .nav-link.active { background-color: rgba(255, 255, 255, 0.1); } .sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.2); } main { padding-top: 1.5rem; } .card { transition: transform 0.2s; } .card:hover { transform: scale(1.02); } // Mock database - replace with your actual database connection const database = { users: [ { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' }, { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' }, { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'active' } ], admins: [ { id: 1, name: 'Admin User', email: 'admin@example.com' } ] }; // DOM elements const dashboardContent = document.getElementById('dashboard-content'); const usersContent = document.getElementById('users-content'); const adminsContent = document.getElementById('admins-content'); const usersTable = document.getElementById('users-table'); const adminsTable = document.getElementById('admins-table'); const totalUsersEl = document.getElementById('total-users'); const activeUsersEl = document.getElementById('active-users'); const totalAdminsEl = document.getElementById('total-admins'); const addAdminBtn = document.getElementById('add-admin-btn'); const adminModal = new bootstrap.Modal(document.getElementById('adminModal')); const saveAdminBtn = document.getElementById('saveAdminBtn'); // Tab switching document.getElementById('dashboard-tab').addEventListener('click', () => { showTab('dashboard'); }); document.getElementById('users-tab').addEventListener('click', () => { showTab('users'); loadUsers(); }); document.getElementById('admins-tab').addEventListener('click', () => { showTab('admins'); loadAdmins(); }); // Add admin button addAdminBtn.addEventListener('click', () => { document.getElementById('modalTitle').textContent = 'Add New Admin'; document.getElementById('adminForm').reset(); adminModal.show(); }); // Save admin saveAdminBtn.addEventListener('click', () => { const name = document.getElementById('adminName').value; const email = document.getElementById('adminEmail').value; const password = document.getElementById('adminPassword').value; // In a real app, you would hash the password before saving const newAdmin = { id: database.admins.length + 1, name, email }; database.admins.push(newAdmin); adminModal.hide(); loadAdmins(); updateDashboardStats(); }); // Functions function showTab(tabName) { dashboardContent.style.display = 'none'; usersContent.style.display = 'none'; adminsContent.style.display = 'none'; if (tabName === 'dashboard') { dashboardContent.style.display = 'block'; updateDashboardStats(); } else if (tabName === 'users') { usersContent.style.display = 'block'; } else if (tabName === 'admins') { adminsContent.style.display = 'block'; } } function loadUsers() { usersTable.innerHTML = ''; database.users.forEach(user => { const row = document.createElement('tr'); row.innerHTML = ` ${user.id} ${user.name} ${user.email} ${user.status} `; usersTable.appendChild(row); }); } function loadAdmins() { adminsTable.innerHTML = ''; database.admins.forEach(admin => { const row = document.createElement('tr'); row.innerHTML = ` ${admin.id} ${admin.name} ${admin.email} `; adminsTable.appendChild(row); }); // Add event listeners to delete buttons document.querySelectorAll('.delete-admin').forEach(btn => { btn.addEventListener('click', (e) => { const id = parseInt(e.target.getAttribute('data-id')); if (confirm('Are you sure you want to delete this admin?')) { database.admins = database.admins.filter(admin => admin.id !== id); loadAdmins(); updateDashboardStats(); } }); }); } function updateDashboardStats() { totalUsersEl.textContent = database.users.length; activeUsersEl.textContent = database.users.filter(u => u.status === 'active').length; totalAdminsEl.textContent = database.admins.length; } // Initialize showTab('dashboard'); updateDashboardStats();

Admin Dashboard

Total Users

Active Users

Admins

User Management

Admin Management