panel & coding

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

@@ -1,87 +1,114 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { useParams, useRouter } from 'next/navigation'
+import { useRouter, useParams } from 'next/navigation'
 import { 
-  Users, Trophy, Clock, Play, Square, UserX, AlertTriangle, 
-  RefreshCw, Settings, BarChart, Eye, Trash2, Plus, Timer
+  Users, 
+  Trophy, 
+  Clock, 
+  Play, 
+  Pause, 
+  Square, 
+  UserMinus, 
+  RefreshCw,
+  Settings,
+  Monitor,
+  AlertCircle
 } from 'lucide-react'
 
 interface Participant {
   name: string
-  joined_at: string
   score: number
   completed: boolean
-  language?: string
-  submission_time?: string
-  rank?: number
-  kicked?: boolean
+  submitted_at?: string
+  joined_at: string
 }
 
-interface ExamData {
-  exam_info: {
-    exam_code: string
-    title: string
-    status: string
-    duration_minutes: number
-    max_participants: number
-    time_elapsed: number
-    time_remaining: number
-    start_time?: string
-    end_time?: string
-  }
-  participants: {
-    total: number
-    completed: number
-    working: number
-    all_participants: Participant[]
-    recent_joins: Participant[]
-  }
-  leaderboard: Participant[]
-  statistics: {
-    average_score: number
-    highest_score: number
-    lowest_score: number
-    completion_rate: number
-  }
+interface ExamInfo {
+  title: string
+  status: 'waiting' | 'active' | 'completed'
+  duration_minutes: number
+  participants_count: number
+  max_participants: number
+  problem_title: string
+  languages: string[]
+  created_at: string
+  host_name: string
 }
 
-export default function HostDashboard() {
+export default function HostPanel() {
   const params = useParams()
   const router = useRouter()
   const examCode = params.examCode as string
 
-  const [examData, setExamData] = useState<ExamData | null>(null)
+  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 [activeTab, setActiveTab] = useState<'overview' | 'participants' | 'leaderboard' | 'settings'>('overview')
-  const [selectedParticipant, setSelectedParticipant] = useState<string | null>(null)
-  const [showKickModal, setShowKickModal] = useState(false)
-  const [refreshInterval, setRefreshInterval] = useState(3000) // 3 seconds
+  const [error, setError] = useState('')
 
   useEffect(() => {
-    if (!examCode) return
+    if (examCode) {
+      fetchExamInfo()
+      fetchParticipants()
+      fetchLeaderboard()
+      
+      // Auto-refresh every 5 seconds
+      const interval = setInterval(() => {
+        fetchParticipants()
+        fetchLeaderboard()
+      }, 5000)
 
-    fetchDashboardData()
-    const interval = setInterval(fetchDashboardData, refreshInterval)
-    return () => clearInterval(interval)
-  }, [examCode, refreshInterval])
+      return () => clearInterval(interval)
+    }
+  }, [examCode])
 
-  const fetchDashboardData = async () => {
+  const fetchExamInfo = async () => {
     try {
-      const response = await fetch(`http://127.0.0.1:5000/api/exam/host-dashboard/${examCode}`)
+      const response = await fetch(`http://127.0.0.1:5000/api/exam/info/${examCode}`)
       const data = await response.json()
       
       if (data.success) {
-        setExamData(data)
+        setExamInfo(data.exam_info)
+        if (data.exam_info.status === 'active') {
+          startTimer(data.exam_info.duration_minutes * 60)
+        }
       } else {
-        console.error('Failed to fetch dashboard data:', data.error)
+        setError('Failed to load exam information')
       }
     } catch (error) {
-      console.error('Error fetching dashboard data:', error)
+      setError('Network error')
     } finally {
       setLoading(false)
     }
   }
 
+  const fetchParticipants = async () => {
+    try {
+      const response = await fetch(`http://127.0.0.1:5000/api/exam/participants/${examCode}`)
+      const data = await response.json()
+      
+      if (data.success) {
+        setParticipants(data.participants)
+      }
+    } catch (error) {
+      console.error('Failed to fetch participants')
+    }
+  }
+
+  const fetchLeaderboard = async () => {
+    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)
+      }
+    } catch (error) {
+      console.error('Failed to fetch leaderboard')
+    }
+  }
+
   const startExam = async () => {
     try {
       const response = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
@@ -89,91 +116,85 @@ export default function HostDashboard() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ exam_code: examCode })
       })
