pms_md 1.0.4 → 1.0.5

package/node-monitor/FILTER_BUTTONS_FIX.md

@@ -0,0 +1,303 @@
+# 🔧 Filter Buttons - Complete Fix
+
+## ✅ **Issue Fixed:**
+All filter buttons now start in **simple state** (white background with purple left border). No button has gradient background by default.
+
+---
+
+## 🎨 **What Was Changed:**
+
+### **1. Removed Default Active Class from HTML** ✅
+**File:** `node-monitor/examples/views/error-logs.ejs` (Line 757)
+
+**Before:**
+```html
+<button class="filter-btn filter-all active" onclick="filterErrors('ALL')" id="filter-all">
+```
+
+**After:**
+```html
+<button class="filter-btn filter-all" onclick="filterErrors('ALL')" id="filter-all">
+```
+
+---
+
+### **2. Updated CSS - Unified Default Border** ✅
+**File:** `node-monitor/examples/views/error-logs.ejs` (Line 182-192)
+
+**Before:**
+```css
+.filter-btn::before {
+    background: #e5e7eb; /* Gray border */
+}
+```
+
+**After:**
+```css
+.filter-btn::before {
+    background: #667eea; /* Purple border for all */
+}
+```
+
+---
+
+### **3. Gradient Only on Active State** ✅
+**File:** `node-monitor/examples/views/error-logs.ejs` (Line 225-240)
+
+**Before:**
+```css
+.filter-all::before {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+}
+```
+
+**After:**
+```css
+.filter-all.active::before {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+}
+```
+
+Now gradients only apply when button has `.active` class!
+
+---
+
+### **4. Fixed JavaScript to Use CSS Classes** ✅
+**File:** `node-monitor/examples/views/error-logs.ejs` (Line 953-972)
+
+**Before:**
+```javascript
+function filterErrors(type) {
+    // Used inline styles
+    activeBtn.style.background = color;
+    activeBtn.style.color = 'white';
+}
+```
+
+**After:**
+```javascript
+function filterErrors(type) {
+    // Remove active class from all buttons
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.remove('active');
+        btn.style.background = '';
+        btn.style.color = '';
+    });
+    
+    // Add active class to clicked button
+    const activeBtn = document.getElementById(`filter-${type.toLowerCase().replace('_error', '')}`);
+    if (activeBtn) {
+        activeBtn.classList.add('active');
+    }
+}
+```
+
+---
+
+### **5. Ensure Clean State on Page Load** ✅
+**File:** `node-monitor/examples/views/error-logs.ejs` (Line 1006-1015)
+
+**Added:**
+```javascript
+window.addEventListener('load', () => {
+    // Ensure all filter buttons start in simple state
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.remove('active');
+        btn.style.background = '';
+        btn.style.color = '';
+    });
+    loadLogFile();
+});
+```
+
+---
+
+## 📋 **How Buttons Work Now:**
+
+### **Default State (All Buttons Look Identical):**
+```
+┌─────────────────────┐
+│ 📊 All Errors       │  ← White background
+│    10               │  ← Purple left border (4px)
+└─────────────────────┘
+
+┌─────────────────────┐
+│ 🔗 API Errors       │  ← White background
+│    2                │  ← Purple left border (4px)
+└─────────────────────┘
+
+┌─────────────────────┐
+│ ⚙️ Server Errors    │  ← White background
+│    0                │  ← Purple left border (4px)
+└─────────────────────┘
+
+┌─────────────────────┐
+│ 🗄️ Database Errors  │  ← White background
+│    0                │  ← Purple left border (4px)
+└─────────────────────┘
+```
+
+### **Active State (When Clicked):**
+
+**All Errors (clicked):**
+```
+┌─────────────────────┐
+│ 📊 All Errors       │  ← Purple gradient background
+│    10               │  ← White text
+└─────────────────────┘
+```
+
+**API Errors (clicked):**
+```
+┌─────────────────────┐
+│ 🔗 API Errors       │  ← Red gradient background
+│    2                │  ← White text
+└─────────────────────┘
+```
+
+**Server Errors (clicked):**
+```
+┌─────────────────────┐
+│ ⚙️ Server Errors    │  ← Orange gradient background
+│    0                │  ← White text
+└─────────────────────┘
+```
+
+**Database Errors (clicked):**
+```
+┌─────────────────────┐
+│ 🗄️ Database Errors  │  ← Purple gradient background
+│    0                │  ← White text
+└─────────────────────┘
+```
+
+---
+
+## 🎨 **Visual States:**
+
+### **Simple State:**
+- ✅ White background
+- ✅ Purple left border (4px, same for all)
+- ✅ Gray label text (#6b7280)
+- ✅ Dark count text (#1f2937)
+- ✅ Original icon colors
+- ✅ Light border (#e5e7eb)
+
+### **Hover State:**
+- ✅ Lifts up 2px
+- ✅ Border expands to 6px
+- ✅ Icon scales to 1.1x
+- ✅ Shadow appears
+
+### **Active State:**
+- ✅ Full gradient background (100% width)
+- ✅ White text (label + count)
+- ✅ White icon (inverted)
+- ✅ Lifted appearance
+- ✅ Stronger shadow
+- ✅ No border
+
+---
+
+## 🔄 **User Interaction Flow:**
+
+1. **Page Loads:**
+   - All buttons in simple state
+   - No button is active
+   - All have purple left border
+
+2. **User Clicks "All Errors":**
+   - "All Errors" button gets purple gradient background
+   - Text turns white
+   - Other buttons remain in simple state
+
+3. **User Clicks "API Errors":**
+   - "All Errors" returns to simple state
+   - "API Errors" gets red gradient background
+   - Text turns white
+
+4. **User Clicks Another Button:**
+   - Previous active button returns to simple state
+   - New button gets its gradient background
+   - Only one button active at a time
+
+---
+
+## 🎨 **Color Scheme:**
+
+### **Default State:**
+- Border: `#667eea` (Purple)
+- Background: `white`
+- Label: `#6b7280` (Gray)
+- Count: `#1f2937` (Dark Gray)
+
+### **Active Gradients:**
+- **All Errors:** `#667eea` → `#764ba2` (Purple)
+- **API Errors:** `#ef4444` → `#dc2626` (Red)
+- **Server Errors:** `#f59e0b` → `#d97706` (Orange)
+- **Database Errors:** `#8b5cf6` → `#7c3aed` (Purple)
+
+### **Active Text:**
+- Label: `#ffffff` (White)
+- Count: `#ffffff` (White)
+- Icon: White (inverted)
+
+---
+
+## ✅ **Testing Checklist:**
+
+- [x] All buttons start in simple state
+- [x] No button has gradient by default
+- [x] All buttons have same purple left border
+- [x] Clicking button applies gradient
+- [x] Only one button active at a time
+- [x] Active button shows white text
+- [x] Inactive buttons return to simple state
+- [x] Hover effects work correctly
+- [x] Page load clears any cached states
+- [x] JavaScript uses CSS classes (not inline styles)
+
+---
+
+## 🚀 **How to Test:**
+
+1. **Open the page:**
+   ```
+   http://localhost:3001/monitor/error-logs
+   ```
+
+2. **Do a hard refresh:**
+   - Windows: `Ctrl + Shift + R` or `Ctrl + F5`
+   - Mac: `Cmd + Shift + R`
+
+3. **Verify:**
+   - All 4 filter buttons look identical
+   - All have white background
+   - All have purple left border
+   - No button has gradient background
+
+4. **Click each button:**
+   - Verify gradient appears
+   - Verify text turns white
+   - Verify other buttons return to simple state
+
+---
+
+## 📝 **Summary:**
+
+✅ **All filter buttons now start in simple state**  
+✅ **Unified purple left border for all buttons**  
+✅ **Gradient backgrounds only appear when clicked**  
+✅ **White text only appears when active**  
+✅ **Clean state on page load**  
+✅ **No inline styles**  
+✅ **CSS classes control all states**
+
+**The filter buttons are now working perfectly!** 🎉
+
+---
+
+**Last Updated:** 2025-11-12  
+**Version:** 3.0  
+**Status:** ✅ FIXED
+

package/node-monitor/PUBLISHING_GUIDE.md

@@ -0,0 +1,331 @@
+# 📦 Publishing Guide for Node Monitor
+
+This guide will help you publish the `@projectmd/node-monitor` package to npm.
+
+## 🎯 Pre-Publishing Checklist
+
+Before publishing, make sure:
+
+- [x] ✅ `.npmignore` file is created
+- [x] ✅ `package.json` has repository information
+- [x] ✅ `LICENSE` file exists (MIT)
+- [x] ✅ `README.md` is complete
+- [ ] 📝 All documentation is up to date
+- [ ] 🧪 All tests pass (if applicable)
+- [ ] 🔍 No sensitive data in code (API keys, passwords)
+- [ ] 📊 Version number is correct
+
+---
+
+## 🚀 Step-by-Step Publishing Process
+
+### Step 1: Create npm Account (If You Don't Have One)
+
+1. Go to: https://www.npmjs.com/signup
+2. Create an account
+3. Verify your email
+
+### Step 2: Login to npm
+
+```bash
+# Login to npm
+npm login
+
+# Verify you're logged in
+npm whoami
+```
+
+You'll be prompted for:
+- Username
+- Password
+- Email
+- One-time password (if 2FA is enabled)
+
+### Step 3: Test Your Package Locally
+
+```bash
+# Navigate to the package directory
+cd node-monitor
+
+# Create a test package (doesn't publish, just creates a .tgz file)
+npm pack
+
+# This creates: projectmd-node-monitor-1.0.0.tgz
+```
+
+**Test the package in another project:**
+
+```bash
+# In a test project
+cd ../test-project
+npm install ../node-monitor/projectmd-node-monitor-1.0.0.tgz
+
+# Test if it works
+node -e "const monitor = require('@projectmd/node-monitor'); console.log('✅ Package works!');"
+```
+
+### Step 4: Dry Run (See What Will Be Published)
+
+```bash
+cd node-monitor
+
+# Dry run - shows what will be published without actually publishing
+npm publish --dry-run --access public
+```
+
+This will show:
+- Files that will be included
+- Package size
+- Any warnings or errors
+
+### Step 5: Publish to npm
+
+```bash
+# Publish the package
+npm publish --access public
+```
+
+**Note:** The `--access public` flag is required for scoped packages (@projectmd/...) to make them publicly available.
+
+### Step 6: Verify Publication
+
+```bash
+# Check if the package is published
+npm view @projectmd/node-monitor
+
+# Try installing it
+npm install @projectmd/node-monitor
+```
+
+Visit your package page:
+```
+https://www.npmjs.com/package/@projectmd/node-monitor
+```
+
+---
+
+## 🔄 Updating the Package (Future Versions)
+
+### Update Version Number
+
+Use semantic versioning:
+
+```bash
+# Patch release (1.0.0 → 1.0.1) - Bug fixes
+npm version patch
+
+# Minor release (1.0.0 → 1.1.0) - New features, backward compatible
+npm version minor
+
+# Major release (1.0.0 → 2.0.0) - Breaking changes
+npm version major
+```
+
+This will:
+1. Update `package.json` version
+2. Create a git commit
+3. Create a git tag
+
+### Publish the New Version
+
+```bash
+# After updating version
+npm publish --access public
+
+# Push changes to git
+git push
+git push --tags
+```
+
+---
+
+## 📋 What Gets Published?
+
+### ✅ Included Files:
+- `src/` - All source code
+- `package.json`
+- `package-lock.json`
+- `README.md`
+- `LICENSE`
+- `GETTING_STARTED.md`
+- `INSTALLATION.md`
+- `SETUP_GUIDE.md`
+- `QUICK_REFERENCE.md`
+- `ARCHITECTURE.md`
+- `CHANGELOG.md`
+- `CONTRIBUTING.md`
+
+### ❌ Excluded Files (via .npmignore):
+- `node_modules/`
+- `examples/node_modules/`
+- `examples/logs/`
+- `.env` files
+- `logs/`
+- Test files
+- IDE configuration
+- Development documentation
+
+---
+
+## 🔍 Verify Package Contents
+
+Before publishing, check what will be included:
+
+```bash
+# List all files that will be published
+npm pack --dry-run
+
+# Or create the package and inspect it
+npm pack
+tar -tzf projectmd-node-monitor-1.0.0.tgz
+```
+
+---
+
+## 🛠️ Troubleshooting
+
+### Issue: "You must be logged in to publish packages"
+**Solution:**
+```bash
+npm login
+npm whoami  # Verify login
+```
+
+### Issue: "Package name already exists"
+**Solution:**
+- Choose a different package name
+- Or use a scope: `@yourusername/node-monitor`
+
+### Issue: "You do not have permission to publish"
+**Solution:**
+- Make sure you're logged in as the correct user
+- For scoped packages, use `--access public`
+
+### Issue: "Package version already exists"
+**Solution:**
+```bash
+# Update version first
+npm version patch
+npm publish --access public
+```
+
+### Issue: "Package size too large"
+**Solution:**
+- Check `.npmignore` is working
+- Remove unnecessary files
+- Check with: `npm pack --dry-run`
+
+---
+
+## 🔐 Security Best Practices
+
+### Enable 2FA (Two-Factor Authentication)
+
+```bash
+# Enable 2FA for your npm account
+npm profile enable-2fa auth-and-writes
+```
+
+### Use npm Tokens for CI/CD
+
+```bash
+# Create an automation token
+npm token create --read-only
+```
+
+---
+
+## 📊 After Publishing
+
+### Monitor Your Package
+
+1. **npm Package Page:**
+   - https://www.npmjs.com/package/@projectmd/node-monitor
+   - View downloads, versions, dependencies
+
+2. **Check Package Health:**
+   ```bash
+   npm view @projectmd/node-monitor
+   ```
+
+3. **Track Downloads:**
+   - https://npm-stat.com/charts.html?package=@projectmd/node-monitor
+
+### Respond to Issues
+
+- Monitor GitHub issues
+- Respond to user questions
+- Fix bugs and release patches
+
+### Keep Documentation Updated
+
+- Update README.md with new features
+- Maintain CHANGELOG.md
+- Update version in documentation
+
+---
+
+## 🎉 Success!
+
+Once published, users can install your package with:
+
+```bash
+npm install @projectmd/node-monitor
+```
+
+And use it in their projects:
+
+```javascript
+const NodeMonitor = require('@projectmd/node-monitor');
+const monitor = new NodeMonitor();
+```
+
+---
+
+## 📝 Quick Reference Commands
+
+```bash
+# Login
+npm login
+
+# Test package
+npm pack
+
+# Dry run
+npm publish --dry-run --access public
+
+# Publish
+npm publish --access public
+
+# Update version
+npm version patch|minor|major
+
+# View package info
+npm view @projectmd/node-monitor
+
+# Unpublish (within 72 hours only)
+npm unpublish @projectmd/node-monitor@1.0.0
+```
+
+---
+
+## 🔗 Useful Links
+
+- **npm Documentation:** https://docs.npmjs.com/
+- **Semantic Versioning:** https://semver.org/
+- **npm Package Best Practices:** https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry
+- **npm CLI Commands:** https://docs.npmjs.com/cli/v9/commands
+
+---
+
+## ⚠️ Important Notes
+
+1. **You cannot unpublish after 72 hours** - Be sure before publishing!
+2. **You cannot reuse a version number** - Once published, it's permanent
+3. **Breaking changes require major version bump** - Follow semantic versioning
+4. **Test thoroughly before publishing** - Your users depend on it!
+
+---
+
+**Good luck with your npm package! 🚀**
+