APK FET
This document represents a single-file HTML implementation of a responsive dashboard interface for a Hospital Management System, named "Hospital FlowTrack." The design prioritizes clear information hierarchy and modern aesthetics, relying entirely on Tailwind CSS for styling and utility classes, with minimal custom CSS for font integration, scrollbar styling, and hover effects. The dashboard is fully responsive, ensuring usability across mobile, tablet, and desktop viewports, achieved through Tailwind's responsive prefixes (md:, lg:).
The structure is divided into two primary sections: a fixed, vertical sidebar navigation and a fluid main content area. The sidebar is accessible via a mobile hamburger menu (#open-sidebar) and fixed on desktop, providing links to key modules such as the "Overview Dashboard," "Patient Admission/Discharge," and "Staffing & Rota." Navigation between these modules is handled by a simple JavaScript function, MapsTo(targetId), which dynamically hides and shows the relevant content sections based on the active link's data-target attribute, giving the feel of a multi-page application within a single document.
The central "Overview Dashboard" section immediately presents critical operational metrics using a grid of color-coded metric cards. These four key performance indicators (KPIs)—Bed Occupancy Rate (92%), Avg. ER Wait Time (45 min), Discharges Pending Today (28), and Nursing Staff Shortfall (4 FTE)—are visually distinguished using bottom borders (Red for Critical, Amber for Warning, Teal for Efficiency) to allow for quick status assessment. Below the main metrics, the dashboard features sections for flow visualization (currently a chart placeholder) and a real-time Department Status overview, highlighting capacity issues like the critical 1 / 12 ICU beds available.
The remaining modules (Patients, Beds, Staffing, and Billing) are implemented as hidden placeholder sections. While they currently only contain static introductory text and action buttons, the underlying navigation logic is fully wired to them. This foundation allows for rapid future development of complex forms, tables, and workflow management components within these respective areas. The application is capped off with a sticky header containing a global search bar and a notification bell with a visible red alert badge, ensuring high-priority hospital information is always visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Management Dashboard</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb; /* Light background */
}
/* Custom scrollbar for aesthetics */
.custom-scroll::-webkit-scrollbar {
width: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 3px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f3f4f6;
}
/* Card styling */
.metric-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
/* Active sidebar link style (Calming Teal Accent for Hospital theme) */
.nav-link.active {
color: #0d9488; /* teal-600 */
background-color: #f0fdfa; /* teal-50 */
font-weight: 600;
}
</style>
</head>
<body>
<!-- Sidebar (Fixed, Clean, Light Background) -->
<div id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 w-64 bg-white border-r border-gray-200 p-4 flex flex-col custom-scroll">
<!-- Hospital Logo/Branding -->
<div class="flex items-center pb-6 border-b border-gray-100">
<svg class="w-8 h-8 text-teal-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zM9 12h6"></path></svg>
<h1 class="text-xl font-bold text-gray-800">Hospital FlowTrack</h1>
<!-- Mobile close button -->
<button id="close-sidebar" class="md:hidden ml-auto p-2 text-gray-500 hover:text-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Navigation Links (Organized) -->
<nav class="mt-8 flex-grow space-y-1">
<a href="#" data-target="dashboard" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
Overview Dashboard
</a>
<a href="#" data-target="patients" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 20v-2a3 3 0 00-3-3H4a3 3 0 00-3 3v2M18 20v-2a3 3 0 01-3-3h-4a3 3 0 01-3-3v-2M18 12a4 4 0 100-8 4 4 0 000 8z"></path></svg>
Patient Admission/Discharge
</a>
<a href="#" data-target="beds" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6m0 0v1a2 2 0 002 2h14a2 2 0 002-2v-1M9 19h6m-3 0V7"></path></svg>
Bed & Ward Management
</a>
<a href="#" data-target="staffing" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-2a2 2 0 00-2-2H9a2 2 0 00-2 2v2M7 11h10M12 2v4M10 4h4M4 11h16a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6a1 1 0 011-1z"></path></svg>
Staffing & Rota
</a>
<a href="#" data-target="billing" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5h6"></path></svg>
Billing & Claims
</a>
</nav>
<!-- Quick Action / Triage Button -->
<div class="mt-8 pt-4 border-t border-gray-100">
<button class="w-full mt-3 p-3 text-sm font-bold rounded-lg transition duration-150 text-center bg-teal-600 text-white hover:bg-teal-700 shadow-md">
Initiate Triage/ER Log
</button>
</div>
</div>
<!-- Main Content Area Wrapper -->
<div class="md:ml-64 min-h-screen">
<!-- Header / Top Nav Bar (Universal Utility) -->
<header class="bg-white shadow-sm sticky top-0 z-30 border-b border-gray-200">
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Mobile Menu Button -->
<button id="open-sidebar" class="md:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100 mr-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<!-- Global Search Feature -->
<div class="flex-1 max-w-xl">
<div class="relative">
<input type="text" placeholder="Search patient ID, staff name, department, or procedure..." class="w-full p-2 pl-10 border border-gray-300 rounded-lg focus:ring-teal-500 focus:border-teal-500 bg-gray-50 text-sm">
<svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
<!-- Right Side: Notifications and Profile -->
<div class="flex items-center space-x-4 ml-4">
<!-- Notification Center (Critical Alerts) -->
<button class="p-2 rounded-full text-gray-500 hover:bg-gray-100 transition duration-200 relative">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
<!-- Alert: Red for emergencies or staff shortage -->
<span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white bg-red-500"></span>
</button>
<!-- Profile Avatar -->
<img class="w-9 h-9 rounded-full object-cover cursor-pointer ring-2 ring-teal-500" src="https://placehold.co/40x40/0d9488/ffffff?text=ADM" alt="Admin Profile">
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="p-4 sm:p-6 lg:p-8">
<div id="content-container">
<!-- DASHBOARD OVERVIEW SECTION (Default View) -->
<section id="dashboard-section" class="main-section">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Operations & Resource Utilization</h1>
<!-- 1. Stats Cards Grid (Bed, ER, Staffing, Admissions) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Card 1: Total Bed Occupancy (Critical Red/Orange for High) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-red-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Bed Occupancy Rate</p>
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">92%</p>
<span class="text-xs text-red-600 font-medium">Critical - 15 beds available</span>
</div>
</div>
<!-- Card 2: ER Wait Time (Flow Metric - Amber for Warning) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-amber-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Avg. ER Wait (Triage to MD)</p>
<svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">45 min</p>
<span class="text-xs text-amber-600 font-medium">Target: 30 min</span>
</div>
</div>
<!-- Card 3: Pending Discharges (Flow/Task Metric - Teal for Efficiency) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-teal-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Discharges Pending Today</p>
<svg class="w-6 h-6 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 11m0 0a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H12a1 1 0 01-1-1v-10zM11 11v10M11 11h10M11 11l-4 4m0 0l-4 4m0-4l4 4"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">28</p>
<span class="text-xs text-teal-600 font-medium">Key to flow optimization</span>
</div>
</div>
<!-- Card 4: Staffing Shortfall (Resource Metric - Red Alert) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-red-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Nursing Staff Shortfall</p>
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-2a2 2 0 00-2-2H9a2 2 0 00-2 2v2M7 11h10M12 2v4M10 4h4M4 11h16a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6a1 1 0 011-1z"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">4 FTE</p>
<span class="text-xs text-red-600 font-medium">Immediate locum required</span>
</div>
</div>
</div>
<!-- 2. Patient Flow Chart and Department Status -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Patient Flow Visualization (2/3 width) -->
<div class="lg:col-span-2 bg-white metric-card p-6 rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Patient Journey Flow (Last 24 Hours)</h2>
<div class="h-64 flex items-center justify-center bg-gray-50 rounded-lg border border-gray-200">
<p class="text-gray-500">Placeholder for Sankey or Funnel Chart: ER -> Triage -> Admission -> Discharge</p>
</div>
<div class="mt-4 text-sm text-gray-600">
<p>Average Length of Stay (ALOS): <span class="font-bold text-teal-600">4.1 days</span>. Admission rate from ER: 35%.</p>
</div>
</div>
<!-- Department Status Overview (1/3 width) -->
<div class="lg:col-span-1 bg-white metric-card p-6 rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Key Department Status</h2>
<ul class="space-y-3">
<li class="flex justify-between items-center text-sm">
<span class="text-gray-600">ICU Beds Available:</span>
<span class="font-bold text-red-600">1 / 12</span>
</li>
<li class="flex justify-between items-center text-sm">
<span class="text-gray-600">Operating Rooms Scheduled:</span>
<span class="font-bold text-teal-600">8 / 10</span>
</li>
<li class="flex justify-between items-center text-sm">
<span class="text-gray-600">Pathology Lab Queue:</span>
<span class="font-bold text-amber-600">High (12 pending)</span>
</li>
<li class="pt-2 border-t mt-3 border-gray-100">
<button class="w-full text-teal-600 hover:text-teal-700 text-sm font-medium py-1 rounded-lg">
View Full Resource Map
</button>
</li>
</ul>
</div>
</div>
</section>
<!-- PATIENT ADMISSION/DISCHARGE SECTION (Placeholder) -->
<section id="patients-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Patient Admission & Discharge Workflow</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-500">
<p class="text-gray-600">Manage patient intake, bed assignment, discharge planning, and documentation in a single interface.</p>
<button class="mt-4 px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium rounded-lg transition duration-200 shadow-md">
Register New Patient
</button>
</div>
</section>
<!-- BED & WARD MANAGEMENT SECTION (Placeholder) -->
<section id="beds-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Bed & Ward Status Map</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-500">
<p class="text-gray-600">Interactive map showing real-time occupancy, cleaning status, and maintenance requirements across all wards.</p>
</div>
</section>
<!-- STAFFING & ROTA SECTION (Placeholder) -->
<section id="staffing-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Staffing, Rota, and Credentialing</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-500">
<p class="text-gray-600">Manage shift assignments, track required certifications, and cover open shifts efficiently.</p>
</div>
</section>
<!-- BILLING & CLAIMS SECTION (Placeholder) -->
<section id="billing-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Billing & Insurance Claims</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-500">
<p class="text-gray-600">Module for processing patient invoices, submitting insurance claims, and tracking payment statuses.</p>
</div>
</section>
</div>
<!-- Footer -->
<footer class="mt-12 text-center text-sm text-gray-500 pt-6 border-t border-gray-200">
Hospital FlowTrack © 2025. Data-Driven Patient Care.
</footer>
</main>
</div>
<script>
const sidebar = document.getElementById('sidebar');
const openSidebarBtn = document.getElementById('open-sidebar');
const closeSidebarBtn = document.getElementById('close-sidebar');
// --- NAVIGATION LOGIC ---
function navigateTo(targetId) {
// 1. Hide all main sections
document.querySelectorAll('.main-section').forEach(section => {
section.classList.add('hidden');
});
// 2. Show the target section
const targetSection = document.getElementById(targetId + '-section');
if (targetSection) {
targetSection.classList.remove('hidden');
} else {
// Default back to Dashboard if target not found
navigateTo('dashboard');
return;
}
// 3. Update active link styling (Calming Teal Accent)
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('data-target') === targetId) {
link.classList.add('active');
}
});
// 4. Close mobile sidebar after navigation
if (window.innerWidth < 768) {
sidebar.classList.add('-translate-x-full');
sidebar.classList.remove('translate-x-0');
}
}
// 5. Setup Navigation Listeners
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const targetId = link.getAttribute('data-target');
window.location.hash = targetId;
navigateTo(targetId);
});
});
// 6. Initial page load and hash check
(function() {
const hash = window.location.hash.substring(1);
const initialTarget = hash || 'dashboard';
navigateTo(initialTarget);
})();
// --- MOBILE SIDEBAR TOGGLER LOGIC ---
if (openSidebarBtn && sidebar) {
openSidebarBtn.addEventListener('click', () => {
sidebar.classList.remove('-translate-x-full');
sidebar.classList.add('translate-x-0');
});
}
if (closeSidebarBtn && sidebar) {
closeSidebarBtn.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
sidebar.classList.remove('translate-x-0');
});
}
</script>
</body>
</html>
