${strategy.name}

Budget: $${strategy.budget.toLocaleString('en-US')}

`; elements.activeStrategiesList.appendChild(div); }); } /** * Renders the strategy management table in the planner tab. */ function renderStrategyTable() { if (!elements.strategiesTableBody) return; elements.strategiesTableBody.innerHTML = ''; dashboardState.strategies.forEach(strategy => { const tr = document.createElement('tr'); tr.innerHTML = ` ${strategy.name} $${strategy.budget.toLocaleString('en-US')} ${strategy.status} Delete `; elements.strategiesTableBody.appendChild(tr); }); } /** * Populates the configuration tab with data from the state. */ function populateConfigForm() { if (elements.configSeoRank) elements.configSeoRank.value = dashboardState.kpis.seoRank; if (elements.configGmbClicks) elements.configGmbClicks.value = dashboardState.kpis.gmbClicks; if (elements.configReviewRating) elements.configReviewRating.value = dashboardState.kpis.reviewRating; if (elements.configAdRoi) elements.configAdRoi.value = dashboardState.kpis.adRoi; // Generate and populate traffic inputs const trafficInputsContainer = document.querySelector('#config .grid:nth-child(2)'); if(trafficInputsContainer) { trafficInputsContainer.innerHTML = ''; dashboardState.traffic.labels.forEach((label, index) => { trafficInputsContainer.innerHTML += ` `; }); } // Generate and populate reviews inputs const reviewsInputsContainer = document.querySelector('#config .grid:nth-child(4)'); if(reviewsInputsContainer) { reviewsInputsContainer.innerHTML = ''; dashboardState.reviews.labels.forEach((label, index) => { reviewsInputsContainer.innerHTML += ` `; }); } } // --- EVENT HANDLER FUNCTIONS (made globally accessible) --- // /** * Adds a new strategy to the state and re-renders the UI. */ window.addStrategy = () => { const name = elements.strategyNameInput.value.trim(); const budget = parseFloat(elements.strategyBudgetInput.value); const status = elements.strategyStatusInput.value; if (name && !isNaN(budget)) { const newStrategy = { id: Date.now(), // Simple unique ID name, budget, status }; dashboardState.strategies.push(newStrategy); renderStrategyTable(); renderActiveStrategies(); // Update dashboard as well elements.strategyNameInput.value = ''; elements.strategyBudgetInput.value = ''; } else { alert('Please enter a valid name and budget.'); } }; /** * Deletes a strategy from the state and re-renders. */ window.deleteStrategy = (id) => { dashboardState.strategies = dashboardState.strategies.filter(s => s.id !== id); renderStrategyTable(); renderActiveStrategies(); }; /** * Reads all data from the config form, updates the state, and re-renders the dashboard. */ window.updateDashboardData = () => { // Update KPIs dashboardState.kpis.seoRank = elements.configSeoRank.value; dashboardState.kpis.gmbClicks = parseInt(elements.configGmbClicks.value) || 0; dashboardState.kpis.reviewRating = parseFloat(elements.configReviewRating.value) || 0; dashboardState.kpis.adRoi = parseInt(elements.configAdRoi.value) || 0; // Update Traffic Data document.querySelectorAll('[data-traffic-index]').forEach(input => { const index = parseInt(input.dataset.trafficIndex); dashboardState.traffic.data[index] = parseInt(input.value) || 0; }); // Update Reviews Data document.querySelectorAll('[data-review-index]').forEach(input => { const index = parseInt(input.dataset.reviewIndex); dashboardState.reviews.data[index] = parseInt(input.value) || 0; }); renderDashboard(); alert('Dashboard has been updated!'); changeTab('dashboard'); // Switch back to the dashboard to see changes }; /** * Generates and downloads a PDF of the dashboard content. */ window.downloadPDF = () => { const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content'); if (!pdfContent) { console.error("PDF content area not found!"); return; } // Use html2canvas to capture the div html2canvas(pdfContent, { scale: 2, // Higher scale for better quality useCORS: true, backgroundColor: '#ffffff' }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: [canvas.width, canvas.height] }); pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('Local_Strategy_Dashboard.pdf'); }).catch(err => { console.error("Error generating PDF:", err); alert("Sorry, there was an error generating the PDF."); }); }; // --- INITIALIZATION CALLS --- // populateConfigForm(); renderDashboard(); renderStrategyTable(); updateNavButtons(); });