setup_frontend.sh

#!/bin/bash

# Troubleshooting & Setup Script for Frontend
# This script helps verify and fix common issues

echo "=========================================="
echo "MES Software - Frontend Setup & Verification"
echo "=========================================="
echo ""

# Check if we're in the right directory
if [ ! -f "frontend/package.json" ]; then
    echo "❌ Error: Please run this script from the MES-Sotfware root directory"
    exit 1
fi

echo "✓ Found frontend directory"
echo ""

# Step 1: Install dependencies
echo "Step 1: Installing frontend dependencies..."
cd frontend

if [ ! -d "node_modules" ]; then
    echo "Installing npm packages (this may take a few minutes)..."
    npm install
    echo "✓ Dependencies installed"
else
    echo "✓ Dependencies already installed"
fi
echo ""

# Step 2: Check if pages exist
echo "Step 2: Verifying frontend pages..."

if [ -f "pages/projects/[id]/models/[modelId].tsx" ]; then
    echo "✓ Model detail page exists (with deploy button)"
else
    echo "❌ Model detail page missing!"
fi

if [ -f "pages/projects/[id]/monitoring.tsx" ]; then
    echo "✓ Monitoring page exists (with reports)"
else
    echo "❌ Monitoring page missing!"
fi
echo ""

# Step 3: Check backend
echo "Step 3: Checking backend..."
cd ..

# Check if backend is running
if curl -s http://localhost:8000/ > /dev/null 2>&1; then
    echo "✓ Backend is running at http://localhost:8000"
else
    echo "⚠️  Backend is NOT running!"
    echo "   Start it with: cd backend && uvicorn main:app --reload"
fi
echo ""

# Step 4: Instructions
echo "Step 4: How to start the frontend"
echo "=========================================="
echo ""
echo "Option A - Development Mode (recommended):"
echo "  cd frontend"
echo "  npm run dev"
echo "  → Frontend will run at http://localhost:3000"
echo ""
echo "Option B - Production Mode:"
echo "  cd frontend"
echo "  npm run build"
echo "  npm start"
echo "  → Frontend will run at http://localhost:3000"
echo ""

# Step 5: Verification checklist
echo "Step 5: Verification Checklist"
echo "=========================================="
echo ""
echo "After starting the frontend, verify:"
echo ""
echo "1. Navigate to: http://localhost:3000/projects/{project-id}/models/{model-id}"
echo "   - If model status is 'COMPLETED', you should see '🚀 Deploy Model' button"
echo "   - If model status is 'DEPLOYED', you should see '📊 Go to Monitoring' button"
echo ""
echo "2. Navigate to: http://localhost:3000/projects/{project-id}/monitoring"
echo "   - You should see the monitoring dashboard"
echo "   - You should see the '📄 Generate Report' button (top right)"
echo "   - You should see drag & drop upload area"
echo ""
echo "3. If you don't see buttons:"
echo "   - Check if model status is 'COMPLETED' or 'DEPLOYED'"
echo "   - Open browser console (F12) for errors"
echo "   - Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)"
echo "   - Restart frontend dev server"
echo ""

# Step 6: Common Issues
echo "Step 6: Common Issues & Solutions"
echo "=========================================="
echo ""
echo "Issue: 'Deploy Model' button not visible"
echo "  → Model status must be 'COMPLETED'"
echo "  → Check: GET /api/projects/{id}/models/{id}"
echo "  → The response should show: \"status\": \"COMPLETED\""
echo ""
echo "Issue: 'Generate Report' button not visible"
echo "  → Make sure you're on /projects/{id}/monitoring page"
echo "  → Button is in the top-right corner of the page header"
echo "  → Check browser console for JavaScript errors"
echo ""
echo "Issue: 404 Page Not Found"
echo "  → Frontend might not be running"
echo "  → Run: cd frontend && npm run dev"
echo ""
echo "Issue: Blank page or errors"
echo "  → Clear Next.js cache: rm -rf frontend/.next"
echo "  → Reinstall: cd frontend && rm -rf node_modules && npm install"
echo "  → Restart dev server"
echo ""

echo "=========================================="
echo "Ready to start!"
echo "=========================================="
echo ""
echo "Next steps:"
echo "1. cd frontend"
echo "2. npm run dev"
echo "3. Open http://localhost:3000"
echo "4. Navigate to your project's models page"
echo ""