feat: Complete admin panel implementation

- Add user management system with all CRUD operations - Add promotion statistics dashboard with export - Simplify Trading & Market settings UI - Fix promotion schema (dates now optional) - Add missing API endpoints and PATCH support - Add comprehensive documentation - Fix critical bugs (deletePromotion, duplicate endpoints) All features tested and production-ready.
2026-01-10 21:57:55 +00:00
parent b90cdd59df
commit 63c578b0ae
52 changed files with 21810 additions and 61 deletions
--- a/ADMIN_TROUBLESHOOTING.md
+++ b/ADMIN_TROUBLESHOOTING.md
@@ -0,0 +1,423 @@
+# Admin Panel Troubleshooting Guide
+
+This guide helps you troubleshoot common issues with the TurboTrades admin panel.
+
+## Issue 1: Cannot Access Admin Panel (Routes Not Working)
+
+### Symptoms
+- Navigating to `/admin` redirects to home page
+- Admin panel doesn't load
+- Getting 403 Forbidden errors
+
+### Solutions
+
+#### Step 1: Check Admin Permissions
+
+1. **Verify your user has admin access:**
+   - Your user's `staffLevel` must be **3 or higher**
+   - Check your user in the database:
+     ```javascript
+     // In MongoDB
+     db.users.findOne({ steamId: "YOUR_STEAM_ID" })
+     ```
+
+2. **Set admin via database:**
+   ```javascript
+   // In MongoDB
+   db.users.updateOne(
+     { steamId: "YOUR_STEAM_ID" },
+     { $set: { staffLevel: 5 } }
+   )
+   ```
+
+3. **Alternative: Use environment variable:**
+   - Add your Steam ID to `.env`:
+     ```
+     ADMIN_STEAM_IDS=76561198012345678,76561198087654321
+     ```
+   - Restart the server after adding
+
+#### Step 2: Verify Backend is Running
+
+1. **Check if backend is accessible:**
+   ```bash
+   curl http://localhost:3000/health
+   ```
+
+2. **Test admin routes directly:**
+   ```bash
+   # This should return 401 if not logged in
+   curl http://localhost:3000/api/admin/config
+   ```
+
+3. **Check server logs:**
+   - Look for route registration messages:
+     ```
+     ✅ All routes registered
+     ```
+
+#### Step 3: Verify Frontend Development Server
+
+1. **Ensure Vite dev server is running:**
+   ```bash
+   cd frontend
+   npm run dev
+   ```
+
+2. **Check the proxy is working:**
+   - Open browser DevTools (F12)
+   - Navigate to Network tab
+   - Try accessing admin panel
+   - Check if API calls are going to `localhost:3000`
+
+3. **Verify frontend build (for production):**
+   ```bash
+   cd frontend
+   npm run build
+   ```
+
+#### Step 4: Clear Browser Cache
+
+1. Open DevTools (F12)
+2. Right-click the refresh button
+3. Select "Empty Cache and Hard Reload"
+4. Or use Ctrl+Shift+Del to clear all browser data
+
+#### Step 5: Check Authentication
+
+1. **Verify you're logged in:**
+   - Open browser console (F12)
+   - Type: `localStorage` and check for session data
+   - Or check Application → Cookies → `connect.sid`
+
+2. **Test login endpoint:**
+   ```bash
+   # Navigate to this in your browser
+   http://localhost:3000/api/auth/steam
+   ```
+
+3. **Verify session:**
+   ```bash
+   curl -b cookies.txt http://localhost:3000/api/auth/me
+   ```
+
+## Issue 2: Toggles Not Clear/Visible
+
+### Symptoms
+- Toggle switches are hard to see
+- Can't tell if toggle is ON or OFF
+- Toggles don't have clear labels
+
+### Solutions
+
+#### Already Fixed!
+The new `ToggleSwitch.vue` component has been created with:
+- ✅ Clear ON/OFF labels inside the toggle
+- ✅ Green color when ON
+- ✅ Red color when OFF
+- ✅ Smooth animations
+- ✅ Better accessibility
+
+#### If Still Having Issues:
+
+1. **Clear build cache:**
+   ```bash
+   cd frontend
+   rm -rf node_modules/.vite
+   npm run dev
+   ```
+
+2. **Rebuild frontend:**
+   ```bash
+   cd frontend
+   npm run build
+   ```
+
+## Issue 3: Admin API Calls Failing
+
+### Symptoms
+- Admin panel loads but shows errors
+- API calls return 401/403
+- Data doesn't load in admin panels
+
+### Solutions
+
+#### Check CORS Configuration
+
+1. **Verify CORS settings in `index.js`:**
+   ```javascript
+   origin: (origin, cb) => {
+     const allowedOrigins = [
+       "http://localhost:5173",
+       "http://localhost:3000",
+       // Add your production domain
+     ];
+     // ...
+   }
+   ```
+
+2. **Verify credentials are sent:**
+   - Check `frontend/src/utils/axios.js`:
+     ```javascript
+     withCredentials: true
+     ```
+
+#### Check Middleware
+
+1. **Verify authenticate middleware:**
+   ```javascript
+   // In routes/admin-management.js
+   preHandler: [authenticate, isAdmin]
+   ```
+
+2. **Test middleware manually:**
+   - Add console.log to `middleware/auth.js`
+   - Check server logs when accessing admin routes
+
+## Issue 4: Admin Panel Blank/White Screen
+
+### Symptoms
+- Admin panel loads but is blank
+- Console shows component errors
+- Components not rendering
+
+### Solutions
+
+1. **Check browser console for errors:**
+   - Press F12 → Console tab
+   - Look for Vue component errors
+   - Look for import/module errors
+
+2. **Verify all components exist:**
+   ```bash
+   ls frontend/src/components/Admin*.vue
+   ls frontend/src/components/ToggleSwitch.vue
+   ```
+
+3. **Check component imports:**
+   ```javascript
+   // In AdminPage.vue
+   import AdminUsersPanel from '@/components/AdminUsersPanel.vue'
+   import AdminConfigPanel from '@/components/AdminConfigPanel.vue'
+   ```
+
+4. **Rebuild with clean slate:**
+   ```bash
+   cd frontend
+   rm -rf node_modules dist .vite
+   npm install
+   npm run build
+   ```
+
+## Issue 5: Config Not Saving
+
+### Symptoms
+- Clicking "Save" doesn't work
+- No success/error messages
+- Changes don't persist
+
+### Solutions
+
+1. **Check SiteConfig model exists:**
+   ```javascript
+   // Should exist: models/SiteConfig.js
+   ```
+
+2. **Initialize config in database:**
+   ```javascript
+   // In MongoDB
+   db.siteconfigs.insertOne({
+     maintenance: {
+       enabled: false,
+       message: "",
+       allowedSteamIds: [],
+       scheduledStart: null,
+       scheduledEnd: null
+     },
+     trading: {
+       enabled: true,
+       depositEnabled: true,
+       withdrawEnabled: true,
+       minDeposit: 0.1,
+       minWithdraw: 0.5,
+       withdrawFee: 0.05,
+       maxItemsPerTrade: 50
+     },
+     market: {
+       enabled: true,
+       commission: 0.1,
+       minListingPrice: 0.01,
+       maxListingPrice: 100000,
+       autoUpdatePrices: true,
+       priceUpdateInterval: 3600000
+     },
+     announcements: [],
+     promotions: []
+   })
+   ```
+
+3. **Check network requests:**
+   - Open DevTools → Network tab
+   - Click save button
+   - Check for POST/PATCH requests
+   - Look at response status and body
+
+## Quick Diagnostic Commands
+
+### Backend Health Check
+```bash
+# Check if server is running
+curl http://localhost:3000/health
+
+# Check authentication
+curl -b cookies.txt http://localhost:3000/api/auth/me
+
+# Check admin access (should get 401 if not logged in)
+curl http://localhost:3000/api/admin/config
+```
+
+### Database Check
+```javascript
+// Check user permissions
+db.users.find({ staffLevel: { $gte: 3 } })
+
+// Check site config exists
+db.siteconfigs.findOne()
+
+// Manually set user as admin
+db.users.updateOne(
+  { steamId: "YOUR_STEAM_ID" },
+  { $set: { staffLevel: 5 } }
+)
+```
+
+### Frontend Check
+```bash
+# Check if dependencies are installed
+cd frontend && npm list vue vue-router pinia
+
+# Rebuild everything
+npm install && npm run build
+
+# Start dev server
+npm run dev
+```
+
+## Common Error Messages
+
+### "Admin access required"
+**Cause:** User doesn't have staffLevel >= 3  
+**Fix:** Update user's staffLevel in database or add to ADMIN_STEAM_IDS
+
+### "Authentication required"
+**Cause:** Not logged in or session expired  
+**Fix:** Log in via Steam OAuth, check cookies
+
+### "Network error"
+**Cause:** Backend not running or CORS issue  
+**Fix:** Start backend, check CORS configuration
+
+### "Failed to fetch"
+**Cause:** API endpoint doesn't exist or wrong URL  
+**Fix:** Check route registration in index.js, verify API base URL
+
+## Testing Admin Access
+
+### Test Script
+Create a test file `test-admin.js`:
+
+```javascript
+import axios from 'axios';
+
+const API_URL = 'http://localhost:3000';
+
+async function testAdmin() {
+  try {
+    // Test 1: Health check
+    console.log('Testing health endpoint...');
+    const health = await axios.get(`${API_URL}/health`);
+    console.log('✅ Health check passed');
+
+    // Test 2: Auth check (will fail if not logged in)
+    console.log('\nTesting auth endpoint...');
+    try {
+      const auth = await axios.get(`${API_URL}/api/auth/me`, {
+        withCredentials: true
+      });
+      console.log('✅ Authenticated:', auth.data.user.username);
+      console.log('   Staff Level:', auth.data.user.staffLevel);
+      console.log('   Is Admin:', auth.data.user.staffLevel >= 3);
+    } catch (e) {
+      console.log('❌ Not authenticated');
+    }
+
+    // Test 3: Admin config (will fail if not admin)
+    console.log('\nTesting admin config endpoint...');
+    try {
+      const config = await axios.get(`${API_URL}/api/admin/config`, {
+        withCredentials: true
+      });
+      console.log('✅ Admin access granted');
+    } catch (e) {
+      console.log('❌ Admin access denied:', e.response?.data?.message);
+    }
+
+  } catch (error) {
+    console.error('Error:', error.message);
+  }
+}
+
+testAdmin();
+```
+
+Run with: `node test-admin.js`
+
+## Still Having Issues?
+
+1. **Check all environment variables:**
+   ```bash
+   cat .env | grep -E "(MONGO|PORT|SESSION|ADMIN)"
+   ```
+
+2. **Restart everything:**
+   ```bash
+   # Backend
+   npm run dev
+
+   # Frontend (in another terminal)
+   cd frontend && npm run dev
+   ```
+
+3. **Check logs:**
+   - Backend: Look at console output
+   - Frontend: Check browser console (F12)
+   - Network: Check DevTools Network tab
+
+4. **Verify versions:**
+   ```bash
+   node --version  # Should be >= 18
+   npm --version   # Should be >= 9
+   ```
+
+5. **Create a minimal test:**
+   - Create new test user with staffLevel 5
+   - Log in with that user
+   - Navigate to /admin
+   - Check browser console for errors
+
+## Contact/Support
+
+If you're still experiencing issues after trying these solutions:
+
+1. Check the server logs for error messages
+2. Check browser console for JavaScript errors
+3. Verify all files mentioned in this guide exist
+4. Ensure MongoDB is running and accessible
+5. Check that all npm packages are installed
+6. Try accessing from a different browser
+7. Review the ADMIN_SYSTEM.md for implementation details
+
+---
+
+**Last Updated:** Based on the latest admin panel implementation  
+**Version:** 2.0 with improved toggle switches and debugging