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)

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

cd /home/dashboard
npm run build

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

Start the Kiro Gateway

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)

# 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)

# 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:

   ls -la /home/dashboard/out/
   

2. Rebuild the dashboard:

   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! 🎉