<!DOCTYPE html>
<html>
<head>
<title>BIA Dashboard</title>
<style>
body { font-family: Arial; margin: 20px; }
.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab { padding: 10px 20px; border: 1px solid #ccc; cursor: pointer; }
.tab.active { background: #007bff; color: white; }
.section { display: none; }
.section.active { display: block; }
.btn { padding: 8px 16px; background: #007bff; color: white; border: none; cursor: pointer; margin-top: 10px; }
.btn:hover { background: #0056b3; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
.heatmap-cell { padding: 10px; color: white; font-weight: bold; }
#graphCanvas { border: 1px solid #ccc; width: 100%; height: 300px; }
</style>
</head>
<body>
<h1>BIA RTO/RPO Evaluation (Single Tenant)</h1>
<div id="loginSection">
<h2>Login</h2>
<input id="username" placeholder="Username"><br>
<input id="password" type="password" placeholder="Password"><br>
<button class="btn" onclick="login()">Login</button>
<div id="loginStatus"></div>
</div>
<div id="appSection" style="display:none;">
<div class="tabs">
<div class="tab active" data-target="inputSection">Inputs</div>
<div class="tab" data-target="biaSection">RTO/RPO</div>
<div class="tab" data-target="heatmapSection">Heatmap</div>
<div class="tab" data-target="scenarioSection">Scenarios</div>
<div class="tab" data-target="reportSection">Report</div>
<div class="tab" data-target="graphSection">Dependency Graph</div>
</div>
<div id="inputSection" class="section active">
<h2>Applications</h2>
<textarea id="appsInput" rows="6" style="width:100%;">[{"id":"app-payments","name":"Payments Engine","business_criticality":1,"max_tolerable_downtime_hours":2,"data_sensitivity":1,"transaction_volume":10}]</textarea>
<h2>Infrastructure</h2>
<textarea id="infraInput" rows="6" style="width:100%;">[{"id":"db-payments","name":"Payments DB Cluster","type":"DB","tier":1,"base_rto_hours":1,"base_rpo_hours":0.25},{"id":"net-core","name":"Core Network","type":"Network","tier":1,"base_rto_hours":0.5,"base_rpo_hours":0.1}]</textarea>
<h2>Dependencies</h2>
<textarea id="depsInput" rows="6" style="width:100%;">[{"app_id":"app-payments","infra_id":"db-payments","dependency_type":"primary-db","criticality_weight":0.7},{"app_id":"app-payments","infra_id":"net-core","dependency_type":"network","criticality_weight":0.3}]</textarea>
<h2>Failure Scenarios</h2>
<textarea id="scenarioInput" rows="6" style="width:100%;">[{"scenario_id":"net-core-down","failed_infra_ids":["net-core"]},{"scenario_id":"db-down","failed_infra_ids":["db-payments"]}]</textarea>
<button class="btn" onclick="runBIA()">Run RTO/RPO</button>
</div>
<div id="biaSection" class="section">
<h2>RTO/RPO & Dependencies</h2>
<div id="biaResults"></div>
</div>
<div id="heatmapSection" class="section">
<h2>Risk Heatmap & Bottlenecks</h2>
<button class="btn" onclick="runHeatmap()">Generate Heatmap</button>
<div id="heatmapResults"></div>
</div>
<div id="scenarioSection" class="section">
<h2>Failure Scenario Impacts</h2>
<button class="btn" onclick="runScenarios()">Simulate Scenarios</button>
<div id="scenarioResults"></div>
</div>
<div id="reportSection" class="section">
<h2>BIA Report</h2>
<button class="btn" onclick="generateReport()">Generate Report</button>
<button class="btn" onclick="window.print()">Download PDF (Print)</button>
<div id="reportArea"></div>
</div>
<div id="graphSection" class="section">
<h2>Dependency Graph</h2>
<canvas id="graphCanvas"></canvas>
</div>
</div>
<script src="bia.js"></script>
<script>
document.querySelectorAll(".tab").forEach(tab => {
tab.addEventListener("click", () => {
document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
document.querySelectorAll(".section").forEach(s => s.classList.remove("active"));
tab.classList.add("active");
document.getElementById(tab.dataset.target).classList.add("active");
});
});
</script>
</body>
</html>