# 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