Review the layout of the interface and remodel it, while maintaining compomenets, /

index.html

@@ -379,43 +379,42 @@
                         </div>
                     </div>
                 </div>
-
-                <!-- Main Dashboard Content -->
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
-                    <!-- Map and Main Visualizations -->
-                    <div class="lg:col-span-2 space-y-6">
-                        <!-- Map Visualization -->
-                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
-                            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-                                <h3 class="font-semibold flex items-center">
-                                    <i class="fas fa-map-marked-alt text-indigo-500 mr-2"></i>
-                                    Geospatial Habitat Analysis
-                                </h3>
+                <!-- Map Visualization -->
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6">
+                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                        <h3 class="font-semibold flex items-center">
+                            <i class="fas fa-map-marked-alt text-indigo-500 mr-2"></i>
+                            Geospatial Habitat Analysis
+                        </h3>
+                    </div>
+                    <div class="p-4">
+                        <div id="map" class="map-container rounded-md"></div>
+                    </div>
+                    <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                        <div class="flex space-x-2">
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
+                                <span class="text-xs">High Risk</span>
                             </div>
-                            <div class="p-4">
-                                <div id="map" class="map-container rounded-md"></div>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div>
+                                <span class="text-xs">Medium Risk</span>
                             </div>
-                            <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                                <div class="flex space-x-2">
-                                    <div class="flex items-center">
-                                        <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
-                                        <span class="text-xs">High Risk</span>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div>
-                                        <span class="text-xs">Medium Risk</span>
-                                    </div>
-                                    <div class="flex items-center">
-                                        <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
-                                        <span class="text-xs">Low Risk</span>
-                                    </div>
-                                </div>
-                                <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
-                                    <i class="fas fa-layer-group mr-1"></i> Layers
-                                </button>
+                            <div class="flex items-center">
+                                <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
+                                <span class="text-xs">Low Risk</span>
                             </div>
                         </div>
-                        
+                        <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
+                            <i class="fas fa-layer-group mr-1"></i> Layers
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Main Dashboard Content -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+                    <!-- Left Column -->
+                    <div class="lg:col-span-2 space-y-6">
                         <!-- Temporal Analysis -->
                         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                             <div class="p-4 border-b border-gray-200 dark:border-gray-700">
@@ -438,6 +437,196 @@
                                 </button>
                             </div>
                         </div>
