chitfund/BROWSER_API_TESTER.md

# 🌐 Browser API Tester - Complete Guide

## ✨ What Is This?

A **beautiful web-based tool** to test your ChitFund API endpoints directly from the browser - no Postman needed!

---

## 🚀 Quick Start

### Step 1: Access the Tester

Open your browser and go to:

```
https://chitfund.deepteklabs.com/test/api-tester.html
```

Or for local testing:

```
http://localhost:3000/test/api-tester.html
```

### Step 2: Login

1. **Enter your manager mobile number**
2. **Enter your password**
3. **Click "Login"**

You'll see:
- ✅ Success message with your name
- 🔐 Your authentication token displayed
- Token saved automatically for future use

### Step 3: Test Endpoints

Click any of the pre-configured buttons:

- **📋 Get Review Queue** - Transaction sync review queue
- **💳 Get UPI Settings** - Your UPI configuration
- **📊 Get Sync Stats** - Payment sync statistics

Or enter a custom endpoint!

---

## 📱 Screenshots

### Login Screen:
```
╔═══════════════════════════════════════╗
║  🔧 ChitFund API Tester              ║
║  Test your API endpoints             ║
╠═══════════════════════════════════════╣
║                                       ║
║  🔐 Step 1: Login                     ║
║  ─────────────────────────────────   ║
║                                       ║
║  Mobile Number: [9876543210     ]    ║
║  Password:      [••••••••••     ]    ║
║                                       ║
║  [Login]                              ║
║                                       ║
║  Auth Token:                          ║
║  ┌─────────────────────────────────┐ ║
║  │ eyJhbGciOiJIUzI1NiIsInR5cCI6... │ ║
║  └─────────────────────────────────┘ ║
║  [Copy Token]                         ║
║                                       ║
╚═══════════════════════════════════════╝
```

### API Testing:
```
╔═══════════════════════════════════════╗
║  🚀 Step 2: Test API Endpoints        ║
║  ─────────────────────────────────   ║
║                                       ║
║  [📋 Get Review Queue]                ║
║  [💳 Get UPI Settings]                ║
║  [📊 Get Sync Stats]                  ║
║                                       ║
║  Custom Endpoint:                     ║
║  [/payments/phonepe/settings/upi]     ║
║  [Call Custom Endpoint]               ║
║                                       ║
║  [Clear Response]                     ║
╚═══════════════════════════════════════╝
```

### Response Display:
```
╔═══════════════════════════════════════╗
║  📦 Response                           ║
║  ─────────────────────────────────   ║
║  {                                    ║
║    "success": true,                   ║
║    "data": {                          ║
║      "upi_id": "9876543210@ybl",      ║
║      "is_configured": true,           ║
║      "transaction_fee": 0,            ║
║      "transaction_fee_percentage": "0%"║
║    }                                  ║
║  }                                    ║
╚═══════════════════════════════════════╝
```

---

## 🎨 Features

### 1. Automatic Token Management
- ✅ Saves token to localStorage
- ✅ Persists across page refreshes
- ✅ Automatically includes in all requests

### 2. Pre-configured Endpoints
- **Review Queue** - `/transaction-sync/review-queue`
- **UPI Settings** - `/payments/phonepe/settings/upi`
- **Sync Stats** - `/transaction-sync/stats`

### 3. Custom Endpoint Testing
- Enter any API endpoint
- Automatically adds base URL
- Uses saved authentication token

### 4. Beautiful UI
- 🎨 Modern gradient design
- 📱 Responsive layout
- 🌈 Color-coded responses
- ✨ Smooth animations

### 5. Response Formatting
- JSON syntax highlighting
- Scrollable response area
- Copy-friendly display
- Clear success/error indicators

---

## 🔧 How to Use

### Testing Review Queue

1. **Login** with manager credentials
2. **Click** "Get Review Queue"
3. **See** all transactions needing review

**Response Example:**
```json
{
  "success": true,
  "data": {
    "pending": [
      {
        "id": "123",
        "amount": 10250,
        "payer_vpa": "user@paytm",
        "timestamp": "2025-11-10T10:00:00Z"
      }
    ],
    "total": 1
  }
}
```

### Testing UPI Settings

1. **Click** "Get UPI Settings"
2. **See** your UPI configuration

**Response Example:**
```json
{
  "success": true,
  "data": {
    "upi_id": "9876543210@ybl",
    "is_configured": true,
    "provider": "ybl",
    "transaction_fee": 0,
    "transaction_fee_percentage": "0%"
  }
}
```

### Testing Custom Endpoint

1. **Enter** endpoint path (e.g., `/payments/history`)
2. **Click** "Call Custom Endpoint"
3. **View** response

---

## 🛠️ Advanced Usage

