${data.level}

`; } // Update details section const detailCard = document.createElement('div'); detailCard.className = `card ${colors.border} border-l-4`; detailCard.innerHTML = `

${data.title} - ${data.level}

${data.summary}

Key Factors:

${data.factors.map(f => `
• ${f}
`).join('')}

`; detailsContainer.appendChild(detailCard); totalFactors += data.factors.length; // Determine strongest/weakest forces (excluding rivalry) if (key !== 'rivalry') { if (levelMap[data.level] > strongestForce.level) { strongestForce = { name: data.title, level: levelMap[data.level] }; } if (levelMap[data.level] < weakestForce.level) { weakestForce = { name: data.title, level: levelMap[data.level] }; } } }); // Update summary cards document.getElementById('overall-rivalry').textContent = analysisData.rivalry.level; document.getElementById('overall-rivalry').className = `text-4xl font-bold ${colorMap[analysisData.rivalry.level].text}`; document.getElementById('strongest-force').textContent = strongestForce.name; document.getElementById('weakest-force').textContent = weakestForce.name; document.getElementById('factors-analyzed').textContent = totalFactors; }; const saveConfigData = () => { configFormContainer.querySelectorAll('[data-key]').forEach(section => { const key = section.dataset.key; const level = section.querySelector('[data-field="level"]').value; const factors = section.querySelector('[data-field="factors"]').value.split('\n').filter(f => f.trim() !== ''); const summary = section.querySelector('[data-field="summary"]').value; analysisData[key].level = level; analysisData[key].factors = factors; analysisData[key].summary = summary; }); updateDashboard(); alert('Dashboard updated successfully!'); }; const generatePdf = () => { const { jsPDF } = window.jspdf; const dashboardToCapture = document.getElementById('dashboard-content-to-print'); if (!dashboardToCapture) return; html2canvas(dashboardToCapture, { scale: 2, windowWidth: dashboardToCapture.scrollWidth, windowHeight: dashboardToCapture.scrollHeight }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const ratio = canvas.width / canvas.height; const imgWidth = pdfWidth - 20; const imgHeight = imgWidth / ratio; let finalHeight = imgHeight > pdfHeight - 35 ? pdfHeight - 35 : imgHeight; pdf.setFont('Inter', 'bold'); pdf.setFontSize(20); pdf.setTextColor('#333333'); pdf.text("Porter's Five Forces Analysis", pdfWidth / 2, 15, { align: 'center' }); pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, finalHeight); pdf.save('Porters-Five-Forces.pdf'); }); }; // --- EVENT LISTENERS --- prevBtn?.addEventListener('click', () => switchTab('dashboard')); nextBtn?.addEventListener('click', () => switchTab('config')); downloadPdfBtn?.addEventListener('click', generatePdf); updateDashboardBtn?.addEventListener('click', () => { saveConfigData(); switchTab('dashboard'); }); // --- INITIALIZATION --- renderConfigForm(); updateDashboard(); updateNavButtons(); });