pms_md 1.0.4 → 1.0.5

package/.gitignore

@@ -0,0 +1,158 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build outputs
+dist/
+build/
+*.tsbuildinfo
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Runtime data
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+.nyc_output/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env*.local
+
+# IDE and Editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+*.sublime-project
+*.sublime-workspace
+
+# OS files
+Thumbs.db
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+
+# Database files
+*.sqlite
+*.sqlite3
+*.db
+
+# Email credentials (for monitoring)
+email-config.json
+smtp-credentials.json
+
+# Monitoring specific
+monitoring-data/
+error-reports/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env
+.env.development
+.env.production
+.env.test
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Compiled binary addons
+build/Release
+
+# Dependency directories
+jspm_packages/
+
+# Snowpack dependency directory
+web_modules/
+
+# TypeScript v1 declaration files
+typings/
+

package/README.md

@@ -1,6 +1,6 @@
 # 🚀 PMS_MD - Comprehensive Node.js Monitoring Solution
 
-[![npm version](https://img.shields.io/badge/npm-1.0.3-blue.svg)](https://www.npmjs.com/package/pms_md)
+[![npm version](https://img.shields.io/badge/npm-1.0.5-blue.svg)](https://www.npmjs.com/package/pms_md)
 [![License: ISC](https://img.shields.io/badge/License-ISC-green.svg)](LICENSE)
 [![Node.js](https://img.shields.io/badge/node-%3E%3D14.0.0-brightgreen.svg)](https://nodejs.org/)
 
@@ -10,6 +10,7 @@
 
 ## ✨ Features
 
+- 🎨 **Beautiful UI Dashboard** - One-line integration with stunning monitoring UI (NEW!)
 - 🗄️ **13+ Database Support** - MongoDB, PostgreSQL, MySQL, MariaDB, MSSQL, SQLite, Redis, Cassandra, Elasticsearch, DynamoDB, Neo4j, CouchDB, Sequelize
 - 📧 **Email Notifications** - Automatic alerts for errors, crashes, and database failures
 - 📊 **Health Monitoring** - System resources (CPU, Memory), API errors, database connections
@@ -118,6 +119,73 @@ module.exports = app;
 
 ---
 
+## 🎨 Beautiful Monitoring UI (NEW!)
+
+### One-Line Integration 🚀
+
+Add a complete monitoring dashboard to your app with just **one line of code**:
+
+```javascript
+const express = require('express');
+const NodeMonitor = require('pms_md');
+
+const app = express();
+
+const monitor = new NodeMonitor({
+  app: { name: 'My App' }
+});
+
+// ===== ONE LINE TO ENABLE ENTIRE UI! =====
+monitor.serveUI(app);
+
+monitor.start();
+app.listen(3000);
+```
+
+### What You Get
+
+After calling `monitor.serveUI(app)`, you get:
+
+- 🏠 **Home Page** - `/` - Navigation hub with quick links
+- 📊 **Dashboard** - `/monitor/dashboard` - Complete monitoring overview
+- 💚 **Health Check** - `/health` - Live health status with auto-refresh
+- 📈 **Metrics** - `/monitor/metrics` - Interactive charts (CPU, Memory)
+- 📋 **Status** - `/monitor/status` - Real-time status overview
+- 🚨 **Error Logs** - `/monitor/error-logs` - Error tracking
+
+### Features
+
+✅ **Zero Configuration** - Works out of the box
+✅ **No File Copying** - Everything served from `node_modules`
+✅ **Beautiful Design** - Modern, responsive UI
+✅ **Real-time Updates** - Auto-refresh dashboards
+✅ **Interactive Charts** - Powered by Chart.js
+✅ **Dark/Light Theme** - User preference support
+✅ **Content Negotiation** - Supports both HTML and JSON
+
+### Advanced Configuration
+
+```javascript
+// Custom base path
+monitor.serveUI(app, {
+  basePath: '/monitoring',
+  appName: 'Production API',
+  enableErrorLogs: true
+});
+
+// UI now available at:
+// http://localhost:3000/monitoring/
+// http://localhost:3000/monitoring/dashboard
+```
+
+### Screenshots
+
+Visit `http://localhost:3000/` after starting your server to see the beautiful UI!
+
+📚 **[Complete UI Integration Guide →](./UI_INTEGRATION_GUIDE.md)**
+
+---
+
 ## 🗄️ Database Monitoring
 
 ### MSSQL (SQL Server)

package/node-monitor/DESIGN_IMPROVEMENTS.md

@@ -0,0 +1,286 @@
+# 🎨 Design Improvements - Error Logs Page
+
+## Overview
+Comprehensive design improvements made to the Error Logs page to enhance visual appeal, user experience, and modern aesthetics.
+
+---
+
+## ✨ Key Improvements
+
+### 1. **Modern Header with Gradient Background**
+- **Before:** Simple text header
+- **After:** Full-width gradient header with purple/blue theme
+- **Features:**
+  - Large icon (📋) with drop shadow
+  - Bold, prominent title with text shadow
+  - Descriptive subtitle
+  - Matches the overall app theme
+  - Responsive design for mobile devices
+
+### 2. **Enhanced Filter Buttons**
+- **Before:** Simple inline buttons with basic styling
+- **After:** Modern card-based filter system
+- **Features:**
+  - Grid layout with responsive columns
+  - Each button shows:
+    - Icon
+    - Label
+    - Count (large, prominent number)
+  - Animated left border that expands on active state
+  - Gradient backgrounds for each filter type:
+    - All Errors: Purple gradient
+    - API Errors: Red gradient
+    - Server Errors: Orange gradient
+    - Database Errors: Purple gradient
+  - Smooth hover effects with icon scaling
+  - Active state fills entire button with gradient
+
+### 3. **Improved Stats Cards**
+- **Before:** Basic white cards
+- **After:** Modern cards with visual enhancements
+- **Features:**
+  - Left border accent (purple)
+  - Decorative gradient background element in top-right
+  - Hover effect (lifts up with shadow)
+  - Better typography with uppercase labels
+  - Larger, bolder values
+  - Smooth transitions
+
+### 4. **Enhanced Error Item Cards**
+- **Before:** Simple list items with border
+- **After:** Interactive cards with hover effects
+- **Features:**
+  - Left border appears on hover (purple)
+  - Gradient background on hover
+  - Smooth padding transition
+  - Better visual feedback
+
+### 5. **Modernized Badges**
+- **Before:** Flat colored badges
+- **After:** Gradient badges with depth
+- **Features:**
+  - Gradient backgrounds
+  - Border for definition
+  - Box shadow for depth
+  - Scale animation on hover
+  - Better contrast and readability
+
+### 6. **Improved Action Buttons**
+- **Before:** Basic gradient buttons
+- **After:** Interactive buttons with ripple effect
+- **Features:**
+  - Ripple animation on hover (expanding circle)
+  - Better shadows
+  - Smooth lift effect on hover
+  - Icon and text separated for better layout
+  - Larger, more clickable
+
+### 7. **Enhanced File Selector**
+- **Before:** Simple dropdown
+- **After:** Styled container with visual hierarchy
+- **Features:**
+  - Gradient background container
+  - Border for definition
+  - Icon in label (📅)
+  - Better focus states with ring effect
+  - Hover effect on dropdown
+  - Improved typography
+
+### 8. **Inline Stats in Header**
+- **New Feature:** Quick stats at a glance
+- **Features:**
+  - Shows Total, API, and Server error counts
+  - Icon for each stat type
+  - Gradient background cards
+  - Left border accent
+  - Updates in real-time
+
+### 9. **Responsive Design**
+- **Mobile Optimizations:**
+  - Stacked layout for small screens
+  - Adjusted font sizes
+  - Full-width buttons
+  - Centered header content
+  - Smaller icons and padding
+
+### 10. **Smooth Animations**
+- **Added:**
+  - Fade-in animation for error items
+  - Smooth scroll behavior
+  - Hover transitions on all interactive elements
+  - Scale animations on badges
+  - Ripple effect on buttons
+  - Border expansion animations
+
+---
+
+## 🎨 Color Scheme
+
+### Primary Colors:
+- **Purple Gradient:** `#667eea` → `#764ba2`
+- **Red (API Errors):** `#ef4444` → `#dc2626`
+- **Orange (Server Errors):** `#f59e0b` → `#d97706`
+- **Purple (Database Errors):** `#8b5cf6` → `#7c3aed`
+- **Green (Success):** `#10b981` → `#059669`
+- **Blue (Info):** `#3b82f6` → `#2563eb`
+
+### Neutral Colors:
+- **Background:** `#f9fafb`, `#f3f4f6`
+- **Text:** `#1f2937`, `#6b7280`
+- **Borders:** `#e5e7eb`
+
+---
+
+## 📱 Responsive Breakpoints
+
+### Mobile (max-width: 768px):
+- Single column layout
+- Stacked filter buttons
+- Full-width action buttons
+- Smaller header icon and title
+- Centered content
+
+---
+
+## 🔧 Technical Details
+
+### CSS Features Used:
+- **Flexbox** - For flexible layouts
+- **CSS Grid** - For responsive filter buttons
+- **Gradients** - Linear gradients for backgrounds
+- **Transitions** - Smooth animations
+- **Transform** - Scale and translate effects
+- **Box Shadow** - Depth and elevation
+- **Pseudo-elements** - `::before` for decorative elements
+- **Keyframe Animations** - Fade-in and spin animations
+
+### Performance Optimizations:
+- Hardware-accelerated transforms
+- Efficient CSS selectors
+- Minimal repaints
+- Smooth 60fps animations
+
+---
+
+## 🎯 User Experience Improvements
+
+### Visual Hierarchy:
+1. **Header** - Most prominent, sets context
+2. **Quick Stats** - Immediate overview
+3. **File Selector & Actions** - Primary controls
+4. **Filter Buttons** - Secondary navigation
+5. **Stats Cards** - Detailed metrics
+6. **Error List** - Main content
+
+### Interaction Feedback:
+- ✅ Hover states on all clickable elements
+- ✅ Active states for current selection
+- ✅ Loading states with spinner
+- ✅ Empty states with friendly message
+- ✅ Smooth transitions for all state changes
+
+### Accessibility:
+- ✅ High contrast colors
+- ✅ Large click targets (min 44x44px)
+- ✅ Clear visual feedback
+- ✅ Readable font sizes
+- ✅ Semantic HTML structure
+
+---
+
+## 📊 Before & After Comparison
+
+### Header:
+- **Before:** Plain text "📋 API Error Logs"
+- **After:** Full-width gradient banner with large icon, title, and subtitle
+
+### Filter Buttons:
+- **Before:** 4 inline buttons with basic colors
+- **After:** Grid of modern cards with icons, labels, counts, and animations
+
+### Stats Cards:
+- **Before:** Simple white cards
+- **After:** Cards with accents, decorative elements, and hover effects
+
+### Error Items:
+- **Before:** Static list items
+- **After:** Interactive cards with hover animations
+
+---
+
+## 🚀 Future Enhancements (Optional)
+
+### Potential Additions:
+1. **Dark Mode** - Toggle for dark theme
+2. **Export Options** - CSV, JSON, PDF export
+3. **Search & Filter** - Text search within errors
+4. **Date Range Picker** - Filter by custom date range
+5. **Error Grouping** - Group similar errors
+6. **Charts & Graphs** - Visual error trends
+7. **Real-time Updates** - WebSocket for live updates
+8. **Keyboard Shortcuts** - Quick navigation
+9. **Customizable Views** - Save filter preferences
+10. **Error Details Modal** - Expanded view for errors
+
+---
+
+## 📝 Code Structure
+
+### File Modified:
+- `node-monitor/examples/views/error-logs.ejs`
+
+### Sections Updated:
+1. **CSS Styles** (Lines 8-647)
+   - Page header gradient
+   - Filter buttons
+   - Stats cards
+   - Error items
+   - Badges
+   - Action buttons
+   - File selector
+   - Responsive design
+   - Animations
+
+2. **HTML Structure** (Lines 648-908)
+   - New gradient header
+   - Inline stats
+   - Restructured filter buttons
+   - Updated action buttons
+
+---
+
+## ✅ Testing Checklist
+
+- [x] Desktop view (1920x1080)
+- [x] Tablet view (768x1024)
+- [x] Mobile view (375x667)
+- [x] Hover states
+- [x] Active states
+- [x] Loading states
+- [x] Empty states
+- [x] Long text handling
+- [x] Multiple errors display
+- [x] Filter functionality
+- [x] Refresh functionality
+- [x] Download functionality
+
+---
+
+## 🎉 Summary
+
+The Error Logs page has been transformed from a functional but basic interface into a modern, visually appealing, and highly interactive dashboard. The improvements focus on:
+
+1. **Visual Appeal** - Modern gradients, shadows, and animations
+2. **User Experience** - Clear hierarchy, intuitive interactions
+3. **Responsiveness** - Works great on all devices
+4. **Performance** - Smooth 60fps animations
+5. **Accessibility** - High contrast, large targets, clear feedback
+
+The new design maintains the functionality while significantly enhancing the aesthetics and user experience!
+
+---
+
+**Last Updated:** 2025-11-12  
+**Version:** 2.0  
+**Author:** Manish Desai
+