botui/ui/suite/admin/users.html

<div class="users-view">
    <div class="page-header">
        <div class="header-left">
            <h1>User Management</h1>
            <p class="subtitle">Manage users, roles, and permissions</p>
        </div>
        <div class="header-actions">
            <button class="btn-primary" onclick="document.getElementById('create-user-modal').showModal()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="8.5" cy="7" r="4"></circle>
                    <line x1="20" y1="8" x2="20" y2="14"></line>
                    <line x1="23" y1="11" x2="17" y2="11"></line>
                </svg>
                Add User
            </button>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="toolbar">
        <div class="search-box">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <input type="text"
                   placeholder="Search users..."
                   name="q"
                   hx-get="/users/search"
                   hx-trigger="keyup changed delay:300ms"
                   hx-target="#users-table-body"
                   hx-swap="innerHTML">
        </div>
        <div class="filters">
            <select name="role"
                    hx-get="/users/list"
                    hx-trigger="change"
                    hx-target="#users-table-body"
                    hx-swap="innerHTML"
                    hx-include="[name='status']">
                <option value="">All Roles</option>
                <option value="admin">Admin</option>
                <option value="moderator">Moderator</option>
                <option value="user">User</option>
            </select>
            <select name="status"
                    hx-get="/users/list"
                    hx-trigger="change"
                    hx-target="#users-table-body"
                    hx-swap="innerHTML"
                    hx-include="[name='role']">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="suspended">Suspended</option>
            </select>
        </div>
    </div>

    <!-- Users Table -->
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="select-all" onchange="toggleSelectAll(this)">
                    </th>
                    <th>User</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last Active</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="users-table-body"
                   hx-get="/users/list"
                   hx-trigger="load"
                   hx-swap="innerHTML">
                <tr>
                    <td colspan="7" class="loading-cell">
                        <div class="loading-state">
                            <div class="spinner"></div>
                            <p>Loading users...</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="pagination" id="users-pagination"
         hx-get="/users/list/pagination"
         hx-trigger="load"
         hx-swap="innerHTML">
    </div>
</div>

<!-- User Detail Panel (slides in from right) -->
<div class="detail-panel" id="user-detail-panel">
    <div class="panel-header">
        <h2 id="panel-user-name">User Details</h2>
        <button class="close-btn" onclick="closeDetailPanel()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>
    </div>
    <div class="panel-tabs">
        <button class="tab-btn active" data-tab="profile" onclick="switchTab(this, 'profile')">Profile</button>
        <button class="tab-btn" data-tab="settings" onclick="switchTab(this, 'settings')">Settings</button>
        <button class="tab-btn" data-tab="permissions" onclick="switchTab(this, 'permissions')">Permissions</button>
        <button class="tab-btn" data-tab="security" onclick="switchTab(this, 'security')">Security</button>
        <button class="tab-btn" data-tab="activity" onclick="switchTab(this, 'activity')">Activity</button>
    </div>
    <div class="panel-content" id="user-detail-content">
        <!-- Content loaded via HTMX -->
    </div>
</div>

<!-- Create User Modal -->
<dialog id="create-user-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Create New User</h2>
            <button type="button" class="close-btn" onclick="document.getElementById('create-user-modal').close()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <form hx-post="/users/create"
              hx-target="#users-table-body"
              hx-swap="innerHTML"
              hx-on::after-request="if(event.detail.successful) { document.getElementById('create-user-modal').close(); showToast('User created successfully'); }">
            <div class="form-row">
                <div class="form-group">
                    <label>Username <span class="required">*</span></label>
                    <input type="text" name="username" required placeholder="johndoe">
                </div>
                <div class="form-group">
                    <label>Display Name</label>
                    <input type="text" name="display_name" placeholder="John Doe">
                </div>
            </div>
            <div class="form-group">
                <label>Email <span class="required">*</span></label>
                <input type="email" name="email" required placeholder="john@example.com">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Password <span class="required">*</span></label>
                    <input type="password" name="password" required placeholder="••••••••" minlength="8">
                </div>
                <div class="form-group">
                    <label>Confirm Password <span class="required">*</span></label>
                    <input type="password" name="password_confirm" required placeholder="••••••••">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Role</label>
                    <select name="role">
                        <option value="user">User</option>
                        <option value="moderator">Moderator</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Status</label>
                    <select name="status">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="send_welcome_email" checked>
                    <span>Send welcome email</span>
                </label>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="require_password_change">
                    <span>Require password change on first login</span>
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-secondary" onclick="document.getElementById('create-user-modal').close()">Cancel</button>
                <button type="submit" class="btn-primary">Create User</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Edit User Modal -->
