Please define at least one Phase and one Workstream in the Data Configuration tab.

"; showTab("atr-tab-dashboard"); return; } const grid = document.createElement("div"); grid.className = "atr-roadmap-grid"; // Set grid columns: 1 for workstream headers, 1 for each phase grid.style.gridTemplateColumns = `minmax(150px, 1fr) repeat(${phases.length}, minmax(200px, 2fr))`; // 1. Create Header Row const headerRow = document.createElement("div"); headerRow.className = "atr-phase-header-row"; headerRow.appendChild( document.createElement("div") ).className = "atr-header"; // Empty corner phases.forEach((phase) => { const phaseHeader = document.createElement("div"); phaseHeader.className = "atr-header atr-phase-header"; phaseHeader.textContent = phase; headerRow.appendChild(phaseHeader); }); grid.appendChild(headerRow); // 2. Create Workstream Rows workstreams.forEach((ws) => { const row = document.createElement("div"); row.className = "atr-grid-row"; row.dataset.workstreamTitle = ws; // For mobile view const wsHeader = document.createElement("div"); wsHeader.className = "atr-workstream-header"; wsHeader.textContent = ws; row.appendChild(wsHeader); phases.forEach((ph) => { const cell = document.createElement("div"); cell.className = "atr-grid-cell"; cell.dataset.phaseTitle = ph; // For mobile view cell.dataset.phase = ph; // For PDF generation cell.dataset.workstream = ws; // For PDF generation // Find initiatives for this cell const cellInitiatives = initiatives.filter( (i) => i.workstream === ws && i.phase === ph ); // Create editable cards cellInitiatives.forEach((i) => { const card = document.createElement("div"); card.className = "atr-dash-card"; card.innerHTML = ` ${i.desc} `; cell.appendChild(card); }); row.appendChild(cell); }); grid.appendChild(row); }); dashboardOutput.appendChild(grid); showTab("atr-tab-dashboard"); }); } // --- PDF Download Logic --- if (pdfBtn) { pdfBtn.addEventListener("click", function () { if ( typeof window.jspdf === "undefined" || typeof window.jspdf.jsPDF.autoTable === "undefined" ) { alert( "Error: PDF libraries (jsPDF, jsPDF-AutoTable) could not be loaded. Please try again." ); console.error("jsPDF or jsPDF.autoTable is not defined."); return; } try { const { jsPDF } = window.jspdf; const doc = new jsPDF("l", "pt", "a4"); // Landscape const margin = 40; doc.setFontSize(18); doc.setFont("helvetica", "bold"); doc.text("Agile Transformation Roadmap", margin, margin); const tableHead = [ "Initiative", "Phase", "Workstream", "Status", "Description", ]; const tableBody = []; // Read data FROM THE DASHBOARD if (dashboardOutput) { dashboardOutput .querySelectorAll(".atr-grid-cell") .forEach((cell) => { const phase = cell.dataset.phase || ""; const workstream = cell.dataset.workstream || ""; cell .querySelectorAll(".atr-dash-card") .forEach((card) => { const title = card.querySelector(".atr-dash-title")?.value || ""; const desc = card.querySelector(".atr-dash-desc")?.value || ""; const status = card.querySelector(".atr-dash-status")?.value || ""; tableBody.push([ title, phase, workstream, status, desc, ]); }); }); } doc.autoTable({ startY: margin + 20, head: tableHead, body: tableBody, theme: "striped", headStyles: { fillColor: [0, 115, 230], textColor: [255, 255, 255], }, columnStyles: { 0: { cellWidth: 120 }, 4: { cellWidth: 250 }, }, }); doc.save("Agile-Transformation-Roadmap.pdf"); } catch (e) { console.error("Error generating PDF:", e); alert("An error occurred while generating the PDF."); } }); } // --- Initialization --- setupRemoveListeners(); // Pre-populate with sample data addPhase("Phase 1: Foundation (Q1-Q2)"); addPhase("Phase 2: Scale (Q3-Q4)"); addPhase("Phase 3: Optimize (Ongoing)"); addWorkstream("People & Culture"); addWorkstream("Process & Practices"); addWorkstream("Technology & Tools"); addInitiative({ name: "Launch Pilot Teams", phase: "Phase 1: Foundation (Q1-Q2)", workstream: "Process & Practices", status: "Completed", desc: "Run two pilot teams on Project Phoenix to test new ceremonies and roles.", }); addInitiative({ name: "Select Agile PM Tool", phase: "Phase 1: Foundation (Q1-Q2)", workstream: "Technology & Tools", status: "Completed", desc: "Vendor selection and procurement of Jira Cloud.", }); addInitiative({ name: "Role-Based Training", phase: "Phase 1: Foundation (Q1-Q2)", workstream: "People & Culture", status: "In Progress", desc: "Training for Scrum Masters, Product Owners, and Dev Teams.", }); addInitiative({ name: "Establish Agile CoE", phase: "Phase 2: Scale (Q3-Q4)", workstream: "People & Culture", status: "Planned", desc: "Form a central Center of Excellence to guide scaling efforts.", }); addInitiative({ name: "Onboard Next 5 Teams", phase: "Phase 2: Scale (Q3-Q4)", workstream: "Process & Practices", status: "Planned", desc: "Identify and launch the next wave of Agile teams.", }); // Generate initial roadmap if (generateBtn) generateBtn.click(); // Ensure the default tab is active showTab("atr-tab-dashboard"); });