SCCSMARTCODE/xmonitor-ui

XMonitor is a unified, AI-powered safety monitoring platform designed to revolutionize emergency response in Nigeria through real-time detection and intelligent alerts. # XMonitor - Real-Time AI Safety Platform XMonitor is a unified, AI-powered safety monitoring platform designed to revolutionize emergency response in Nigeria through real-time detection and intelligent alerts. ## 🎯 Features - **Real-time Monitoring Dashboard** - Live system status with heartbeat animations - **Live Feed** - Camera/sensor monitoring with AI detection overlays - **Smart Alerts** - Expandable alert cards with action tracking - **System Logs** - Timeline view with performance metrics - **Mobile-First Design** - Optimized for mobile with bottom navigation - **Dark Theme** - Professional monitoring interface ## 🚀 Getting Started ### Prerequisites - Node.js (v16+) - npm or yarn ### Installation ```bash # Install dependencies npm install # Start development server npm run dev ``` Open localhost ## 📁 Project Structure ``` xmonitor-ui/ ├── src/ │ ├── components/ │ │ ├── MonitorLayout.jsx # Main layout with navigation │ │ └── MonitorLayout.css │ ├── pages/monitor/ │ │ ├── MonitorDashboard.jsx # System overview │ │ ├── LiveMonitor.jsx # Live feed │ │ ├── Alerts.jsx # Alert management │ │ └── Logs.jsx # System logs │ ├── data/ │ │ └── monitorData.js # Mock data │ ├── styles/ │ │ └── global.css # Global styles │ ├── App.jsx │ └── main.jsx ├── PROBLEM_STATEMENT.md └── package.json ``` ## 🎨 Design System **Brand Colors:** - Primary: `#4CAF50` (XMonitor Green) - Dark BG: `#0A0E1A` - Accent: `#66BB6A` **Features:** - Mobile-first responsive design - Smooth animations and transitions - Accessible with ARIA labels - Dark theme optimized for monitoring ## 📱 Navigation - **Dashboard** - System status and quick stats - **Live** - Real-time monitoring feed - **Alerts** - Active and resolved incidents - **Logs** - Event timeline and metrics ## 🛠️ Technologies - React 18 - React Router v6 - Lucide React (icons) - date-fns - Vite ## 📄 License …