dbis_core/frontend/API_CONNECTION_FIX.md

# API Connection Error - Fix Guide

## Issue

After login, you see: **"Network error. Please check your connection."**

This means the frontend cannot reach the backend API.

---

## 🔍 Diagnosis

### Current Configuration

- **Frontend URL:** http://192.168.11.130
- **API URL (configured):** http://192.168.11.150:3000
- **API Status:** ❌ Not reachable

---

## ✅ Solutions

### Option 1: Start the Backend API (Recommended)

The API needs to be running on container 10150 (192.168.11.150:3000).

**Check if API container is running:**
```bash
pct status 10150
```

**Start the API service:**
```bash
# On Proxmox host
pct exec 10150 -- systemctl start dbis-api
pct exec 10150 -- systemctl status dbis-api
```

**Or start manually:**
```bash
pct exec 10150 -- bash -c "cd /opt/dbis-core && npm start"
```

### Option 2: Use Mock Data (Temporary)

I've updated the frontend to use mock data when the API is unavailable. The app will now:

1. ✅ Try to connect to the API
2. ✅ If connection fails, automatically use mock data
3. ✅ Show a warning in console (not visible to users)
4. ✅ Display the dashboard with sample data

**This allows you to:**
- Test the frontend UI
- Navigate all pages
- See how the interface works
- Develop without a backend

### Option 3: Change API URL

If your API is running on a different address:

**Update the .env file on the frontend container:**
```bash
pct exec 10130 -- bash -c "cat > /opt/dbis-core/frontend/.env <<EOF
VITE_API_BASE_URL=http://YOUR_API_URL:PORT
VITE_APP_NAME=DBIS Admin Console
VITE_REAL_TIME_UPDATE_INTERVAL=5000
EOF
"

# Rebuild frontend
pct exec 10130 -- bash -c "cd /opt/dbis-core/frontend && npm run build && systemctl restart nginx"
```

### Option 4: Use Nginx Proxy

If the API is on the same network but different port, configure nginx to proxy:

```nginx
# In /etc/nginx/sites-available/dbis-frontend
location /api {
    proxy_pass http://192.168.11.150:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}
```

---

## 🔧 Quick Fix Commands

### Check API Status
```bash
# Check if API container is running
pct status 10150

# Check if API service is running
pct exec 10150 -- systemctl status dbis-api

# Test API connectivity
curl http://192.168.11.150:3000/health
```

### Start API Service
```bash
# Start API container if stopped
pct start 10150

# Start API service
pct exec 10150 -- systemctl start dbis-api

# Or start manually
pct exec 10150 -- bash -c "cd /opt/dbis-core && npm start &"
```

### Verify Frontend Configuration
```bash
# Check frontend .env
pct exec 10130 -- cat /opt/dbis-core/frontend/.env

# Should show:
# VITE_API_BASE_URL=http://192.168.11.150:3000
```

---

## 📊 Current Status

After the fix I just applied:

- ✅ **Frontend will use mock data** if API is unavailable
- ✅ **You can still use the interface** with sample data
- ✅ **Error message is more informative**
- ✅ **No more blocking network errors**

---

## 🎯 What Happens Now

1. **If API is running:** Frontend connects and shows real data
2. **If API is not running:** Frontend shows mock data automatically
3. **Error messages:** More helpful, showing the API URL that failed

---

## 🔄 Next Steps

1. **Start the backend API** (Option 1) for real data
2. **Or continue with mock data** (Option 2) for UI testing
3. **Check browser console** (F12) for detailed error messages
4. **Verify network connectivity** between containers

---

## 📝 Notes

- Mock data allows full UI testing without backend
- All pages will work with sample data
- Real API integration requires backend to be running
- Network errors are now handled gracefully

---

**Status:** Frontend updated to handle API unavailability gracefully.