Group Management

Manage groups, members, and permissions

Loading groups...

Group Details

Create New Group

Group Name *

Add Members

No users selected

Send Invites

Enter one email address per line

Delete Group

Are you sure you want to delete ?

This will remove all members and delete all group data. This action cannot be undone.

 function setView(view, btn) { const grid = document.getElementById('groups-grid'); document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); if (view === 'list') { grid.classList.add('list-view'); } else { grid.classList.remove('list-view'); } } function openDetailPanel(groupId, groupName) { const panel = document.getElementById('group-detail-panel'); panel.dataset.groupId = groupId; document.getElementById('panel-group-name').textContent = groupName; panel.classList.add('open'); // Load overview by default htmx.ajax('GET', `/groups/${groupId}/overview`, {target: '#group-detail-content'}); } function closeDetailPanel() { document.getElementById('group-detail-panel').classList.remove('open'); } function switchTab(btn, tab) { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const groupId = document.getElementById('group-detail-panel').dataset.groupId; if (groupId) { htmx.ajax('GET', `/groups/${groupId}/${tab}`, {target: '#group-detail-content'}); } } function openAddMemberModal(groupId) { document.getElementById('add-member-group-id').value = groupId; const form = document.getElementById('add-member-form'); form.setAttribute('hx-post', `/groups/${groupId}/members/add`); htmx.process(form); document.getElementById('add-member-modal').showModal(); } function openInviteModal(groupId) { document.getElementById('invite-group-id').value = groupId; const form = document.getElementById('send-invite-form'); form.setAttribute('hx-post', `/groups/${groupId}/invites/send`); htmx.process(form); document.getElementById('send-invite-modal').showModal(); } function confirmDeleteGroup(groupId, groupName) { document.getElementById('delete-group-name').textContent = groupName; const deleteBtn = document.getElementById('confirm-delete-group-btn'); deleteBtn.setAttribute('hx-delete', `/groups/${groupId}/delete`); htmx.process(deleteBtn); document.getElementById('delete-group-modal').showModal(); } function showToast(message) { const toast = document.createElement('div'); 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; `; document.body.appendChild(toast); setTimeout(() => toast.remove(), 3000); }