Spaces:

MoShow
/

responseready-matrix

Running

so this should be easy, main filters are hazard types and Countries, sub fikters are the 5c's, Readiness country, response countries, regional/HQ support

ab2024a verified 5 months ago

raw

history blame contribute delete

19.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Response Countries Readiness</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Inter', sans-serif;
	}
	.table-container {
	overflow-x: auto;
	}
	.sticky-col {
	position: sticky;
	left: 0;
	background-color: white;
	z-index: 10;
	}
	.sticky-header {
	position: sticky;
	top: 0;
	z-index: 20;
	}
	.progress-bar {
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
	background-color: #e5e7eb;
	}
	.progress-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.5s ease-in-out;
	}
	.tooltip {
	position: relative;
	display: inline-block;
	}
	.tooltip .tooltip-text {
	visibility: hidden;
	width: 120px;
	background-color: #1f2937;
	color: white;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 12px;
	}
	.tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
	}
	@media print {
	.no-print {
	display: none;
	}
	.page-break {
	page-break-after: always;
	}
	}
	</style>
	</head>
	<body class="bg-gray-50 text-gray-800">
	<div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
	<div class="max-w-7xl mx-auto">
	<!-- Header -->
	<div class="text-center mb-8">
	<h1 class="text-3xl font-bold text-gray-900 mb-2">Response Countries Readiness</h1>
	<p class="text-lg text-gray-600">Regional/HQ support</p>
	</div>
	<!-- Filters -->
	<div class="bg-white rounded-xl shadow-lg p-6 mb-6">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
	<!-- Hazard Type Filter -->
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Hazard Type</label>
	<select id="hazard-filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
	<option value="all">All Hazards</option>
	<option value="epidemic">Epidemic</option>
	<option value="earthquake">Earthquake</option>
	<option value="flood">Flood</option>
	<option value="cyclone">Cyclone</option>
	<option value="drought">Drought</option>
	<option value="conflict">Conflict</option>
	</select>
	</div>

	<!-- Country Filter -->
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Country</label>
	<select id="country-filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
	<option value="all">All Countries</option>
	<option value="drc">DRC</option>
	<option value="tanzania">Tanzania</option>
	<option value="southSudan">South Sudan</option>
	<option value="burundi">Burundi</option>
	<option value="angola">Angola</option>
	<option value="car">CAR</option>
	<option value="uganda">Uganda</option>
	<option value="zambia">Zambia</option>
	<option value="afro">AFRO</option>
	<option value="hq">HQ</option>
	</select>
	</div>

	<!-- 5Cs Filter -->
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">5Cs</label>
	<select id="fivecs-filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
	<option value="all">All 5Cs</option>
	<option value="coordination">Coordination</option>
	<option value="continuity">Continuity</option>
	<option value="communication">Communication</option>
	<option value="contingency">Contingency</option>
	<option value="capacity">Capacity</option>
	</select>
	</div>

	<!-- Support Type Filter -->
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Support Type</label>
	<select id="support-filter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
	<option value="all">All Support</option>
	<option value="readiness">Readiness Country</option>
	<option value="response">Response Country</option>
	<option value="regional">Regional/HQ Support</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Controls -->
	<div class="flex flex-wrap gap-4 justify-between items-center mb-6 no-print">
	<div class="flex items-center space-x-4">
	<div class="tooltip">
	<button id="export-pdf" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
	<i data-feather="download" class="w-4 h-4 mr-2"></i>
	Export PDF
	</button>
	<span class="tooltip-text">Export table as PDF</span>
	</div>
	<div class="tooltip">
	<button id="print" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
	<i data-feather="printer" class="w-4 h-4 mr-2"></i>
	Print
	</button>
	<span class="tooltip-text">Print table</span>
	</div>
	</div>
	<div class="flex items-center space-x-4">
	<div class="relative">
	<input type="text" id="search" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
	<i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
	</div>
	<div class="tooltip">
	<button id="toggle-view" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
	<i data-feather="grid" class="w-4 h-4 mr-2"></i>
	Card View
	</button>
	<span class="tooltip-text">Toggle between table and card view</span>
	</div>
	</div>
	</div>
	<!-- Table Container -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="table-container max-h-screen overflow-auto">
	<table class="min-w-full divide-y divide-gray-200" id="readiness-table">
	<thead class="bg-gray-50 sticky-header">
	<tr>
	<th class="sticky-col px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50 border-r">5Cs</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pillars</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRC</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanzania</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">South Sudan</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Burundi</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Angola</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CAR</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Uganda</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Zambia</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AFRO</th>
	<th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HQ</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200" id="table-body">
	<!-- Data will be populated by JavaScript -->
	</tbody>
	</table>
	</div>
	</div>

	<!-- Pagination -->
	<div class="flex justify-between items-center mt-6 no-print">
	<div class="text-sm text-gray-600">
	Showing <span id="page-start">1</span> to <span id="page-end">10</span> of <span id="total-items">0</span> entries
	</div>
	<div class="flex space-x-2">
	<button id="prev-page" class="px-3 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
	<i data-feather="chevron-left" class="w-4 h-4"></i>
	</button>
	<div id="page-numbers" class="flex space-x-1"></div>
	<button id="next-page" class="px-3 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
	<i data-feather="chevron-right" class="w-4 h-4"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Sample data structure - replace with actual data
	const readinessData = [
	{ category: "Coordination", pillar: "Leadership & Governance", drc: 85, tanzania: 78, southSudan: 62, burundi: 45, angola: 91, car: 34, uganda: 88, zambia: 76, afro: 92, hq: 95 },
	{ category: "Coordination", pillar: "Partnership", drc: 78, tanzania: 82, southSudan: 58, burundi: 52, angola: 87, car: 41, uganda: 85, zambia: 79, afro: 89, hq: 93 },
	{ category: "Coordination", pillar: "Information Management", drc: 72, tanzania: 75, southSudan: 65, burundi: 48, angola: 83, car: 37, uganda: 81, zambia: 74, afro: 86, hq: 91 },
	{ category: "Continuity", pillar: "Health Services", drc: 88, tanzania: 80, southSudan: 70, burundi: 55, angola: 89, car: 42, uganda: 86, zambia: 82, afro: 90, hq: 94 },
	{ category: "Continuity", pillar: "Supply Chain", drc: 75, tanzania: 77, southSudan: 60, burundi: 50, angola: 85, car: 39, uganda: 83, zambia: 78, afro: 88, hq: 92 },
	{ category: "Continuity", pillar: "Workforce", drc: 82, tanzania: 79, southSudan: 68, burundi: 53, angola: 87, car: 44, uganda: 84, zambia: 80, afro: 89, hq: 93 },
	{ category: "Communication", pillar: "Risk Communication", drc: 79, tanzania: 81, southSudan: 63, burundi: 47, angola: 86, car: 36, uganda: 82, zambia: 77, afro: 87, hq: 90 },
	{ category: "Communication", pillar: "Community Engagement", drc: 84, tanzania: 76, southSudan: 67, burundi: 51, angola: 88, car: 43, uganda: 87, zambia: 81, afro: 91, hq: 94 },
	{ category: "Contingency", pillar: "Emergency Response", drc: 80, tanzania: 83, southSudan: 64, burundi: 49, angola: 90, car: 38, uganda: 85, zambia: 79, afro: 92, hq: 95 },
	{ category: "Contingency", pillar: "Surge Capacity", drc: 76, tanzania: 74, southSudan: 61, burundi: 46, angola: 84, car: 35, uganda: 80, zambia: 75, afro: 85, hq: 89 },
	{ category: "Capacity", pillar: "Training & Development", drc: 87, tanzania: 85, southSudan: 69, burundi: 54, angola: 92, car: 45, uganda: 89, zambia: 83, afro: 93, hq: 96 },
	{ category: "Capacity", pillar: "Infrastructure", drc: 73, tanzania: 72, southSudan: 66, burundi: 52, angola: 82, car: 40, uganda: 78, zambia: 73, afro: 84, hq: 88 },
	{ category: "Capacity", pillar: "Technology", drc: 81, tanzania: 84, southSudan: 71, burundi: 56, angola: 91, car: 47, uganda: 88, zambia: 84, afro: 94, hq: 97 }
	];

	let currentPage = 1;
	const itemsPerPage = 10;
	let filteredData = [...readinessData];

	function renderTable() {
	const tableBody = document.getElementById('table-body');
	tableBody.innerHTML = '';

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const pageData = filteredData.slice(startIndex, endIndex);

	pageData.forEach((item, index) => {
	const row = document.createElement('tr');
	row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';

	row.innerHTML = `
	<td class="sticky-col px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 bg-white border-r">${item.category}</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.pillar}</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-blue-500" style="width: ${item.drc}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.drc}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-green-500" style="width: ${item.tanzania}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.tanzania}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-yellow-500" style="width: ${item.southSudan}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.southSudan}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-red-500" style="width: ${item.burundi}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.burundi}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-purple-500" style="width: ${item.angola}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.angola}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-pink-500" style="width: ${item.car}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.car}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-indigo-500" style="width: ${item.uganda}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.uganda}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-teal-500" style="width: ${item.zambia}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.zambia}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress-fill bg-orange-500" style="width: ${item.afro}%"></div>
	</div>
	<span class="text-sm font-medium text-gray-700">${item.afro}%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center space-x-2">
	<div class="progress-bar w-16">
	<div class="progress
	</body>
	</html>