`).join('') || '

No activity yet.

'; }, renderValueChart() { /* Renders Bar Chart */ }, renderLeaderboards() { /* Renders Leaderboard Lists */ }, renderConfigTable() { /* Renders data table */ }, openTab(tabName) { /* Standard tab logic */ }, navigateTabs(direction) { /* Standard nav logic */ }, updateNavButtons() { /* Standard nav button logic */ }, generatePDF() { /* Standard PDF logic */ } }; // Simplified & complete standard functions pRecApp.addEventListeners = function() { document.querySelectorAll('.p-rec-tab-button').forEach(btn => btn.addEventListener('click', e => this.openTab(e.currentTarget.dataset.tab))); document.getElementById('p-rec-data-form').addEventListener('submit', e => { e.preventDefault(); this.handleAddOrUpdate(); }); document.getElementById('p-rec-data-list').addEventListener('click', e => { const row = e.target.closest('tr'); if (!row) return; if (e.target.closest('.p-rec-edit-btn')) this.editData(row.dataset.id); if (e.target.closest('.p-rec-delete-btn')) { if (confirm('Delete this record?')) { this.recognitionData = this.recognitionData.filter(d => d.id != row.dataset.id); this.updateDashboard(); } } }); document.getElementById('p-rec-download-pdf').addEventListener('click', () => this.generatePDF()); document.getElementById('p-rec-nextBtn').addEventListener('click', () => this.navigateTabs(1)); document.getElementById('p-rec-prevBtn').addEventListener('click', () => this.navigateTabs(-1)); }; pRecApp.handleAddOrUpdate = function() { const id = document.getElementById('p-rec-edit-id').value; const data = { giver: document.getElementById('p-rec-giver').value, receiver: document.getElementById('p-rec-receiver').value, value: document.getElementById('p-rec-value').value, reason: document.getElementById('p-rec-reason').value, date: new Date().toISOString() }; if (id) { const index = this.recognitionData.findIndex(d => d.id == id); this.recognitionData[index] = { ...this.recognitionData[index], ...data }; } else { data.id = Date.now(); this.recognitionData.push(data); } document.getElementById('p-rec-data-form').reset(); document.getElementById('p-rec-edit-id').value = ''; this.updateDashboard(); }; pRecApp.editData = function(id) { const data = this.recognitionData.find(d => d.id == id); if (!data) return; document.getElementById('p-rec-edit-id').value = data.id; document.getElementById('p-rec-giver').value = data.giver; document.getElementById('p-rec-receiver').value = data.receiver; document.getElementById('p-rec-value').value = data.value; document.getElementById('p-rec-reason').value = data.reason; this.openTab('Config'); }; pRecApp.renderValueChart = function() { const id = 'p-rec-value-chart'; const ctx = document.getElementById(id); if (!ctx) return; const valueCounts = this.companyValues.map(val => this.recognitionData.filter(d => d.value === val).length); if (this.charts[id]) this.charts[id].destroy(); this.charts[id] = new Chart(ctx, { type: 'doughnut', data: { labels: this.companyValues, datasets: [{ data: valueCounts, backgroundColor: ['#7E57C2', '#5C6BC0', '#42A5F5', '#26C6DA', '#66BB6A'] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: {padding: 15} } } } }); }; pRecApp.renderLeaderboards = function() { const receivers = this.recognitionData.reduce((acc, {receiver}) => { acc[receiver] = (acc[receiver] || 0) + 1; return acc; }, {}); const givers = this.recognitionData.reduce((acc, {giver}) => { acc[giver] = (acc[giver] || 0) + 1; return acc; }, {}); const renderList = (elementId, data) => { const list = document.getElementById(elementId); const sorted = Object.entries(data).sort(([,a],[,b]) => b-a).slice(0, 5); list.innerHTML = sorted.map(([name, count], i) => `

${i+1}.${name}${count}

`).join('') || '

No data yet.

'; }; renderList('p-rec-leaderboard-received', receivers); renderList('p-rec-leaderboard-given', givers); }; pRecApp.renderConfigTable = function() { const tbody = document.getElementById('p-rec-data-list'); tbody.innerHTML = ''; this.recognitionData.forEach(d => { const row = tbody.insertRow(); row.dataset.id = d.id; row.innerHTML = `${new Date(d.date).toLocaleDateString()}${d.giver}${d.receiver}${d.value}${d.reason} ✏️🗑️`; }); }; pRecApp.openTab = function(tabName) { this.currentTab = tabName; document.querySelectorAll('.p-rec-tab-content').forEach(c => c.classList.remove('active')); document.querySelectorAll('.p-rec-tab-button').forEach(b => b.classList.remove('active')); document.getElementById(`p-rec-${tabName}`).classList.add('active'); document.querySelector(`.p-rec-tab-button[data-tab='${tabName}']`).classList.add('active'); this.updateNavButtons(); }; pRecApp.navigateTabs = function(direction) { const tabs = ['Dashboard', 'Config']; const nextIndex = tabs.indexOf(this.currentTab) + direction; if (nextIndex >= 0 && nextIndex < tabs.length) this.openTab(tabs[nextIndex]); }; pRecApp.updateNavButtons = function() { const prevBtn = document.getElementById('p-rec-prevBtn'); const nextBtn = document.getElementById('p-rec-nextBtn'); prevBtn.style.visibility = (this.currentTab === 'Dashboard') ? 'hidden' : 'visible'; nextBtn.style.visibility = (this.currentTab === 'Config') ? 'hidden' : 'visible'; }; pRecApp.generatePDF = function() { html2pdf().from(document.getElementById('p-rec-tool-content-for-pdf')).set({ margin: 0.5, filename: 'Recognition_Dashboard.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' } }).save(); }; pRecApp.init(); });