<dialog id="edit-user-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Edit User</h2>
            <button type="button" class="close-btn" onclick="document.getElementById('edit-user-modal').close()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <div id="edit-user-form-container">
            <!-- Form loaded via HTMX -->
        </div>
    </div>
</dialog>

<!-- Delete Confirmation Modal -->
<dialog id="delete-user-modal" class="modal modal-small">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Delete User</h2>
            <button type="button" class="close-btn" onclick="document.getElementById('delete-user-modal').close()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <div class="modal-body">
            <div class="warning-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
                    <line x1="12" y1="9" x2="12" y2="13"></line>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
            </div>
            <p>Are you sure you want to delete <strong id="delete-user-name"></strong>?</p>
            <p class="warning-text">This action cannot be undone. All user data will be permanently removed.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-secondary" onclick="document.getElementById('delete-user-modal').close()">Cancel</button>
            <button type="button" class="btn-danger" id="confirm-delete-btn"
                    hx-delete="/users/{user_id}/delete"
                    hx-target="#users-table-body"
                    hx-swap="innerHTML"
                    hx-on::after-request="document.getElementById('delete-user-modal').close(); showToast('User deleted');">
                Delete User
            </button>
        </div>
    </div>
</dialog>

<style>
/* Users View */
.users-view {
    max-width: 1400px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.header-left .subtitle {
    color: var(--text-secondary);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* Toolbar */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    flex: 1;
    max-width: 400px;
}

.search-box svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.search-box input {
    border: none;
    background: none;
    outline: none;
    color: var(--text);
    font-size: 14px;
    width: 100%;
}

.filters {
    display: flex;
    gap: 12px;
}

.filters select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

/* Table */
.table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    background: var(--surface-hover);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
    background: var(--surface-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.loading-cell {
    text-align: center;
}

/* User Cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 500;
}

.user-username {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-badge.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.status-badge.suspended {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Role Badge */
.role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.role-badge.admin {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.role-badge.moderator {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.role-badge.user {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 16px;
}

.page-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
    background: var(--surface-hover);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Detail Panel */
.detail-panel {
    position: fixed;
    top: 56px;
    right: -480px;
    width: 480px;
    height: calc(100vh - 56px);
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 100;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.detail-panel.open {
    right: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    overflow-x: auto;
}

.tab-btn {
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Modal Styles */
.modal {
    padding: 0;
    border: none;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 560px;
    width: 90%;
}

.modal.modal-small {
    max-width: 400px;
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-body {
    padding: 24px;
    text-align: center;
}

.warning-icon {
    color: #f59e0b;
    margin-bottom: 16px;
}

.warning-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.modal form {
    padding: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.form-group label .required {
    color: #ef4444;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input {
    width: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-hover);
    border-radius: 0 0 16px 16px;
}

.close-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 8px;
}

.close-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    padding: 10px 20px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--surface-hover);
}

.btn-danger {
    padding: 10px 20px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Loading */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--text-secondary);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
    }

    .filters {
        flex-wrap: wrap;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .detail-panel {
        width: 100%;
        right: -100%;
    }

    .data-table {
        display: block;
        overflow-x: auto;
    }
}
</style>

<script></script>
    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);
    }
</script>