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

index.html

@@ -80,6 +80,66 @@
                 <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">
@@ -113,8 +173,7 @@
                     </div>
                 </div>
             </div>
-
-            <!-- Table Container -->
+<!-- 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">