// Dashboard - Main dashboard application // Capstone Task: Implement real-time dashboard with async/await import { fetchUsers, fetchSales, fetchNotifications, fetchHealth } from './api.js'; import { formatNumber, formatCurrency, formatTime, formatRelativeTime } from './utils.js'; export class Dashboard { constructor(options = {}) { this.refreshInterval = options.refreshInterval || 30000; this.retryAttempts = options.retryAttempts || 3; this.autoRefreshTimer = null; this.isLoading = false; // Cache element references this.elements = { usersContent: document.getElementById('users-content'), salesContent: document.getElementById('sales-content'), notificationsContent: document.getElementById('notifications-content'), healthContent: document.getElementById('health-content'), lastUpdated: document.getElementById('last-updated'), refreshBtn: document.getElementById('refresh-btn'), autoRefresh: document.getElementById('auto-refresh'), status: document.getElementById('status') }; } init() { this.bindEvents(); this.refresh(); this.startAutoRefresh(); } bindEvents() { // Manual refresh button this.elements.refreshBtn.addEventListener('click', () => { this.refresh(); }); // Auto-refresh toggle this.elements.autoRefresh.addEventListener('change', (e) => { if (e.target.checked) { this.startAutoRefresh(); } else { this.stopAutoRefresh(); } }); } // Task 1: Implement refresh with Promise.allSettled async refresh() { if (this.isLoading) return; this.isLoading = true; this.setStatus('loading', 'Fetching data...'); this.elements.refreshBtn.disabled = true; try { // Task 1a: Fetch all data in parallel with Promise.allSettled // This allows us to handle partial failures const results = await Promise.allSettled([ this.fetchWithRetry(() => fetchUsers()), this.fetchWithRetry(() => fetchSales()), this.fetchWithRetry(() => fetchNotifications()), this.fetchWithRetry(() => fetchHealth()) ]); // Task 1b: Process each result const [users, sales, notifications, health] = results; this.renderUsers(users); this.renderSales(sales); this.renderNotifications(notifications); this.renderHealth(health); // Task 1c: Update status based on results const failures = results.filter(r => r.status === 'rejected').length; if (failures === 0) { this.setStatus('success', 'All data loaded successfully'); } else if (failures < results.length) { this.setStatus('warning', `Loaded with ${failures} error(s)`); } else { this.setStatus('error', 'Failed to load all data'); } this.elements.lastUpdated.textContent = `Updated: ${formatTime(new Date())}`; } catch (error) { this.setStatus('error', 'Unexpected error occurred'); console.error('Dashboard refresh error:', error); } finally { this.isLoading = false; this.elements.refreshBtn.disabled = false; } } // Task 2: Implement retry logic with exponential backoff async fetchWithRetry(fetchFn, retries = this.retryAttempts) { let lastError; for (let attempt = 0; attempt < retries; attempt++) { try { return await fetchFn(); } catch (error) { lastError = error; // Don't wait after last attempt if (attempt < retries - 1) { // Exponential backoff: 1s, 2s, 4s... const delay = Math.pow(2, attempt) * 1000; await this.delay(delay); } } } throw lastError; } delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // Task 3: Render functions for each data type renderUsers(result) { const container = this.elements.usersContent; if (result.status === 'rejected') { container.innerHTML = this.renderError('Failed to load users', () => { this.refreshSection('users'); }); return; } const data = result.value; container.innerHTML = `

Total Users ${formatNumber(data.total)}

Active Today ${formatNumber(data.activeToday)}

New This Week +${formatNumber(data.newThisWeek)}

Churn Rate ${data.churnRate}%

`; } renderSales(result) { const container = this.elements.salesContent; if (result.status === 'rejected') { container.innerHTML = this.renderError('Failed to load sales', () => { this.refreshSection('sales'); }); return; } const data = result.value; container.innerHTML = `

Today's Revenue ${formatCurrency(data.todayRevenue)}

Orders Today ${formatNumber(data.ordersToday)}

Avg Order Value ${formatCurrency(data.avgOrderValue)}

vs Yesterday ${data.vsYesterday >= 0 ? '+' : ''}${data.vsYesterday}%

`; } renderNotifications(result) { const container = this.elements.notificationsContent; if (result.status === 'rejected') { container.innerHTML = this.renderError('Failed to load notifications', () => { this.refreshSection('notifications'); }); return; } const data = result.value; if (data.length === 0) { container.innerHTML = '

No new notifications

'; return; } container.innerHTML = data.slice(0, 4).map(notification => `

${notification.message}

${formatRelativeTime(notification.timestamp)}

`).join(''); } renderHealth(result) { const container = this.elements.healthContent; if (result.status === 'rejected') { container.innerHTML = this.renderError('Failed to load health', () => { this.refreshSection('health'); }); return; } const data = result.value; container.innerHTML = data.map(service => `

${service.name} ${service.latency}ms

`).join(''); } renderError(message, retryCallback) { const retryId = `retry-${Date.now()}`; // Use setTimeout to attach event after render setTimeout(() => { const btn = document.getElementById(retryId); if (btn) btn.addEventListener('click', retryCallback); }, 0); return `

${message}

`; } // Task 4: Implement section-specific refresh async refreshSection(section) { const fetchMap = { users: { fetch: fetchUsers, render: this.renderUsers.bind(this) }, sales: { fetch: fetchSales, render: this.renderSales.bind(this) }, notifications: { fetch: fetchNotifications, render: this.renderNotifications.bind(this) }, health: { fetch: fetchHealth, render: this.renderHealth.bind(this) } }; const { fetch: fetchFn, render } = fetchMap[section]; if (!fetchFn) return; try { const data = await this.fetchWithRetry(fetchFn); render({ status: 'fulfilled', value: data }); } catch (error) { render({ status: 'rejected', reason: error }); } } // Task 5: Auto-refresh management startAutoRefresh() { this.stopAutoRefresh(); // Clear any existing timer this.autoRefreshTimer = setInterval(() => { this.refresh(); }, this.refreshInterval); } stopAutoRefresh() { if (this.autoRefreshTimer) { clearInterval(this.autoRefreshTimer); this.autoRefreshTimer = null; } } setStatus(type, message) { this.elements.status.className = `status ${type}`; this.elements.status.textContent = message; } // Cleanup destroy() { this.stopAutoRefresh(); } }