dashboard/INTEGRATION_GUIDE.md

# Dashboard Integration Guide

## ✅ Dashboard Successfully Integrated at `/shin` Route

The dashboard has been configured to run on the same port as the Kiro Gateway API and is accessible at the `/shin` route.

---

## 🎯 What Was Changed

### 1. **Next.js Configuration** (`/home/dashboard/next.config.ts`)
```typescript
const nextConfig: NextConfig = {
  basePath: '/shin',           // Dashboard accessible at /shin
  output: 'export',            // Static export for FastAPI serving
  trailingSlash: true,         // Consistent routing
  images: {
    unoptimized: true,         // No image optimization needed
  },
};
```

### 2. **API Configuration** (`/home/dashboard/src/lib/api.ts`)
- Changed from `http://localhost:8000` to relative paths
- Dashboard now makes API calls to the same origin (no CORS issues)
- API endpoints remain at `/api/dashboard/*`

### 3. **Static File Serving** (`/home/kiro/dashboard_static.py`)
- Created new module to serve Next.js static export
- Handles SPA routing correctly
- Serves static assets from `/home/dashboard/out`

### 4. **Main Application** (`/home/main.py`)
- Integrated dashboard static file serving
- Automatically mounts at `/shin` on startup

---

## 🚀 How to Use

### **Build the Dashboard**
```bash
cd /home/dashboard
npm run build
```

This creates the static export in `/home/dashboard/out/`

### **Start the Kiro Gateway**
```bash
cd /home
python3 main.py --port 8000
```

### **Access the Dashboard**
Open your browser and navigate to:
```
http://localhost:8000/shin
```

---

## 📁 Dashboard Routes

All dashboard routes are now prefixed with `/shin`:

- **Overview**: `http://localhost:8000/shin/`
- **Metrics**: `http://localhost:8000/shin/metrics/`
- **Accounts**: `http://localhost:8000/shin/accounts/`
- **Config**: `http://localhost:8000/shin/config/`
- **Logs**: `http://localhost:8000/shin/logs/`

---

## 🔧 API Endpoints

The dashboard API remains unchanged:

- `GET /api/dashboard/health` - Health check
- `GET /api/dashboard/stats` - Gateway statistics
- `GET /api/dashboard/metrics` - Historical metrics
- `GET /api/dashboard/accounts` - Account management
- `GET /api/dashboard/config` - Configuration

---

## 🎨 Enhanced Features

The dashboard now includes:

✨ **Modern Animations**
- Smooth fade-in, slide-up, and scale-in effects
- Staggered animations for sequential reveals
- Pulse animations for live indicators

🎨 **Visual Improvements**
- Glass morphism effects with backdrop blur
- Gradient backgrounds and glow effects
- Enhanced hover states and transitions
- Color-coded status indicators

📊 **Better Charts**
- Improved tooltips with shadows
- Gradient-filled visualizations
- Better empty states
- Animated data updates

🧭 **Polished Navigation**
- Enhanced sidebar with animated items
- Status indicators in header
- Smooth page transitions

---

## 🔐 Authentication

The dashboard API requires authentication via the `X-Dashboard-Key` header, which uses the same `PROXY_API_KEY` from your configuration.

---

## 📝 Development vs Production

### **Development Mode** (separate ports)
```bash
# Terminal 1: Start API
cd /home
python3 main.py --port 8000

# Terminal 2: Start dashboard dev server
cd /home/dashboard
npm run dev
# Access at http://localhost:3000
```

### **Production Mode** (same port)
```bash
# Build dashboard
cd /home/dashboard
npm run build

# Start API (serves dashboard at /shin)
cd /home
python3 main.py --port 8000
# Access at http://localhost:8000/shin
```

---

## 🐛 Troubleshooting

### Dashboard not loading?
1. Check if the build directory exists:
   ```bash
   ls -la /home/dashboard/out/
   ```

2. Rebuild the dashboard:
   ```bash
   cd /home/dashboard
   npm run build
   ```

3. Check server logs for dashboard mount message:
   ```
   Dashboard static files mounted at /shin (from /home/dashboard/out)
   ```

### API calls failing?
- Ensure the Kiro Gateway is running
- Check that credentials are configured in `.env`
- Verify `PROXY_API_KEY` is set for dashboard authentication

---

## 📦 File Structure

```
/home/
├── dashboard/
│   ├── out/                    # Built static files (served at /shin)
│   ├── src/
│   │   ├── app/               # Next.js pages
│   │   ├── components/        # React components
│   │   └── lib/api.ts         # API client (relative paths)
│   ├── next.config.ts         # basePath: '/shin'
│   └── package.json
├── kiro/
│   ├── dashboard_api/         # API endpoints (/api/dashboard/*)
│   └── dashboard_static.py    # Static file serving (/shin)
└── main.py                    # FastAPI app (integrates both)
```

---

## ✅ Summary

The dashboard is now fully integrated with the Kiro Gateway:

- ✅ Runs on the same port as the API
- ✅ Accessible at `/shin` route
- ✅ No CORS issues (same origin)
- ✅ Static export for optimal performance
- ✅ Enhanced UI with modern animations
- ✅ All pages styled consistently

**Next Steps:**
1. Configure Kiro credentials in `.env`
2. Start the gateway: `python3 main.py`
3. Access dashboard: `http://localhost:8000/shin`

Enjoy your enhanced Kiro Gateway Dashboard! 🎉