Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard | EduSultan ERP</title> | |
| <link rel="stylesheet" href="/static/css/admin.css"> | |
| </head> | |
| <body class="dashboard-layout"> | |
| <div class="sidebar bg-blue-800 text-white"> | |
| <div class="logo p-4 border-b border-blue-700"> | |
| <img src="/static/images/logo-white.png" alt="EduSultan Logo" class="h-10 mx-auto"> | |
| </div> | |
| <nav class="mt-4"> | |
| <div class="px-4 py-2 text-blue-200 text-xs uppercase font-semibold">Main</div> | |
| <a href="/admin/dashboard" class="sidebar-link active"> | |
| <i data-feather="home"></i> Dashboard | |
| </a> | |
| <div class="px-4 py-2 text-blue-200 text-xs uppercase font-semibold mt-4">Management</div> | |
| <a href="/admin/students" class="sidebar-link"> | |
| <i data-feather="users"></i> Students | |
| </a> | |
| <a href="/admin/teachers" class="sidebar-link"> | |
| <i data-feather="user-check"></i> Teachers | |
| </a> | |
| <a href="/admin/classes" class="sidebar-link"> | |
| <i data-feather="book"></i> Classes | |
| </a> | |
| <a href="/admin/subjects" class="sidebar-link"> | |
| <i data-feather="book-open"></i> Subjects | |
| </a> | |
| <div class="px-4 py-2 text-blue-200 text-xs uppercase font-semibold mt-4">Operations</div> | |
| <a href="/admin/attendance" class="sidebar-link"> | |
| <i data-feather="clipboard"></i> Attendance | |
| </a> | |
| <a href="/admin/exams" class="sidebar-link"> | |
| <i data-feather="edit"></i> Exams & Grades | |
| </a> | |
| <a href="/admin/fees" class="sidebar-link"> | |
| <i data-feather="dollar-sign"></i> Fee Management | |
| </a> | |
| <div class="px-4 py-2 text-blue-200 text-xs uppercase font-semibold mt-4">System</div> | |
| <a href="/admin/settings" class="sidebar-link"> | |
| <i data-feather="settings"></i> Settings | |
| </a> | |
| <a href="/admin/reports" class="sidebar-link"> | |
| <i data-feather="printer"></i> Reports | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="main-content"> | |
| <header class="topbar bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-4 py-3"> | |
| <div class="flex items-center"> | |
| <button class="sidebar-toggle mr-4 text-gray-500"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800">Admin Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="search-box relative"> | |
| <input type="text" placeholder="Search..." | |
| class="pl-10 pr-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <div class="notifications relative"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="bell"></i> | |
| <span class="notification-badge">3</span> | |
| </button> | |
| </div> | |
| <div class="language-switcher flex items-center"> | |
| <button class="lang-btn px-2 py-1 text-sm rounded-md mr-1 bg-gray-100">FR</button> | |
| <button class="lang-btn px-2 py-1 text-sm rounded-md bg-gray-100">عربية</button> | |
| </div> | |
| <div class="user-profile flex items-center"> | |
| <img src="http://static.photos/people/200x200/42" alt="Admin" class="h-8 w-8 rounded-full"> | |
| <span class="ml-2 text-sm font-medium">Admin User</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="p-6"> | |
| <div class="breadcrumbs mb-4 text-sm text-gray-600"> | |
| <a href="/admin/dashboard" class="text-blue-600">Home</a> / Dashboard | |
| </div> | |
| <div class="stats-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="stat-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Students</p> | |
| <h3 class="text-2xl font-bold">1,248</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i data-feather="users"></i> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-sm text-green-600"> | |
| <i data-feather="trending-up"></i> 5.2% from last month | |
| </p> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Teachers</p> | |
| <h3 class="text-2xl font-bold">48</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i data-feather="user-check"></i> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-sm text-green-600"> | |
| <i data-feather="trending-up"></i> 2.1% from last month | |
| </p> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Today's Attendance</p> | |
| <h3 class="text-2xl font-bold">92%</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="clipboard"></i> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600"> | |
| <i data-feather="trending-down"></i> 3% from yesterday | |
| </p> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Monthly Revenue</p> | |
| <h3 class="text-2xl font-bold">$24,580</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="dollar-sign"></i> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-sm text-green-600"> | |
| <i data-feather="trending-up"></i> 12.5% from last month | |
| </p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="lg:col-span-2 bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Student Enrollment Trend</h2> | |
| <select class="text-sm border border-gray-300 rounded px-3 py-1"> | |
| <option>This Year</option> | |
| <option>Last Year</option> | |
| <option>Last 5 Years</option> | |
| </select> | |
| </div> | |
| <div class="chart-container h-64"> | |
| <!-- Enrollment chart will be rendered here --> | |
| <img src="http://static.photos/technology/640x360/1" alt="Enrollment Chart Placeholder" class="w-full h-full object-cover rounded"> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Activities</h2> | |
| <a href="#" class="text-sm text-blue-600">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i data-feather="user-plus" class="text-blue-600 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">New student registered: Ahmed Zaki</p> | |
| <p class="text-xs text-gray-500">10 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i data-feather="dollar-sign" class="text-green-600 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Fee payment received from Laila Mohamed</p> | |
| <p class="text-xs text-gray-500">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i data-feather="edit" class="text-purple-600 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Grades updated for Class 10 Mathematics</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i data-feather="clipboard" class="text-yellow-600 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Attendance marked for Grade 5B</p> | |
| <p class="text-xs text-gray-500">3 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Pending Fee Payments</h2> | |
| <a href="/admin/fees" class="text-sm text-blue-600">View All</a> | |
| </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">Student</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Date</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="http://static.photos/people/200x200/1"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Karim Benjelloun</div> | |
| <div class="text-sm text-gray-500">Grade 10A</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$250.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-500">Overdue</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="http://static.photos/people/200x200/2"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Amira El Fassi</div> | |
| <div class="text-sm text-gray-500">Grade 8B</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$180.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">Due in 2 days</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="http://static.photos/people/200x200/3"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Youssef Idrissi</div> | |
| <div class="text-sm text-gray-500">Grade 12A</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$300.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">Due in 5 days</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Quick Actions</h2> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="/admin/students/add" class="quick-action p-4 border border-gray-200 rounded-lg text-center hover:bg-blue-50 transition"> | |
| <div class="bg-blue-100 p-3 rounded-full inline-block mb-2"> | |
| <i data-feather="user-plus" class="text-blue-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Add Student</p> | |
| </a> | |
| <a href="/admin/announcements/create" class="quick-action p-4 border border-gray-200 rounded-lg text-center hover:bg-green-50 transition"> | |
| <div class="bg-green-100 p-3 rounded-full inline-block mb-2"> | |
| <i data-feather="bell" class="text-green-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Create Announcement</p> | |
| </a> | |
| <a href="/admin/reports/generate" class="quick-action p-4 border border-gray-200 rounded-lg text-center hover:bg-purple-50 transition"> | |
| <div class="bg-purple-100 p-3 rounded-full inline-block mb-2"> | |
| <i data-feather="file-text" class="text-purple-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Generate Report</p> | |
| </a> | |
| <a href="/admin/fees/collection" class="quick-action p-4 border border-gray-200 rounded-lg text-center hover:bg-yellow-50 transition"> | |
| <div class="bg-yellow-100 p-3 rounded-full inline-block mb-2"> | |
| <i data-feather="dollar-sign" class="text-yellow-600"></i> | |
| </div> | |
| <p class="text-sm font-medium">Record Payment</p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="/static/js/admin.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |