${challenge.description}

`; grid.appendChild(card); }); }; const renderLeaderboard = () => { const tableBody = $('#leaderboard-body'); if(!tableBody) return; const metrics = calculateMetrics(); tableBody.innerHTML = ''; metrics.employeeScores.forEach((emp, index) => { const row = ` #${index + 1} ${emp.name} ${emp.score} `; tableBody.innerHTML += row; }); }; // --- EVENT HANDLERS --- // const switchTab = (tabId) => { activeTab = tabId; tabContents.forEach(content => content.classList.toggle('active', content.id === tabId)); tabButtons.forEach(button => button.classList.toggle('active', button.dataset.tab === tabId)); if (tabId === 'dashboard') renderDashboard(); if (tabId === 'challenges') renderChallenges(); if (tabId === 'leaderboard') renderLeaderboard(); }; tabButtons.forEach(button => { button.addEventListener('click', () => switchTab(button.dataset.tab)); }); // PDF Download $('#download-pdf-btn').addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const metrics = calculateMetrics(); doc.setFontSize(22); doc.text("Employee Engagement Report", 105, 20, null, null, "center"); doc.setFontSize(16); doc.text("Leaderboard", 14, 35); const leaderboardData = metrics.employeeScores.map((emp, index) => [`#${index + 1}`, emp.name, emp.score]); doc.autoTable({ startY: 40, head: [['Rank', 'Employee', 'Points']], body: leaderboardData }); doc.text("Challenge Participation", 14, doc.lastAutoTable.finalY + 15); const participationData = metrics.challengeParticipation.map(p => [p.name, p.completions]); doc.autoTable({ startY: doc.lastAutoTable.finalY + 20, head: [['Challenge', 'Completions']], body: participationData }); doc.save('engagement-report.pdf'); }); // Navigation Buttons const tabOrder = ['dashboard', 'challenges', 'leaderboard', 'data-config']; $('#next-btn').addEventListener('click', () => { const currentIndex = tabOrder.indexOf(activeTab); const nextIndex = (currentIndex + 1) % tabOrder.length; switchTab(tabOrder[nextIndex]); }); $('#prev-btn').addEventListener('click', () => { const currentIndex = tabOrder.indexOf(activeTab); const prevIndex = (currentIndex - 1 + tabOrder.length) % tabOrder.length; switchTab(tabOrder[prevIndex]); }); // --- INITIALIZATION --- // switchTab('dashboard'); });