Spaces:

tbensap18
/

testing-dashboard

Running

App Files Files Community

tbensap18 commited on Sep 11, 2025

Commit

e171d5b

verified ·

1 Parent(s): 49f2b00

Create a clinic assessment dashboard that shows all clinic information in Kiribati. It should show the number of clinics in each islands in the Gilbert and Linnix group. It should show the number of nurses, coordinates (optional), source of power, internet provider, number of tablets, laptop, pc, landline, status of motorbikes, oxygen conectrators, solar fridges, etc that is required by the management within the Ministry of Health and Medical Services. I want the dashboard to be viewable publicly but data can only be entered requiring a login authentication. Also make sure that in login, we should be able to perform CRUD operations to update the data for the dashboard. - Follow Up Deployment

Browse files

Files changed (3) hide show

admin.html +241 -0
index.html +307 -16
prompts.txt +1 -0

admin.html ADDED Viewed

	@@ -0,0 +1,241 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Panel - Kiribati Clinic Assessment</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .sidebar {
+            width: 250px;
+            transition: all 0.3s ease;
+        }
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 0;
+                overflow: hidden;
+            }
+            .sidebar.open {
+                width: 250px;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <!-- Admin Navigation -->
+    <nav class="bg-blue-800 text-white shadow-lg">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <button id="menuToggle" class="md:hidden mr-3">
+                        <i data-feather="menu"></i>
+                    </button>
+                    <i data-feather="settings" class="h-8 w-8 mr-2"></i>
+                    <span class="font-semibold text-xl">Admin Panel</span>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <span class="hidden md:block">Welcome, Admin</span>
+                    <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md transition">Logout</button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <div class="flex">
+        <!-- Sidebar -->
+        <div class="sidebar bg-white shadow-md fixed h-full pt-4 md:relative" id="sidebar">
+            <div class="px-4 space-y-1">
+                <a href="#" class="flex items-center px-4 py-2 text-blue-700 bg-blue-100 rounded-md">
+                    <i data-feather="home" class="h-5 w-5 mr-3"></i>
+                    Dashboard
+                </a>
+                <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">
+                    <i data-feather="plus-circle" class="h-5 w-5 mr-3"></i>
+                    Add Clinic
+                </a>
+                <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">
+                    <i data-feather="edit" class="h-5 w-5 mr-3"></i>
+                    Edit Data
+                </a>
+                <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">
+                    <i data-feather="users" class="h-5 w-5 mr-3"></i>
+                    Manage Users
+                </a>
+                <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">
+                    <i data-feather="bar-chart-2" class="h-5 w-5 mr-3"></i>
+                    Reports
+                </a>
+            </div>
+        </div>
+        <!-- Main Content -->
+        <div class="flex-1 p-8">
+            <div class="bg-white rounded-lg shadow p-6 mb-6">
+                <h2 class="text-2xl font-semibold mb-4">Clinic Management</h2>
+                <!-- Data Table with CRUD Operations -->
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clinic Name</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Island</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Staff</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">Betio Health Center</td>
+                                <td class="px-6 py-4 whitespace-nowrap">Tarawa</td>
+                                <td class="px-6 py-4 whitespace-nowrap">8</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 text-green-800">Active</span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                    <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
+                                    <button class="text-red-600 hover:text-red-900">Delete</button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 whitespace-nowrap">London Clinic</td>
+                                <td class="px-6 py-4 whitespace-nowrap">Kiritimati</td>
+                                <td class="px-6 py-4 whitespace-nowrap">5</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 text-yellow-800">Needs Update</span>
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                    <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
+                                    <button class="text-red-600 hover:text-red-900">Delete</button>
+                                </td>
+                            </tr>
+                            <!-- More clinic rows would be here -->
+                        </tbody>
+                    </table>
+                </div>
+                <!-- Add New Clinic Form -->
+                <div class="mt-8 border-t pt-6">
+                    <h3 class="text-lg font-medium mb-4">Add New Clinic</h3>
+                    <form class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Clinic Name</label>
+                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter clinic name">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Island</label>
+                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                                <option>Select Island</option>
+                                <option>Tarawa</option>
+                                <option>Kiritimati</option>
+                                <option>Abemama</option>
+                                <!-- More islands -->
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Number of Nurses</label>
+                            <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Power Source</label>
+                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                                <option>Select Power Source</option>
+                                <option>Grid</option>
+                                <option>Solar</option>
+                                <option>Generator</option>
+                                <option>Hybrid</option>
+                            </select>
+                        </div>
+                        <!-- More form fields for all required data -->
+                        <div class="md:col-span-2">
+                            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Add Clinic</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- Equipment Management -->
+            <div class="bg-white rounded-lg shadow p-6">
+                <h2 class="text-2xl font-semibold mb-4">Equipment Inventory</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <div class="border rounded-lg p-4">
+                        <h3 class="font-medium mb-2">Oxygen Concentrators</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-2xl font-bold">42</span>
+                            <span class="text-sm text-green-600">+5 this month</span>
+                        </div>
+                    </div>
+                    <div class="border rounded-lg p-4">
+                        <h3 class="font-medium mb-2">Solar Fridges</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-2xl font-bold">67</span>
+                            <span class="text-sm text-green-600">+3 this month</span>
+                        </div>
+                    </div>
+                    <div class="border rounded-lg p-4">
+                        <h3 class="font-medium mb-2">Motorbikes</h3>
+                        <div class="flex justify-between items-center">
+                            <span class="text-2xl font-bold">28</span>
+                            <span class="text-sm text-yellow-600">2 need repair</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Equipment Update Form -->
+                <h3 class="text-lg font-medium mb-4">Update Equipment Status</h3>
+                <form class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Equipment Type</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                            <option>Select Equipment</option>
+                            <option>Oxygen Concentrator</option>
+                            <option>Solar Fridge</option>
+                            <option>Motorbike</option>
+                            <option>Tablet</option>
+                            <option>Laptop</option>
+                            <option>Desktop PC</option>
+                            <option>Landline Phone</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Clinic</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                            <option>Select Clinic</option>
+                            <!-- Clinic options would be populated from database -->
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
+                        <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="0">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                            <option>Functional</option>
+                            <option>Needs Repair</option>
+                            <option>Not Working</option>
+                        </select>
+                    </div>
+                    <div class="md:col-span-2">
+                        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Update Inventory</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize feather icons
+        feather.replace();
+        // Mobile menu toggle
+        document.getElementById('menuToggle').addEventListener('click', function() {
+            document.getElementById('sidebar').classList.toggle('open');
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,20 +1,311 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
-    <div class="w-full">
-      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
-      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
-        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
-        Ask me anything.
-      </h1>
     </div>
-      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
-    <script></script>
-  </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kiribati Clinic Assessment Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        .island-map {
+            background: url('http://static.photos/aerial/1200x630/15') center/cover no-repeat;
+        }
+        .stats-card {
+            transition: all 0.3s ease;
+        }
+        .stats-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .login-modal {
+            backdrop-filter: blur(5px);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="bg-blue-800 text-white shadow-lg">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <i data-feather="activity" class="h-8 w-8 mr-2"></i>
+                    <span class="font-semibold text-xl">Kiribati Clinic Assessment</span>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="loginBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md transition">Login</button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <div id="vanta-bg" class="relative py-20 text-white">
+        <div class="absolute inset-0 bg-blue-900 opacity-80"></div>
+        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Kiribati Health Facilities Assessment</h1>
+            <p class="text-xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">Comprehensive overview of medical resources across the Gilbert and Line Islands</p>
+        </div>
     </div>
+    <!-- Dashboard Content -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <!-- Summary Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
+            <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up">
+                <i data-feather="home" class="h-10 w-10 text-blue-600 mx-auto mb-3"></i>
+                <h3 class="text-2xl font-bold text-gray-800">147</h3>
+                <p class="text-gray-600">Total Clinics</p>
+            </div>
+            <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up" data-aos-delay="100">
+                <i data-feather="users" class="h-10 w-10 text-green-600 mx-auto mb-3"></i>
+                <h3 class="text-2xl font-bold text-gray-800">328</h3>
+                <p class="text-gray-600">Medical Staff</p>
+            </div>
+            <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up" data-aos-delay="200">
+                <i data-feather="wifi" class="h-10 w-10 text-purple-600 mx-auto mb-3"></i>
+                <h3 class="text-2xl font-bold text-gray-800">89</h3>
+                <p class="text-gray-600">Internet Connected</p>
+            </div>
+            <div class="stats-card bg-white rounded-lg shadow p-6 text-center" data-aos="fade-up" data-aos-delay="300">
+                <i data-feather="battery-charging" class="h-10 w-10 text-yellow-600 mx-auto mb-3"></i>
+                <h3 class="text-2xl font-bold text-gray-800">112</h3>
+                <p class="text-gray-600">Solar Powered</p>
+            </div>
+        </div>
+        <!-- Island Distribution -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
+            <div class="bg-white rounded-lg shadow p-6" data-aos="fade-right">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <i data-feather="map" class="mr-2"></i> Clinics by Island Group
+                </h2>
+                <canvas id="islandChart" height="250"></canvas>
+            </div>
+            <div class="bg-white rounded-lg shadow p-6" data-aos="fade-left">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <i data-feather="pie-chart" class="mr-2"></i> Equipment Distribution
+                </h2>
+                <canvas id="equipmentChart" height="250"></canvas>
+            </div>
+        </div>
+        <!-- Island Map Visualization -->
+        <div class="bg-white rounded-lg shadow mb-12 overflow-hidden" data-aos="zoom-in">
+            <div class="island-map h-96 rounded-t-lg"></div>
+            <div class="p-6">
+                <h2 class="text-xl font-semibold mb-2">Clinic Geographic Distribution</h2>
+                <p class="text-gray-600">Health facilities spread across the Gilbert and Line Islands</p>
+            </div>
+        </div>
+        <!-- Data Tables -->
+        <div class="bg-white rounded-lg shadow overflow-hidden mb-12" data-aos="fade-up">
+            <div class="px-6 py-4 border-b border-gray-200">
+                <h2 class="text-xl font-semibold flex items-center">
+                    <i data-feather="grid" class="mr-2"></i> Clinic Details Overview
+                </h2>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Island</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clinics</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nurses</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Power Source</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Internet</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Equipment</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">Tarawa</td>
+                            <td class="px-6 py-4 whitespace-nowrap">12</td>
+                            <td class="px-6 py-4 whitespace-nowrap">45</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Grid/Solar</td>
+                            <td class="px-6 py-4 whitespace-nowrap">TSKL</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Complete</td>
+                        </tr>
+                        <tr class="bg-gray-50">
+                            <td class="px-6 py-4 whitespace-nowrap">Kiritimati</td>
+                            <td class="px-6 py-4 whitespace-nowrap">8</td>
+                            <td class="px-6 py-4 whitespace-nowrap">28</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Generator/Solar</td>
+                            <td class="px-6 py-4 whitespace-nowrap">TSKL</td>
+                            <td class="px-6 py-4 whitespace-nowrap">Moderate</td>
+                        </tr>
+                        <!-- More rows would be here in a real implementation -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-blue-800 text-white py-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="md:flex md:justify-between">
+                <div class="mb-6 md:mb-0">
+                    <h3 class="text-lg font-semibold mb-2">Ministry of Health and Medical Services</h3>
+                    <p class="text-blue-200">Republic of Kiribati</p>
+                </div>
+                <div>
+                    <p class="text-blue-200">© 2023 Clinic Assessment Dashboard. Public information.</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Login Modal -->
+    <div id="loginModal" class="fixed inset-0 z-50 hidden login-modal">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6" data-aos="zoom-in">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-semibold">Admin Login</h3>
+                    <button id="closeModal" class="text-gray-400 hover:text-gray-600">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                <form id="loginForm">
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2" for="username">Username</label>
+                        <input type="text" id="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                    </div>
+                    <div class="mb-6">
+                        <label class="block text-gray-700 mb-2" for="password">Password</label>
+                        <input type="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                    </div>
+                    <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">Login</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize animations
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0x172554,
+            size: 0.8
+        });
+        // Charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Island distribution chart
+            const islandCtx = document.getElementById('islandChart').getContext('2d');
+            new Chart(islandCtx, {
+                type: 'bar',
+                data: {
+                    labels: ['Gilbert Islands', 'Line Islands', 'Phoenix Islands'],
+                    datasets: [{
+                        label: 'Number of Clinics',
+                        data: [112, 28, 7],
+                        backgroundColor: [
+                            'rgba(59, 130, 246, 0.7)',
+                            'rgba(16, 185, 129, 0.7)',
+                            'rgba(245, 158, 11, 0.7)'
+                        ],
+                        borderColor: [
+                            'rgb(59, 130, 246)',
+                            'rgb(16, 185, 129)',
+                            'rgb(245, 158, 11)'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+            // Equipment chart
+            const equipmentCtx = document.getElementById('equipmentChart').getContext('2d');
+            new Chart(equipmentCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Functional', 'Needs Repair', 'Not Available'],
+                    datasets: [{
+                        data: [65, 20, 15],
+                        backgroundColor: [
+                            'rgba(16, 185, 129, 0.7)',
+                            'rgba(245, 158, 11, 0.7)',
+                            'rgba(239, 68, 68, 0.7)'
+                        ],
+                        borderColor: [
+                            'rgb(16, 185, 129)',
+                            'rgb(245, 158, 11)',
+                            'rgb(239, 68, 68)'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+        });
+        // Modal functionality
+        document.getElementById('loginBtn').addEventListener('click', function() {
+            document.getElementById('loginModal').classList.remove('hidden');
+        });
+        document.getElementById('closeModal').addEventListener('click', function() {
+            document.getElementById('loginModal').classList.add('hidden');
+        });
+        document.getElementById('loginForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // In a real implementation, this would validate credentials and redirect to admin panel
+            alert('Login functionality would redirect to admin panel for data management');
+            document.getElementById('loginModal').classList.add('hidden');
+        });
+        // Close modal when clicking outside
+        document.getElementById('loginModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                this.classList.add('hidden');
+            }
+        });
+    </script>
+</body>
 </html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@

+ Create a clinic assessment dashboard that shows all clinic information in Kiribati. It should show the number of clinics in each islands in the Gilbert and Linnix group. It should show the number of nurses, coordinates (optional), source of power, internet provider, number of tablets, laptop, pc, landline, status of motorbikes, oxygen conectrators, solar fridges, etc that is required by the management within the Ministry of Health and Medical Services. I want the dashboard to be viewable publicly but data can only be entered requiring a login authentication. Also make sure that in login, we should be able to perform CRUD operations to update the data for the dashboard.