Remix

Make your own version of Pulse Ward Monitor

Edit the prompt below and generate a customized version in seconds.

Original by Rajesh Kumar

Describe your app

Create a modern, professional hospital dashboard UI for an "NCB Calling System".

This system is used in hospitals to monitor patient calls such as Bed calls, Toilet calls, Emergency alerts, and Code Blue.

The design should support both Dark Theme (neon style) and Light Theme (soft pastel style).

Layout Requirements:

1. Top Bar:

* Hospital logo on the left
* Title: "Live Alerts"
* Connection status indicator (Connected / Disconnected / Connecting)
* Active alerts count badge
* Location badge
* Theme toggle (Dark/Light)

2. Main Alerts Dashboard:

* Responsive grid layout
* First 4 alert cards must be large and arranged in a 2x2 layout
* Remaining alerts should appear below in a scrollable responsive grid
* Each alert card should display:

* Call Type (Bed / Toilet / Emergency / Code Blue)
  * Room Number (large and bold)
  * Location

3. Alert Styling:

* Use color coding:

* Green → Calling
  * Red → Emergency
  * Blue → Code Blue
  * Orange → Cancelled
* Add subtle pulse/blink animation for Calling and Emergency alerts
* Use rounded cards with clean spacing
* Ensure fonts are large and readable on big screens

4. Reports Section:

* Date range filter (From – To)
* Summary cards above graph:

* Total Calls
  * Bed Calls
  * Toilet Calls
  * Emergency Calls
* Weekly graph:

* X-axis → Days (Mon–Sun)
  * Y-axis → Number of calls
* Pie chart:

* Call type distribution
* Peak time graph:

* Hour-wise call data
* Table:

* Detailed report with sorting and filtering

5. UX Enhancements:

* Smooth animations
* Hover tooltips for charts
* Trend indicators (increase/decrease)
* Loading states and empty states
* Auto refresh for live data

6. Design Style:

* Clean, minimal, modern UI
* Proper spacing and alignment
* Use Tailwind CSS style system
* Use CSS variables for theme (light/dark)
* Focus on clarity and readability

7. Responsiveness:

* Mobile → stacked layout
* Tablet → 2–3 columns
* Desktop → 4+ columns
* Ensure font size does not become too small

Goal:
Build a real-time hospital monitoring dashboard that is visually clear, highly responsive, and easy to understand at a glance.

Free to use. No credit card required.