-
+      
       const data = await response.json()
       if (data.success) {
-        alert('Exam started successfully!')
-        fetchDashboardData()
+        setExamInfo(prev => prev ? { ...prev, status: 'active' } : null)
+        startTimer(examInfo?.duration_minutes ? examInfo.duration_minutes * 60 : 1800)
+        alert('✅ Exam started! Participants can now begin coding.')
       } else {
-        alert(`Failed to start exam: ${data.error}`)
+        alert(`❌ Failed to start exam: ${data.error}`)
       }
     } catch (error) {
-      alert('Failed to start exam')
+      alert('❌ Network error occurred')
     }
   }
 
-  const endExam = async () => {
-    if (!confirm('Are you sure you want to end the exam? This cannot be undone.')) return
-
+  const stopExam = async () => {
     try {
-      const response = await fetch('http://127.0.0.1:5000/api/exam/end-exam', {
+      const response = await fetch('http://127.0.0.1:5000/api/exam/stop-exam', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ exam_code: examCode })
       })
-
+      
       const data = await response.json()
       if (data.success) {
-        alert('Exam ended successfully!')
-        fetchDashboardData()
+        setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
+        setTimeRemaining(0)
+        alert('🛑 Exam stopped successfully!')
       } else {
-        alert(`Failed to end exam: ${data.error}`)
+        alert(`❌ Failed to stop exam: ${data.error}`)
       }
     } catch (error) {
-      alert('Failed to end exam')
-    }
-  }
-
-  const extendExam = async (minutes: number) => {
-    try {
-      const response = await fetch('http://127.0.0.1:5000/api/exam/extend-exam', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
-          exam_code: examCode,
-          additional_minutes: minutes
-        })
-      })
-
-      const data = await response.json()
-      if (data.success) {
-        alert(`Exam extended by ${minutes} minutes!`)
-        fetchDashboardData()
-      } else {
-        alert(`Failed to extend exam: ${data.error}`)
-      }
-    } catch (error) {
-      alert('Failed to extend exam')
+      alert('❌ Network error occurred')
     }
   }
 
   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', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
+        body: JSON.stringify({ 
           exam_code: examCode,
           participant_name: participantName
         })
       })
-
+      
       const data = await response.json()
       if (data.success) {
-        alert(`Participant "${participantName}" removed successfully!`)
-        fetchDashboardData()
-        setShowKickModal(false)
-        setSelectedParticipant(null)
+        alert(`✅ Removed "${participantName}" from the exam`)
+        fetchParticipants()
+        fetchLeaderboard()
       } else {
-        alert(`Failed to remove participant: ${data.error}`)
+        alert(`❌ Failed to remove participant: ${data.error}`)
       }
     } catch (error) {
-      alert('Failed to remove participant')
+      alert('❌ Network error occurred')
     }
   }
 
+  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
@@ -182,10 +203,10 @@ export default function HostDashboard() {
 
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'waiting': return 'bg-yellow-100 text-yellow-800'
-      case 'active': return 'bg-green-100 text-green-800'
-      case 'completed': return 'bg-gray-100 text-gray-800'
-      default: return 'bg-gray-100 text-gray-800'
+      case 'waiting': return 'bg-yellow-600'
+      case 'active': return 'bg-green-600'
+      case 'completed': return 'bg-red-600'
+      default: return 'bg-gray-600'
     }
   }
 
@@ -193,25 +214,25 @@ export default function HostDashboard() {
     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 host dashboard...</p>
+          <RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4" />
+          <p>Loading host panel...</p>
         </div>
       </div>
     )
   }
 
