```html > > ``` > // === SCENARIO TEST DATA FROM 3-SCENARIO DATABASE === > > const scenarioData = { > > scenario1: { > > name: "Scenario 1: Baseline (IT Rejected)", > > score: 62, > > style: "Baseline", > > integrationPoints: 17, > > integrationStyle: "Real-time", > > hardSavings: 1.1, > > softSavings: 2.1, > > laborHours: 5000, > > itCost: 850, > > plantBuyerSolution: "Auto-derive GL from item classification + work order type in Hexagon, sync to Oracle PR with full COA string", > > apMatch: "Automated 3-way match in Oracle, POD evidence from Hexagon synced in real-time", > > dcPOHandling: "Real-time PO change sync from Oracle → Hexagon requires bidirectional update, high complexity", > > keyAdvantages: ["Delivers full $3.2M ROI target", "Solves plant buyer GL headache completely", "Real-time visibility across systems", "Audit trail is complete and automatic", "5,000 labor hours saved annually"], > > keyRisks: ["17 integration points = high IT support burden", "Real-time sync failures create cascading issues", "Custom integration flagged as out of scope", "IT rejected due to back-and-forth complexity", "High integration development cost"], > > impactByNode: { > > supplier: "pass", item: "pass", coa: "pass", > > pm: "pass", "labor-decision": "pass", wo: "pass", "parts-decision": "pass", pr: "pass", > > "pr-sync": "fail", validation: "fail", "sync-success": "fail", > > "rcv-pr": "pass", po: "pass", receive: "fail", "inspection-decision": "pass", > > invoice: "pass", match: "pass", payment: "fail", gl: "pass" > > }, > > failureReasons: { > > "pr-sync": "17 integration points - IT says too complex", > > validation: "Bidirectional sync creates dependency issues", > > "sync-success": "Real-time sync failures cascade", > > receive: "Receipt sync must happen immediately - timing risk", > > payment: "Payment confirmation back-sync adds complexity" > > } > > }, > > scenario2: { > > name: "Scenario 2: IT Preferred (Minimal Integration)", > > score: 38, > > style: "IT Preferred", > > integrationPoints: 4, > > integrationStyle: "Batch", > > hardSavings: 0.4, > > softSavings: 0.6, > > laborHours: 1200, > > itCost: 250, > > plantBuyerSolution: "Manual GL assignment in Oracle by plant buyers - does NOT solve the pain point", > > apMatch: "Manual 3-way match in Oracle, manual POD upload from Hexagon", > > dcPOHandling: "PO changes in Oracle do not sync back to Hexagon - manual reconciliation required", > > keyAdvantages: ["Lowest IT complexity and support burden", "Minimal custom integration required", "Clear system boundaries", "Low integration development cost", "IT will approve"], > > keyRisks: ["Only $1M savings (69% below ROI target)", "Does NOT solve plant buyer GL headache", "Manual PO reconciliation adds labor", "High data quality risk from dual entry", "Defeats program objectives", "Finance will NOT approve"], > > impactByNode: { > > supplier: "pass", item: "pass", coa: "pass", > > pm: "pass", "labor-decision": "pass", wo: "pass", "parts-decision": "pass", pr: "fail", > > "pr-sync": "pass", validation: "pass", "sync-success": "pass", > > "rcv-pr": "fail", po: "pass", receive: "fail", "inspection-decision": "pass", > > invoice: "fail", match: "fail", payment: "pass", gl: "fail" > > }, > > failureReasons: { > > pr: "Plant buyer must manually enter PR in Oracle + assign GL - defeats charter requirement", > > "rcv-pr": "No auto-derived GL - manual entry required", > > receive: "Manual POD upload - labor cost, audit delay", > > invoice: "Manual 3-way match - high data quality risk", > > match: "Manual reconciliation defeats ROI savings", > > gl: "Incomplete GL posting - Oracle missing procurement context" > > } > > }, > > scenario3: { > > name: "Scenario 3: Optimized Hybrid (Recommended)", > > score: 88, > > / *TEST RUNNER STYLES* / > > .test-controls { > > display: flex; > > gap: 15px; > > justify-content: center; > > margin-bottom: 20px; > > padding: 15px; > > background: rgba(255,255,255,0.05); > > border-radius: 10px; > > } > > .scenario-btn { > > background: rgba(255,255,255,0.1); > > border: 2px solid rgba(255,255,255,0.3); > > color: #fff; > > padding: 12px 24px; > > border-radius: 8px; > > cursor: pointer; > > font-size: 14px; > > transition: all 0.3s; > > } > > .scenario-btn:hover { > > background: rgba(255,255,255,0.2); > > transform: translateY(-2px); > > } > > .scenario-btn.active { > > background: rgba(0,229,255,0.3); > > border-color: #00e5ff; > > box-shadow: 0 0 20px rgba(0,229,255,0.6); > > } > > .node.test-pass { > > border-color: #00ff00; > > box-shadow: 0 0 25px rgba(0,255,0,0.6); > > animation: pulse-green 2s infinite; > > } > > .node.test-fail { > > border-color: #ff0000; > > box-shadow: 0 0 25px rgba(255,0,0,0.6); > > animation: pulse-red 2s infinite; > > } > > .node.test-pending { > > border-color: #ffff00; > > box-shadow: 0 0 20px rgba(255,255,0,0.4); > > } > > @keyframes pulse-green { > > 0%, 100% { box-shadow: 0 0 25px rgba(0,255,0,0.6); } > > 50% { box-shadow: 0 0 40px rgba(0,255,0,0.9); } > > } > > @keyframes pulse-red { > > 0%, 100% { box-shadow: 0 0 25px rgba(255,0,0,0.6); } > > 50% { box-shadow: 0 0 40px rgba(255,0,0,0.9); } > > } > > style: "Optimized Hybrid", > > integrationPoints: 8, > > integrationStyle: "Hybrid", > > hardSavings: 1.0, > > softSavings: 1.8, > > laborHours: 4200, > > itCost: 480, > > plantBuyerSolution: "Auto-derive GL from item class in Hexagon → one-way sync to Oracle PR (no back-sync), plant buyers never see COA", > > apMatch: "Automated 3-way match in Oracle, POD evidence batch-synced from Hexagon (4-hour window)", > > dcPOHandling: "PO changes in Oracle → batch sync to Hexagon nightly (acceptable 24hr lag for non-critical updates)", > > keyAdvantages: ["Delivers $2.8M ROI (88% of target, acceptable)", "Solves plant buyer GL headache (auto-derive)", "53% fewer integration points than baseline", "Strategic real-time only where needed (PR sync)", "Batch acceptable for non-critical (PO changes, POD)", "4,200 labor hours saved (84% of target)", "Addresses IT's custom integration concern"], > > keyRisks: ["24hr lag on PO changes (business must accept)", "POD evidence delayed up to 4 hours", "Still requires 8 integration points", "Slightly below full ROI target ($400K gap)"], > > impactByNode: { > > supplier: "pass", item: "pass", coa: "pass", > > pm: "pass", "labor-decision": "pass", wo: "pass", "parts-decision": "pass", pr: "pass", > > "pr-sync": "pass", validation: "pass", "sync-success": "pass", > > "rcv-pr": "pass", po: "pass", receive: "pass", "inspection-decision": "pass", > > invoice: "pass", match: "pass", payment: "pass", gl: "pass" > > }, > > failureReasons: {} > > } > > }; > > > > let currentScenario = null; > > > > function runScenarioTest(scenarioKey) { > > currentScenario = scenarioData[scenarioKey]; > > > > // Update header with scenario info > > document.querySelector('.header h1').textContent = `🧪 Testing: ${[currentScenario.name](http://currentScenario.name)}`; > > document.querySelector('.header p').style.fontSize = '14px'; > > document.querySelector('.header p').innerHTML = ` > > Score: ${currentScenario.score}/100 | > > Integration: ${currentScenario.integrationPoints} points (${currentScenario.integrationStyle}) | > > ROI: $${(currentScenario.hardSavings + currentScenario.softSavings).toFixed(1)}M | > > Labor: ${currentScenario.laborHours} hrs/year > > `; > > > > // Apply color coding to all nodes > > Object.keys(currentScenario.impactByNode).forEach(nodeKey => { > > const status = currentScenario.impactByNode[nodeKey]; > > const nodeElement = document.querySelector(`[onclick="showModal('${nodeKey}')"]`); > > > > if (nodeElement) { > > // Remove existing test classes > > nodeElement.classList.remove('test-pass', 'test-fail', 'test-pending'); > > > > // Add status class > > if (status === 'pass') { > > nodeElement.classList.add('test-pass'); > > } else if (status === 'fail') { > > nodeElement.classList.add('test-fail'); > > } else { > > nodeElement.classList.add('test-pending'); > > } > > } > > }); > > } > > > > function showScenarioModal(nodeKey) { > > if (!currentScenario) return; > > > > const status = currentScenario.impactByNode[nodeKey]; > > const failureReason = currentScenario.failureReasons[nodeKey]; > > > > const modalContent = ` > >

${cardData[nodeKey].title}

> > > > > > > > > > `; > > > > document.querySelector('.modal-content').innerHTML = modalContent + '×'; > > document.getElementById('nodeModal').classList.add('active'); > > } >