Total Referral Sales
$${totalSales.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Top Referrer
${topReferrer}
Avg. Sale Value
$${(totalSales / totalReferrals || 0).toFixed(2)}
`;
// 3. Render referral log
referralLogBody.innerHTML = [...referrals].reverse().slice(0, 50).map(r => `
| ${r.referrerName} |
${r.platform} |
${r.referredCustomer} |
$${r.saleAmount.toFixed(2)} |
`).join('');
// 4. Render charts
renderCharts(referrerSales);
};
const renderCharts = (referrerSales) => {
const platformCounts = platforms.map(p => referrals.filter(r => r.platform === p).length);
const platformCtx = document.getElementById('platform-chart').getContext('2d');
if (platformChart) platformChart.destroy();
platformChart = new Chart(platformCtx, {
type: 'pie',
data: {
labels: platforms,
datasets: [{ data: platformCounts, backgroundColor: ['#3b5998', '#e4405f', '#1da1f2', '#0077b5', '#000000'] }]
},
options: { responsive: true, plugins: { title: { display: true, text: 'Referrals by Platform' } } }
});
const sortedReferrers = Object.entries(referrerSales).sort(([,a],[,b]) => b-a).slice(0, 5);
const referrerLabels = sortedReferrers.map(r => r[0]);
const referrerData = sortedReferrers.map(r => r[1]);
const referrerCtx = document.getElementById('referrer-chart').getContext('2d');
if (referrerChart) referrerChart.destroy();
referrerChart = new Chart(referrerCtx, {
type: 'bar',
data: {
labels: referrerLabels,
datasets: [{ label: 'Total Sales ($)', data: referrerData, backgroundColor: '#3B82F6' }]
},
options: { responsive: true, indexAxis: 'y', plugins: { title: { display: true, text: 'Top 5 Referrers by Sales' } } }
});
};
const renderConfigTable = () => {
configTableBody.innerHTML = referrals.map(r => `
|
|
|
|
|
`).join('');
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
if (tabId === 'dashboard') renderDashboard();
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
const pdfRenderContainer = document.getElementById('pdf-render-content');
const pdfContent = document.getElementById('pdf-content').innerHTML;
const header = `
Social Media Referral Report
`;
pdfRenderContainer.innerHTML = header + pdfContent + '';
html2canvas(pdfRenderContainer, { scale: 2, backgroundColor: '#ffffff' }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Referral-Tracker-Report.pdf');
});
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
downloadPdfBtn.addEventListener('click', handlePdfDownload);
addReferralBtn.addEventListener('click', () => {
referrals.push({ id: nextId++, referrerName: 'New Referrer', platform: 'Facebook', referredCustomer: 'New Customer', saleAmount: 0 });
renderConfigTable();
});
configTableBody.addEventListener('input', e => {
if (!e.target.classList.contains('cfg-input')) return;
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const item = referrals.find(r => r.id === id);
if (item) item[prop] = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
});
configTableBody.addEventListener('click', e => {
if (!e.target.classList.contains('rm-btn')) return;
const id = parseInt(e.target.closest('tr').dataset.id);
referrals = referrals.filter(r => r.id !== id);
renderConfigTable();
});
// --- INITIALIZATION ---
renderConfigTable();
renderDashboard();
updateNavButtons();
});
