Hugging Face's logo

Spaces:
ENVY4573
/
pulsepoint-command-hub
Running

App Files Community
pulsepoint-command-hub / analytics.html
ENVY4573's picture
ENVY4573
front page create just like in photo
ff0cb4c verified
Raw History Blame Contribute Delete
20.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analytics - Arogya Mitra</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);
}
.chart-container {
height: 300px;
}
.metric-card {
border-left: 4px solid;
}
.trend-up {
color: #10b981;
}
.trend-down {
color: #ef4444;
}
.analytics-tab {
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.analytics-tab.active {
border-bottom-color: #3b82f6;
color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex flex-col md:flex-row h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-blue-800 text-white w-full md:w-64 flex-shrink-0">
<div class="p-4 border-b border-blue-700">
</div>
<div class="p-4 flex justify-between items-center md:block">
<button class="md:hidden text-white" id="sidebarToggle">
<i class="fas fa-bars"></i>
</button>
<div>
<h1 class="text-xl font-bold">Arogya Mitra</h1>
<p class="text-blue-200 text-sm">Hospital Command Dashboard</p>
</div>
</div>
<nav class="p-4 hidden md:block" id="sidebarNav">
<ul>
<li class="mb-2">
<a href="dashboard.html" class="flex items-center p-2 rounded hover: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 bg-blue-700">
<i class="fas fa-chart-line mr-3"></i>
<span>Analytics</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">
<h2 class="text-xl font-semibold">Hospital Analytics</h2>
<div class="flex items-center space-x-2 md:space-x-4">
<div class="relative hidden md:block">
<input type="text" placeholder="Search analytics..." 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 hidden md:block">
<i class="fas fa-calendar-alt text-gray-500 text-xl"></i>
</div>
<select class="bg-white border border-gray-300 rounded-md px-2 py-1 text-sm">
<option>7D</option>
<option>30D</option>
<option selected>90D</option>
<option>1Y</option>
</select>
</div>
</div>
</header>
<!-- Analytics Content -->
<main class="p-6">
<!-- Analytics Tabs -->
<div class="flex border-b border-gray-200 mb-6">
<button class="analytics-tab active px-4 py-2 font-medium text-sm">Overview</button>
<button class="analytics-tab px-4 py-2 font-medium text-sm">Patient</button>
<button class="analytics-tab px-4 py-2 font-medium text-sm">Staff</button>
<button class="analytics-tab px-4 py-2 font-medium text-sm">Financial</button>
<button class="analytics-tab px-4 py-2 font-medium text-sm">Operations</button>
</div>
<!-- Key Metrics -->
<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 metric-card border-blue-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Avg. Patient Stay</p>
<h3 class="text-2xl font-bold mt-1">4.2 <span class="text-sm font-normal">days</span></h3>
<p class="trend-down text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 8% from last period</p>
</div>
<div class="bg-blue-100 p-3 rounded-lg text-blue-600">
<i class="fas fa-clock text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-lg p-6 metric-card border-green-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Patient Satisfaction</p>
<h3 class="text-2xl font-bold mt-1">87<span class="text-sm font-normal">%</span></h3>
<p class="trend-up text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 5% from last period</p>
</div>
<div class="bg-green-100 p-3 rounded-lg text-green-600">
<i class="fas fa-smile text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-lg p-6 metric-card border-purple-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Readmission Rate</p>
<h3 class="text-2xl font-bold mt-1">8.5<span class="text-sm font-normal">%</span></h3>
<p class="trend-down text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 12% from last period</p>
</div>
<div class="bg-purple-100 p-3 rounded-lg text-purple-600">
<i class="fas fa-redo text-xl"></i>
</div>
</div>
</div>
<div class="card bg-white rounded-lg p-6 metric-card border-yellow-500">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500">Avg. Treatment Cost</p>
<h3 class="text-2xl font-bold mt-1">₹12,450</h3>
<p class="trend-up text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 3% from last period</p>
</div>
<div class="bg-yellow-100 p-3 rounded-lg text-yellow-600">
<i class="fas fa-rupee-sign text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Main Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Patient Volume Trend -->
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">Patient Volume Trend</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">IPD</button>
<button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">OPD</button>
</div>
</div>
<div class="chart-container bg-gray-50 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Patient Volume Chart Visualization</p>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-500">
<span>Weekly average: 342 patients</span>
<span>Peak: 412 patients (Wednesdays)</span>
</div>
</div>
<!-- Department Utilization -->
<div class="card bg-white rounded-lg p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold text-lg">Department Utilization</h3>
<div class="flex items-center">
<span class="w-2 h-2 rounded-full bg-blue-500 mr-1"></span>
<span class="text-xs mr-3">Current</span>
<span class="w-2 h-2 rounded-full bg-gray-300 mr-1"></span>
<span class="text-xs">Previous</span>
</div>
</div>
<div class="chart-container bg-gray-50 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Department Utilization Chart Visualization</p>
</div>
<div class="mt-4 grid grid-cols-3 gap-4 text-sm">
<div>
<p class="font-medium">Emergency</p>
<p class="text-gray-500">92% (▲ 5%)</p>
</div>
<div>
<p class="font-medium">ICU</p>
<p class="text-gray-500">78% (▼ 2%)</p>
</div>
<div>
<p class="font-medium">Radiology</p>
<p class="text-gray-500">65% (▲ 8%)</p>
</div>
</div>
</div>
</div>
<!-- Detailed Analytics -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Top Diagnoses -->
<div class="card bg-white rounded-lg p-6 lg:col-span-1">
<h3 class="font-semibold text-lg mb-4">Top Diagnoses</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span>Respiratory Infections</span>
<span class="font-medium">24%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 24%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Gastrointestinal</span>
<span class="font-medium">18%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 18%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Cardiovascular</span>
<span class="font-medium">15%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 15%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Orthopedic</span>
<span class="font-medium">12%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 12%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>Neurological</span>
<span class="font-medium">8%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 8%"></div>
</div>
</div>
</div>
</div>
<!-- Staff Productivity -->
<div class="card bg-white rounded-lg p-6 lg:col-span-1">
<h3 class="font-semibold text-lg mb-4">Staff Productivity</h3>
<div class="space-y-4">
<div>
<p class="text-sm text-gray-500 mb-1">Doctors</p>
<div class="flex justify-between items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 78%"></div>
</div>
<span class="text-sm font-medium">78%</span>
</div>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">Nurses</p>
<div class="flex justify-between items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
</div>
<span class="text-sm font-medium">85%</span>
</div>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">Support Staff</p>
<div class="flex justify-between items-center">
<div class="w-full bg-gray-200 rounded-full h-2 mr-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 72%"></div>
</div>
<span class="text-sm font-medium">72%</span>
</div>
</div>
</div>
<div class="mt-6">
<h4 class="font-medium mb-2">Productivity Trends</h4>
<div class="h-40 bg-gray-50 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Productivity Trend Chart</p>
</div>
</div>
</div>
<!-- Financial Metrics -->
<div class="card bg-white rounded-lg p-6 lg:col-span-1">
<h3 class="font-semibold text-lg mb-4">Financial Metrics</h3>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="bg-blue-50 p-3 rounded-lg">
<p class="text-sm text-gray-500">Revenue</p>
<p class="font-bold">₹8.2M <span class="text-green-500 text-sm">▲ 12%</span></p>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<p class="text-sm text-gray-500">Collections</p>
<p class="font-bold">₹7.8M <span class="text-green-500 text-sm">▲ 8%</span></p>
</div>
<div class="bg-purple-50 p-3 rounded-lg">
<p class="text-sm text-gray-500">Expenses</p>
<p class="font-bold">₹5.4M <span class="text-red-500 text-sm">▲ 5%</span></p>
</div>
<div class="bg-yellow-50 p-3 rounded-lg">
<p class="text-sm text-gray-500">Profit</p>
<p class="font-bold">₹2.8M <span class="text-green-500 text-sm">▲ 15%</span></p>
</div>
</div>
<div>
<h4 class="font-medium mb-2">Revenue by Department</h4>
<div class="h-40 bg-gray-50 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Revenue Distribution Chart</p>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// Toggle sidebar on mobile
document.getElementById('sidebarToggle').addEventListener('click', function() {
const sidebarNav = document.getElementById('sidebarNav');
sidebarNav.classList.toggle('hidden');
});
// Close sidebar when clicking outside on mobile
document.addEventListener('click', function(event) {
const sidebar = document.querySelector('.sidebar');
const sidebarToggle = document.getElementById('sidebarToggle');
if (window.innerWidth < 768 &&
!sidebar.contains(event.target) &&
event.target !== sidebarToggle) {
document.getElementById('sidebarNav').classList.add('hidden');
}
});
</script>
</body>
</html>