# User Management

Manage users, roles, and permissions

| User | Email | Role | Status | Last Active | Actions
--- | --- | --- | --- | --- | --- | ---
Loading users...

## User Details

## Create New User

Username *
Display Name
Email *
Password *
Confirm Password *
Role
Status
Send welcome email
Require password change on first login

## Edit User

## Delete User

Are you sure you want to delete ?

This action cannot be undone. All user data will be permanently removed.

function toggleSelectAll(checkbox) { const checkboxes = document.querySelectorAll('#users-table-body input[type="checkbox"]'); checkboxes.forEach(cb => cb.checked = checkbox.checked); } function openDetailPanel(userId) { const panel = document.getElementById('user-detail-panel'); panel.classList.add('open'); // Load user profile by default htmx.ajax('GET', `/users/${userId}/profile`, {target: '#user-detail-content'}); } function closeDetailPanel() { document.getElementById('user-detail-panel').classList.remove('open'); } function switchTab(btn, tab) { // Update active tab document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); // Get current user ID from panel const userId = document.getElementById('user-detail-panel').dataset.userId; if (userId) { htmx.ajax('GET', `/users/${userId}/${tab}`, {target: '#user-detail-content'}); } } function editUser(userId) { htmx.ajax('GET', `/users/${userId}/edit`, {target: '#edit-user-form-container'}); document.getElementById('edit-user-modal').showModal(); } function confirmDeleteUser(userId, userName) { document.getElementById('delete-user-name').textContent = userName; const deleteBtn = document.getElementById('confirm-delete-btn'); deleteBtn.setAttribute('hx-delete', `/users/${userId}/delete`); htmx.process(deleteBtn); document.getElementById('delete-user-modal').showModal(); } function showToast(message) { // Simple toast notification const toast = document.createElement('div'); toast.className = 'toast'; toast.textContent = message; toast.style.cssText = ` position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; animation: slideIn 0.3s ease; `; document.body.appendChild(toast); setTimeout(() => toast.remove(), 3000); }