// ========================================== // ADMIN DASHBOARD COMPONENT // ========================================== class AdminDashboard extends BaseComponent { constructor(app) { super(app); this.currentModule = 'dashboard'; this.api = new APIService(app.config.apiBaseUrl); this.chatbotSettings = null; this.stats = {}; } async init() { await this.loadInitialData(); this.setupSidebar(); this.renderModule('dashboard'); this.startRealTimeUpdates(); } async loadInitialData() { try { const [stats, settings] = await Promise.all([ this.api.get('/admin/stats'), this.api.get('/admin/chatbot/settings') ]); this.stats = stats; this.chatbotSettings = settings; } catch (error) { console.error('Failed to load admin data:', error); this.app.showToast('Failed to load dashboard data', 'danger'); } } setupSidebar() { const links = document.querySelectorAll('.admin-link'); links.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const module = link.textContent.trim(); this.navigateToModule(module, link); }); }); // Mobile sidebar toggle const toggleBtn = document.querySelector('[onclick*="toggleSidebar"]'); if (toggleBtn) { toggleBtn.addEventListener('click', () => { document.getElementById('admin-sidebar').classList.toggle('show'); }); } } navigateToModule(module, linkEl) { // Update active state document.querySelectorAll('.admin-link').forEach(el => el.classList.remove('active')); if (linkEl) linkEl.classList.add('active'); // Update title document.getElementById('page-title').textContent = module; // Close mobile sidebar document.getElementById('admin-sidebar').classList.remove('show'); // Render module this.renderModule(module); } renderModule(module) { const contentArea = document.getElementById('admin-content-area'); const moduleMap = { 'Dashboard': () => this.renderDashboard(), 'Chatbot Settings': () => this.renderChatbotSettings(), 'Chatbot Analytics': () => this.renderChatbotAnalytics(), 'Chat Logs': () => this.renderChatLogs(), 'Contacts': () => this.renderContacts(), 'Products': () => this.renderProducts(), 'Orders': () => this.renderOrders(), 'AI Services': () => this.renderAIServices(), 'Voice Settings': () => this.renderVoiceSettings(), 'CRM Integration': () => this.renderCRMIntegration(), 'Connectivity': () => this.renderConnectivity(), 'Audit Logs': () => this.renderAuditLogs(), 'Settings': () => this.renderSettings() }; const renderFunction = moduleMap[module] || moduleMap['Dashboard']; contentArea.innerHTML = renderFunction(); // Initialize module-specific JS this.initializeModuleJS(module); } renderDashboard() { return `

Total Chats

${this.stats.totalChats || 0}

${this.stats.chatsGrowth || 0}% vs last week

Active Services

${this.stats.activeServices || 0}

Across all modules

Pending Orders

${this.stats.pendingOrders || 0}

Requires action

Revenue (MRR)

R${this.formatNumber(this.stats.revenue || 0)}

Monthly Recurring
Recent Activity

Loading...

Quick Actions
Chatbot Performance (Last 7 Days)
`; } renderChatbotSettings() { const settings = this.chatbotSettings || {}; return `
AI Configuration
Voice Configuration
Payment Configuration
Widget Customization
`; } renderChatLogs() { return `
Chat Conversation Logs
`; } renderContacts() { return `
Contact Database
`; } renderProducts() { return `
Products & Services
Product Editor
`; } // Module Initialization initializeModuleJS(module) { switch(module) { case 'Dashboard': this.loadActivityFeed(); this.initializeChart(); break; case 'Chatbot Settings': this.initializeSettingsForm(); break; case 'Chat Logs': this.loadChatLogs(); break; case 'Contacts': this.loadContacts(); break; case 'Products': this.loadProducts(); break; } } async loadActivityFeed() { const feed = document.getElementById('activity-feed'); if (!feed) return; try { const activities = await this.api.get('/admin/activity'); const html = activities.map(activity => `
${activity.title}
${activity.description}
${this.formatTime(activity.timestamp)}
`).join(''); feed.innerHTML = html || '

No recent activity

'; } catch (error) { feed.innerHTML = '

Failed to load activity

'; } } // Quick Actions async quickAction(action) { switch(action) { case 'test-chatbot': this.app.components.chatbot.toggle(); break; case 'sync-whmcs': await this.syncWHMCS(); break; case 'export-data': await this.exportData(); break; } } async syncWHMCS() { this.app.showToast('Syncing with WHMCS...', 'info'); try { const result = await this.api.post('/admin/whmcs/sync'); this.app.showToast(`Synced ${result.count} items successfully`, 'success'); } catch (error) { this.app.showToast('Sync failed', 'danger'); } } // Utility Functions formatNumber(num) { return new Intl.NumberFormat('en-ZA').format(num); } formatTime(timestamp) { const date = new Date(timestamp); const now = new Date(); const diff = now - date; const minutes = Math.floor(diff / 60000); const hours = Math.floor(diff / 3600000); const days = Math.floor(diff / 86400000); if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; return `${days}d ago`; } startRealTimeUpdates() { // Update stats every 30 seconds setInterval(() => { this.updateDashboardStats(); }, 30000); } async updateDashboardStats() { try { const stats = await this.api.get('/admin/stats'); document.getElementById('stat-total-chats').textContent = stats.totalChats; // Update other stats... } catch (error) { console.error('Failed to update stats:', error); } } initializeChart() { // Chart initialization will go here // Using Chart.js or similar library } initializeSettingsForm() { const form = document.getElementById('chatbot-settings-form'); if (!form) return; form.addEventListener('submit', async (e) => { e.preventDefault(); await this.saveChatbotSettings(new FormData(e.target)); }); } async saveChatbotSettings(formData) { const settings = Object.fromEntries(formData); try { await this.api.post('/admin/chatbot/settings', settings); this.app.showToast('Settings saved successfully', 'success'); this.chatbotSettings = settings; } catch (error) { this.app.showToast('Failed to save settings', 'danger'); } } } // Export if (typeof module !== 'undefined' && module.exports) { module.exports = { AdminDashboard }; }