vou te passar meu banco de dados:<?php
// includes/db.php
$host = 'localhost';
$dbname = 'u942734124_webapp2025';
$username = 'u942734124_webapp2025';
$password = '11M07ae36@';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

   

} catch (PDOException $e) {
    die("Erro na conexão: " . $e->getMessage());
}
?>
/ agora vou te passar meu html pra deixxar em PHP: teacher-dashboard.php,SEM PERDAR NENUM DADOS ,APARENCIA,COR,STILO,E ABAS,E TUDOQ UE TIVER:<?php
session_start();

// Apenas professores podem acessar
if (!isset($_SESSION['user']) || $_SESSION['user']['role'] !== 'teacher') {
    header("Location: login.php");
    exit;
}
include '../includes/db.php';

// Simula dados do professor
$user = $_SESSION['user'] ?? [
    'id' => 1,
    'name' => 'Prof. João Silva',
    'email' => 'joao@professor.com',
    'role' => 'teacher'
];

// Simula alunos para exibir na tabela
$students = [
    ['id' => 101, 'name' => 'João da Silva', 'email' => 'joao@email.com', 'class_id' => 1],
    ['id' => 102, 'name' => 'Maria Oliveira', 'email' => 'maria@email.com', 'class_id' => 1],
    ['id' => 103, 'name' => 'Pedro Costa', 'email' => 'pedro@email.com', 'class_id' => null]
];

// Simula turmas
$classes = [
    ['id' => 1, 'name' => 'Turma A - Iniciantes', 'description' => 'Nível A1'],
    ['id' => 2, 'name' => 'Turma B - Intermediários', 'description' => 'Níveis A2 e B1']
];