-  if (!examData) {
+  if (error || !examInfo) {
     return (
       <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
         <div className="text-center">
-          <AlertTriangle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-          <h2 className="text-xl font-bold mb-2">Exam Not Found</h2>
-          <p className="text-gray-400">The exam code "{examCode}" is invalid or expired.</p>
+          <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>
           <button
-            onClick={() => router.push('/coding/create')}
-            className="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
+            onClick={() => router.push('/coding')}
+            className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
           >
-            Create New Exam
+            Back to Home
           </button>
         </div>
       </div>
@@ -221,377 +242,247 @@ export default function HostDashboard() {
   return (
     <div className="min-h-screen bg-gray-900 text-white">
       {/* Header */}
-      <div className="bg-gray-800 border-b border-gray-700 p-6">
-        <div className="max-w-7xl mx-auto">
-          <div className="flex justify-between items-center">
-            <div>
-              <h1 className="text-2xl font-bold">{examData.exam_info.title}</h1>
-              <div className="flex items-center space-x-4 mt-2">
-                <span className="text-lg font-mono font-bold text-blue-400">
-                  CODE: {examData.exam_info.exam_code}
-                </span>
-                <span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(examData.exam_info.status)}`}>
-                  {examData.exam_info.status.toUpperCase()}
-                </span>
-                <span className="text-gray-400">
-                  {examData.participants.total}/{examData.exam_info.max_participants} participants
-                </span>
+      <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>
+            <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)}`}>
+              {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">
+          {/* 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">
+              <div className="flex items-center space-x-3">
+                <Users className="h-8 w-8 text-blue-400" />
+                <div>
+                  <p className="text-sm text-gray-400">Participants</p>
+                  <p className="text-2xl font-bold">{examInfo.participants_count}/{examInfo.max_participants}</p>
+                </div>
               </div>
             </div>
 
-            <div className="flex items-center space-x-4">
-              {/* Timer */}
-              {examData.exam_info.status === 'active' && examData.exam_info.time_remaining > 0 && (
-                <div className="flex items-center space-x-2 bg-red-900 px-4 py-2 rounded-lg">
-                  <Clock className="h-5 w-5 text-red-400" />
-                  <span className="font-mono text-lg">{formatTime(examData.exam_info.time_remaining)}</span>
+            <div className="bg-gray-800 rounded-lg p-6">
+              <div className="flex items-center space-x-3">
+                <Clock className="h-8 w-8 text-green-400" />
+                <div>
+                  <p className="text-sm text-gray-400">Duration</p>
+                  <p className="text-2xl font-bold">{examInfo.duration_minutes}m</p>
                 </div>
-              )}
+              </div>
+            </div>
 
-              {/* Control Buttons */}
-              {examData.exam_info.status === 'waiting' && (
+            <div className="bg-gray-800 rounded-lg p-6">
+              <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>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-gray-800 rounded-lg p-6">
+              <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>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Control Panel */}
+          <div className="bg-gray-800 rounded-lg p-6 mb-8">
+            <h2 className="text-xl font-bold mb-4">Exam Controls</h2>
+            
+            <div className="flex space-x-4">
+              {examInfo.status === 'waiting' && (
                 <button
                   onClick={startExam}
-                  className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center space-x-2"
+                  className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded flex items-center space-x-2"
                 >
                   <Play className="h-4 w-4" />
                   <span>Start Exam</span>
                 </button>
               )}
 
-              {examData.exam_info.status === 'active' && (
-                <div className="flex space-x-2">
+              {examInfo.status === 'active' && (
+                <>
                   <button
-                    onClick={() => extendExam(10)}
-                    className="bg-yellow-600 hover:bg-yellow-700 px-3 py-2 rounded flex items-center space-x-1"
-                  >
-                    <Timer className="h-4 w-4" />
-                    <span>+10min</span>
-                  </button>
-                  <button
-                    onClick={endExam}
-                    className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center space-x-2"
+                    onClick={stopExam}
+                    className="bg-red-600 hover:bg-red-700 px-6 py-2 rounded flex items-center space-x-2"
                   >
                     <Square className="h-4 w-4" />
-                    <span>End Exam</span>
+                    <span>Stop Exam</span>
                   </button>
-                </div>
+                </>
               )}
 
               <button
-                onClick={fetchDashboardData}
-                className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
-                title="Refresh"
+                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"
+              >
+                Copy Exam Code
               </button>
             </div>
           </div>
-        </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto p-6">
-        {/* Tab Navigation */}
-        <div className="flex space-x-1 mb-6">
-          {[
-            { id: 'overview', label: 'Overview', icon: BarChart },
-            { id: 'participants', label: 'Participants', icon: Users },
-            { id: 'leaderboard', label: 'Leaderboard', icon: Trophy },
-            { id: 'settings', label: 'Settings', icon: Settings }
-          ].map(tab => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id as any)}
-              className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors ${
-                activeTab === tab.id
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'
-              }`}
-            >
-              <tab.icon className="h-4 w-4" />
-              <span>{tab.label}</span>
-            </button>
-          ))}
-        </div>
-
-        {/* Tab Content */}
-        {activeTab === 'overview' && (
-          <div className="space-y-6">
-            {/* Statistics Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-              <div className="bg-gray-800 p-6 rounded-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-sm font-medium text-gray-400">Total Participants</h3>
-                    <p className="text-3xl font-bold text-blue-400">{examData.participants.total}</p>
-                  </div>
-                  <Users className="h-8 w-8 text-blue-400" />
-                </div>
-              </div>
-
-              <div className="bg-gray-800 p-6 rounded-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-sm font-medium text-gray-400">Completed</h3>
-                    <p className="text-3xl font-bold text-green-400">{examData.participants.completed}</p>
-                  </div>
-                  <Trophy className="h-8 w-8 text-green-400" />
-                </div>
-              </div>
-
-              <div className="bg-gray-800 p-6 rounded-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-sm font-medium text-gray-400">Still Working</h3>
-                    <p className="text-3xl font-bold text-yellow-400">{examData.participants.working}</p>
-                  </div>
-                  <Clock className="h-8 w-8 text-yellow-400" />
-                </div>
-              </div>
-
-              <div className="bg-gray-800 p-6 rounded-lg">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-sm font-medium text-gray-400">Average Score</h3>
-                    <p className="text-3xl font-bold text-purple-400">
-                      {Math.round(examData.statistics.average_score)}%
-                    </p>
-                  </div>
-                  <BarChart className="h-8 w-8 text-purple-400" />
-                </div>
-              </div>
-            </div>
-
-            {/* Recent Activity */}
-            <div className="bg-gray-800 rounded-lg p-6">
-              <h3 className="text-lg font-bold mb-4">Recent Participants</h3>
-              <div className="space-y-2">
-                {examData.participants.recent_joins.slice(0, 5).map((participant, index) => (
-                  <div key={participant.name} className="flex items-center justify-between p-3 bg-gray-700 rounded">
-                    <div className="flex items-center space-x-3">
-                      <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold">
-                        {participant.name.charAt(0).toUpperCase()}
-                      </div>
-                      <div>
-                        <div className="font-medium">{participant.name}</div>
-                        <div className="text-sm text-gray-400">
-                          Joined {new Date(participant.joined_at).toLocaleTimeString()}
-                        </div>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <div className={`px-2 py-1 rounded text-xs ${
-                        participant.completed ? 'bg-green-900 text-green-200' : 'bg-yellow-900 text-yellow-200'
-                      }`}>
-                        {participant.completed ? `${participant.score}% completed` : 'Working'}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'participants' && (
-          <div className="bg-gray-800 rounded-lg overflow-hidden">
-            <div className="p-6 border-b border-gray-700">
-              <div className="flex justify-between items-center">
-                <h3 className="text-lg font-bold">All Participants ({examData.participants.total})</h3>
-                <div className="text-sm text-gray-400">
-                  Completion Rate: {Math.round(examData.statistics.completion_rate)}%
-                </div>
-              </div>
-            </div>
 
+          {/* Participants List */}
+          <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="overflow-x-auto">
               <table className="w-full">
-                <thead className="bg-gray-700">
-                  <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Participant</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Score</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Language</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Joined</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
+                <thead>
+                  <tr className="border-b border-gray-700">
+                    <th className="text-left py-3 px-4">Name</th>
+                    <th className="text-left py-3 px-4">Joined At</th>
+                    <th className="text-left py-3 px-4">Status</th>
+                    <th className="text-left py-3 px-4">Score</th>
+                    <th className="text-left py-3 px-4">Actions</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-700">
-                  {examData.participants.all_participants.map((participant) => (
-                    <tr key={participant.name} className="hover:bg-gray-700">
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold mr-3">
-                            {participant.name.charAt(0).toUpperCase()}
-                          </div>
-                          <div className="font-medium">{participant.name}</div>
-                        </div>
+                <tbody>
+                  {participants.map((participant, index) => (
+                    <tr key={index} className="border-b border-gray-700 hover:bg-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()}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                      <td className="py-3 px-4">
+                        <span className={`px-2 py-1 rounded text-xs ${
                           participant.completed 
-                            ? 'bg-green-900 text-green-200' 
-                            : participant.kicked
-                            ? 'bg-red-900 text-red-200'
-                            : 'bg-yellow-900 text-yellow-200'
+                            ? 'bg-green-600 text-white' 
+                            : 'bg-yellow-600 text-white'
                         }`}>
-                          {participant.kicked ? 'Kicked' : participant.completed ? 'Completed' : 'Working'}
+                          {participant.completed ? 'Completed' : 'In Progress'}
                         </span>
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
-                        {participant.completed ? `${participant.score}%` : '-'}
+                      <td className="py-3 px-4">
+                        {participant.completed ? (
+                          <span className="font-bold text-green-400">{participant.score}%</span>
+                        ) : (
+                          <span className="text-gray-500">-</span>
+                        )}
                       </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
-                        {participant.language || '-'}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
-                        {new Date(participant.joined_at).toLocaleString()}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                        <div className="flex space-x-2">
-                          <button
-                            onClick={() => {
-                              setSelectedParticipant(participant.name)
-                              setShowKickModal(true)
-                            }}
-                            className="text-red-400 hover:text-red-300"
-                            title="Remove Participant"
-                          >
-                            <UserX className="h-4 w-4" />
-                          </button>
-                        </div>
+                      <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"
+                        >
+                          <UserMinus className="h-3 w-3" />
+                          <span>Remove</span>
+                        </button>
                       </td>
                     </tr>
                   ))}
                 </tbody>
               </table>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'leaderboard' && (
-          <div className="bg-gray-800 rounded-lg p-6">
-            <h3 className="text-lg font-bold mb-6">Live Leaderboard</h3>
-            <div className="space-y-3">
-              {examData.leaderboard.map((participant, index) => {
-                const rankColors = {
-                  1: 'bg-gradient-to-r from-yellow-600 to-yellow-500 text-white',
-                  2: 'bg-gradient-to-r from-gray-400 to-gray-500 text-white',
-                  3: 'bg-gradient-to-r from-orange-600 to-orange-500 text-white'
-                }
-                
-                return (
-                  <div
-                    key={participant.name}
-                    className={`p-4 rounded-lg ${
-                      rankColors[participant.rank as keyof typeof rankColors] || 'bg-gray-700'
-                    }`}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center space-x-4">
-                        <div className="text-2xl font-bold">#{participant.rank}</div>
-                        <div>
-                          <div className="font-bold text-lg">{participant.name}</div>
-                          <div className="text-sm opacity-75">
-                            {participant.language && `${participant.language} • `}
-                            Submitted: {new Date(participant.submission_time!).toLocaleTimeString()}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="text-right">
-                        <div className="text-2xl font-bold">{participant.score}%</div>
-                      </div>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'settings' && (
-          <div className="space-y-6">
-            <div className="bg-gray-800 rounded-lg p-6">
-              <h3 className="text-lg font-bold mb-4">Exam Controls</h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <button
-                  onClick={() => extendExam(5)}
-                  disabled={examData.exam_info.status !== 'active'}
-                  className="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
-                >
-                  <div className="font-medium">Extend by 5 minutes</div>
-                  <div className="text-sm opacity-75">Add more time to the exam</div>
-                </button>
-
-                <button
-                  onClick={() => extendExam(15)}
-                  disabled={examData.exam_info.status !== 'active'}
-                  className="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
-                >
-                  <div className="font-medium">Extend by 15 minutes</div>
-                  <div className="text-sm opacity-75">Add significant extra time</div>
-                </button>
-
-                <button
-                  onClick={endExam}
-                  disabled={examData.exam_info.status !== 'active'}
-                  className="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
-                >
-                  <div className="font-medium">End Exam Early</div>
-                  <div className="text-sm opacity-75">Stop the exam immediately</div>
-                </button>
-              </div>
-            </div>
-
-            <div className="bg-gray-800 rounded-lg p-6">
-              <h3 className="text-lg font-bold mb-4">Auto-Refresh Settings</h3>
-              <div className="flex items-center space-x-4">
-                <label className="text-sm font-medium">Update Interval:</label>
-                <select
-                  value={refreshInterval}
-                  onChange={(e) => setRefreshInterval(Number(e.target.value))}
-                  className="bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"
-                >
-                  <option value={1000}>1 second</option>
-                  <option value={3000}>3 seconds</option>
-                  <option value={5000}>5 seconds</option>
-                  <option value={10000}>10 seconds</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Kick Participant Modal */}
-      {showKickModal && selectedParticipant && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
-            <h3 className="text-lg font-bold mb-4">Remove Participant</h3>
-            <p className="text-gray-300 mb-6">
-              Are you sure you want to remove <strong>"{selectedParticipant}"</strong> from the exam?
-              This action cannot be undone.
-            </p>
-            <div className="flex justify-end space-x-3">
-              <button
-                onClick={() => {
-                  setShowKickModal(false)
-                  setSelectedParticipant(null)
-                }}
-                className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => removeParticipant(selectedParticipant)}
-                className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded"
-              >
-                Remove Participant
-              </button>
+              
+              {participants.length === 0 && (
+                <div className="text-center py-8 text-gray-400">
+                  No participants have joined yet.
+                </div>
+              )}
             </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'
+                }`}
+              >
+                <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>
+                    </div>
+                    {participant.submitted_at && (
+                      <p className="text-xs text-gray-300 mt-1">
+                        Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}
+                      </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'}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          
+          {leaderboard.length === 0 && (
+            <div className="text-center py-8 text-gray-400">
+              No submissions yet.
+            </div>
+          )}
+          
+          <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"
+          >
+            <RefreshCw className="h-4 w-4" />
+            <span>Refresh Leaderboard</span>
+          </button>
+        </div>
+      </div>
     </div>
   )
 }