🏥 Hospital Equipment Management System (UI Showcase)

This is a React + Tailwind CSS dashboard UI built to showcase the concept of a Hospital Equipment Management System (EMS).
It focuses purely on the frontend user interface for demonstration purposes.

---

✨ Features

• 📊 Dashboard Overview

  • Key stats (Total Equipment, Active, Under Maintenance, Scheduled)
  • Responsive design with hospital-friendly colors (light blue theme)

• 🩺 Equipment Management

  • Equipment table with status tags
  • Upcoming maintenance schedules

• 📈 Charts & Insights

  • Equipment usage and status breakdown (Recharts integration)

• 🧭 Sidebar Navigation

  • Dashboard, Equipment, Maintenance, Reports, Settings

• 🌙 Topbar

  • Profile section
  • Dark mode toggle (conceptual)

• 📌 Modal

  • Example modal for scheduling maintenance

---

🛠️ Tech Stack

• React + Vite – Fast development environment
• Tailwind CSS – Utility-first CSS framework
• Recharts – Interactive charts for data visualization
• Lucide-react – Clean, modern icons

---

📂 Project Structure

hospital-dashboard/

├── src/

│ ├── components/

│ │ ├── Sidebar.jsx

│ │ ├── Topbar.jsx

│ │ ├── StatsCards.jsx

│ │ ├── EquipmentTable.jsx

│ │ ├── EquipmentChart.jsx

│ │ └── MaintenanceModal.jsx

│ ├── App.jsx │ ├── index.css │ └── main.jsx ├── public/

├── package.json └── README.md Click to view the UI Dashboard

📸 Screenshot ( https://github.com/Charley-sys/Hospital_Equipments_Management_System_UI_Dashboard/blob/main/Screenshot%20(437).png )

https://github.com/Charley-sys/Hospital_Equipments_Management_System_UI_Dashboard/blob/main/Screenshot%20(439).png

---

🚀 Getting Started

1️⃣ Clone the Repo

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

2️⃣ Install Dependencies
npm install

3️⃣ Run Development Server
npm run dev


Open your browser at:

http://localhost:5173/

4️⃣ Build for Production
npm run build