Active Campaigns
${active}
`;
// Render Table
dashboardTableBody.innerHTML = '';
state.influencers.forEach(i => {
const campaign = state.campaigns.find(c => c.id === i.campaignId);
const tr = document.createElement('tr');
tr.className = 'bg-white border-b hover:bg-gray-50';
tr.innerHTML = `
${i.name}
${i.handle}
|
${(i.followers / 1000).toFixed(1)}k |
|
|
`;
dashboardTableBody.appendChild(tr);
});
document.getElementById('dashboard-date').textContent = `Report as of: ${new Date().toLocaleDateString()}`;
};
const renderAll = () => {
renderConfig();
renderDashboard();
updateNavButtons();
};
// --- Row Creation for Config ---
const createInfluencerRow = (influencer = {}) => {
const id = influencer.id || nextId++;
const div = document.createElement('div');
div.className = 'influencer-row grid grid-cols-1 sm:grid-cols-8 gap-2 items-center';
div.dataset.id = id;
div.innerHTML = `
`;
div.querySelector('.remove-btn').addEventListener('click', () => {
div.remove();
saveConfig();
renderDashboard();
});
influencersList.appendChild(div);
};
const createCampaignRow = (campaign = {}) => {
const id = campaign.id || nextId++;
const div = document.createElement('div');
div.className = 'campaign-row grid grid-cols-1 sm:grid-cols-8 gap-2 items-center';
div.dataset.id = id;
div.innerHTML = `
`;
div.querySelector('.remove-btn').addEventListener('click', () => {
div.remove();
saveConfig();
renderDashboard();
});
campaignsList.appendChild(div);
};
// --- Event Handlers ---
addInfluencerBtn.addEventListener('click', () => createInfluencerRow());
addCampaignBtn.addEventListener('click', () => createCampaignRow());
dashboardTableBody.addEventListener('change', (e) => {
const influencerId = parseInt(e.target.dataset.influencerId);
const influencer = state.influencers.find(i => i.id === influencerId);
if (influencer) {
if (e.target.classList.contains('status-select')) {
influencer.status = e.target.value;
}
if (e.target.classList.contains('campaign-select')) {
influencer.campaignId = e.target.value ? parseInt(e.target.value) : null;
}
renderDashboard(); // Re-render to update summary cards
}
});
// --- Tab & Navigation Logic ---
function switchTab(targetTabId) {
if (currentTab === 'config') {
saveConfig();
}
currentTab = targetTabId;
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === currentTab));
tabContents.forEach(content => content.classList.toggle('active', content.id === currentTab));
renderAll();
}
tabs.forEach(tab => tab.addEventListener('click', () => switchTab(tab.dataset.tab)));
nextBtn.addEventListener('click', () => currentTab === 'dashboard' ? switchTab('config') : switchTab('dashboard'));
prevBtn.addEventListener('click', () => currentTab === 'config' ? switchTab('dashboard') : switchTab('config'));
function updateNavButtons() {
if (currentTab === 'dashboard') {
nextBtn.textContent = 'Configure Data';
prevBtn.style.display = 'none';
pdfButtonContainer.style.display = 'block';
} else {
nextBtn.textContent = 'Update Dashboard';
prevBtn.style.display = 'inline-flex';
pdfButtonContainer.style.display = 'none';
}
}
// --- PDF Download ---
downloadPdfBtn.addEventListener('click', async () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const content = document.getElementById('pdf-content');
// Temporarily replace selects with static text for PDF
content.querySelectorAll('select').forEach(sel => {
const text = document.createElement('span');
text.textContent = sel.options[sel.selectedIndex].text;
if(sel.classList.contains('status-select')) {
const statusClass = 'status-' + sel.value.toLowerCase().replace(' ', '-');
text.className = `status-badge ${statusClass}`;
}
sel.style.display = 'none';
sel.parentNode.insertBefore(text, sel);
});
await new Promise(r => setTimeout(r, 100));
const canvas = await html2canvas(content, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 1.0);
doc.setFont('helvetica', 'bold');
doc.setFontSize(18);
doc.text('Influencer Campaign Report', 14, 22);
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth() - 28;
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
doc.addImage(imgData, 'JPEG', 14, 30, pdfWidth, pdfHeight);
// Restore selects after PDF generation
content.querySelectorAll('select').forEach(sel => sel.style.display = 'block');
content.querySelectorAll('span.status-badge').forEach(span => span.remove());
doc.save(`Influencer-Report-${new Date().toISOString().slice(0,10)}.pdf`);
});
// --- Initial Load ---
renderAll();
});
