The Kudos Wall is empty. Be the first to give a shoutout!

`; } // Form submission form.onsubmit = (e) => { e.preventDefault(); const newKudos = { to: parseInt(toSelect.value), from: document.getElementById('kudos-from').value || 'Anonymous', message: document.getElementById('kudos-message').value, category: categorySelect.value }; if (newKudos.message) { data.kudos.unshift(newKudos); // Add to the beginning renderKudosTab(); form.reset(); } }; // PDF Download document.getElementById('download-kudos-pdf-btn').onclick = downloadKudosPDF; }; const renderConfigTab = () => { // Employees const empTable = document.getElementById('config-employees-table'); empTable.innerHTML = data.employees.map(emp => ` ${emp.id} Delete `).join(''); // Icebreakers const icebreakersTextarea = document.getElementById('config-icebreakers'); icebreakersTextarea.value = data.icebreakers.join('\n'); // Kudos Categories const catTable = document.getElementById('config-kudos-categories-table'); catTable.innerHTML = data.kudosCategories.map((cat, index) => ` Delete `).join(''); }; // --- DATA MANIPULATION (made global for inline onclick) --- window.addEmployee = () => { const nameInput = document.getElementById('new-employee-name'); if (nameInput.value) { const newId = data.employees.length > 0 ? Math.max(...data.employees.map(e => e.id)) + 1 : 1; data.employees.push({ id: newId, name: nameInput.value }); nameInput.value = ''; fullRender(); } }; window.updateEmployee = (id, newName) => { const employee = data.employees.find(e => e.id === id); if (employee) employee.name = newName; fullRender(); }; window.deleteEmployee = (id) => { data.employees = data.employees.filter(e => e.id !== id); fullRender(); }; window.saveIcebreakers = () => { const textarea = document.getElementById('config-icebreakers'); data.icebreakers = textarea.value.split('\n').filter(q => q.trim() !== ''); // In a real app, show a success message. console.log("Icebreakers saved!"); fullRender(); }; window.addKudosCategory = () => { const catInput = document.getElementById('new-kudos-category'); if (catInput.value) { data.kudosCategories.push(catInput.value); catInput.value = ''; fullRender(); } }; window.updateKudosCategory = (index, newName) => { data.kudosCategories[index] = newName; fullRender(); }; window.deleteKudosCategory = (index) => { data.kudosCategories.splice(index, 1); fullRender(); }; // --- PDF DOWNLOAD --- const downloadKudosPDF = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(20); doc.text("Team Kudos Wall", 14, 22); doc.setFontSize(11); doc.setTextColor(100); doc.text(`Report Generated: ${new Date().toLocaleDateString('en-US')}`, 14, 30); const kudosData = data.kudos.map(k => { const recipient = data.employees.find(e => e.id === k.to); return [ recipient ? recipient.name : 'Unknown', k.from, k.category, k.message ]; }); doc.autoTable({ startY: 40, head: [['To', 'From', 'Category', 'Message']], body: kudosData, theme: 'striped', headStyles: { fillColor: [79, 70, 229] }, // indigo-600 didParseCell: function (data) { if (data.column.dataKey === 3) { // Message column data.cell.styles.cellWidth = 'wrap'; } } }); doc.save('Team-Kudos-Wall.pdf'); }; // --- TAB NAVIGATION --- let currentTabIndex = 0; const switchTab = (newIndex) => { tabs.forEach((tab, index) => { const panel = document.getElementById(tab.getAttribute('aria-controls')); if (index === newIndex) { tab.classList.remove('tab-inactive'); tab.classList.add('tab-active'); if (panel) panel.classList.remove('hidden'); } else { tab.classList.remove('tab-active'); tab.classList.add('tab-inactive'); if (panel) panel.classList.add('hidden'); } }); currentTabIndex = newIndex; updateNavButtons(); }; const updateNavButtons = () => { prevBtn.disabled = currentTabIndex === 0; nextBtn.disabled = currentTabIndex === tabs.length - 1; prevBtn.classList.toggle('opacity-50', prevBtn.disabled); nextBtn.classList.toggle('opacity-50', nextBtn.disabled); }; tabs.forEach((tab, index) => tab.addEventListener('click', () => switchTab(index))); prevBtn.addEventListener('click', () => { if (currentTabIndex > 0) switchTab(currentTabIndex - 1); }); nextBtn.addEventListener('click', () => { if (currentTabIndex < tabs.length - 1) switchTab(currentTabIndex + 1); }); // --- INITIALIZATION --- const fullRender = () => { renderKickstartTab(); renderKudosTab(); renderConfigTab(); }; fullRender(); updateNavButtons(); });