Spaces:
Running
Running
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
e171d5b
verified
| <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> | |