Hugging Face's logo

Spaces:
ENVY4573
/
pulsepoint-command-hub
Running

App Files Community
pulsepoint-command-hub / dashboard.html
ENVY4573's picture
ENVY4573
make analytics also responsive and conntect to other pages like others
600a80f verified
Raw History Blame Contribute Delete
20.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Command Center Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.sidebar {
transition: all 0.3s;
}
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.status-critical { background-color: #ef4444; }
.status-warning { background-color: #f59e0b; }
.status-normal { background-color: #10b981; }
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0">
<div class="p-4 border-b border-blue-700">
<h1 class="text-xl font-bold">Arogya Mitra</h1>
<p class="text-blue-200 text-sm">Hospital Command Dashboard</p>
</div>
<nav class="p-4">
<ul>
<li class="mb-2">
<a href="dashboard.html" class="flex items-center p-2 rounded bg-blue-700">
<i class="fas fa-tachometer-alt mr-3"></i>
<span>Dashboard</span>
</a>
</li>
<li class="mb-2">
<a href="patientflow.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-procedures mr-3"></i>
<span>Patient Flow</span>
</a>
</li>
<li class="mb-2">
<a href="staffmanagement.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-user-md mr-3"></i>
<span>Staff Management</span>
</a>
</li>
<li class="mb-2">
<a href="analytics.html" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-chart-line mr-3"></i>
<span>Analytics</span>
</a>
</li>
<li class="mb-2">
<a href="#" class="flex items-center p-2 rounded hover:bg-blue-700">
<i class="fas fa-cog mr-3"></i>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm p-4 flex justify-between items-center">
<div class="flex items-center">
<button class="mr-4 text-gray-500">
<i class="fas fa-bars"></i>
</button>
<h2 class="text-xl font-semibold">Arogya Mitra Command Center</h2>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="pl-8 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex items-center">
<div class="relative">
<i class="fas fa-bell text-gray-500 text-xl"></i>
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
</div>
<div class="ml-4">
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">JD</div>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<main class="p-6">
<!-- Status Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Total Patients</p>
<h3 class="text-2xl font-bold mt-1">1,248</h3>
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from yesterday</p>
</div>
<div class="bg-blue-100 p-3 rounded-lg text-blue-600">
<i class="fas fa-procedures text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Available Beds</p>
<h3 class="text-2xl font-bold mt-1">87</h3>
<p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 5% from yesterday</p>
</div>
<div class="bg-green-100 p-3 rounded-lg text-green-600">
<i class="fas fa-bed text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Avg. Wait Time</p>
<h3 class="text-2xl font-bold mt-1">32 min</h3>
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 8% from yesterday</p>
</div>
<div class="bg-purple-100 p-3 rounded-lg text-purple-600">
<i class="fas fa-clock text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Staff On Duty</p>
<h3 class="text-2xl font-bold mt-1">142</h3>
<p class="text-gray-500 text-sm mt-2">12 on break</p>
</div>
<div class="bg-yellow-100 p-3 rounded-lg text-yellow-600">
<i class="fas fa-user-md text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Main Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Patient Flow Chart -->
<div class="lg:col-span-2 card bg-white rounded-lg p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">Patient Flow (Last 24 Hours)</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-md text-sm">ED</button>
<button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">ICU</button>
<button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">OR</button>
</div>
</div>
<div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Patient Flow Chart Visualization</p>
</div>
</div>
<!-- Alerts -->
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">Critical Alerts</h3>
<span class="bg-red-100 text-red-600 px-2 py-1 rounded-full text-xs">3 New</span>
</div>
<div class="space-y-4">
<div class="p-3 bg-red-50 rounded-lg border-l-4 border-red-500">
<div class="flex items-start">
<span class="status-indicator status-critical"></span>
<div>
<p class="font-medium">ICU Bed Shortage</p>
<p class="text-sm text-gray-500">2 patients waiting for ICU transfer</p>
</div>
</div>
</div>
<div class="p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
<div class="flex items-start">
<span class="status-indicator status-warning"></span>
<div>
<p class="font-medium">ED Overcrowding</p>
<p class="text-sm text-gray-500">Wait time exceeds 45 minutes</p>
</div>
</div>
</div>
<div class="p-3 bg-red-50 rounded-lg border-l-4 border-red-500">
<div class="flex items-start">
<span class="status-indicator status-critical"></span>
<div>
<p class="font-medium">Staff Shortage</p>
<p class="text-sm text-gray-500">3 nurses called in sick</p>
</div>
</div>
</div>
<div class="p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
<div class="flex items-start">
<span class="status-indicator status-normal"></span>
<div>
<p class="font-medium">OR Schedule</p>
<p class="text-sm text-gray-500">All surgeries on track</p>
</div>
</div>
</div>
</div>
</div>
<!-- Department Status -->
<div class="card bg-white rounded-lg p-6">
<h3 class="font-semibold text-lg mb-4">Department Status</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span>Emergency Dept</span>
<span class="text-red-500">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Intensive Care</span>
<span class="text-yellow-500">72%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 72%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Operating Rooms</span>
<span class="text-green-500">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Radiology</span>
<span class="text-blue-500">68%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div>
</div>
</div>
</div>
</div>
<!-- Recent Admissions -->
<div class="lg:col-span-2 card bg-white rounded-lg p-6">
<h3 class="font-semibold text-lg mb-4">Recent Admissions</h3>
<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">Patient</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">MRN</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</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">Time</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-semibold">JD</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">John Doe</div>
<div class="text-sm text-gray-500">45, Male</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#MRN-8472</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emergency</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Critical</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12:45 PM</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-semibold">AS</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Alice Smith</div>
<div class="text-sm text-gray-500">32, Female</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#MRN-9261</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">ICU</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">Stable</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11:20 AM</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-semibold">RJ</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Robert Johnson</div>
<div class="text-sm text-gray-500">58, Male</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#MRN-7354</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">OR</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Surgery</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<script src