update

backend/routes/exam.py

@@ -704,3 +704,228 @@ def get_exam_info(exam_code):
         import traceback
         traceback.print_exc()
         return jsonify({"success": False, "error": str(e)}), 500
+
+@bp.route('/upload-question', methods=['POST', 'OPTIONS'])
+def upload_question():
+    """Host uploads a custom question to their exam"""
+    if request.method == "OPTIONS":
+        response = jsonify({'status': 'ok'})
+        response.headers.add("Access-Control-Allow-Origin", "*")
+        response.headers.add("Access-Control-Allow-Headers", "Content-Type,Authorization")
+        response.headers.add("Access-Control-Allow-Methods", "POST,OPTIONS")
+        return response
+    
+    try:
+        data = request.get_json()
+        exam_code = data.get('exam_code', '').upper()
+        question_data = data.get('question', {})
+        
+        print(f"📤 Host uploading question to exam: {exam_code}")
+        
+        if not exam_code or not question_data:
+            return jsonify({"success": False, "error": "Missing exam_code or question data"}), 400
+        
+        # Validate required question fields
+        required_fields = ['title', 'description', 'function_name', 'test_cases']
+        for field in required_fields:
+            if not question_data.get(field):
+                return jsonify({"success": False, "error": f"Missing required field: {field}"}), 400
+        
+        # Find the exam
+        exam = db.exams.find_one({"exam_code": exam_code})
+        if not exam:
+            return jsonify({"success": False, "error": "Exam not found"}), 404
+        
+        # Check if exam has already started
+        if exam['status'] != 'waiting':
+            return jsonify({"success": False, "error": "Cannot modify questions after exam has started"}), 400
+        
+        # Generate question ID
+        question_id = str(uuid.uuid4())
+        
+        # Prepare question document
+        question = {
+            "id": question_id,
+            "title": question_data['title'],
+            "description": question_data['description'],
+            "difficulty": question_data.get('difficulty', 'medium'),
+            "function_name": question_data['function_name'],
+            "starter_code": question_data.get('starter_code', {
+                'python': f'def {question_data["function_name"]}():\n    # Write your solution here\n    pass'
+            }),
+            "test_cases": question_data['test_cases'],
+            "examples": question_data.get('examples', []),
+            "constraints": question_data.get('constraints', []),
+            "time_limit": question_data.get('time_limit', 1000),
+            "memory_limit": question_data.get('memory_limit', '128MB'),
+            "created_at": datetime.now(),
+            "uploaded_by": exam['host_name']
+        }
+        
+        # Update the exam with the new question
+        result = db.exams.update_one(
+            {"exam_code": exam_code},
+            {
+                "$set": {
+                    "problem": question,
+                    "updated_at": datetime.now()
+                }
+            }
+        )
+        
+        if result.modified_count > 0:
+            print(f"✅ Question '{question['title']}' uploaded to exam {exam_code}")
+            return jsonify({
+                "success": True,
+                "message": "Question uploaded successfully",
+                "question_id": question_id,
+                "question_title": question['title']
+            })
+        else:
+            return jsonify({"success": False, "error": "Failed to update exam"}), 500
+            
+    except Exception as e:
+        print(f"❌ Error uploading question: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({"success": False, "error": f"Server error: {str(e)}"}), 500
+
+@bp.route('/upload-question', methods=['POST', 'OPTIONS'])
+def upload_question():
+    """Host uploads a custom question to their exam"""
+    if request.method == "OPTIONS":
+        response = jsonify({'status': 'ok'})
+        response.headers.add("Access-Control-Allow-Origin", "*")
+        response.headers.add("Access-Control-Allow-Headers", "Content-Type,Authorization")
+        response.headers.add("Access-Control-Allow-Methods", "POST,OPTIONS")
+        return response
+    
+    try:
+        data = request.get_json()
+        exam_code = data.get('exam_code', '').upper()
+        question_data = data.get('question', {})
+        
+        print(f"📤 Host uploading question to exam: {exam_code}")
+        
+        if not exam_code or not question_data:
+            return jsonify({"success": False, "error": "Missing exam_code or question data"}), 400
+        
+        # Validate required question fields
+        required_fields = ['title', 'description']
+        for field in required_fields:
+            if not question_data.get(field):
+                return jsonify({"success": False, "error": f"Missing required field: {field}"}), 400
+        
+        # Find the exam
+        exam = db.exams.find_one({"exam_code": exam_code})
+        if not exam:
+            return jsonify({"success": False, "error": "Exam not found"}), 404
+        
+        # Check if exam has already started
+        if exam['status'] != 'waiting':
+            return jsonify({"success": False, "error": "Cannot modify questions after exam has started"}), 400
+        
+        # Generate question ID
+        import uuid
+        question_id = str(uuid.uuid4())
+        
+        # Prepare question document
+        question = {
+            "id": question_id,
+            "title": question_data['title'],
+            "description": question_data['description'],
+            "difficulty": question_data.get('difficulty', 'medium'),
+            "function_name": question_data.get('function_name', 'solve'),
+            "starter_code": question_data.get('starter_code', {
+                'python': f'def {question_data.get("function_name", "solve")}():\n    # Write your solution here\n    pass'
+            }),
+            "test_cases": question_data.get('test_cases', []),
+            "examples": question_data.get('examples', []),
+            "constraints": question_data.get('constraints', []),
+            "time_limit": question_data.get('time_limit', 1000),
+            "memory_limit": question_data.get('memory_limit', '128MB'),
+            "created_at": datetime.now(),
+            "uploaded_by": exam.get('host_name', 'Unknown')
+        }
+        
+        # Update the exam with the new question
+        result = db.exams.update_one(
+            {"exam_code": exam_code},
+            {
+                "$set": {
+                    "problem": question,
+                    "updated_at": datetime.now()
+                }
+            }
+        )
+        
+        if result.modified_count > 0:
+            print(f"✅ Question '{question['title']}' uploaded to exam {exam_code}")
+            return jsonify({
+                "success": True,
+                "message": "Question uploaded successfully",
+                "question_id": question_id,
+                "question_title": question['title']
+            })
+        else:
+            return jsonify({"success": False, "error": "Failed to update exam"}), 500
+            
+    except Exception as e:
+        print(f"❌ Error uploading question: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({"success": False, "error": f"Server error: {str(e)}"}), 500
+
+@bp.route('/update-duration', methods=['POST', 'OPTIONS'])
+def update_duration():
+    """Update exam duration (host only, before exam starts)"""
+    if request.method == "OPTIONS":
+        response = jsonify({'status': 'ok'})
+        response.headers.add("Access-Control-Allow-Origin", "*")
+        response.headers.add("Access-Control-Allow-Headers", "Content-Type,Authorization")
+        response.headers.add("Access-Control-Allow-Methods", "POST,OPTIONS")
+        return response
+    
+    try:
+        data = request.get_json()
+        exam_code = data.get('exam_code', '').upper()
+        duration_minutes = data.get('duration_minutes', 0)
+        
+        print(f"⏰ Updating duration for exam {exam_code} to {duration_minutes} minutes")
+        
+        if not exam_code or duration_minutes <= 0:
+            return jsonify({"success": False, "error": "Invalid exam_code or duration_minutes"}), 400
+        
+        # Find the exam
+        exam = db.exams.find_one({"exam_code": exam_code})
+        if not exam:
+            return jsonify({"success": False, "error": "Exam not found"}), 404
+        
+        # Check if exam can be modified
+        if exam.get('status') != 'waiting':
+            return jsonify({"success": False, "error": "Cannot modify duration after exam has started"}), 400
+        
+        # Update duration
+        result = db.exams.update_one(
+            {"exam_code": exam_code},
+            {
+                "$set": {
+                    "duration_minutes": duration_minutes,
+                    "updated_at": datetime.now()
+                }
+            }
+        )
+        
+        if result.modified_count > 0:
+            print(f"✅ Duration updated to {duration_minutes} minutes for exam {exam_code}")
+            return jsonify({
+                "success": True,
+                "message": f"Duration updated to {duration_minutes} minutes",
+                "new_duration": duration_minutes
+            })
+        else:
+            return jsonify({"success": False, "error": "Failed to update duration"}), 500
+            
+    except Exception as e:
+        print(f"❌ Error updating duration: {str(e)}")
+        return jsonify({"success": False, "error": str(e)}), 500

frontend/app/coding/exam/[examCode]/page.tsx

@@ -0,0 +1,610 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield } from 'lucide-react'
+
+interface Participant {
+  name: string
+  score: number
+  rank: number
+  completed: boolean
+  language?: string
+  submission_time?: string
+  wallet_address?: string
+  wallet_short?: string
+  blockchain_verified?: boolean
+}
+
+interface Problem {
+  title: string
+  description: string
+  function_name: string
+  languages: string[]
+  examples: Array<{input: string, expected_output: string, description: string}>
+  constraints: string[]
+  starter_code: {[key: string]: string}
+}
+
+interface ExamSession {
+  exam_code: string
+  student_name: string
+  wallet_address?: string
+  blockchain_verified?: boolean
+  exam_info: any
+}
+
+export default function EnhancedExamInterface() {
+  const [examSession, setExamSession] = useState<ExamSession | null>(null)
+  const [problem, setProblem] = useState<Problem | null>(null)
+  const [selectedLanguage, setSelectedLanguage] = useState('python')
+  const [code, setCode] = useState('')
+  const [output, setOutput] = useState('')
+  const [testResults, setTestResults] = useState<any[]>([])
+  const [leaderboard, setLeaderboard] = useState<Participant[]>([])
+  const [waitingParticipants, setWaitingParticipants] = useState<Participant[]>([])
+  const [timeRemaining, setTimeRemaining] = useState(0)
+  const [isRunning, setIsRunning] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [hasSubmitted, setHasSubmitted] = useState(false)
+  const [examStats, setExamStats] = useState<any>({})
+  // ✅ ADD TIMER INITIALIZED STATE
+  const [timerInitialized, setTimerInitialized] = useState(false)
+  const router = useRouter()
+
+  const languageIcons: {[key: string]: string} = {
+    python: '🐍',
+    java: '☕',
+    c: '⚡',
+    bash: '💻'
+  }
+
+  useEffect(() => {
+    const sessionData = localStorage.getItem('exam_session')
+    if (!sessionData) {
+      router.push('/coding/join')
+      return
+    }
+
+    const session = JSON.parse(sessionData)
+    setExamSession(session)
+    
+    // Fetch problem details
+    fetchProblem(session.exam_code)
+    
+    // Start polling for updates
+    const interval = setInterval(() => {
+      fetchLeaderboard(session.exam_code)
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [router])
+
+  // ✅ FIXED TIMER COUNTDOWN
+  useEffect(() => {
+    if (!timerInitialized || timeRemaining <= 0) return
+
+    const timer = setInterval(() => {
+      setTimeRemaining(prev => {
+        const newTime = Math.max(0, prev - 1)
+        if (newTime === 0) {
+          alert('⏰ Time is up! Exam has ended.')
+        }
+        return newTime
+      })
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [timerInitialized, timeRemaining])
+
+  const fetchProblem = async (examCode: string) => {
+    try {
+      const response = await fetch(`http://127.0.0.1:5000/api/exam/get-problem/${examCode}`)
+      const data = await response.json()
+      
+      if (data.success) {
+        setProblem(data.problem)
+        const defaultLang = data.problem.languages[0] || 'python'
+        setSelectedLanguage(defaultLang)
+        setCode(data.problem.starter_code[defaultLang] || '')
+      }
+    } catch (error) {
+      console.error('Failed to fetch problem:', error)
+    }
+  }
+
+  // ✅ FIXED TIMER CALCULATION IN FETCHLEADERBOARD
+  const fetchLeaderboard = async (examCode: string) => {
+    try {
+      const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
+      const data = await response.json()
+      
+      if (data.success) {
+        setLeaderboard(data.leaderboard || [])
+        setWaitingParticipants(data.waiting_participants || [])
+        setExamStats(data.stats || {})
+        
+        // ✅ FIXED TIMER CALCULATION
+        if (data.exam_info && data.exam_info.status === 'active') {
+          if (data.exam_info.end_time) {
+            const now = Date.now()
+            const endTime = new Date(data.exam_info.end_time).getTime()
+            const remaining = Math.max(0, Math.floor((endTime - now) / 1000))
+            
+            console.log(`⏰ Timer calculation:`)
+            console.log(`  Current: ${new Date(now).toISOString()}`)
+            console.log(`  End: ${new Date(endTime).toISOString()}`)
+            console.log(`  Remaining: ${remaining} seconds`)
+            
+            setTimeRemaining(remaining)
+            if (!timerInitialized) {
+              setTimerInitialized(true)
+            }
+          } else if (data.exam_info.start_time && data.exam_info.duration_minutes) {
+            // Calculate from start_time + duration
+            const startTime = new Date(data.exam_info.start_time).getTime()
+            const durationMs = data.exam_info.duration_minutes * 60 * 1000
+            const endTime = startTime + durationMs
+            const now = Date.now()
+            const remaining = Math.max(0, Math.floor((endTime - now) / 1000))
+            
+            console.log(`⏰ Using start_time + duration - Remaining: ${remaining}s`)
+            setTimeRemaining(remaining)
+            if (!timerInitialized) {
+              setTimerInitialized(true)
+            }
+          }
+        } else if (data.exam_info && data.exam_info.status === 'waiting') {
+          // Show full duration for waiting exams
+          const fullSeconds = (data.exam_info.duration_minutes || 30) * 60
+          setTimeRemaining(fullSeconds)
+          if (!timerInitialized) {
+            setTimerInitialized(true)
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch leaderboard:', error)
+    }
+  }
+
+  const handleLanguageChange = (language: string) => {
+    setSelectedLanguage(language)
+    if (problem?.starter_code[language]) {
+      setCode(problem.starter_code[language])
+    }
+    setOutput('')
+    setTestResults([])
+  }
+
+  const runCode = async () => {
+    if (!code.trim()) {
+      alert('Please write some code first!')
+      return
+    }
+
+    setIsRunning(true)
+    setOutput('')
+    setTestResults([])
+
+    try {
+      const response = await fetch('http://127.0.0.1:5000/api/exam/execute-code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          code,
+          language: selectedLanguage
+        })
+      })
+
+      const result = await response.json()
+      
+      if (result.success) {
+        setOutput('Code executed successfully!')
+        setTestResults(result.test_results || [])
+      } else {
+        setOutput(`Error: ${result.error}`)
+      }
+    } catch (error) {
+      setOutput(`Execution failed: ${(error as Error).message}`)
+    } finally {
+      setIsRunning(false)
+    }
+  }
+
+  const submitSolution = async () => {
+    if (!code.trim()) {
+      alert('Please write some code before submitting!')
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      const response = await fetch('http://127.0.0.1:5000/api/exam/submit-solution', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          code,
+          language: selectedLanguage
+        })
+      })
+
+      const data = await response.json()
+      
+      if (data.success) {
+        setHasSubmitted(true)
+        setTestResults(data.test_results || [])
+        
+        let alertMessage = `Solution submitted successfully!\nScore: ${data.score}%\nPassed: ${data.passed_tests}/${data.total_tests} tests`
+        
+        if (data.blockchain_verified) {
+          alertMessage += `\n🔗 Blockchain Verified: ${data.wallet_address?.slice(0, 6)}...${data.wallet_address?.slice(-4)}`
+        }
+        
+        alert(alertMessage)
+        fetchLeaderboard(examSession!.exam_code)
+      } else {
+        alert(data.error || 'Failed to submit solution')
+      }
+    } catch (error) {
+      alert('Failed to submit solution. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // ✅ FIXED TIME FORMATTING
+  const formatTime = (seconds: number) => {
+    if (seconds < 0) return "00:00"
+    
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+  }
+
+  const getRankColor = (rank: number) => {
+    switch (rank) {
+      case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white'
+      case 2: return 'bg-gradient-to-r from-gray-300 to-gray-500 text-white'
+      case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white'
+      default: return 'bg-gray-100 text-gray-700'
+    }
+  }
+
+  if (!examSession || !problem) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-2 text-gray-400">Loading exam interface...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      {/* Header with Timer */}
+      <div className="bg-gray-800 border-b border-gray-700 p-4">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <div>
+            <h1 className="text-xl font-bold">{problem.title}</h1>
+            <p className="text-gray-400">Code: {examSession.exam_code}</p>
+          </div>
+          
+          <div className="flex items-center space-x-4">
+            {/* ✅ FIXED TIMER DISPLAY */}
+            {timeRemaining > 0 && (
+              <div className={`flex items-center space-x-2 px-3 py-1 rounded-lg ${
+                timeRemaining <= 300 ? 'bg-red-900' : timeRemaining <= 600 ? 'bg-yellow-900' : 'bg-green-900'
+              }`}>
+                <Clock className={`h-5 w-5 ${
+                  timeRemaining <= 300 ? 'text-red-400' : timeRemaining <= 600 ? 'text-yellow-400' : 'text-green-400'
+                }`} />
+                <span className={`font-mono text-lg ${
+                  timeRemaining <= 300 ? 'text-red-400' : timeRemaining <= 600 ? 'text-yellow-400' : 'text-green-400'
+                }`}>
+                  {formatTime(timeRemaining)}
+                </span>
+              </div>
+            )}
+            
+            {/* Wallet Info Display */}
+            {examSession.blockchain_verified && examSession.wallet_address && (
+              <div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
+                <Wallet className="h-4 w-4 text-green-400" />
+                <span className="text-green-200 text-sm font-mono">
+                  {examSession.wallet_address.slice(0, 6)}...{examSession.wallet_address.slice(-4)}
+                </span>
+                <Shield className="h-4 w-4 text-green-400" />
+              </div>
+            )}
+            
+            {/* Participant Count */}
+            <div className="flex items-center space-x-2">
+              <Users className="h-5 w-5 text-blue-400" />
+              <span>{examStats.total_participants || 0} participants</span>
+              {examStats.blockchain_participants > 0 && (
+                <span className="text-green-400 text-sm">
+                  ({examStats.blockchain_participants} 🔗)
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Problem & Code Editor */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Problem Description */}
+          <div className="bg-gray-800 rounded-lg p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold">{problem.title}</h2>
+              {examSession.blockchain_verified && (
+                <div className="flex items-center space-x-1 text-green-400 text-sm">
+                  <Shield className="h-4 w-4" />
+                  <span>Blockchain Verified</span>
+                </div>
+              )}
+            </div>
+            
+            <div className="prose prose-invert">
+              <p className="mb-4 text-gray-300">{problem.description}</p>
+              
+              <h4 className="text-lg font-semibold mb-2">Examples:</h4>
+              {problem.examples.map((example, index) => (
+                <div key={index} className="bg-gray-900 p-4 rounded mb-3">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                    <div>
+                      <span className="text-blue-400">Input:</span>
+                      <code className="ml-2 text-green-400">"{example.input}"</code>
+                    </div>
+                    <div>
+                      <span className="text-blue-400">Output:</span>
+                      <code className="ml-2 text-green-400">"{example.expected_output}"</code>
+                    </div>
+                  </div>
+                  {example.description && (
+                    <div className="mt-2 text-gray-400 text-sm">{example.description}</div>
+                  )}
+                </div>
+              ))}
+
+              <h4 className="text-lg font-semibold mb-2">Constraints:</h4>
+              <ul className="list-disc list-inside mb-4 text-gray-300">
+                {problem.constraints.map((constraint, index) => (
+                  <li key={index}>{constraint}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          {/* Code Editor */}
+          <div className="bg-gray-800 rounded-lg p-6">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-bold">Your Solution</h3>
+              
+              {/* Language Selector */}
+              <div className="flex items-center space-x-2">
+                <Code className="h-4 w-4 text-gray-400" />
+                <select
+                  value={selectedLanguage}
+                  onChange={(e) => handleLanguageChange(e.target.value)}
+                  disabled={hasSubmitted}
+                  className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500"
+                >
+                  {problem.languages.map(lang => (
+                    <option key={lang} value={lang}>
+                      {languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            
+            <textarea
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              disabled={hasSubmitted}
+              spellCheck={false}
+              placeholder={`Write your ${selectedLanguage} solution here...`}
+            />
+            
+            <div className="flex justify-between items-center mt-4">
+              <div className="text-sm text-gray-400">
+                Function: <code className="text-blue-400">{problem.function_name}</code>
+                {hasSubmitted && (
+                  <span className="ml-4 text-green-400">
+                    ✅ Solution submitted
+                    {examSession.blockchain_verified && (
+                      <span className="ml-2">🔗 Blockchain verified</span>
+                    )}
+                  </span>
+                )}
+              </div>
+              
+              <div className="flex space-x-3">
+                <button
+                  onClick={runCode}
+                  disabled={isRunning || hasSubmitted || !code.trim()}
+                  className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
+                >
+                  <Play className="h-4 w-4" />
+                  <span>{isRunning ? 'Running...' : 'Test Code'}</span>
+                </button>
+                
+                <button
+                  onClick={submitSolution}
+                  disabled={isSubmitting || hasSubmitted || !code.trim()}
+                  className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
+                >
+                  <Send className="h-4 w-4" />
+                  <span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted' : 'Submit Solution'}</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Output & Test Results */}
+            {(output || testResults.length > 0) && (
+              <div className="mt-6 bg-gray-900 p-4 rounded">
+                {output && (
+                  <div className="mb-4">
+                    <h4 className="text-sm font-medium text-gray-400 mb-2">Output:</h4>
+                    <pre className="text-green-400 text-sm whitespace-pre-wrap">{output}</pre>
+                  </div>
+                )}
+                
+                {testResults.length > 0 && (
+                  <div>
+                    <h4 className="text-sm font-medium text-gray-400 mb-2">Test Results:</h4>
+                    <div className="space-y-2">
+                      {testResults.map((result, index) => (
+                        <div
+                          key={index}
+                          className={`p-3 rounded text-sm ${
+                            result.passed ? 'bg-green-900 text-green-200' : 'bg-red-900 text-red-200'
+                          }`}
+                        >
+                          <div className="flex justify-between items-start">
+                            <div>
+                              <span className="font-medium">
+                                Test {index + 1}: {result.passed ? '✅ Passed' : '❌ Failed'}
+                              </span>
+                              {result.input && (
+                                <div className="text-xs mt-1 opacity-75">
+                                  Input: "{result.input}"
+                                </div>
+                              )}
+                            </div>
+                            {!result.passed && result.error && (
+                              <span className="text-xs text-right">{result.error}</span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Leaderboard */}
+        <div className="bg-gray-800 rounded-lg p-6">
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center space-x-2">
+              <Trophy className="h-6 w-6 text-yellow-400" />
+              <h3 className="text-xl font-bold">Live Leaderboard</h3>
+            </div>
+            
+            <button
+              onClick={() => fetchLeaderboard(examSession.exam_code)}
+              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
+              title="Refresh"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </button>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-2 gap-4 mb-6">
+            <div className="bg-gray-900 p-3 rounded">
+              <div className="text-2xl font-bold text-blue-400">{examStats.completed_submissions || 0}</div>
+              <div className="text-xs text-gray-400">Submitted</div>
+            </div>
+            <div className="bg-gray-900 p-3 rounded">
+              <div className="text-2xl font-bold text-green-400">{Math.round(examStats.average_score || 0)}%</div>
+              <div className="text-xs text-gray-400">Avg Score</div>
+            </div>
+            <div className="bg-gray-900 p-3 rounded">
+              <div className="text-2xl font-bold text-purple-400">{examStats.highest_score || 0}%</div>
+              <div className="text-xs text-gray-400">Top Score</div>
+            </div>
+            <div className="bg-gray-900 p-3 rounded">
+              <div className="text-2xl font-bold text-orange-400">{examStats.waiting_submissions || 0}</div>
+              <div className="text-xs text-gray-400">Working</div>
+            </div>
+          </div>
+
+          {/* Blockchain Stats */}
+          {examStats.blockchain_participants > 0 && (
+            <div className="bg-green-900 p-3 rounded mb-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="text-lg font-bold text-green-200">{examStats.blockchain_participants}</div>
+                  <div className="text-xs text-green-300">Blockchain Verified</div>
+                </div>
+                <Shield className="h-6 w-6 text-green-400" />
+              </div>
+            </div>
+          )}
+
+          {/* Leaderboard */}
+          <div className="space-y-2">
+            <h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
+            {leaderboard.length > 0 ? (
+              leaderboard.map((participant) => (
+                <div key={participant.name} className={`p-3 rounded-lg ${getRankColor(participant.rank)}`}>
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center space-x-3">
+                      <span className="font-bold text-lg">#{participant.rank}</span>
+                      <div>
+                        <div className={`font-medium ${participant.name === examSession.student_name ? 'underline' : ''}`}>
+                          {participant.name}
+                          {participant.name === examSession.student_name && ' (You)'}
+                          {participant.blockchain_verified && (
+                            <Shield className="inline h-3 w-3 ml-1 text-green-400" />
+                          )}
+                        </div>
+                        <div className="text-xs opacity-75 flex items-center space-x-2">
+                          {participant.language && (
+                            <span>
+                              {languageIcons[participant.language]} {participant.language}
+                            </span>
+                          )}
+                          {participant.wallet_short && (
+                            <span className="font-mono text-green-300">
+                              {participant.wallet_short}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <span className="font-bold text-lg">{participant.score}%</span>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="text-center text-gray-400 py-4">
+                No submissions yet
+              </div>
+            )}
+          </div>
+
+          {/* Waiting Participants */}
+          {waitingParticipants.length > 0 && (
+            <div className="mt-6">
+              <h4 className="font-semibold text-gray-300 mb-3">⏳ Still Working</h4>
+              <div className="space-y-1">
+                {waitingParticipants.map((participant) => (
+                  <div key={participant.name} className="p-2 bg-gray-700 rounded text-sm flex items-center justify-between">
+                    <span>
+                      {participant.name}
+                      {participant.name === examSession.student_name && ' (You)'}
+                    </span>
+                    {participant.blockchain_verified && (
+                      <Shield className="h-3 w-3 text-green-400" />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/app/coding/exam/[examCode]/security/page.tsx

@@ -0,0 +1,445 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+import { 
+  Shield, 
+  Monitor, 
+  Copy, 
+  AlertTriangle, 
+  CheckCircle, 
+  ArrowRight,
+  Eye,
+  Lock,
+  Maximize
+} from 'lucide-react'
+
+export default function SecurityCheckPage() {
+  const router = useRouter()
+  const params = useParams()
+  const examCode = params.examCode as string
+
+  const [securityChecks, setSecurityChecks] = useState({
+    fullScreen: false,
+    noVirtualBox: false,
+    copyPasteBlocked: false,
+    focusDetection: false
+  })
+  
+  const [isFullScreen, setIsFullScreen] = useState(false)
+  const [securityPassed, setSecurityPassed] = useState(false)
+  const [agreementAccepted, setAgreementAccepted] = useState(false)
+  const [focusLostCount, setFocusLostCount] = useState(0)
+  const [warningMessage, setWarningMessage] = useState('')
+
+  useEffect(() => {
+    // Check for virtual machine detection
+    detectVirtualMachine()
+    
+    // Block copy/paste
+    blockCopyPaste()
+    
+    // Setup fullscreen detection
+    setupFullScreenDetection()
+    
+    // Setup focus detection
+    setupFocusDetection()
+    
+    // Block right-click
+    blockRightClick()
+    
+    // Block developer tools
+    blockDevTools()
+
+    return () => {
+      // Cleanup event listeners
+      document.removeEventListener('contextmenu', handleRightClick)
+      document.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('blur', handleWindowBlur)
+      window.removeEventListener('focus', handleWindowFocus)
+    }
+  }, [])
+
+  // ✅ VIRTUAL MACHINE DETECTION
+  const detectVirtualMachine = () => {
+    try {
+      const canvas = document.createElement('canvas')
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
+      
+      if (gl) {
+        const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
+        if (debugInfo) {
+          const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL).toLowerCase()
+          const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL).toLowerCase()
+          
+          const vmIndicators = [
+            'virtualbox', 'vmware', 'parallels', 'qemu', 
+            'virtual', 'vm', 'hyper-v', 'kvm'
+          ]
+          
+          const isVM = vmIndicators.some(indicator => 
+            renderer.includes(indicator) || vendor.includes(indicator)
+          )
+          
+          if (isVM) {
+            setWarningMessage('❌ Virtual machines are not allowed for this exam')
+            return
+          }
+        }
+      }
+      
+      // Additional VM detection checks
+      if (
+        navigator.hardwareConcurrency < 2 ||
+        screen.width < 1024 ||
+        screen.height < 768 ||
+        navigator.deviceMemory && navigator.deviceMemory < 2
+      ) {
+        setWarningMessage('⚠️ Your system may not meet the minimum requirements')
+      }
+      
+      setSecurityChecks(prev => ({ ...prev, noVirtualBox: true }))
+    } catch (error) {
+      console.error('VM detection failed:', error)
+      setSecurityChecks(prev => ({ ...prev, noVirtualBox: true }))
+    }
+  }
+
+  // ✅ BLOCK COPY/PASTE
+  const blockCopyPaste = () => {
+    const preventCopyPaste = (e: Event) => {
+      e.preventDefault()
+      setWarningMessage('⚠️ Copy/Paste is disabled during the exam')
+      setTimeout(() => setWarningMessage(''), 3000)
+    }
+
+    document.addEventListener('copy', preventCopyPaste)
+    document.addEventListener('paste', preventCopyPaste)
+    document.addEventListener('cut', preventCopyPaste)
+    document.addEventListener('drag', preventCopyPaste)
+    document.addEventListener('drop', preventCopyPaste)
+    document.addEventListener('selectstart', preventCopyPaste)
+    
+    // Disable text selection
+    document.body.style.userSelect = 'none'
+    document.body.style.webkitUserSelect = 'none'
+    
+    setSecurityChecks(prev => ({ ...prev, copyPasteBlocked: true }))
+  }
+
+  // ✅ FULLSCREEN DETECTION
+  const setupFullScreenDetection = () => {
+    const checkFullScreen = () => {
+      const isFS = !!(
+        document.fullscreenElement ||
+        (document as any).webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement
+      )
+      
+      setIsFullScreen(isFS)
+      setSecurityChecks(prev => ({ ...prev, fullScreen: isFS }))
+      
+      if (!isFS && securityPassed) {
+        setWarningMessage('⚠️ You must stay in fullscreen mode during the exam')
+        setTimeout(() => {
+          router.push('/coding')
+        }, 3000)
+      }
+    }
+
+    document.addEventListener('fullscreenchange', checkFullScreen)
+    document.addEventListener('webkitfullscreenchange', checkFullScreen)
+    document.addEventListener('mozfullscreenchange', checkFullScreen)
+    document.addEventListener('MSFullscreenChange', checkFullScreen)
+  }
+
+  // ✅ FOCUS DETECTION
+  const setupFocusDetection = () => {
+    let focusLost = false
+
+    const handleWindowBlur = () => {
+      if (securityPassed) {
+        focusLost = true
+        setFocusLostCount(prev => prev + 1)
+        setWarningMessage('⚠️ You switched tabs/windows. This is being monitored.')
+        
+        if (focusLostCount >= 2) {
+          alert('Multiple focus violations detected. Exam will be terminated.')
+          router.push('/coding')
+        }
+      }
+    }
+
+    const handleWindowFocus = () => {
+      if (focusLost) {
+        focusLost = false
+        setTimeout(() => setWarningMessage(''), 3000)
+      }
+    }
+
+    window.addEventListener('blur', handleWindowBlur)
+    window.addEventListener('focus', handleWindowFocus)
+    
+    setSecurityChecks(prev => ({ ...prev, focusDetection: true }))
+  }
+
+  // ✅ BLOCK RIGHT-CLICK
+  const blockRightClick = () => {
+    const handleRightClick = (e: MouseEvent) => {
+      e.preventDefault()
+      setWarningMessage('⚠️ Right-click is disabled during the exam')
+      setTimeout(() => setWarningMessage(''), 2000)
+    }
+
+    document.addEventListener('contextmenu', handleRightClick)
+  }
+
+  // ✅ BLOCK DEVELOPER TOOLS
+  const blockDevTools = () => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Block F12, Ctrl+Shift+I, Ctrl+Shift+C, Ctrl+U
+      if (
+        e.key === 'F12' ||
+        (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'C')) ||
+        (e.ctrlKey && e.key === 'U') ||
+        (e.ctrlKey && e.shiftKey && e.key === 'J')
+      ) {
+        e.preventDefault()
+        setWarningMessage('⚠️ Developer tools are not allowed during the exam')
+        setTimeout(() => setWarningMessage(''), 3000)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    // Detect if dev tools are open
+    let devtools = { open: false, orientation: null }
+    const threshold = 160
+
+    setInterval(() => {
+      if (
+        window.outerHeight - window.innerHeight > threshold ||
+        window.outerWidth - window.innerWidth > threshold
+      ) {
+        if (!devtools.open) {
+          devtools.open = true
+          setWarningMessage('⚠️ Developer tools detected. Please close them.')
+        }
+      } else {
+        devtools.open = false
+      }
+    }, 500)
+  }
+
+  // ✅ ENTER FULLSCREEN
+  const enterFullScreen = async () => {
+    try {
+      const element = document.documentElement
+      
+      if (element.requestFullscreen) {
+        await element.requestFullscreen()
+      } else if ((element as any).webkitRequestFullscreen) {
+        await (element as any).webkitRequestFullscreen()
+      } else if ((element as any).mozRequestFullScreen) {
+        await (element as any).mozRequestFullScreen()
+      } else if ((element as any).msRequestFullscreen) {
+        await (element as any).msRequestFullscreen()
+      }
+    } catch (error) {
+      setWarningMessage('❌ Failed to enter fullscreen. Please try again.')
+    }
+  }
+
+  // ✅ CHECK ALL SECURITY MEASURES
+  useEffect(() => {
+    const allChecksPassed = Object.values(securityChecks).every(check => check === true)
+    setSecurityPassed(allChecksPassed && agreementAccepted)
+  }, [securityChecks, agreementAccepted])
+
+  // ✅ PROCEED TO EXAM
+  const proceedToExam = () => {
+    if (securityPassed && isFullScreen) {
+      // Store security session
+      sessionStorage.setItem('exam_security_passed', 'true')
+      sessionStorage.setItem('exam_start_time', new Date().toISOString())
+      
+      router.push(`/coding/exam/${examCode}`)
+    } else {
+      setWarningMessage('❌ Please complete all security requirements')
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      {/* Header */}
+      <div className="bg-gray-800 border-b border-gray-700 p-4">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-2xl font-bold flex items-center space-x-2">
+            <Shield className="h-6 w-6 text-red-400" />
+            <span>Exam Security Check</span>
+          </h1>
+          <p className="text-gray-400">Exam Code: {examCode}</p>
+        </div>
+      </div>
+
+      {/* Warning Message */}
+      {warningMessage && (
+        <div className="bg-red-900 border-b border-red-600 p-3 text-center">
+          <p className="text-red-300">{warningMessage}</p>
+        </div>
+      )}
+
+      <div className="max-w-4xl mx-auto p-8">
+        {/* Security Requirements */}
+        <div className="bg-gray-800 rounded-lg p-6 mb-8">
+          <h2 className="text-xl font-bold mb-6">Security Requirements</h2>
+          
+          <div className="space-y-4">
+            {/* Fullscreen Check */}
+            <div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
+              <div className="flex items-center space-x-3">
+                <Maximize className="h-5 w-5 text-blue-400" />
+                <div>
+                  <h3 className="font-medium">Fullscreen Mode</h3>
+                  <p className="text-sm text-gray-400">Required for exam security</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                {securityChecks.fullScreen ? (
+                  <CheckCircle className="h-5 w-5 text-green-400" />
+                ) : (
+                  <button
+                    onClick={enterFullScreen}
+                    className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm"
+                  >
+                    Enter Fullscreen
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* VM Detection */}
+            <div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
+              <div className="flex items-center space-x-3">
+                <Monitor className="h-5 w-5 text-purple-400" />
+                <div>
+                  <h3 className="font-medium">System Verification</h3>
+                  <p className="text-sm text-gray-400">Checking for virtual machines</p>
+                </div>
+              </div>
+              {securityChecks.noVirtualBox ? (
+                <CheckCircle className="h-5 w-5 text-green-400" />
+              ) : (
+                <AlertTriangle className="h-5 w-5 text-yellow-400" />
+              )}
+            </div>
+
+            {/* Copy/Paste Block */}
+            <div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
+              <div className="flex items-center space-x-3">
+                <Copy className="h-5 w-5 text-red-400" />
+                <div>
+                  <h3 className="font-medium">Copy/Paste Protection</h3>
+                  <p className="text-sm text-gray-400">Disabled for exam integrity</p>
+                </div>
+              </div>
+              {securityChecks.copyPasteBlocked ? (
+                <CheckCircle className="h-5 w-5 text-green-400" />
+              ) : (
+                <AlertTriangle className="h-5 w-5 text-yellow-400" />
+              )}
+            </div>
+
+            {/* Focus Detection */}
+            <div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
+              <div className="flex items-center space-x-3">
+                <Eye className="h-5 w-5 text-green-400" />
+                <div>
+                  <h3 className="font-medium">Focus Monitoring</h3>
+                  <p className="text-sm text-gray-400">Tab switching will be tracked</p>
+                </div>
+              </div>
+              {securityChecks.focusDetection ? (
+                <CheckCircle className="h-5 w-5 text-green-400" />
+              ) : (
+                <AlertTriangle className="h-5 w-5 text-yellow-400" />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Agreement */}
+        <div className="bg-gray-800 rounded-lg p-6 mb-8">
+          <h2 className="text-xl font-bold mb-4">Exam Agreement</h2>
+          
+          <div className="bg-gray-900 p-4 rounded mb-4 max-h-40 overflow-y-auto">
+            <div className="text-sm text-gray-300 space-y-2">
+              <p>By proceeding with this exam, I agree to:</p>
+              <ul className="list-disc list-inside space-y-1 ml-4">
+                <li>Stay in fullscreen mode throughout the exam</li>
+                <li>Not switch tabs, windows, or applications</li>
+                <li>Not use copy/paste or external resources</li>
+                <li>Not use virtual machines or emulators</li>
+                <li>Not open developer tools or inspect elements</li>
+                <li>Accept monitoring of my focus and activity</li>
+                <li>Understand that violations may result in exam termination</li>
+              </ul>
+              <p className="text-yellow-400 font-medium mt-4">
+                Violations: {focusLostCount}/2 (3rd violation = automatic termination)
+              </p>
+            </div>
+          </div>
+          
+          <label className="flex items-center space-x-3">
+            <input
+              type="checkbox"
+              checked={agreementAccepted}
+              onChange={(e) => setAgreementAccepted(e.target.checked)}
+              className="rounded"
+            />
+            <span>I have read and agree to all terms above</span>
+          </label>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex space-x-4">
+          <button
+            onClick={proceedToExam}
+            disabled={!securityPassed || !isFullScreen}
+            className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed px-8 py-3 rounded-lg flex items-center space-x-2 font-medium"
+          >
+            <Lock className="h-5 w-5" />
+            <span>Start Secure Exam</span>
+            <ArrowRight className="h-5 w-5" />
+          </button>
+          
+          <button
+            onClick={() => router.push('/coding')}
+            className="bg-gray-600 hover:bg-gray-700 px-8 py-3 rounded-lg"
+          >
+            Cancel
+          </button>
+        </div>
+
+        {/* Status */}
+        <div className="mt-6 p-4 bg-gray-800 rounded-lg">
+          <div className="flex items-center space-x-2">
+            {securityPassed ? (
+              <>
+                <CheckCircle className="h-5 w-5 text-green-400" />
+                <span className="text-green-400 font-medium">All security checks passed</span>
+              </>
+            ) : (
+              <>
+                <AlertTriangle className="h-5 w-5 text-yellow-400" />
+                <span className="text-yellow-400 font-medium">
+                  Complete all requirements to proceed
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/app/coding/exam/page.tsx

@@ -1,545 +1,110 @@
 'use client'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield } from 'lucide-react'
+import { Code, Users, Clock, ArrowRight } from 'lucide-react'
 
-interface Participant {
-  name: string
-  score: number
-  rank: number
-  completed: boolean
-  language?: string
-  submission_time?: string
-  wallet_address?: string
-  wallet_short?: string
-  blockchain_verified?: boolean
-}
-
-interface Problem {
-  title: string
-  description: string
-  function_name: string
-  languages: string[]
-  examples: Array<{input: string, expected_output: string, description: string}>
-  constraints: string[]
-  starter_code: {[key: string]: string}
-}
-
-interface ExamSession {
-  exam_code: string
-  student_name: string
-  wallet_address?: string
-  blockchain_verified?: boolean
-  exam_info: any
-}
-
-export default function EnhancedExamInterface() {
-  const [examSession, setExamSession] = useState<ExamSession | null>(null)
-  const [problem, setProblem] = useState<Problem | null>(null)
-  const [selectedLanguage, setSelectedLanguage] = useState('python')
-  const [code, setCode] = useState('')
-  const [output, setOutput] = useState('')
-  const [testResults, setTestResults] = useState<any[]>([])
-  const [leaderboard, setLeaderboard] = useState<Participant[]>([])
-  const [waitingParticipants, setWaitingParticipants] = useState<Participant[]>([])
-  const [timeRemaining, setTimeRemaining] = useState(0)
-  const [isRunning, setIsRunning] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [hasSubmitted, setHasSubmitted] = useState(false)
-  const [examStats, setExamStats] = useState<any>({})
+export default function ExamLandingPage() {
   const router = useRouter()
+  const [examCode, setExamCode] = useState('')
 
-  const languageIcons: {[key: string]: string} = {
-    python: '🐍',
-    java: '☕',
-    c: '⚡',
-    bash: '💻'
-  }
-
-  useEffect(() => {
-    const sessionData = localStorage.getItem('exam_session')
-    if (!sessionData) {
-      router.push('/coding/join')
-      return
-    }
-
-    const session = JSON.parse(sessionData)
-    setExamSession(session)
-    
-    // Fetch problem details
-    fetchProblem(session.exam_code)
-    
-    // Start polling for updates
-    const interval = setInterval(() => {
-      fetchLeaderboard(session.exam_code)
-    }, 3000)
-
-    return () => clearInterval(interval)
-  }, [router])
-
-  const fetchProblem = async (examCode: string) => {
-    try {
-      const response = await fetch(`http://127.0.0.1:5000/api/exam/get-problem/${examCode}`)
-      const data = await response.json()
-      
-      if (data.success) {
-        setProblem(data.problem)
-        const defaultLang = data.problem.languages[0] || 'python'
-        setSelectedLanguage(defaultLang)
-        setCode(data.problem.starter_code[defaultLang] || '')
-      }
-    } catch (error) {
-      console.error('Failed to fetch problem:', error)
-    }
-  }
-
-  const fetchLeaderboard = async (examCode: string) => {
-    try {
-      const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
-      const data = await response.json()
-      
-      if (data.success) {
-        setLeaderboard(data.leaderboard || [])
-        setWaitingParticipants(data.waiting_participants || [])
-        setExamStats(data.stats || {})
-        
-        if (data.exam_info.status === 'active' && data.exam_info.end_time) {
-          const endTime = new Date(data.exam_info.end_time)
-          const now = new Date()
-          const remaining = Math.max(0, Math.floor((endTime.getTime() - now.getTime()) / 1000))
-          setTimeRemaining(remaining)
-        }
-      }
-    } catch (error) {
-      console.error('Failed to fetch leaderboard:', error)
-    }
-  }
-
-  const handleLanguageChange = (language: string) => {
-    setSelectedLanguage(language)
-    if (problem?.starter_code[language]) {
-      setCode(problem.starter_code[language])
-    }
-    setOutput('')
-    setTestResults([])
-  }
-
-  const runCode = async () => {
-    if (!code.trim()) {
-      alert('Please write some code first!')
-      return
-    }
-
-    setIsRunning(true)
-    setOutput('')
-    setTestResults([])
-
-    try {
-      const response = await fetch('http://127.0.0.1:5000/api/exam/execute-code', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          code,
-          language: selectedLanguage
-        })
-      })
-
-      const result = await response.json()
-      
-      if (result.success) {
-        setOutput('Code executed successfully!')
-        setTestResults(result.test_results || [])
+  const joinExam = () => {
+    if (examCode.trim()) {
+      router.push(`/coding/exam/${examCode.trim().toUpperCase()}`)
     } else {
-        setOutput(`Error: ${result.error}`)
-      }
-    } catch (error) {
-      setOutput(`Execution failed: ${(error as Error).message}`)
-    } finally {
-      setIsRunning(false)
+      alert('Please enter a valid exam code')
     }
   }
 
-  const submitSolution = async () => {
-    if (!code.trim()) {
-      alert('Please write some code before submitting!')
-      return
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      joinExam()
     }
-
-    setIsSubmitting(true)
-
-    try {
-      const response = await fetch('http://127.0.0.1:5000/api/exam/submit-solution', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          code,
-          language: selectedLanguage
-        })
-      })
-
-      const data = await response.json()
-      
-      if (data.success) {
-        setHasSubmitted(true)
-        setTestResults(data.test_results || [])
-        
-        let alertMessage = `Solution submitted successfully!\nScore: ${data.score}%\nPassed: ${data.passed_tests}/${data.total_tests} tests`
-        
-        if (data.blockchain_verified) {
-          alertMessage += `\n🔗 Blockchain Verified: ${data.wallet_address?.slice(0, 6)}...${data.wallet_address?.slice(-4)}`
-        }
-        
-        alert(alertMessage)
-        fetchLeaderboard(examSession!.exam_code)
-      } else {
-        alert(data.error || 'Failed to submit solution')
-      }
-    } catch (error) {
-      alert('Failed to submit solution. Please try again.')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
-  }
-
-  const getRankColor = (rank: number) => {
-    switch (rank) {
-      case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white'
-      case 2: return 'bg-gradient-to-r from-gray-300 to-gray-500 text-white'
-      case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white'
-      default: return 'bg-gray-100 text-gray-700'
-    }
-  }
-
-  if (!examSession || !problem) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-2 text-gray-400">Loading exam interface...</p>
-        </div>
-      </div>
-    )
   }
 
   return (
     <div className="min-h-screen bg-gray-900 text-white">
-      {/* Header with Timer */}
+      {/* Header */}
       <div className="bg-gray-800 border-b border-gray-700 p-4">
-        <div className="max-w-7xl mx-auto flex justify-between items-center">
-          <div>
-            <h1 className="text-xl font-bold">{problem.title}</h1>
-            <p className="text-gray-400">Code: {examSession.exam_code}</p>
-          </div>
-          
-          <div className="flex items-center space-x-4">
-            {/* Timer */}
-            {timeRemaining > 0 && (
-              <div className="flex items-center space-x-2 bg-red-900 px-3 py-1 rounded-lg">
-                <Clock className="h-5 w-5 text-red-400" />
-                <span className="font-mono text-lg text-red-400">{formatTime(timeRemaining)}</span>
-              </div>
-            )}
-            
-            {/* Wallet Info Display */}
-            {examSession.blockchain_verified && examSession.wallet_address && (
-              <div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
-                <Wallet className="h-4 w-4 text-green-400" />
-                <span className="text-green-200 text-sm font-mono">
-                  {examSession.wallet_address.slice(0, 6)}...{examSession.wallet_address.slice(-4)}
-                </span>
-                <Shield className="h-4 w-4 text-green-400" />
-              </div>
-            )}
-            
-            {/* Participant Count */}
-            <div className="flex items-center space-x-2">
-              <Users className="h-5 w-5 text-blue-400" />
-              <span>{examStats.total_participants || 0} participants</span>
-              {examStats.blockchain_participants > 0 && (
-                <span className="text-green-400 text-sm">
-                  ({examStats.blockchain_participants} 🔗)
-                </span>
-              )}
-            </div>
-          </div>
+        <div className="max-w-6xl mx-auto">
+          <h1 className="text-2xl font-bold">OpenLearnX Coding Exams</h1>
+          <p className="text-gray-400">Join a coding exam with your exam code</p>
         </div>
       </div>
 
-      <div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Problem & Code Editor */}
-        <div className="lg:col-span-2 space-y-6">
-          {/* Problem Description */}
-          <div className="bg-gray-800 rounded-lg p-6">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xl font-bold">{problem.title}</h2>
-              {examSession.blockchain_verified && (
-                <div className="flex items-center space-x-1 text-green-400 text-sm">
-                  <Shield className="h-4 w-4" />
-                  <span>Blockchain Verified</span>
-                </div>
-              )}
+      {/* Main Content */}
+      <div className="max-w-4xl mx-auto p-8">
+        {/* Join Exam Section */}
+        <div className="bg-gray-800 rounded-lg p-8 mb-8">
+          <div className="text-center mb-8">
+            <Code className="h-16 w-16 text-blue-400 mx-auto mb-4" />
+            <h2 className="text-3xl font-bold mb-2">Join Coding Exam</h2>
+            <p className="text-gray-400">Enter your 6-character exam code to start</p>
           </div>
 
-            <div className="prose prose-invert">
-              <p className="mb-4 text-gray-300">{problem.description}</p>
-              
-              <h4 className="text-lg font-semibold mb-2">Examples:</h4>
-              {problem.examples.map((example, index) => (
-                <div key={index} className="bg-gray-900 p-4 rounded mb-3">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <span className="text-blue-400">Input:</span>
-                      <code className="ml-2 text-green-400">"{example.input}"</code>
-                    </div>
-                    <div>
-                      <span className="text-blue-400">Output:</span>
-                      <code className="ml-2 text-green-400">"{example.expected_output}"</code>
-                    </div>
-                  </div>
-                  {example.description && (
-                    <div className="mt-2 text-gray-400 text-sm">{example.description}</div>
-                  )}
-                </div>
-              ))}
-
-              <h4 className="text-lg font-semibold mb-2">Constraints:</h4>
-              <ul className="list-disc list-inside mb-4 text-gray-300">
-                {problem.constraints.map((constraint, index) => (
-                  <li key={index}>{constraint}</li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          {/* Code Editor */}
-          <div className="bg-gray-800 rounded-lg p-6">
-            <div className="flex justify-between items-center mb-4">
-              <h3 className="text-lg font-bold">Your Solution</h3>
-              
-              {/* Language Selector */}
-              <div className="flex items-center space-x-2">
-                <Code className="h-4 w-4 text-gray-400" />
-                <select
-                  value={selectedLanguage}
-                  onChange={(e) => handleLanguageChange(e.target.value)}
-                  disabled={hasSubmitted}
-                  className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500"
-                >
-                  {problem.languages.map(lang => (
-                    <option key={lang} value={lang}>
-                      {languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            
-            <textarea
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              disabled={hasSubmitted}
-              spellCheck={false}
-              placeholder={`Write your ${selectedLanguage} solution here...`}
+          <div className="max-w-md mx-auto">
+            <div className="flex space-x-4">
+              <input
+                type="text"
+                value={examCode}
+                onChange={(e) => setExamCode(e.target.value.toUpperCase())}
+                onKeyPress={handleKeyPress}
+                placeholder="Enter exam code (e.g. ABC123)"
+                className="flex-1 p-4 bg-gray-700 border border-gray-600 rounded-lg text-center text-xl font-mono tracking-widest"
+                maxLength={6}
               />
-            
-            <div className="flex justify-between items-center mt-4">
-              <div className="text-sm text-gray-400">
-                Function: <code className="text-blue-400">{problem.function_name}</code>
-                {hasSubmitted && (
-                  <span className="ml-4 text-green-400">
-                    ✅ Solution submitted
-                    {examSession.blockchain_verified && (
-                      <span className="ml-2">🔗 Blockchain verified</span>
-                    )}
-                  </span>
-                )}
-              </div>
-              
-              <div className="flex space-x-3">
               <button
-                  onClick={runCode}
-                  disabled={isRunning || hasSubmitted || !code.trim()}
-                  className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
+                onClick={joinExam}
+                className="bg-blue-600 hover:bg-blue-700 px-6 py-4 rounded-lg flex items-center space-x-2"
               >
-                  <Play className="h-4 w-4" />
-                  <span>{isRunning ? 'Running...' : 'Test Code'}</span>
-                </button>
-                
-                <button
-                  onClick={submitSolution}
-                  disabled={isSubmitting || hasSubmitted || !code.trim()}
-                  className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
-                >
-                  <Send className="h-4 w-4" />
-                  <span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted' : 'Submit Solution'}</span>
+                <span>Join</span>
+                <ArrowRight className="h-5 w-5" />
               </button>
             </div>
           </div>
+        </div>
 
-            {/* Output & Test Results */}
-            {(output || testResults.length > 0) && (
-              <div className="mt-6 bg-gray-900 p-4 rounded">
-                {output && (
-                  <div className="mb-4">
-                    <h4 className="text-sm font-medium text-gray-400 mb-2">Output:</h4>
-                    <pre className="text-green-400 text-sm whitespace-pre-wrap">{output}</pre>
+        {/* Info Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <Users className="h-12 w-12 text-green-400 mx-auto mb-4" />
+            <h3 className="text-xl font-bold mb-2">Multi-User</h3>
+            <p className="text-gray-400">Compete with other students in real-time coding challenges</p>
           </div>
-                )}
 
-                {testResults.length > 0 && (
-                  <div>
-                    <h4 className="text-sm font-medium text-gray-400 mb-2">Test Results:</h4>
-                    <div className="space-y-2">
-                      {testResults.map((result, index) => (
-                        <div
-                          key={index}
-                          className={`p-3 rounded text-sm ${
-                            result.passed ? 'bg-green-900 text-green-200' : 'bg-red-900 text-red-200'
-                          }`}
-                        >
-                          <div className="flex justify-between items-start">
-                            <div>
-                              <span className="font-medium">
-                                Test {index + 1}: {result.passed ? '✅ Passed' : '❌ Failed'}
-                              </span>
-                              {result.input && (
-                                <div className="text-xs mt-1 opacity-75">
-                                  Input: "{result.input}"
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <Clock className="h-12 w-12 text-yellow-400 mx-auto mb-4" />
+            <h3 className="text-xl font-bold mb-2">Timed Exams</h3>
+            <p className="text-gray-400">Complete coding problems within the allocated time limit</p>
           </div>
-                              )}
-                            </div>
-                            {!result.passed && result.error && (
-                              <span className="text-xs text-right">{result.error}</span>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
+
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <Code className="h-12 w-12 text-purple-400 mx-auto mb-4" />
+            <h3 className="text-xl font-bold mb-2">Multi-Language</h3>
+            <p className="text-gray-400">Code in Python, Java, JavaScript, C++, and more</p>
           </div>
         </div>
 
-        {/* Leaderboard */}
+        {/* Instructions */}
         <div className="bg-gray-800 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-6">
-            <div className="flex items-center space-x-2">
-              <Trophy className="h-6 w-6 text-yellow-400" />
-              <h3 className="text-xl font-bold">Live Leaderboard</h3>
+          <h3 className="text-xl font-bold mb-4">How to Join an Exam</h3>
+          <div className="space-y-3 text-gray-300">
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">1</span>
+              <p>Get your 6-character exam code from your instructor</p>
             </div>
-            
-            <button
-              onClick={() => fetchLeaderboard(examSession.exam_code)}
-              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
-              title="Refresh"
-            >
-              <RefreshCw className="h-4 w-4" />
-            </button>
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">2</span>
+              <p>Enter the exam code in the field above and click "Join"</p>
             </div>
-
-          {/* Stats */}
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-blue-400">{examStats.completed_submissions || 0}</div>
-              <div className="text-xs text-gray-400">Submitted</div>
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">3</span>
+              <p>Wait for the instructor to start the exam</p>
             </div>
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-green-400">{Math.round(examStats.average_score || 0)}%</div>
-              <div className="text-xs text-gray-400">Avg Score</div>
-            </div>
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-purple-400">{examStats.highest_score || 0}%</div>
-              <div className="text-xs text-gray-400">Top Score</div>
-            </div>
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-orange-400">{examStats.waiting_submissions || 0}</div>
-              <div className="text-xs text-gray-400">Working</div>
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">4</span>
+              <p>Code your solution and submit before time runs out</p>
             </div>
           </div>
-
-          {/* Blockchain Stats */}
-          {examStats.blockchain_participants > 0 && (
-            <div className="bg-green-900 p-3 rounded mb-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="text-lg font-bold text-green-200">{examStats.blockchain_participants}</div>
-                  <div className="text-xs text-green-300">Blockchain Verified</div>
-                </div>
-                <Shield className="h-6 w-6 text-green-400" />
-              </div>
-            </div>
-          )}
-
-          {/* Leaderboard */}
-          <div className="space-y-2">
-            <h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
-            {leaderboard.length > 0 ? (
-              leaderboard.map((participant) => (
-                <div key={participant.name} className={`p-3 rounded-lg ${getRankColor(participant.rank)}`}>
-                  <div className="flex justify-between items-center">
-                    <div className="flex items-center space-x-3">
-                      <span className="font-bold text-lg">#{participant.rank}</span>
-                      <div>
-                        <div className={`font-medium ${participant.name === examSession.student_name ? 'underline' : ''}`}>
-                          {participant.name}
-                          {participant.name === examSession.student_name && ' (You)'}
-                          {participant.blockchain_verified && (
-                            <Shield className="inline h-3 w-3 ml-1 text-green-400" />
-                          )}
-                        </div>
-                        <div className="text-xs opacity-75 flex items-center space-x-2">
-                          {participant.language && (
-                            <span>
-                              {languageIcons[participant.language]} {participant.language}
-                            </span>
-                          )}
-                          {participant.wallet_short && (
-                            <span className="font-mono text-green-300">
-                              {participant.wallet_short}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                    <span className="font-bold text-lg">{participant.score}%</span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-center text-gray-400 py-4">
-                No submissions yet
-              </div>
-            )}
-          </div>
-
-          {/* Waiting Participants */}
-          {waitingParticipants.length > 0 && (
-            <div className="mt-6">
-              <h4 className="font-semibold text-gray-300 mb-3">⏳ Still Working</h4>
-              <div className="space-y-1">
-                {waitingParticipants.map((participant) => (
-                  <div key={participant.name} className="p-2 bg-gray-700 rounded text-sm flex items-center justify-between">
-                    <span>
-                      {participant.name}
-                      {participant.name === examSession.student_name && ' (You)'}
-                    </span>
-                    {participant.blockchain_verified && (
-                      <Shield className="h-3 w-3 text-green-400" />
-                    )}
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

frontend/app/coding/host/[examCode]/page.tsx

@@ -6,21 +6,44 @@ import {
   Trophy, 
   Clock, 
   Play, 
-  Pause, 
   Square, 
   UserMinus, 
   RefreshCw,
   Settings,
-  Monitor,
-  AlertCircle
+  Upload,
+  Plus,
+  Code,
+  TestTube,
+  AlertCircle,
+  Check,
+  Timer
 } from 'lucide-react'
 
-interface Participant {
-  name: string
-  score: number
-  completed: boolean
-  submitted_at?: string
-  joined_at: string
+interface Question {
+  id: string
+  title: string
+  description: string
+  difficulty: 'easy' | 'medium' | 'hard'
+  function_name: string
+  starter_code: Record<string, string>
+  test_cases: TestCase[]
+  examples: Example[]
+  constraints: string[]
+  time_limit?: number
+  memory_limit?: string
+}
+
+interface TestCase {
+  input: string
+  expected_output: string
+  description: string
+  is_public: boolean
+}
+
+interface Example {
+  input: string
+  expected_output: string
+  description: string
 }
 
 interface ExamInfo {
@@ -30,11 +53,20 @@ interface ExamInfo {
   participants_count: number
   max_participants: number
   problem_title: string
+  problem_description?: string
   languages: string[]
   created_at: string
   host_name: string
 }
 
+interface Participant {
+  name: string
+  score: number
+  completed: boolean
+  joined_at: string
+  submitted_at?: string
+}
+
 export default function HostPanel() {
   const params = useParams()
   const router = useRouter()
@@ -42,42 +74,61 @@ export default function HostPanel() {
 
   const [examInfo, setExamInfo] = useState<ExamInfo | null>(null)
   const [participants, setParticipants] = useState<Participant[]>([])
-  const [leaderboard, setLeaderboard] = useState<Participant[]>([])
-  const [timeRemaining, setTimeRemaining] = useState(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
   
+  // ✅ NEW STATE - Tab management and question upload
+  const [activeTab, setActiveTab] = useState<'overview'|'participants'|'questions'>('overview')
+  const [showUploader, setShowUploader] = useState(false)
+  const [customDuration, setCustomDuration] = useState(30)
+  const [showDurationEdit, setShowDurationEdit] = useState(false)
+
+  // ✅ Empty "question draft"
+  const blankQuestion: Question = {
+    id: '',
+    title: '',
+    description: '',
+    difficulty: 'medium',
+    function_name: 'solve',
+    starter_code: { 
+      python: 'def solve():\n    # Write your solution here\n    pass',
+      java: 'public class Solution {\n    public void solve() {\n        // Write your solution here\n    }\n}',
+      javascript: 'function solve() {\n    // Write your solution here\n}'
+    },
+    test_cases: [{ input:'', expected_output:'', description:'Test case 1', is_public:true }],
+    examples: [{ input:'', expected_output:'', description:'Example 1' }],
+    constraints: [''],
+    time_limit: 1000,
+    memory_limit: '128MB'
+  }
+  const [draft, setDraft] = useState<Question>(blankQuestion)
+
   useEffect(() => {
     if (examCode) {
       fetchExamInfo()
       fetchParticipants()
-      fetchLeaderboard()
-      
-      // Auto-refresh every 5 seconds
-      const interval = setInterval(() => {
-        fetchParticipants()
-        fetchLeaderboard()
-      }, 5000)
-
-      return () => clearInterval(interval)
     }
   }, [examCode])
 
   const fetchExamInfo = async () => {
     try {
+      console.log(`🔍 Fetching exam info for: ${examCode}`)
+      
       const response = await fetch(`http://127.0.0.1:5000/api/exam/info/${examCode}`)
       const data = await response.json()
       
+      console.log('📦 Exam info response:', data)
+      
       if (data.success) {
         setExamInfo(data.exam_info)
-        if (data.exam_info.status === 'active') {
-          startTimer(data.exam_info.duration_minutes * 60)
-        }
+        setCustomDuration(data.exam_info.duration_minutes)
+        setError('')
       } else {
-        setError('Failed to load exam information')
+        setError(data.error || 'Failed to load exam information')
       }
     } catch (error) {
-      setError('Network error')
+      console.error('❌ Error fetching exam info:', error)
+      setError('Network error: Could not connect to backend')
     } finally {
       setLoading(false)
     }
@@ -96,19 +147,92 @@ export default function HostPanel() {
     }
   }
 
-  const fetchLeaderboard = async () => {
+  // ✅ UPLOAD HANDLER
+  const uploadQuestion = async () => {
+    if (!draft.title.trim() || !draft.description.trim()) {
+      alert('Title & description are required')
+      return
+    }
+    
     try {
-      const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
-      const data = await response.json()
+      const res = await fetch('http://127.0.0.1:5000/api/exam/upload-question', {
+        method: 'POST',
+        headers: { 'Content-Type':'application/json' },
+        body: JSON.stringify({ exam_code: examCode, question: draft })
+      })
+      const data = await res.json()
 
       if (data.success) {
-        setLeaderboard(data.leaderboard)
+        alert('✅ Question saved')
+        setShowUploader(false)
+        setDraft(blankQuestion)
+        fetchExamInfo() // refresh current question/name
+      } else {
+        alert(`❌ ${data.error}`)
       }
     } catch (error) {
-      console.error('Failed to fetch leaderboard')
+      console.error('Upload error:', error)
+      alert('❌ Network error occurred')
     }
   }
 
+  // ✅ UPDATE DURATION
+  const updateDuration = async () => {
+    try {
+      const res = await fetch('http://127.0.0.1:5000/api/exam/update-duration', {
+        method: 'POST',
+        headers: { 'Content-Type':'application/json' },
+        body: JSON.stringify({ exam_code: examCode, duration_minutes: customDuration })
+      })
+      const data = await res.json()
+
+      if (data.success) {
+        alert(`✅ Duration updated to ${customDuration} minutes`)
+        setShowDurationEdit(false)
+        fetchExamInfo()
+      } else {
+        alert(`❌ ${data.error}`)
+      }
+    } catch (error) {
+      alert('❌ Network error occurred')
+    }
+  }
+
+  // ✅ ADD TEST CASE
+  const addTestCase = () => {
+    setDraft(prev => ({
+      ...prev,
+      test_cases: [
+        ...prev.test_cases,
+        {
+          input: '',
+          expected_output: '',
+          description: `Test case ${prev.test_cases.length + 1}`,
+          is_public: false
+        }
+      ]
+    }))
+  }
+
+  // ✅ UPDATE TEST CASE
+  const updateTestCase = (index: number, field: string, value: string | boolean) => {
+    setDraft(prev => ({
+      ...prev,
+      test_cases: prev.test_cases.map((tc, i) => 
+        i === index ? { ...tc, [field]: value } : tc
+      )
+    }))
+  }
+
+  // ✅ REMOVE TEST CASE
+  const removeTestCase = (index: number) => {
+    setDraft(prev => ({
+      ...prev,
+      test_cases: prev.test_cases.filter((_, i) => i !== index)
+    }))
+  }
+
+  // ✅ START EXAM
   const startExam = async () => {
     try {
       const response = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
@@ -119,9 +243,8 @@ export default function HostPanel() {
       
       const data = await response.json()
       if (data.success) {
-        setExamInfo(prev => prev ? { ...prev, status: 'active' } : null)
-        startTimer(examInfo?.duration_minutes ? examInfo.duration_minutes * 60 : 1800)
         alert('✅ Exam started! Participants can now begin coding.')
+        fetchExamInfo()
       } else {
         alert(`❌ Failed to start exam: ${data.error}`)
       }
@@ -130,7 +253,10 @@ export default function HostPanel() {
     }
   }
 
+  // ✅ STOP EXAM
   const stopExam = async () => {
+    if (!confirm('Are you sure you want to stop the exam?')) return
+    
     try {
       const response = await fetch('http://127.0.0.1:5000/api/exam/stop-exam', {
         method: 'POST',
@@ -140,9 +266,8 @@ export default function HostPanel() {
       
       const data = await response.json()
       if (data.success) {
-        setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
-        setTimeRemaining(0)
         alert('🛑 Exam stopped successfully!')
+        fetchExamInfo()
       } else {
         alert(`❌ Failed to stop exam: ${data.error}`)
       }
@@ -151,10 +276,9 @@ export default function HostPanel() {
     }
   }
 
+  // ✅ REMOVE PARTICIPANT
   const removeParticipant = async (participantName: string) => {
-    if (!confirm(`Are you sure you want to remove "${participantName}" from the exam?`)) {
-      return
-    }
+    if (!confirm(`Are you sure you want to remove "${participantName}" from the exam?`)) return
 
     try {
       const response = await fetch('http://127.0.0.1:5000/api/exam/remove-participant', {
@@ -170,7 +294,6 @@ export default function HostPanel() {
       if (data.success) {
         alert(`✅ Removed "${participantName}" from the exam`)
         fetchParticipants()
-        fetchLeaderboard()
       } else {
         alert(`❌ Failed to remove participant: ${data.error}`)
       }
@@ -179,43 +302,12 @@ export default function HostPanel() {
     }
   }
 
-  const startTimer = (seconds: number) => {
-    setTimeRemaining(seconds)
-    
-    const timer = setInterval(() => {
-      setTimeRemaining(prev => {
-        if (prev <= 1) {
-          clearInterval(timer)
-          alert('⏰ Time is up! Exam has ended.')
-          setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
-          return 0
-        }
-        return prev - 1
-      })
-    }, 1000)
-  }
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
-  }
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'waiting': return 'bg-yellow-600'
-      case 'active': return 'bg-green-600'
-      case 'completed': return 'bg-red-600'
-      default: return 'bg-gray-600'
-    }
-  }
-
   if (loading) {
     return (
       <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
         <div className="text-center">
           <RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4" />
-          <p>Loading host panel...</p>
+          <p>Loading host panel for exam: {examCode}</p>
         </div>
       </div>
     )
@@ -224,18 +316,28 @@ export default function HostPanel() {
   if (error || !examInfo) {
     return (
       <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
-        <div className="text-center">
+        <div className="text-center max-w-md">
           <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
-          <h1 className="text-2xl font-bold mb-2">Error</h1>
-          <p className="text-gray-400 mb-4">{error || 'Exam not found'}</p>
+          <h1 className="text-2xl font-bold mb-2">Error Loading Exam</h1>
+          <p className="text-gray-400 mb-4">{error}</p>
+          <p className="text-sm text-gray-500 mb-4">Exam Code: {examCode}</p>
+          
+          <div className="space-y-2">
+            <button
+              onClick={fetchExamInfo}
+              className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded mr-2"
+            >
+              Retry
+            </button>
             <button
               onClick={() => router.push('/coding')}
-            className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
+              className="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded"
             >
               Back to Home
             </button>
           </div>
         </div>
+      </div>
     )
   }
 
@@ -245,31 +347,35 @@ export default function HostPanel() {
       <div className="bg-gray-800 border-b border-gray-700 p-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold flex items-center space-x-2">
-              <Monitor className="h-6 w-6" />
-              <span>Host Panel</span>
-            </h1>
+            <h1 className="text-2xl font-bold">Host Panel</h1>
             <p className="text-gray-400">Managing exam: {examCode}</p>
           </div>
           
           <div className="flex items-center space-x-4">
-            <div className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(examInfo.status)}`}>
+            <div className={`px-3 py-1 rounded-full text-sm font-medium ${
+              examInfo.status === 'waiting' ? 'bg-yellow-600' :
+              examInfo.status === 'active' ? 'bg-green-600' : 'bg-red-600'
+            }`}>
               {examInfo.status.toUpperCase()}
             </div>
-            
-            {timeRemaining > 0 && (
-              <div className="flex items-center space-x-2 bg-gray-700 px-3 py-1 rounded">
-                <Clock className="h-4 w-4" />
-                <span className="font-mono text-lg">{formatTime(timeRemaining)}</span>
-              </div>
-            )}
-          </div>
           </div>
         </div>
 
-      <div className="flex">
-        {/* Main Content */}
-        <div className="flex-1 p-6">
+        {/* ✅ TABS IN HEADER */}
+        <div className="flex space-x-4 mt-4">
+          {['overview','participants','questions'].map(t => (
+            <button key={t}
+              className={`px-4 py-2 rounded ${activeTab===t?'bg-blue-600':'bg-gray-700'}`}
+              onClick={()=>setActiveTab(t as any)}
+            >{t[0].toUpperCase()+t.slice(1)}</button>
+          ))}
+        </div>
+      </div>
+
+      <div className="p-6">
+        {/* ✅ OVERVIEW TAB */}
+        {activeTab === 'overview' && (
+          <>
             {/* Exam Info Cards */}
             <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
               <div className="bg-gray-800 rounded-lg p-6">
@@ -287,7 +393,17 @@ export default function HostPanel() {
                   <Clock className="h-8 w-8 text-green-400" />
                   <div>
                     <p className="text-sm text-gray-400">Duration</p>
+                    <div className="flex items-center space-x-2">
                       <p className="text-2xl font-bold">{examInfo.duration_minutes}m</p>
+                      {examInfo.status === 'waiting' && (
+                        <button
+                          onClick={() => setShowDurationEdit(true)}
+                          className="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded"
+                        >
+                          Edit
+                        </button>
+                      )}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -296,8 +412,8 @@ export default function HostPanel() {
                 <div className="flex items-center space-x-3">
                   <Trophy className="h-8 w-8 text-yellow-400" />
                   <div>
-                  <p className="text-sm text-gray-400">Completed</p>
-                  <p className="text-2xl font-bold">{leaderboard.filter(p => p.completed).length}</p>
+                    <p className="text-sm text-gray-400">Problem</p>
+                    <p className="text-lg font-bold">{examInfo.problem_title}</p>
                   </div>
                 </div>
               </div>
@@ -306,17 +422,16 @@ export default function HostPanel() {
                 <div className="flex items-center space-x-3">
                   <Settings className="h-8 w-8 text-purple-400" />
                   <div>
-                  <p className="text-sm text-gray-400">Problem</p>
-                  <p className="text-lg font-bold">{examInfo.problem_title}</p>
+                    <p className="text-sm text-gray-400">Host</p>
+                    <p className="text-lg font-bold">{examInfo.host_name}</p>
                   </div>
                 </div>
               </div>
             </div>
 
             {/* Control Panel */}
-          <div className="bg-gray-800 rounded-lg p-6 mb-8">
+            <div className="bg-gray-800 rounded-lg p-6">
               <h2 className="text-xl font-bold mb-4">Exam Controls</h2>
-            
               <div className="flex space-x-4">
                 {examInfo.status === 'waiting' && (
                   <button
@@ -329,7 +444,6 @@ export default function HostPanel() {
                 )}
 
                 {examInfo.status === 'active' && (
-                <>
                   <button
                     onClick={stopExam}
                     className="bg-red-600 hover:bg-red-700 px-6 py-2 rounded flex items-center space-x-2"
@@ -337,38 +451,43 @@ export default function HostPanel() {
                     <Square className="h-4 w-4" />
                     <span>Stop Exam</span>
                   </button>
-                </>
                 )}
                 
-              <button
-                onClick={() => {
-                  fetchParticipants()
-                  fetchLeaderboard()
-                }}
-                className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded flex items-center space-x-2"
-              >
-                <RefreshCw className="h-4 w-4" />
-                <span>Refresh Data</span>
-              </button>
-
                 <button
                   onClick={() => {
                     navigator.clipboard.writeText(examCode)
                     alert('Exam code copied to clipboard!')
                   }}
-                className="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded"
+                  className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
                 >
                   Copy Exam Code
                 </button>
-            </div>
-          </div>
                 
-          {/* Participants List */}
+                <button
+                  onClick={fetchExamInfo}
+                  className="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded flex items-center space-x-2"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                  <span>Refresh Data</span>
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* ✅ PARTICIPANTS TAB */}
+        {activeTab === 'participants' && (
           <div className="bg-gray-800 rounded-lg p-6">
-            <h2 className="text-xl font-bold mb-4 flex items-center space-x-2">
-              <Users className="h-5 w-5" />
-              <span>Participants ({participants.length})</span>
-            </h2>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold">Participants ({participants.length})</h2>
+              <button
+                onClick={fetchParticipants}
+                className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center space-x-2"
+              >
+                <RefreshCw className="h-4 w-4" />
+                <span>Refresh</span>
+              </button>
+            </div>
             
             <div className="overflow-x-auto">
               <table className="w-full">
@@ -383,7 +502,7 @@ export default function HostPanel() {
                 </thead>
                 <tbody>
                   {participants.map((participant, index) => (
-                    <tr key={index} className="border-b border-gray-700 hover:bg-gray-700">
+                    <tr key={index} className="border-b border-gray-700">
                       <td className="py-3 px-4 font-medium">{participant.name}</td>
                       <td className="py-3 px-4 text-gray-400">
                         {new Date(participant.joined_at).toLocaleTimeString()}
@@ -407,7 +526,7 @@ export default function HostPanel() {
                       <td className="py-3 px-4">
                         <button
                           onClick={() => removeParticipant(participant.name)}
-                          className="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm flex items-center space-x-1"
+                          className="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-xs flex items-center space-x-1"
                         >
                           <UserMinus className="h-3 w-3" />
                           <span>Remove</span>
@@ -425,64 +544,234 @@ export default function HostPanel() {
               )}
             </div>
           </div>
-        </div>
+        )}
 
-        {/* Leaderboard Sidebar */}
-        <div className="w-80 bg-gray-800 p-6">
-          <div className="flex items-center space-x-2 mb-6">
-            <Trophy className="h-6 w-6 text-yellow-400" />
-            <h2 className="text-xl font-bold">Live Leaderboard</h2>
-          </div>
-          
-          <div className="space-y-3">
-            {leaderboard.map((participant, index) => (
-              <div 
-                key={index} 
-                className={`p-4 rounded-lg ${
-                  index === 0 ? 'bg-gradient-to-r from-yellow-600 to-orange-600' :
-                  index === 1 ? 'bg-gradient-to-r from-gray-600 to-gray-500' :
-                  index === 2 ? 'bg-gradient-to-r from-orange-600 to-red-600' :
-                  'bg-gray-700'
-                }`}
-              >
+        {/* ✅ QUESTIONS TAB */}
+        {activeTab==='questions' && (
+          <div className="space-y-6">
             <div className="flex justify-between items-center">
-                  <div>
-                    <div className="flex items-center space-x-2">
-                      <span className="font-bold text-lg">#{index + 1}</span>
-                      <span className="font-medium">{participant.name}</span>
+              <h2 className="text-xl font-bold">Question Management</h2>
+              {examInfo.status === 'waiting' && (
+                <button
+                  onClick={()=>setShowUploader(true)}
+                  className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded flex items-center space-x-2"
+                >
+                  <Plus className="h-4 w-4"/><span>Upload / Replace Question</span>
+                </button>
+              )}
             </div>
-                    {participant.submitted_at && (
-                      <p className="text-xs text-gray-300 mt-1">
-                        Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}
+
+            {/* Current problem quick view */}
+            <div className="bg-gray-800 p-6 rounded">
+              <h3 className="font-bold text-lg mb-2">{examInfo.problem_title}</h3>
+              <p className="text-gray-300">{examInfo.problem_description || 'No description stored'}</p>
+              {examInfo.status !== 'waiting' && (
+                <p className="text-yellow-400 text-sm mt-2">
+                  ⚠️ Questions cannot be modified after exam has started
                 </p>
               )}
             </div>
-                  <div className="text-right">
-                    <div className="text-2xl font-bold">{participant.score}%</div>
-                    <div className={`text-xs ${participant.completed ? 'text-green-300' : 'text-yellow-300'}`}>
-                      {participant.completed ? 'Completed' : 'In Progress'}
+
+            {/* ✅ UPLOAD MODAL */}
+            {showUploader && (
+              <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+                <div className="bg-gray-800 w-full max-w-6xl max-h-[95vh] overflow-y-auto rounded-lg p-6">
+                  <div className="flex justify-between mb-6">
+                    <h3 className="text-2xl font-bold">Upload Question</h3>
+                    <button 
+                      onClick={()=>setShowUploader(false)}
+                      className="text-gray-400 hover:text-white text-2xl"
+                    >✕</button>
+                  </div>
+
+                  <div className="space-y-6">
+                    {/* Basic Info */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium mb-2">Question Title *</label>
+                        <input
+                          className="w-full p-3 bg-gray-700 rounded border border-gray-600"
+                          placeholder="e.g., Two Sum Problem"
+                          value={draft.title}
+                          onChange={e=>setDraft({...draft,title:e.target.value})}
+                        />
+                      </div>
+                      
+                      <div>
+                        <label className="block text-sm font-medium mb-2">Difficulty</label>
+                        <select
+                          value={draft.difficulty}
+                          onChange={e=>setDraft({...draft,difficulty:e.target.value as any})}
+                          className="w-full p-3 bg-gray-700 rounded border border-gray-600"
+                        >
+                          <option value="easy">Easy</option>
+                          <option value="medium">Medium</option>
+                          <option value="hard">Hard</option>
+                        </select>
                       </div>
                     </div>
+
+                    {/* Description */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Problem Description *</label>
+                      <textarea
+                        className="w-full p-3 bg-gray-700 rounded border border-gray-600"
+                        placeholder="Describe the problem clearly with examples..."
+                        rows={5}
+                        value={draft.description}
+                        onChange={e=>setDraft({...draft,description:e.target.value})}
+                      />
+                    </div>
+
+                    {/* Function Name */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Function Name</label>
+                      <input
+                        className="w-full p-3 bg-gray-700 rounded border border-gray-600"
+                        placeholder="solve"
+                        value={draft.function_name}
+                        onChange={e=>setDraft({...draft,function_name:e.target.value})}
+                      />
+                    </div>
+
+                    {/* Starter Code */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Starter Code (Python)</label>
+                      <textarea
+                        className="w-full p-3 bg-gray-900 text-green-400 font-mono rounded border border-gray-600"
+                        rows={6}
+                        value={draft.starter_code.python}
+                        onChange={e=>setDraft({...draft,starter_code:{...draft.starter_code,python:e.target.value}})}
+                      />
+                    </div>
+
+                    {/* Test Cases */}
+                    <div>
+                      <div className="flex items-center justify-between mb-4">
+                        <label className="block text-sm font-medium">Test Cases</label>
+                        <button
+                          onClick={addTestCase}
+                          className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center space-x-2"
+                        >
+                          <Plus className="h-4 w-4" />
+                          <span>Add Test Case</span>
+                        </button>
+                      </div>
+
+                      {draft.test_cases.map((testCase, index) => (
+                        <div key={index} className="bg-gray-700 p-4 rounded mb-4">
+                          <div className="flex items-center justify-between mb-2">
+                            <h4 className="font-medium">Test Case {index + 1}</h4>
+                            {draft.test_cases.length > 1 && (
+                              <button
+                                onClick={() => removeTestCase(index)}
+                                className="text-red-400 hover:text-red-300 text-sm"
+                              >
+                                Remove
+                              </button>
+                            )}
+                          </div>
+                          
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
+                            <div>
+                              <label className="block text-xs text-gray-400 mb-1">Input</label>
+                              <textarea
+                                className="w-full p-2 bg-gray-600 rounded text-sm"
+                                rows={2}
+                                placeholder='e.g., "hello world"'
+                                value={testCase.input}
+                                onChange={e => updateTestCase(index, 'input', e.target.value)}
+                              />
+                            </div>
+                            <div>
+                              <label className="block text-xs text-gray-400 mb-1">Expected Output</label>
+                              <textarea
+                                className="w-full p-2 bg-gray-600 rounded text-sm"
+                                rows={2}
+                                placeholder='e.g., "HELLO WORLD"'
+                                value={testCase.expected_output}
+                                onChange={e => updateTestCase(index, 'expected_output', e.target.value)}
+                              />
+                            </div>
+                          </div>
+                          
+                          <div className="flex items-center space-x-4">
+                            <label className="flex items-center space-x-2">
+                              <input
+                                type="checkbox"
+                                checked={testCase.is_public}
+                                onChange={e => updateTestCase(index, 'is_public', e.target.checked)}
+                                className="rounded"
+                              />
+                              <span className="text-sm">Public (visible to students)</span>
+                            </label>
                           </div>
                         </div>
                       ))}
                     </div>
 
-          {leaderboard.length === 0 && (
-            <div className="text-center py-8 text-gray-400">
-              No submissions yet.
-            </div>
-          )}
+                    {/* Action Buttons */}
+                    <div className="flex space-x-4 pt-4 border-t border-gray-600">
+                      <button
+                        onClick={uploadQuestion}
+                        className="bg-green-600 hover:bg-green-700 px-6 py-3 rounded flex items-center space-x-2"
+                      >
+                        <Upload className="h-4 w-4" />
+                        <span>Save Question</span>
+                      </button>
                       
                       <button
-            onClick={fetchLeaderboard}
-            className="w-full mt-6 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm flex items-center justify-center space-x-2"
+                        onClick={() => setShowUploader(false)}
+                        className="bg-gray-600 hover:bg-gray-700 px-6 py-3 rounded"
                       >
-            <RefreshCw className="h-4 w-4" />
-            <span>Refresh Leaderboard</span>
+                        Cancel
                       </button>
                     </div>
                   </div>
                 </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ✅ DURATION EDIT MODAL */}
+        {showDurationEdit && (
+          <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+            <div className="bg-gray-800 rounded-lg p-6 max-w-md w-full">
+              <h3 className="text-xl font-bold mb-4">Edit Exam Duration</h3>
+              
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-2">Duration (minutes)</label>
+                <input
+                  type="number"
+                  min="1"
+                  max="300"
+                  value={customDuration}
+                  onChange={e => setCustomDuration(parseInt(e.target.value) || 30)}
+                  className="w-full p-3 bg-gray-700 rounded border border-gray-600"
+                />
+              </div>
+              
+              <div className="flex space-x-4">
+                <button
+                  onClick={updateDuration}
+                  className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center space-x-2"
+                >
+                  <Timer className="h-4 w-4" />
+                  <span>Update Duration</span>
+                </button>
+                
+                <button
+                  onClick={() => setShowDurationEdit(false)}
+                  className="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
   )
 }