### Using Browser Console

The tool also exposes these functions in console:

```javascript
// Login
login()

// Get review queue
getReviewQueue()

// Get UPI settings
getUPISettings()

// Call custom endpoint
callAPI('/your/endpoint', 'GET')

// Access saved token
console.log(window.authToken)
```

### Copy Token for Other Tools

1. **Click** "Copy Token" button
2. **Paste** in Postman/cURL/other tools

Example cURL:
```bash
curl -X GET https://chitfund.deepteklabs.com/api/transaction-sync/review-queue \
  -H "Authorization: Bearer PASTE_TOKEN_HERE"
```

---

## 📋 Pre-configured Endpoints

| Button | Endpoint | Description |
|--------|----------|-------------|
| 📋 Get Review Queue | `/transaction-sync/review-queue` | Transactions needing review |
| 💳 Get UPI Settings | `/payments/phonepe/settings/upi` | Your UPI configuration |
| 📊 Get Sync Stats | `/transaction-sync/stats` | Payment sync statistics |

---

## ⚙️ Configuration

### File Location
```
backend/public/api-tester.html
```

### Access URL
```
https://chitfund.deepteklabs.com/test/api-tester.html
```

### Backend Route
```javascript
// In server.js
app.use('/test', express.static('public'));
```

---

## 🎯 Use Cases

### 1. API Development
- Test new endpoints
- Verify authentication
- Check response format

### 2. Debugging
- Reproduce issues
- Verify fixes
- Test error handling

### 3. Documentation
- Show API examples
- Demo to team
- Training new developers

### 4. Quick Testing
- No Postman needed
- No installation required
- Works on any device

---

## 🔐 Security Notes

### Token Storage
- Stored in browser localStorage
- Persists across sessions
- Clear storage to logout

### Manual Logout
To clear token:
```javascript
// In browser console
localStorage.removeItem('authToken');
location.reload();
```

Or just close and reopen the page, then login with new credentials.

---

## 🐛 Troubleshooting

### Issue: "Please login first"

**Solution:**
1. Enter mobile number and password
2. Click Login button
3. Wait for success message

### Issue: 401 Unauthorized

**Solution:**
1. Token expired - login again
2. Not a manager account - use manager credentials
3. Wrong credentials - check mobile/password

### Issue: Page not loading

**Solution:**
1. Check backend is running
2. Verify URL is correct
3. Check browser console for errors

### Issue: CORS Error

**Solution:**
Backend already configured with:
```javascript
app.use(cors({ origin: '*' }));
```
Should work. If not, restart backend.

---

## 🎨 Customization

### Add New Endpoint Button

Edit `api-tester.html`:

```html
<!-- In the button group -->
<button class="endpoint-btn" onclick="getMyNewEndpoint()">
  🆕 My New Endpoint
</button>
```

```javascript
// In the script section
async function getMyNewEndpoint() {
    await callAPI('/my/new/endpoint', 'GET');
}
```

### Change Colors

Edit the `<style>` section:

```css
/* Change primary color */
background: linear-gradient(135deg, #YOUR_COLOR_1 0%, #YOUR_COLOR_2 100%);
```

---

## 📊 Status Indicators

### Success (Green)
```
✅ Success! Status: 200
```

### Error (Red)
```
❌ Error: Unauthorized (401)
```

### Info (Blue)
```
ℹ️ Calling /api/endpoint...
```

---

## 🚀 Next Steps

### Option 1: Use the Web Tester
1. Open browser
2. Go to `/test/api-tester.html`
3. Login and test!

### Option 2: Use Browser Console
1. Open DevTools (F12)
2. Use the JavaScript code examples above
3. Test APIs directly

### Option 3: Use Postman
1. Copy token from web tester
2. Import in Postman
3. Add Authorization header

---

## 💡 Pro Tips

1. **Keep Tab Open**
   - Token persists while tab is open
   - No need to re-login frequently

2. **Use Custom Endpoint**
   - Test any endpoint quickly
   - Great for development

3. **Copy Token**
   - Use in other tools
   - Share with team (securely!)

4. **Check Response**
   - Formatted JSON
   - Easy to read
   - Copy for documentation

---

## 📚 Related Documentation

- **API Documentation**: `backend/API_DOCUMENTATION.md`
- **Authentication Guide**: Check auth middleware
- **Endpoint List**: See routes files

---

## 🎉 Summary

**Now you can:**
- ✅ Test APIs from browser
- ✅ No Postman needed
- ✅ Beautiful UI
- ✅ Easy authentication
- ✅ Instant results
- ✅ Works anywhere

**Access it now:**
```
https://chitfund.deepteklabs.com/test/api-tester.html
```

**Happy Testing! 🚀**