No systems added. Add systems in the "Manage Architecture" tab.

'; return; } let table = ''; systems.forEach(sys => table += ``); table += ''; systems.forEach(from => { table += ``; systems.forEach(to => { if (from === to) { table += ''; } else { const status = statuses[`${from}-${to}`] || 'ok'; table += ``; } }); table += ''; }); table += '

	${sys}
${from}

'; container.innerHTML = table; }; const renderManageTab = () => { const systemsTbody = document.getElementById('iad-systems-tbody'); systemsTbody.innerHTML = ''; systems.forEach(sys => { systemsTbody.innerHTML += `${sys}Delete`; }); const fromSelect = document.getElementById('iad-from-system'); const toSelect = document.getElementById('iad-to-system'); const optionsHtml = systems.map(s => `${s}`).join(''); fromSelect.innerHTML = optionsHtml; toSelect.innerHTML = optionsHtml; }; // --- EVENT HANDLING --- const switchTab = (tabId) => { tabContents.forEach(c => c.style.display = 'none'); tabButtons.forEach(b => b.classList.remove('active')); const activeContent = document.getElementById(tabId); const activeButton = document.querySelector(`.iad-tab-button[data-tab="${tabId}"]`); if (activeContent && activeButton) { activeContent.style.display = 'block'; activeButton.classList.add('active'); } updateNavButtons(); }; const updateNavButtons = () => { const i = [...tabButtons].findIndex(b => b.classList.contains('active')); prevBtn.disabled = i === 0; nextBtn.disabled = i === tabButtons.length - 1; }; tabButtons.forEach(b => b.addEventListener('click', () => switchTab(b.dataset.tab))); nextBtn.addEventListener('click', () => { const i = [...tabButtons].findIndex(b=>b.classList.contains('active')); if (i < tabButtons.length - 1) switchTab(tabButtons[i+1].dataset.tab); }); prevBtn.addEventListener('click', () => { const i = [...tabButtons].findIndex(b=>b.classList.contains('active')); if (i > 0) switchTab(tabButtons[i-1].dataset.tab); }); document.getElementById('iad-system-form').addEventListener('submit', e => { e.preventDefault(); const systemName = document.getElementById('iad-system-name').value; if (!systems.includes(systemName)) { systems.push(systemName); saveState(); renderAll(); } e.target.reset(); }); document.getElementById('iad-systems-tbody').addEventListener('click', e => { if (e.target.tagName === 'BUTTON') { const sysToDelete = e.target.dataset.system; if (confirm(`Are you sure you want to delete "${sysToDelete}" and all its integrations?`)) { systems = systems.filter(s => s !== sysToDelete); // Clean up statuses object const newStatuses = {}; Object.keys(statuses).forEach(key => { const [from, to] = key.split('-'); if (from !== sysToDelete && to !== sysToDelete) { newStatuses[key] = statuses[key]; } }); statuses = newStatuses; saveState(); renderAll(); } } }); document.getElementById('iad-status-form').addEventListener('submit', e => { e.preventDefault(); const from = document.getElementById('iad-from-system').value; const to = document.getElementById('iad-to-system').value; const status = document.getElementById('iad-status-select').value; if (from === to) { alert('A system cannot integrate with itself.'); return; } statuses[`${from}-${to}`] = status; saveState(); renderAll(); alert(`Status from ${from} to ${to} set to ${status}.`); }); // --- PDF EXPORT --- document.getElementById('iad-download-pdf-btn').addEventListener('click', function() { const btn = this; btn.textContent = 'Generating...'; btn.disabled = true; const content = document.getElementById('iad-pdf-capture-area'); html2canvas(content, { scale: 2, backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--iad-bg-color') }).then(canvas => { const doc = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' }); const imgData = canvas.toDataURL('image/png'); const pdfWidth = doc.internal.pageSize.getWidth(); const imgHeight = (canvas.height * pdfWidth) / canvas.width; doc.setFillColor(31, 41, 55); // --iad-bg-color doc.rect(0, 0, doc.internal.pageSize.getWidth(), doc.internal.pageSize.getHeight(), 'F'); doc.setFontSize(18); doc.setTextColor('#f9fafb'); doc.text('Integration Architecture Status Report', pdfWidth / 2, 15, { align: 'center' }); doc.addImage(imgData, 'PNG', 10, 25, pdfWidth - 20, imgHeight - 20); doc.save('Integration_Status_Report.pdf'); }).finally(() => { btn.textContent = 'Download Report'; btn.disabled = false; }); }); // --- INITIALIZATION --- renderAll(); });