bakery-ia/scripts/fix-frontend.sh

#!/bin/bash
# scripts/fix-frontend.sh - Frontend troubleshooting script

set -e

GREEN='\033[0;32m'
BLUE='\033[0;34m'
RED='\033[0;31m'
YELLOW='\033[0;33m'
NC='\033[0m'

print_step() {
    echo -e "${BLUE}[FRONTEND-FIX]${NC} $1"
}

print_success() {
    echo -e "${GREEN}[SUCCESS]${NC} $1"
}

print_error() {
    echo -e "${RED}[ERROR]${NC} $1"
}

print_warning() {
    echo -e "${YELLOW}[WARNING]${NC} $1"
}

# Check if we're in the right directory
if [ ! -f "docker-compose.yml" ]; then
    print_error "docker-compose.yml not found. Please run this script from the project root."
    exit 1
fi

print_step "Starting frontend troubleshooting..."

# Step 1: Check frontend directory structure
print_step "Checking frontend directory structure..."
if [ ! -d "frontend" ]; then
    print_error "Frontend directory not found!"
    exit 1
fi

cd frontend

# Step 2: Check package.json exists
if [ ! -f "package.json" ]; then
    print_error "package.json not found in frontend directory!"
    exit 1
fi
print_success "package.json found"

# Step 3: Generate package-lock.json if missing
if [ ! -f "package-lock.json" ]; then
    print_warning "package-lock.json not found. Generating..."
    npm install
    print_success "package-lock.json generated"
else
    print_success "package-lock.json found"
fi

# Step 4: Check for missing directories
print_step "Creating missing directories..."
mkdir -p src/pages
mkdir -p src/components
mkdir -p src/hooks
mkdir -p src/services
mkdir -p src/utils
mkdir -p public
print_success "Directory structure verified"

# Step 5: Check for App.tsx
if [ ! -f "src/App.tsx" ]; then
    print_warning "src/App.tsx not found. Creating basic App.tsx..."
    
    cat > src/App.tsx << 'EOF'
import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div className="App min-h-screen bg-gray-50">
        <div className="container mx-auto px-4 py-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-6">
            🥖 PanIA Dashboard
          </h1>
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-xl font-semibold mb-4">
              Bienvenido a PanIA
            </h2>
            <p className="text-gray-600">
              Sistema de predicción de demanda para panaderías en Madrid
            </p>
          </div>
        </div>
      </div>
    </Router>
  )
}

export default App
EOF
    print_success "Basic App.tsx created"
else
    print_success "App.tsx found"
fi

# Step 6: Check for index.css
if [ ! -f "src/index.css" ]; then
    print_warning "src/index.css not found. Creating basic CSS..."
    
    cat > src/index.css << 'EOF'
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
EOF
    print_success "Basic index.css created"
else
    print_success "index.css found"
fi

# Step 7: Go back to project root
cd ..

# Step 8: Stop and remove the frontend container
print_step "Stopping and removing existing frontend container..."
docker-compose stop dashboard 2>/dev/null || true
docker-compose rm -f dashboard 2>/dev/null || true

# Step 9: Remove the image to force rebuild
print_step "Removing frontend image to force rebuild..."
docker rmi bakery/dashboard:latest 2>/dev/null || true

# Step 10: Check .env file
if [ ! -f ".env" ]; then
    print_warning ".env file not found. Creating from example..."
    if [ -f ".env.example" ]; then
        cp .env.example .env
        print_success ".env created from .env.example"
    else
        # Create minimal .env
        cat > .env << 'EOF'
ENVIRONMENT=development
DASHBOARD_PORT=3000
GATEWAY_PORT=8000
IMAGE_TAG=latest
EOF
        print_success "Minimal .env created"
    fi
fi

# Step 11: Rebuild the frontend service
print_step "Rebuilding frontend service..."
docker-compose build --no-cache dashboard

# Step 12: Start the frontend service
print_step "Starting frontend service..."
docker-compose up -d dashboard

# Step 13: Wait and check status
print_step "Waiting for frontend to start..."
sleep 10

# Check if container is running
if docker-compose ps dashboard | grep -q "Up"; then
    print_success "Frontend container is running!"
    print_step "Checking logs..."
    docker-compose logs --tail=20 dashboard
    
    print_step "Testing frontend health..."
    sleep 5
    if curl -f http://localhost:3000 >/dev/null 2>&1; then
        print_success "Frontend is accessible at http://localhost:3000"
    else
        print_warning "Frontend is running but not yet accessible. Check logs above."
    fi
else
    print_error "Frontend container failed to start. Check logs:"
    docker-compose logs dashboard
fi

print_step "Frontend troubleshooting completed!"
echo ""
echo "Next steps:"
echo "1. Check the frontend at: http://localhost:3000"
echo "2. View logs with: docker-compose logs dashboard"
echo "3. Restart if needed: docker-compose restart dashboard"