// 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 retry logic with exponential backoff async fetchWithRetry(fetchFn, retries = this.retryAttempts) { // TODO: Implement retry logic with exponential backoff // This function should attempt to fetch data multiple times with increasing delays // // Requirements: // - Track the last error encountered // - Loop from 0 to retries (inclusive) // - On success, return the data immediately // - On failure, wait before retrying (exponential backoff: 1s, 2s, 4s...) // - Don't delay after the final failed attempt // - If all retries fail, throw the last error throw new Error('fetchWithRetry not implemented'); } delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // Task 2: 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 { // TODO: Use Promise.allSettled to fetch all data in parallel // This allows us to handle partial failures gracefully // // Requirements: // - Use Promise.allSettled with fetchWithRetry for all 4 APIs // - Destructure results into users, sales, notifications, health // - Call each render method with its result // - Count failures and update status accordingly // - Update the lastUpdated timestamp using formatTime } catch (error) { this.setStatus('error', 'Unexpected error occurred'); console.error('Dashboard refresh error:', error); } finally { this.isLoading = false; this.elements.refreshBtn.disabled = false; } } // Task 3: Render functions for each data type renderUsers(result) { const container = this.elements.usersContent; // TODO: Handle rejected results by showing error with retry button // TODO: For fulfilled results, extract data and render stats: // - Total Users (data.total) // - Active Today (data.activeToday) - positive style // - New This Week (data.newThisWeek) - positive style // - Churn Rate (data.churnRate%) - negative style // Use formatNumber() for numeric values container.innerHTML = '

Not implemented

'; } renderSales(result) { const container = this.elements.salesContent; // TODO: Handle rejected results by showing error with retry button // TODO: For fulfilled results, extract data and render stats: // - Today's Revenue (data.todayRevenue) - use formatCurrency() // - Orders Today (data.ordersToday) - use formatNumber() // - Avg Order Value (data.avgOrderValue) - use formatCurrency() // - vs Yesterday (data.vsYesterday%) - positive/negative style based on value // Hint: Add '+' prefix for positive vsYesterday values container.innerHTML = '

Not implemented

'; } renderNotifications(result) { const container = this.elements.notificationsContent; // TODO: Handle rejected results by showing error with retry button // TODO: For fulfilled results: // - Handle empty array case with "No new notifications" message // - Map first 4 notifications to HTML with: // - notif.message // - notif.timestamp (use formatRelativeTime()) // Use the notification-item and time CSS classes container.innerHTML = '

Not implemented

'; } renderHealth(result) { const container = this.elements.healthContent; // TODO: Handle rejected results by showing error with retry button // TODO: For fulfilled results, map services array to HTML: // - service.name // - service.status (healthy/warning/error) - use as health-dot class // - service.latency (display as Xms) // Use health-indicator and health-dot CSS classes container.innerHTML = '

Not implemented

'; } 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) { // TODO: Create a map of section names to fetch functions and render methods // Map keys: 'users', 'sales', 'notifications', 'health' // Each entry needs: { fetch: fetchFunction, render: renderMethod } // Remember to bind render methods to 'this' // // TODO: Get the config for the requested section (return early if not found) // TODO: Try to fetch data with retry, then render with result format: // - Success: { status: 'fulfilled', value: data } // - Failure: { status: 'rejected', reason: error } } // Task 5: Auto-refresh management startAutoRefresh() { // TODO: Clear any existing interval first (prevent duplicates) // TODO: Create new interval that calls this.refresh() // Use this.refreshInterval for the delay } stopAutoRefresh() { // TODO: Clear the interval if it exists // TODO: Set this.autoRefreshTimer to null } setStatus(type, message) { this.elements.status.className = `status ${type}`; this.elements.status.textContent = message; } // Cleanup destroy() { this.stopAutoRefresh(); } }

Subscription Required