+                        
+                        <!-- Ecosystem Analytics -->
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <!-- Weather and Climate -->
+                            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                                    <h3 class="font-semibold flex items-center">
+                                        <i class="fas fa-cloud-sun text-blue-500 mr-2"></i>
+                                        Weather & Climate Impact
+                                    </h3>
+                                </div>
+                                <div class="p-4">
+                                    <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                                        <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900">
+                                            <div class="text-2xl font-bold">28°C</div>
+                                            <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Temperature</div>
+                                        </div>
+                                        <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900">
+                                            <div class="text-2xl font-bold">76%</div>
+                                            <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Humidity</div>
+                                        </div>
+                                        <div class="p-3 rounded-lg bg-purple-50 dark:bg-purple-900">
+                                            <div class="text-2xl font-bold">12mm</div>
+                                            <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Rainfall</div>
+                                        </div>
+                                    </div>
+                                    <canvas id="weatherChart" height="180"></canvas>
+                                </div>
+                                <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300">
+                                    <i class="fas fa-info-circle text-indigo-500 mr-1"></i> Next 3 days expected to increase suitability scores by 1-2 points
+                                </div>
+                            </div>
+                            
+                            <!-- Model Performance -->
+                            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                                <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                                    <h3 class="font-semibold flex items-center">
+                                        <i class="fas fa-brain text-purple-500 mr-2"></i>
+                                        Model Performance
+                                    </h3>
+                                    <div class="flex space-x-2">
+                                        <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">XGBoost</button>
+                                        <button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">LSTM</button>
+                                    </div>
+                                </div>
+                                <div class="p-4">
+                                    <canvas id="modelChart" height="180"></canvas>
+                                </div>
+                                <div class="p-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-3 gap-2 text-center">
+                                    <div>
+                                        <div class="text-lg font-bold text-green-500">94%</div>
+                                        <div class="text-xs text-gray-500 dark:text-gray-300">Accuracy</div>
+                                    </div>
+                                    <div>
+                                        <div class="text-lg font-bold text-blue-500">92%</div>
+                                        <div class="text-xs text-gray-500 dark:text-gray-300">Precision</div>
+                                    </div>
+                                    <div>
+                                        <div class="text-lg font-bold text-purple-500">89%</div>
+                                        <div class="text-xs text-gray-500 dark:text-gray-300">Recall</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Recent Detections -->
+                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                                <h3 class="font-semibold flex items-center">
+                                    <i class="fas fa-search-location text-indigo-500 mr-2"></i>
+                                    Recent Detections
+                                </h3>
+                                <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
+                                    <i class="fas fa-filter mr-1"></i> Filter
+                                </button>
+                            </div>
+                            <div class="overflow-x-auto">
+                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                                    <thead class="bg-gray-50 dark:bg-gray-700">
+                                        <tr>
+                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Timestamp</th>
+                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Location</th>
+                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Confidence</th>
+                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Environmental Data</th>
+                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:23 AM</td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="text-sm font-medium">Lagos (6.5244, 3.3792)</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                    98%
+                                                </span>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
+                                                <div>Temp: 28°C</div>
+                                                <div>Humidity: 76%</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
+                                                <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
+                                            </td>
+                                        </tr>
+                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:47 AM</td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="text-sm font-medium">Ogun (7.1557, 3.3456)</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
+                                                    87%
+                                                </span>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
+                                                <div>Temp: 26°C</div>
+                                                <div>Humidity: 82%</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
+                                                <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
+                                            </td>
+                                        </tr>
+                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">08:12 AM</td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="text-sm font-medium">Kano (12.0024, 8.5923)</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
+                                                    96%
+                                                </span>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
+                                                <div>Temp: 30°C</div>
+                                                <div>Humidity: 65%</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
+                                                <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
+                                            </td>
+                                        </tr>
+                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">07:35 AM</td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <div class="text-sm font-medium">Rivers (4.8156, 7.0498)</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap">
+                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
+                                                    82%
+                                                </span>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
+                                                <div>Temp: 25°C</div>
+                                                <div>Humidity: 88%</div>
+                                            </td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
+                                                <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+                                <div class="flex-1 flex justify-between sm:hidden">
+                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Previous </a>
+                                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Next </a>
+                                </div>
+                                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                                    <div>
+                                        <p class="text-sm text-gray-700 dark:text-gray-300"> Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">127</span> results </p>
+                                    </div>
+                                    <div>
+                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a>
+                                            <a href="#" aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900 border-indigo-500 dark:border-indigo-700 text-indigo-600 dark:text-indigo-300 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>
+                                            <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>
+                                            <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a>
+                                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300"> ... </span>
+                                            <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 8 </a>
+                                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     
                     <!-- Right Sidebar - Alerts and Results -->
@@ -546,198 +735,7 @@
                         </div>
                     </div>
                 </div>
