${avgRate.toFixed(2)}%
`;
}
function renderCommissionChart() {
const chartCtx = document.getElementById('commissionChart')?.getContext('2d');
if (!chartCtx) return;
if (commissionChart) {
commissionChart.destroy();
}
commissionChart = new Chart(chartCtx, {
type: 'bar',
data: {
labels: sales.map(s => s.desc || `Sale #${s.id}`),
datasets: [{
label: 'Commission ($)',
data: sales.map(s => s.commission),
backgroundColor: 'rgba(79, 70, 229, 0.6)',
borderColor: 'rgba(79, 70, 229, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: { y: { beginAtZero: true, ticks: { callback: value => formatCurrency(value) } } },
plugins: { legend: { display: false } }
}
});
}
function renderConfigTable() {
const tableBody = document.getElementById('config-table');
if (!tableBody) return;
tableBody.innerHTML = sales.map((s, index) => `
|
|
|
${formatCurrency(s.commission)} |
|
`).join('');
}
// --- EVENT HANDLING & ACTIONS ---
function handleAddSale(e) {
e.preventDefault();
const amount = parseFloat(saleAmountInput.value);
const rate = parseFloat(commissionRateInput.value);
if (isNaN(amount) || isNaN(rate) || amount <= 0 || rate <= 0) {
alert('Please enter valid positive numbers for sale amount and commission rate.');
return;
}
const newSale = {
id: Date.now(),
desc: saleDescInput.value.trim(),
amount: amount,
rate: rate,
commission: (amount * rate) / 100
};
sales.unshift(newSale); // Add to the beginning of the array
saveData();
updateUI();
saleForm.reset();
}
window.updateSale = (index, field, value) => {
if (sales[index]) {
if (field === 'desc') {
sales[index][field] = value;
} else {
sales[index][field] = parseFloat(value);
// Recalculate commission
sales[index].commission = (sales[index].amount * sales[index].rate) / 100;
}
saveData();
updateUI();
}
};
window.deleteSale = (index) => {
sales.splice(index, 1);
saveData();
updateUI();
};
window.switchTab = (tabName) => {
activeTab = tabName;
updateTabStyles();
updateNavButtons();
};
function updateTabStyles() {
['calculator', 'dashboard', 'settings'].forEach(tab => {
document.getElementById(`tab-content-${tab}`).classList.add('hidden');
document.getElementById(`tab-btn-${tab}`).classList.remove('tab-active');
document.getElementById(`tab-btn-${tab}`).classList.add('tab-inactive');
});
document.getElementById(`tab-content-${activeTab}`).classList.remove('hidden');
document.getElementById(`tab-btn-${activeTab}`).classList.add('tab-active');
document.getElementById(`tab-btn-${activeTab}`).classList.remove('tab-inactive');
}
window.navigateTabs = (direction) => {
const tabs = ['calculator', 'dashboard', 'settings'];
const currentIndex = tabs.indexOf(activeTab);
let nextIndex;
if (direction === 'next') {
nextIndex = Math.min(currentIndex + 1, tabs.length - 1);
} else {
nextIndex = Math.max(currentIndex - 1, 0);
}
switchTab(tabs[nextIndex]);
};
function updateNavButtons() {
const tabs = ['calculator', 'dashboard', 'settings'];
const currentIndex = tabs.indexOf(activeTab);
document.getElementById('prev-btn').disabled = (currentIndex === 0);
document.getElementById('prev-btn').classList.toggle('opacity-50', currentIndex === 0);
document.getElementById('prev-btn').classList.toggle('cursor-not-allowed', currentIndex === 0);
document.getElementById('next-btn').disabled = (currentIndex === tabs.length - 1);
document.getElementById('next-btn').classList.toggle('opacity-50', currentIndex === tabs.length - 1);
document.getElementById('next-btn').classList.toggle('cursor-not-allowed', currentIndex === tabs.length - 1);
}
window.downloadPDF = async () => {
const { jsPDF } = window.jspdf;
const dashboardContent = document.getElementById('dashboard-pdf-content');
if (!dashboardContent) return;
try {
const canvas = await html2canvas(dashboardContent, {
scale: 2, useCORS: true, logging: false, backgroundColor: '#ffffff'
});
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'landscape', unit: 'px', format: [canvas.width, canvas.height]
});
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('Commission_Analysis_Dashboard.pdf');
} catch (error) {
console.error("Failed to generate PDF:", error);
}
};
// --- START THE APP ---
init();
});
