`; let tableHtml = ``; results.commissionDetails.forEach(affiliate => { tableHtml += ``; }); tableHtml += `

Affiliate	Direct Comm.	Downline Comm.	Total Earnings
${affiliate.name} (ID: ${affiliate.id})	$${affiliate.directCommission.toFixed(2)}	$${affiliate.downlineCommission.toFixed(2)}	$${affiliate.totalCommission.toFixed(2)}

`; resultsContainer.innerHTML = tableHtml; }; // --- CORE LOGIC --- const handleCalculation = () => { calculateBtnSpinner.classList.remove('hidden'); calculateBtnText.textContent = 'Calculating...'; calculateBtn.disabled = true; setTimeout(() => { const directRate = parseFloat(document.getElementById('direct-commission').value) / 100; const tier2Rate = parseFloat(document.getElementById('tier2-commission').value) / 100; let commissionDetails = affiliates.map(aff => { // Direct sales and commission const mySales = sales.filter(s => s.affiliateId === aff.id); const directSalesTotal = mySales.reduce((sum, s) => sum + s.amount, 0); const directCommission = directSalesTotal * directRate; // Downline sales and commission const downlines = affiliates.filter(a => a.uplineId === aff.id); const downlineSalesTotal = downlines.reduce((downlineSum, downlineAff) => { const downlineSales = sales.filter(s => s.affiliateId === downlineAff.id); return downlineSum + downlineSales.reduce((saleSum, s) => saleSum + s.amount, 0); }, 0); const downlineCommission = downlineSalesTotal * tier2Rate; return { id: aff.id, name: aff.name, directCommission, downlineCommission, totalCommission: directCommission + downlineCommission }; }); const totalSales = sales.reduce((sum, s) => sum + s.amount, 0); const totalCommissions = commissionDetails.reduce((sum, c) => sum + c.totalCommission, 0); const results = { totalAffiliates: affiliates.length, totalSales: totalSales, totalCommissions: totalCommissions, commissionDetails: commissionDetails.sort((a,b) => b.totalCommission - a.totalCommission) }; renderDashboard(results); switchTab('dashboard'); downloadPdfBtn.disabled = false; calculateBtnSpinner.classList.add('hidden'); calculateBtnText.textContent = 'Calculate Commissions'; calculateBtn.disabled = false; }, 500); }; // --- UI & EVENT HANDLERS --- const switchTab = (tabId) => { currentTab = tabId; 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; pdfRenderContainer.innerHTML = ``; html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', 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('Affiliate-Commission-Report.pdf'); }); }; // --- EVENT LISTENERS --- window.switchTab = switchTab; window.navigateTabs = navigateTabs; calculateBtn.addEventListener('click', handleCalculation); downloadPdfBtn.addEventListener('click', handlePdfDownload); addAffiliateBtn.addEventListener('click', () => { affiliates.push({ id: nextAffiliateId++, name: 'New Affiliate', uplineId: null }); renderConfigTables(); }); addSaleBtn.addEventListener('click', () => { sales.push({ id: nextSaleId++, affiliateId: 1, amount: 0 }); renderConfigTables(); }); document.getElementById('config-table-container').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 container = e.target.closest('tbody').id; const dataArray = container === 'affiliates-table-body' ? affiliates : sales; const item = dataArray.find(i => i.id === id); if (item) item[prop] = e.target.type === 'number' ? (parseFloat(e.target.value) || null) : e.target.value; }); document.getElementById('config-table-container').addEventListener('click', e => { if (!e.target.classList.contains('rm-btn')) return; const id = parseInt(e.target.closest('tr').dataset.id); const container = e.target.closest('tbody').id; if (container === 'affiliates-table-body') affiliates = affiliates.filter(i => i.id !== id); else sales = sales.filter(i => i.id !== id); renderConfigTables(); }); // --- INITIALIZATION --- renderConfigTables(); updateNavButtons(); switchTab('dashboard'); });