-                
-                <!-- Ecosystem Analytics -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                    <!-- Weather and Climate -->
-                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
-                        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-                            <h3 class="font-semibold flex items-center">
-                                <i class="fas fa-cloud-sun text-blue-500 mr-2"></i>
-                                Weather & Climate Impact
-                            </h3>
-                        </div>
-                        <div class="p-4">
-                            <div class="grid grid-cols-3 gap-4 text-center mb-4">
-                                <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900">
-                                    <div class="text-2xl font-bold">28°C</div>
-                                    <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Temperature</div>
-                                </div>
-                                <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900">
-                                    <div class="text-2xl font-bold">76%</div>
-                                    <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Humidity</div>
-                                </div>
-                                <div class="p-3 rounded-lg bg-purple-50 dark:bg-purple-900">
-                                    <div class="text-2xl font-bold">12mm</div>
-                                    <div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Rainfall</div>
-                                </div>
-                            </div>
-                            <canvas id="weatherChart" height="180"></canvas>
-                        </div>
-                        <div class="p-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300">
-                            <i class="fas fa-info-circle text-indigo-500 mr-1"></i> Next 3 days expected to increase suitability scores by 1-2 points
-                        </div>
-                    </div>
-                    
-                    <!-- Model Performance -->
-                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
-                        <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                            <h3 class="font-semibold flex items-center">
-                                <i class="fas fa-brain text-purple-500 mr-2"></i>
-                                Model Performance
-                            </h3>
-                            <div class="flex space-x-2">
-                                <button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">XGBoost</button>
-                                <button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">LSTM</button>
-                            </div>
-                        </div>
-                        <div class="p-4">
-                            <canvas id="modelChart" height="180"></canvas>
-                        </div>
-                        <div class="p-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-3 gap-2 text-center">
-                            <div>
-                                <div class="text-lg font-bold text-green-500">94%</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-300">Accuracy</div>
-                            </div>
-                            <div>
-                                <div class="text-lg font-bold text-blue-500">92%</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-300">Precision</div>
-                            </div>
-                            <div>
-                                <div class="text-lg font-bold text-purple-500">89%</div>
-                                <div class="text-xs text-gray-500 dark:text-gray-300">Recall</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Recent Detections -->
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6">
-                    <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                        <h3 class="font-semibold flex items-center">
-                            <i class="fas fa-search-location text-indigo-500 mr-2"></i>
-                            Recent Detections
-                        </h3>
-                        <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center">
-                            <i class="fas fa-filter mr-1"></i> Filter
-                        </button>
-                    </div>
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-                            <thead class="bg-gray-50 dark:bg-gray-700">
-                                <tr>
-                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Timestamp</th>
-                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Location</th>
-                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Confidence</th>
-                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Environmental Data</th>
-                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:23 AM</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <div class="text-sm font-medium">Lagos (6.5244, 3.3792)</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
-                                            98%
-                                        </span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                                        <div>Temp: 28°C</div>
-                                        <div>Humidity: 76%</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                        <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
-                                        <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
-                                    </td>
-                                </tr>
-                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:47 AM</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <div class="text-sm font-medium">Ogun (7.1557, 3.3456)</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                                            87%
-                                        </span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                                        <div>Temp: 26°C</div>
-                                        <div>Humidity: 82%</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                        <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
-                                        <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
-                                    </td>
-                                </tr>
-                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">08:12 AM</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <div class="text-sm font-medium">Kano (12.0024, 8.5923)</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
-                                            96%
-                                        </span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                                        <div>Temp: 30°C</div>
-                                        <div>Humidity: 65%</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                        <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
-                                        <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
-                                    </td>
-                                </tr>
-                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">07:35 AM</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <div class="text-sm font-medium">Rivers (4.8156, 7.0498)</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-                                            82%
-                                        </span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                                        <div>Temp: 25°C</div>
-                                        <div>Humidity: 88%</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                        <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a>
-                                        <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
-                        <div class="flex-1 flex justify-between sm:hidden">
-                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Previous </a>
-                            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Next </a>
-                        </div>
-                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-                            <div>
-                                <p class="text-sm text-gray-700 dark:text-gray-300"> Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">127</span> results </p>
-                            </div>
-                            <div>
-                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a>
-                                    <a href="#" aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900 border-indigo-500 dark:border-indigo-700 text-indigo-600 dark:text-indigo-300 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>
-                                    <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>
-                                    <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a>
-                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300"> ... </span>
-                                    <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 8 </a>
-                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a>
-                                </nav>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- AI Assistant Panel -->
+<!-- AI Assistant Panel -->
                 <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6">
                     <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                         <h3 class="font-semibold flex items-center">