🏥 Hospital Management Dashboard

A modern, responsive Hospital Management Dashboard built with React, TypeScript, Vite, Tailwind CSS, and TanStack Query. The application provides an intuitive interface for managing patients, appointments, diagnostics, hospital monitoring, predictive analytics, reports, and settings.

---

📸 Preview

A responsive healthcare dashboard featuring:

• 📊 Interactive Dashboard
• 👨‍⚕️ Patient Management
• 📅 Appointment Scheduling
• 🧪 Diagnostic Reports
• 📈 Predictive Analytics
• ❤️ Live Patient Monitoring
• 📄 Reports
• ⚙️ Settings

---

✨ Features

Dashboard

• Hospital overview
• Patient statistics
• Revenue analytics
• Bed occupancy
• Emergency cases
• Recent activities

Patient Management

• Search patients
• Filter by status
• Filter by risk level
• Patient details panel
• Medical history
• Vital signs
• Pagination

Diagnostic Reports

• Blood Tests
• MRI
• CT Scan
• ECG
• X-Ray
• Lab Reports
• Report Preview
• Download Reports

Appointment Scheduling

• Monthly Calendar
• Doctor Availability
• Upcoming Appointments
• Appointment Cards
• Responsive Calendar View

Live Monitoring

• Live Heart Rate
• Blood Pressure
• ICU Occupancy
• Hospital Capacity
• Emergency Queue
• Ambulance Tracking
• Animated Progress Bars

Predictive Analytics

• AI Predictions
• Risk Analysis
• Disease Trends
• Hospital Insights

Reports

• Generate Reports
• Export Reports
• Statistics

Settings

• Profile Settings
• Notification Settings
• Security
• Preferences

---

🚀 Tech Stack

Frontend

• React 18
• TypeScript
• Vite
• Tailwind CSS

State Management

• TanStack React Query

Routing

• React Router DOM

Animations

• Framer Motion

Icons

• Lucide React

Utilities

• date-fns

---

📂 Project Structure

src/

├── components/
│   ├── common/
│   ├── dashboard/
│   ├── ui/
│
├── hooks/
│
├── layouts/
│
├── pages/
│   ├── auth/
│   ├── dashboard/
│   ├── patients/
│   ├── appointments/
│   ├── diagnostics/
│   ├── monitoring/
│   ├── predictive/
│   ├── reports/
│   └── settings/
│
├── routes/
│
├── services/
│
├── styles/
│
├── utils/
│
├── App.tsx
└── main.tsx

---

📦 Installation

Clone the repository

git clone https://github.com/your-username/hospital-dashboard.git

Go to project folder

cd hospital-dashboard

Install dependencies

npm install

Run development server

npm run dev

Build production

npm run build

Preview production build

npm run preview

---

📱 Responsive Design

Supports

• Desktop
• Laptop
• Tablet
• Mobile

---

🎨 UI Components

• Cards
• Tables
• Badges
• Buttons
• Inputs
• Search
• Filters
• Calendar
• Progress Bars
• Modal
• Sidebar
• Navbar
• Responsive Layout

---

📊 Mock Data

This project currently uses Mock API Services to simulate backend functionality.

Future integration can include:

• Node.js
• Express.js
• MongoDB
• PostgreSQL
• Firebase
• Supabase

---

🔮 Future Improvements

• JWT Authentication
• Role Based Access
• Real-time Notifications
• Video Consultation
• AI Chat Assistant
• PDF Report Generation
• Email Notifications
• SMS Notifications
• Dark Mode
• Backend Integration
• REST API
• WebSocket Live Monitoring

---

📚 Learning Objectives

This project demonstrates:

• React Architecture
• TypeScript
• Component Reusability
• Responsive Design
• State Management
• React Query
• React Router
• Custom Hooks
• Tailwind CSS
• Framer Motion
• Modern UI Design

---

👨‍💻 Author

Ankit Kumar

B.Tech CSE Student

ABES Engineering College

---

📄 License

This project is created for learning, portfolio, and demonstration purposes.