Campaign Admin Panel

Manage your influence campaigns and track engagement

Active Campaigns

Create New Campaign

Campaign Analytics

constructor() { this.currentCampaign = null; this.campaigns = []; this.init(); } init() { // Tab navigation document.querySelectorAll('.nav-btn').forEach(btn => { btn.addEventListener('click', (e) => { const tab = e.target.dataset.tab; this.switchTab(tab); }); }); // Form submission document.getElementById('campaign-form').addEventListener('submit', (e) => { this.handleFormSubmit(e); }); // Load campaigns on init this.loadCampaigns(); } switchTab(tab) { // Update nav buttons document.querySelectorAll('.nav-btn').forEach(btn => { btn.classList.remove('active'); }); document.querySelector(`[data-tab="${tab}"]`).classList.add('active'); // Show/hide tab content document.querySelectorAll('.tab-content').forEach(content => { content.classList.remove('active'); }); document.getElementById(`${tab}-tab`).classList.add('active'); // Load data for specific tabs if (tab === 'campaigns') { this.loadCampaigns(); } else if (tab === 'analytics') { this.loadOverallAnalytics(); } } async loadCampaigns() { const loading = document.getElementById('campaigns-loading'); const list = document.getElementById('campaigns-list'); loading.classList.remove('hidden'); try { const response = await window.apiClient.get('/admin/campaigns'); this.campaigns = response.campaigns || []; this.renderCampaigns(); } catch (error) { this.showMessage('Failed to load campaigns: ' + error.message, 'error'); } finally { loading.classList.add('hidden'); } } renderCampaigns() { const list = document.getElementById('campaigns-list'); if (this.campaigns.length === 0) { list.innerHTML = '

No campaigns found. Create your first campaign

'; return; } list.innerHTML = this.campaigns.map(campaign => `

${campaign.title}

${campaign.description || 'No description'}

${campaign.status} 📧 ${campaign.emailCount || 0} emails sent

Campaign URL: /campaign/${campaign.slug}

`).join(''); } async editCampaign(id) { try { const response = await window.apiClient.get(`/admin/campaigns/${id}`); const campaign = response.campaign; this.currentCampaign = campaign; this.populateForm(campaign); this.switchTab('create'); document.getElementById('form-title').textContent = 'Edit Campaign'; } catch (error) { this.showMessage('Failed to load campaign: ' + error.message, 'error'); } } populateForm(campaign) { document.getElementById('campaign-id').value = campaign.id; document.getElementById('title').value = campaign.title; document.getElementById('description').value = campaign.description || ''; document.getElementById('call_to_action').value = campaign.call_to_action || ''; document.getElementById('email_subject').value = campaign.email_subject; document.getElementById('email_body').value = campaign.email_body; document.getElementById('status').value = campaign.status; // Handle checkboxes document.getElementById('allow_smtp_email').checked = campaign.allow_smtp_email; document.getElementById('allow_mailto_link').checked = campaign.allow_mailto_link; document.getElementById('collect_user_info').checked = campaign.collect_user_info; document.getElementById('show_email_count').checked = campaign.show_email_count; // Handle target levels document.querySelectorAll('input[name="target_government_levels"]').forEach(cb => cb.checked = false); if (campaign.target_government_levels) { const levels = campaign.target_government_levels.split(','); levels.forEach(level => { const checkbox = document.querySelector(`input[name="target_government_levels"][value="${level.trim()}"]`); if (checkbox) checkbox.checked = true; }); } } async handleFormSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); const data = {}; // Handle regular fields for (let [key, value] of formData.entries()) { if (key !== 'target_government_levels') { data[key] = value; } } // Handle checkboxes data.allow_smtp_email = document.getElementById('allow_smtp_email').checked; data.allow_mailto_link = document.getElementById('allow_mailto_link').checked; data.collect_user_info = document.getElementById('collect_user_info').checked; data.show_email_count = document.getElementById('show_email_count').checked; // Handle target government levels const selectedLevels = []; document.querySelectorAll('input[name="target_government_levels"]:checked').forEach(cb => { selectedLevels.push(cb.value); }); data.target_government_levels = selectedLevels; try { const campaignId = document.getElementById('campaign-id').value; let response; if (campaignId) { // Update existing campaign response = await window.apiClient.makeRequest(`/api/admin/campaigns/${campaignId}`, { method: 'PUT', body: JSON.stringify(data) }); } else { // Create new campaign response = await window.apiClient.post('/admin/campaigns', data); } this.showMessage('Campaign saved successfully!', 'success'); this.resetForm(); this.switchTab('campaigns'); } catch (error) { this.showMessage('Failed to save campaign: ' + error.message, 'error'); } } resetForm() { document.getElementById('campaign-form').reset(); document.getElementById('campaign-id').value = ''; document.getElementById('form-title').textContent = 'Create New Campaign'; this.currentCampaign = null; } async deleteCampaign(id) { if (!confirm('Are you sure you want to delete this campaign? This action cannot be undone.')) { return; } try { await window.apiClient.makeRequest(`/api/admin/campaigns/${id}`, { method: 'DELETE' }); this.showMessage('Campaign deleted successfully!', 'success'); this.loadCampaigns(); } catch (error) { this.showMessage('Failed to delete campaign: ' + error.message, 'error'); } } async showCampaignAnalytics(id) { try { const response = await window.apiClient.get(`/admin/campaigns/${id}/analytics`); const analytics = response.analytics; const campaign = this.campaigns.find(c => c.id === id); document.getElementById('analytics-modal-title').textContent = `Analytics: ${campaign.title}`; document.getElementById('analytics-modal-content').innerHTML = this.renderAnalytics(analytics); document.getElementById('analytics-modal').style.display = 'block'; } catch (error) { this.showMessage('Failed to load analytics: ' + error.message, 'error'); } } renderAnalytics(analytics) { return `
${analytics.totalEmails}
Total Emails
${analytics.smtpEmails}
SMTP Sent
${analytics.mailtoClicks}
Mailto Clicks
${analytics.successfulEmails}
Successful

By Government Level

${Object.entries(analytics.byLevel).map(([level, count]) => `
${count}
${level}
`).join('')}

Recent Activity

${analytics.recentEmails.map(email => `
${email.user_name || 'Anonymous'} → ${email.recipient_name} (${email.recipient_level})
${email.timestamp} • ${email.email_method} • ${email.status}
`).join('')}
`; } showMessage(message, type) { const container = document.getElementById('message-container'); container.innerHTML = `
${message}
`; container.classList.remove('hidden'); setTimeout(() => { container.classList.add('hidden'); }, 5000); } } // Global functions function switchTab(tab) { window.adminPanel.switchTab(tab); } function resetForm() { window.adminPanel.resetForm(); } function closeAnalyticsModal() { document.getElementById('analytics-modal').style.display = 'none'; } // Initialize admin panel document.addEventListener('DOMContentLoaded', () => { window.adminPanel = new AdminPanel(); });