// Simula progresso dos alunos por nível
$progress_data = [
    'A1' => [90, 85, 70],
    'A2' => [75, 65, 80],
    'B1' => [60, 50, 40]
];
?>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>English Course Admin | LearnHub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .progress-ring__circle {
            transition: stroke-dashoffset 0.35s;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .badge-animate {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <div class="min-h-screen flex">
        <!-- Sidebar -->
        <div class="w-64 bg-blue-800 text-white shadow-lg">
            <div class="p-4 flex items-center justify-center border-b border-blue-700">
                <i class="fas fa-language text-3xl mr-3"></i>
                <h1 class="text-2xl font-bold">EnglishHub</h1>
            </div>
            <div class="p-6 flex flex-col items-center">
                <div class="relative">
                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-24 h-24 rounded-full border-4 border-blue-500">
                    <span class="absolute bottom-0 right-0 bg-green-500 rounded-full w-6 h-6 border-2 border-white"></span>
                </div>
                <h2 class="mt-4 text-xl font-semibold">Maria Silva</h2>
                <p class="text-blue-200">English Teacher</p>
                <div class="mt-2 flex space-x-2">
                    <span class="bg-blue-600 text-xs px-2 py-1 rounded-full">Admin</span>
                    <span class="bg-yellow-500 text-yellow-900 text-xs px-2 py-1 rounded-full">Premium</span>
                </div>
            </div>
            <nav class="mt-4">
                <a href="#" class="tab-link flex items-center px-6 py-3 text-white bg-blue-900" data-tab="home">
                    <i class="fas fa-home mr-3"></i> Dashboard
                </a>
                <a href="#" class="tab-link flex items-center px-6 py-3 text-blue-200 hover:bg-blue-700 hover:text-white" data-tab="progress">
                    <i class="fas fa-chart-line mr-3"></i> Progress
                </a>
                <a href="#" class="tab-link flex items-center px-6 py-3 text-blue-200 hover:bg-blue-700 hover:text-white" data-tab="lessons">
                    <i class="fas fa-book-open mr-3"></i> Lessons
                </a>
                <a href="#" class="tab-link flex items-center px-6 py-3 text-blue-200 hover:bg-blue-700 hover:text-white" data-tab="levels">
                    <i class="fas fa-layer-group mr-3"></i> Levels
                </a>
                <a href="#" class="tab-link flex items-center px-6 py-3 text-blue-200 hover:bg-blue-700 hover:text-white" data-tab="exercises">
                    <i class="fas fa-edit mr-3"></i> Exercises
                </a>
                <a href="#" class="tab-link flex items-center px-6 py-3 text-blue-200 hover:bg-blue-700 hover:text-white" data-tab="students">
                    <i class="fas fa-users mr-3"></i> Students
                </a>
                <a href="#" class="tab-link flex items-center px-6 py-3 text-blue-200 hover:bg-blue-700 hover:text-white" data-tab="settings">
                    <i class="fas fa-cog mr-3"></i> Settings
                </a>
            </nav>
            <div class="absolute bottom-0 w-64 p-4 bg-blue-900">
                <button class="w-full flex items-center justify-center px-4 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-600">
                    <i class="fas fa-sign-out-alt mr-2"></i> Logout
                </button>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 p-8 overflow-y-auto">
            <!-- Home/Dashboard Tab -->
            <div id="home" class="tab-content active">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800">English Course Dashboard</h2>
                    <div class="relative">
                        <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                    <!-- Total Students -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
                        <div class="bg-blue-100 p-4 rounded-lg mr-4">
                            <i class="fas fa-users text-blue-600 text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Total Students</p>
                            <h3 class="text-2xl font-bold">248</h3>
                        </div>
                    </div>
                    
                    <!-- Active Courses -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
                        <div class="bg-green-100 p-4 rounded-lg mr-4">
                            <i class="fas fa-book text-green-600 text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Active Courses</p>
                            <h3 class="text-2xl font-bold">6</h3>
                        </div>
                    </div>
                    
                    <!-- Completion Rate -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
                        <div class="bg-yellow-100 p-4 rounded-lg mr-4">
                            <i class="fas fa-percent text-yellow-600 text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Completion Rate</p>
                            <h3 class="text-2xl font-bold">78%</h3>
                        </div>
                    </div>
                    
                    <!-- New Students -->
                    <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
                        <div class="bg-purple-100 p-4 rounded-lg mr-4">
                            <i class="fas fa-user-plus text-purple-600 text-2xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">New This Month</p>
                            <h3 class="text-2xl font-bold">32</h3>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <!-- Course Progress -->
                    <div class="bg-white rounded-xl shadow-md p-6 col-span-2">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-800">Course Progress</h3>
                            <select class="bg-white border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option>Last 7 Days</option>
                                <option>Last 30 Days</option>
                                <option>Last 90 Days</option>
                            </select>
                        </div>
                        <div class="h-64">
                            <canvas id="courseProgressChart"></canvas>
                        </div>
                    </div>
                    
                    <!-- Recent Activity -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold text-gray-800">Recent Activity</h3>
                            <button class="text-blue-600 hover:text-blue-800 text-sm">View All</button>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="bg-green-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-check text-green-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">Ana completed "Grammar Basics"</p>
                                    <p class="text-xs text-gray-500">2 hours ago</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-comment-alt text-blue-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">New comment on Carlos's assignment</p>
                                    <p class="text-xs text-gray-500">5 hours ago</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-purple-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-user-plus text-purple-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">3 new students enrolled</p>
                                    <p class="text-xs text-gray-500">Yesterday</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-exclamation text-yellow-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">Assignment #3 deadline approaching</p>
                                    <p class="text-xs text-gray-500">Yesterday</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">Active Courses</h3>
                        <button class="text-blue-600 hover:text-blue-800">View All Courses</button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Students</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-language text-blue-600"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Beginner English</div>
                                                <div class="text-sm text-gray-500">A1 Level</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">48</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900">Manage</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-language text-green-600"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Intermediate English</div>
                                                <div class="text-sm text-gray-500">B1 Level</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-green-600 h-2 rounded-full" style="width: 78%"></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900">Manage</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-language text-purple-600"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Business English</div>
                                                <div class="text-sm text-gray-500">B2 Level</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">24</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-purple-600 h-2 rounded-full" style="width: 42%"></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900">Manage</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Progress Tab -->
            <div id="progress" class="tab-content">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800">Student Progress Overview</h2>
                    <div class="flex space-x-2">
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Export Data</button>
                        <button class="px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">Generate Report</button>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Overall Completion Rate</h3>
                        <div class="flex justify-center mb-6">
                            <svg class="w-48 h-48" viewBox="0 0 36 36">
                                <path d="M18 2.0845
                                    a 15.9155 15.9155 0 0 1 0 31.831
                                    a 15.9155 15.9155 0 0 1 0 -31.831"
                                    fill="none" stroke="#e6e6e6" stroke-width="3" stroke-dasharray="100, 100"/>
                                <path class="progress-ring__circle" d="M18 2.0845
                                    a 15.9155 15.9155 0 0 1 0 31.831
                                    a 15.9155 15.9155 0 0 1 0 -31.831"
                                    fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="78, 100"/>
                                <text x="18" y="20.5" text-anchor="middle" font-size="8" fill="#3b82f6" font-weight="bold">78%</text>
                            </svg>
                        </div>
                        <div class="text-center">
                            <p class="text-gray-600 mb-4">78% of students are on track with their courses</p>
                            <div class="flex justify-between mb-2">
                                <span class="text-sm text-gray-500">Started: 248 students</span>
                                <span class="text-sm text-gray-500">Completed: 193 students</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: 78%"></div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Weekly Activity</h3>
                        <div class="h-64">
                            <canvas id="weeklyActivityChart"></canvas>
                        </div>
                        <div class="mt-4 text-center">
                            <p class="text-gray-600">Activity increased by 12% compared to last week</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Student Progress by Course</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Ana Silva</div>
                                                <div class="text-sm text-gray-500">ana@example.com</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Beginner English</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 92%"></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Carlos Mendez</div>
                                                <div class="text-sm text-gray-500">carlos@example.com</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Intermediate English</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="bg-green-600 h-2.5 rounded-full" style="width: 65%"></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Sophie Johnson</div>
                                                <div class="text-sm text-gray-500">sophie@example.com</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Business English</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="bg-purple-600 h-2.5 rounded-full" style="width: 78%"></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 flex justify-center">
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">Previous</span>
                                <i class="fas fa-chevron-left"></i>
                            </a>
                            <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                1
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                2
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                3
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">Next</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </nav>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Progress by Course Level</h3>
                        <div class="h-64">
                            <canvas id="levelProgressChart"></canvas>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">At-Risk Students</h3>
                        <div class="space-y-4">
                            <div class="flex items-center p-3 bg-red-50 rounded-lg">
                                <div class="bg-red-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-exclamation text-red-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium">João Santos</h4>
                                    <p class="text-sm text-gray-500">Beginner English - 35% progress</p>
                                </div>
                                <button class="text-blue-600 hover:text-blue-800 text-sm">Message</button>
                            </div>
                            <div class="flex items-center p-3 bg-red-50 rounded-lg">
                                <div class="bg-red-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-exclamation text-red-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium">Marta Rodriguez</h4>
                                    <p class="text-sm text-gray-500">Intermediate English - 28% progress</p>
                                </div>
                                <button class="text-blue-600 hover:text-blue-800 text-sm">Message</button>
                            </div>
                            <div class="flex items-center p-3 bg-red-50 rounded-lg">
                                <div class="bg-red-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-exclamation text-red-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium">Thomas Müller</h4>
                                    <p class="text-sm text-gray-500">Business English - 42% progress</p>
                                </div>
                                <button class="text-blue-600 hover:text-blue-800 text-sm">Message</button>
                            </div>
                        </div>
                        <button class="w-full mt-4 px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">View All At-Risk Students</button>
                    </div>
                </div>
            </div>

            <!-- Lessons Tab -->
            <div id="lessons" class="tab-content">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800">Course Lessons</h2>
                    <div class="flex space-x-2">
                        <div class="relative">
                            <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option>All Courses</option>
                                <option>Beginner English</option>
                                <option>Intermediate English</option>
                                <option>Business English</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
                            <i class="fas fa-plus mr-2"></i> New Lesson
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">Beginner English (A1) Lessons</h3>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-500 mr-2">Total Lessons:</span>
                            <span class="text-sm font-medium">24</span>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <!-- Module 1 -->
                        <div class="border rounded-lg overflow-hidden">
                            <div class="bg-gray-50 px-4 py-3 border-b flex justify-between items-center">
                                <h4 class="font-medium">Module 1: Basics</h4>
                                <div class="flex items-center">
                                    <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full mr-2">Published</span>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-chevron-down"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="divide-y divide-gray-200">
                                <div class="p-4 hover:bg-gray-50 flex justify-between items-center">
                                    <div>
                                        <h5 class="font-medium">1. Greetings and Introductions</h5>
                                        <p class="text-sm text-gray-500">Basic greetings and self-introduction</p>
                                    </div>
                                    <div class="flex items-center space-x-4">
                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Video</span>
                                        <div class="flex space-x-2">
                                            <button class="text-blue-600 hover:text-blue-800">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="text-green-600 hover:text-green-800">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-800">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-4 hover:bg-gray-50 flex justify-between items-center">
                                    <div>
                                        <h5 class="font-medium">2. The Alphabet</h5>
                                        <p class="text-sm text-gray-500">English alphabet pronunciation</p>
                                    </div>
                                    <div class="flex items-center space-x-4">
                                        <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Audio</span>
                                        <div class="flex space-x-2">
                                            <button class="text-blue-600 hover:text-blue-800">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="text-green-600 hover:text-green-800">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-800">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Module 2 -->
                        <div class="border rounded-lg overflow-hidden">
                            <div class="bg-gray-50 px-4 py-3 border-b flex justify-between items-center">
                                <h4 class="font-medium">Module 2: Everyday English</h4>
                                <div class="flex items-center">
                                    <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full mr-2">Draft</span>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-chevron-down"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="divide-y divide-gray-200 hidden">
                                <div class="p-4 hover:bg-gray-50 flex justify-between items-center">
                                    <div>
                                        <h5 class="font-medium">3. Common Phrases</h5>
                                        <p class="text-sm text-gray-500">Essential phrases for daily life</p>
                                    </div>
                                    <div class="flex items-center space-x-4">
                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Video</span>
                                        <div class="flex space-x-2">
                                            <button class="text-blue-600 hover:text-blue-800">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="text-green-600 hover:text-green-800">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-800">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Add Module Button -->
                        <button class="w-full mt-4 px-4 py-3 border border-dashed border-gray-300 text-gray-500 rounded-lg hover:bg-gray-50 flex items-center justify-center">
                            <i class="fas fa-plus mr-2"></i> Add New Module
                        </button>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Lesson Statistics</h3>
                        <div class="h-64">
                            <canvas id="lessonStatsChart"></canvas>
                        </div>
                        <div class="mt-4 grid grid-cols-3 gap-4 text-center">
                            <div>
                                <p class="text-2xl font-bold text-blue-600">86</p>
                                <p class="text-sm text-gray-500">Total Lessons</p>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-green-600">72</p>
                                <p class="text-sm text-gray-500">Published</p>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-yellow-600">14</p>
                                <p class="text-sm text-gray-500">Drafts</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Most Viewed Lessons</h3>
                        <div class="space-y-4">
                            <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer border border-gray-200">
                                <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-play text-blue-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">Greetings and Introductions</h4>
                                    <p class="text-sm text-gray-500 mb-2">Beginner English - Module 1</p>
                                    <div class="flex items-center">
                                        <i class="fas fa-eye text-xs text-gray-400 mr-1"></i>
                                        <span class="text-xs text-gray-500 mr-3">1,248 views</span>
                                        <i class="fas fa-star text-xs text-yellow-400 mr-1"></i>
                                        <span class="text-xs text-gray-500">4.8/5</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer border border-gray-200">
                                <div class="bg-green-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-headphones text-green-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">Present Simple Tense</h4>
                                    <p class="text-sm text-gray-500 mb-2">Intermediate English - Module 3</p>
                                    <div class="flex items-center">
                                        <i class="fas fa-eye text-xs text-gray-400 mr-1"></i>
                                        <span class="text-xs text-gray-500 mr-3">982 views</span>
                                        <i class="fas fa-star text-xs text-yellow-400 mr-1"></i>
                                        <span class="text-xs text-gray-500">4.6/5</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="w-full mt-4 px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">View All Lessons</button>
                    </div>
                </div>
            </div>

            <!-- Levels Tab -->
            <div id="levels" class="tab-content">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800">Course Levels</h2>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
                        <i class="fas fa-plus mr-2"></i> New Level
                    </button>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">English Course Levels</h3>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-500 mr-2">Total Levels:</span>
                            <span class="text-sm font-medium">6</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- A1 Level -->
                        <div class="border rounded-lg overflow-hidden hover:shadow-md transition">
                            <div class="bg-blue-100 p-4 flex items-center justify-between">
                                <h4 class="font-semibold text-blue-800">A1 (Beginner)</h4>
                                <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">Active</span>
                            </div>
                            <div class="p-4">
                                <p class="text-sm text-gray-600 mb-4">Basic vocabulary and simple sentences for everyday situations.</p>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Students:</span>
                                    <span class="font-medium">48</span>
                                </div>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Lessons:</span>
                                    <span class="font-medium">24</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-500">Completion:</span>
                                    <span class="font-medium">82%</span>
                                </div>
                                <div class="mt-4 flex space-x-2">
                                    <button class="flex-1 px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
                                        Manage
                                    </button>
                                    <button class="px-3 py-1 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 text-sm">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- A2 Level -->
                        <div class="border rounded-lg overflow-hidden hover:shadow-md transition">
                            <div class="bg-green-100 p-4 flex items-center justify-between">
                                <h4 class="font-semibold text-green-800">A2 (Elementary)</h4>
                                <span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full">Active</span>
                            </div>
                            <div class="p-4">
                                <p class="text-sm text-gray-600 mb-4">Expanding vocabulary and basic communication in familiar contexts.</p>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Students:</span>
                                    <span class="font-medium">36</span>
                                </div>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Lessons:</span>
                                    <span class="font-medium">28</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-500">Completion:</span>
                                    <span class="font-medium">75%</span>
                                </div>
                                <div class="mt-4 flex space-x-2">
                                    <button class="flex-1 px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 text-sm">
                                        Manage
                                    </button>
                                    <button class="px-3 py-1 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 text-sm">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- B1 Level -->
                        <div class="border rounded-lg overflow-hidden hover:shadow-md transition">
                            <div class="bg-yellow-100 p-4 flex items-center justify-between">
                                <h4 class="font-semibold text-yellow-800">B1 (Intermediate)</h4>
                                <span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">Active</span>
                            </div>
                            <div class="p-4">
                                <p class="text-sm text-gray-600 mb-4">Confident communication in work, school, and travel situations.</p>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Students:</span>
                                    <span class="font-medium">32</span>
                                </div>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Lessons:</span>
                                    <span class="font-medium">32</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-500">Completion:</span>
                                    <span class="font-medium">68%</span>
                                </div>
                                <div class="mt-4 flex space-x-2">
                                    <button class="flex-1 px-3 py-1 bg-yellow-600 text-white rounded hover:bg-yellow-700 text-sm">
                                        Manage
                                    </button>
                                    <button class="px-3 py-1 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 text-sm">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- B2 Level -->
                        <div class="border rounded-lg overflow-hidden hover:shadow-md transition">
                            <div class="bg-purple-100 p-4 flex items-center justify-between">
                                <h4 class="font-semibold text-purple-800">B2 (Upper Intermediate)</h4>
                                <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded-full">Active</span>
                            </div>
                            <div class="p-4">
                                <p class="text-sm text-gray-600 mb-4">Complex texts and technical discussions in specialized fields.</p>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Students:</span>
                                    <span class="font-medium">24</span>
                                </div>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Lessons:</span>
                                    <span class="font-medium">36</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-500">Completion:</span>
                                    <span class="font-medium">58%</span>
                                </div>
                                <div class="mt-4 flex space-x-2">
                                    <button class="flex-1 px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700 text-sm">
                                        Manage
                                    </button>
                                    <button class="px-3 py-1 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 text-sm">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- C1 Level -->
                        <div class="border rounded-lg overflow-hidden hover:shadow-md transition">
                            <div class="bg-pink-100 p-4 flex items-center justify-between">
                                <h4 class="font-semibold text-pink-800">C1 (Advanced)</h4>
                                <span class="bg-pink-600 text-white text-xs px-2 py-1 rounded-full">Draft</span>
                            </div>
                            <div class="p-4">
                                <p class="text-sm text-gray-600 mb-4">Fluency and flexibility for social, academic and professional purposes.</p>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Students:</span>
                                    <span class="font-medium">0</span>
                                </div>
                                <div class="flex justify-between text-sm mb-2">
                                    <span class="text-gray-500">Lessons:</span>
                                    <span class="font-medium">18/40</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-500">Status:</span>
                                    <span class="font-medium">In Development</span>
                                </div>
                                <div class="mt-4 flex space-x-2">
                                    <button class="flex-1 px-3 py-1 bg-pink-600 text-white rounded hover:bg-pink-700 text-sm">
                                        Continue
                                    </button>
                                    <button class="px-3 py-1 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 text-sm">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Add Level Card -->
                        <div class="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-50 transition cursor-pointer">
                            <div class="text-center p-6">
                                <i class="fas fa-plus text-3xl text-gray-400 mb-2"></i>
                                <h4 class="font-medium text-gray-700">Add New Level</h4>
                                <p class="text-sm text-gray-500">Create a new English proficiency level</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Level Progression</h3>
                        <div class="h-64">
                            <canvas id="levelProgressionChart"></canvas>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Level Completion Rates</h3>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">A1 (Beginner)</span>
                                    <span class="text-sm text-gray-500">82%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: 82%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">A2 (Elementary)</span>
                                    <span class="text-sm text-gray-500">75%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">B1 (Intermediate)</span>
                                    <span class="text-sm text-gray-500">68%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-yellow-500 h-2 rounded-full" style="width: 68%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm font-medium">B2 (Upper Intermediate)</span>
                                    <span class="text-sm text-gray-500">58%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-purple-600 h-2 rounded-full" style="width: 58%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Exercises Tab -->
            <div id="exercises" class="tab-content">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800">Practice Exercises</h2>
                    <div class="flex space-x-2">
                        <div class="relative">
                            <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option>All Levels</option>
                                <option>A1 (Beginner)</option>
                                <option>A2 (Elementary)</option>
                                <option>B1 (Intermediate)</option>
                                <option>B2 (Upper Intermediate)</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
                            <i class="fas fa-plus mr-2"></i> New Exercise
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">Exercises by Level</h3>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-500 mr-2">Total Exercises:</span>
                            <span class="text-sm font-medium">128</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                        <!-- A1 Exercises -->
                        <div class="border rounded-lg p-4 hover:shadow-md transition">
                            <div class="flex items-center mb-3">
                                <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-pencil-alt text-blue-600"></i>
                                </div>
                                <h4 class="font-medium">A1 (Beginner)</h4>
                            </div>
                            <p class="text-sm text-gray-600 mb-4">Basic vocabulary and simple sentence exercises.</p>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Exercises:</span>
                                <span class="font-medium">36</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Avg. Score:</span>
                                <span class="font-medium">82%</span>
                            </div>
                            <button class="w-full mt-4 px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
                                View Exercises
                            </button>
                        </div>

                        <!-- A2 Exercises -->
                        <div class="border rounded-lg p-4 hover:shadow-md transition">
                            <div class="flex items-center mb-3">
                                <div class="bg-green-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-pencil-alt text-green-600"></i>
                                </div>
                                <h4 class="font-medium">A2 (Elementary)</h4>
                            </div>
                            <p class="text-sm text-gray-600 mb-4">Everyday communication and grammar exercises.</p>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Exercises:</span>
                                <span class="font-medium">28</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Avg. Score:</span>
                                <span class="font-medium">75%</span>
                            </div>
                            <button class="w-full mt-4 px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 text-sm">
                                View Exercises
                            </button>
                        </div>

                        <!-- B1 Exercises -->
                        <div class="border rounded-lg p-4 hover:shadow-md transition">
                            <div class="flex items-center mb-3">
                                <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-pencil-alt text-yellow-600"></i>
                                </div>
                                <h4 class="font-medium">B1 (Intermediate)</h4>
                            </div>
                            <p class="text-sm text-gray-600 mb-4">Work, school and travel situation exercises.</p>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Exercises:</span>
                                <span class="font-medium">32</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Avg. Score:</span>
                                <span class="font-medium">68%</span>
                            </div>
                            <button class="w-full mt-4 px-3 py-1 bg-yellow-600 text-white rounded hover:bg-yellow-700 text-sm">
                                View Exercises
                            </button>
                        </div>

                        <!-- B2 Exercises -->
                        <div class="border rounded-lg p-4 hover:shadow-md transition">
                            <div class="flex items-center mb-3">
                                <div class="bg-purple-100 p-2 rounded-lg mr-3">
                                    <i class="fas fa-pencil-alt text-purple-600"></i>
                                </div>
                                <h4 class="font-medium">B2 (Upper Intermediate)</h4>
                            </div>
                            <p class="text-sm text-gray-600 mb-4">Technical and abstract topic exercises.</p>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Exercises:</span>
                                <span class="font-medium">24</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Avg. Score:</span>
                                <span class="font-medium">58%</span>
                            </div>
                            <button class="w-full mt-4 px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700 text-sm">
                                View Exercises
                            </button>
                        </div>
                    </div>

                    <div class="border-t pt-6">
                        <h4 class="font-medium text-gray-800 mb-4">Exercise Types</h4>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div class="border rounded-lg p-3 text-center hover:bg-gray-50 transition cursor-pointer">
                                <div class="bg-blue-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
                                    <i class="fas fa-font text-blue-600"></i>
                                </div>
                                <p class="text-sm font-medium">Vocabulary</p>
                                <p class="text-xs text-gray-500">42 exercises</p>
                            </div>
                            <div class="border rounded-lg p-3 text-center hover:bg-gray-50 transition cursor-pointer">
                                <div class="bg-green-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
                                    <i class="fas fa-spell-check text-green-600"></i>
                                </div>
                                <p class="text-sm font-medium">Grammar</p>
                                <p class="text-xs text-gray-500">36 exercises</p>
                            </div>
                            <div class="border rounded-lg p-3 text-center hover:bg-gray-50 transition cursor-pointer">
                                <div class="bg-yellow-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
                                    <i class="fas fa-headphones text-yellow-600"></i>
                                </div>
                                <p class="text-sm font-medium">Listening</p>
                                <p class="text-xs text-gray-500">24 exercises</p>
                            </div>
                            <div class="border rounded-lg p-3 text-center hover:bg-gray-50 transition cursor-pointer">
                                <div class="bg-purple-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-2">
                                    <i class="fas fa-comment-dots text-purple-600"></i>
                                </div>
                                <p class="text-sm font-medium">Speaking</p>
                                <p class="text-xs text-gray-500">18 exercises</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Exercises</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exercise</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">Common Phrases</div>
                                            <div class="text-sm text-gray-500">Vocabulary</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">A1</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Multiple Choice</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Edit</a>
                                            <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">Present Simple</div>
                                            <div class="text-sm text-gray-500">Grammar</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">A2</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Fill in Blanks</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Edit</a>
                                            <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">Airport Announcement</div>
                                            <div class="text-sm text-gray-500">Listening</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">B1</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Audio</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Edit</a>
                                            <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <button class="w-full mt-4 px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50">View All Exercises</button>
                    </div>

                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Exercise Statistics</h3>
                        <div class="h-64">
                            <canvas id="exerciseStatsChart"></canvas>
                        </div>
                        <div class="mt-4 grid grid-cols-3 gap-4 text-center">
                            <div>
                                <p class="text-2xl font-bold text-blue-600">128</p>
                                <p class="text-sm text-gray-500">Total Exercises</p>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-green-600">86%</p>
                                <p class="text-sm text-gray-500">Completion Rate</p>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-yellow-600">72%</p>
                                <p class="text-sm text-gray-500">Avg. Score</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Students Tab -->
            <div id="students" class="tab-content">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800">Student Management</h2>
                    <div class="flex space-x-2">
                        <div class="relative">
                            <input type="text" placeholder="Search students..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                        </div>
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
                            <i class="fas fa-plus mr-2"></i> Add Student
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800">All Students</h3>
                        <div class="flex items-center">
                            <span class="text-sm text-gray-500 mr-2">Total:</span>
                            <span class="text-sm font-medium">248 students</span>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Ana Silva</div>
                                                <div class="text-sm text-gray-500">ana@example.com</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">A1</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-blue-600 h-2 rounded-full" style="width: 92%"></div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">92% complete</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
                                        <a href="#" class="text-gray-600 hover:text-gray-900 mr-3">Message</a>
                                        <a href="#" class="text-red-600 hover:text-red-900">Remove</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">Carlos Mendez</div>
                                                <div class="text-sm text-gray-500">carlos@example.com</div>
                                            </div>
                                        </div>
                                    </td
</html>
</body>