Hugging Face's logo

Spaces:
buosam
/
ila
Running

App Files Community
ila / admin-dashboard.html
buosam's picture
buosam
Iraq Leadership Academy Website, Login and Signup, latest Programs, Latest Announcements, Student Portal, Admin Dashboard, make it sleek design, Professional - Initial Deployment
da8124d verified
Raw History Blame Contribute Delete
20.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Iraq Leadership Academy</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.sidebar {
transition: all 0.3s;
}
.sidebar-collapsed {
width: 5rem;
}
.sidebar-expanded {
width: 16rem;
}
.main-content {
transition: margin-left 0.3s;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chart-container {
height: 300px;
}
</style>
</head>
<body class="bg-gray-50 font-sans antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div id="sidebar" class="sidebar sidebar-expanded bg-gray-800 text-white flex flex-col">
<div class="flex items-center justify-between p-4 border-b border-gray-700">
<div class="flex items-center">
<i data-feather="award" class="h-8 w-8 text-white"></i>
<span class="ml-2 text-xl font-bold">ILA Admin</span>
</div>
<button id="toggle-sidebar" class="text-gray-400 hover:text-white">
<i data-feather="chevron-left"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto">
<nav class="p-4 space-y-1">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md bg-gray-900 text-white">
<i data-feather="home" class="mr-3"></i>
<span>Dashboard</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-white">
<i data-feather="users" class="mr-3"></i>
<span>Students</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-white">
<i data-feather="book" class="mr-3"></i>
<span>Courses</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-white">
<i data-feather="calendar" class="mr-3"></i>
<span>Schedule</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-white">
<i data-feather="file-text" class="mr-3"></i>
<span>Reports</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-white">
<i data-feather="message-square" class="mr-3"></i>
<span>Messages</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-white">
<i data-feather="settings" class="mr-3"></i>
<span>Settings</span>
</a>
</nav>
</div>
<div class="p-4 border-t border-gray-700">
<div class="flex items-center">
<img class="h-9 w-9 rounded-full" src="http://static.photos/people/200x200/2" alt="Admin profile">
<div class="ml-3">
<p class="text-sm font-medium text-white">Admin User</p>
<p class="text-xs font-medium text-gray-400">Super Admin</p>
</div>
</div>
<button class="mt-4 w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-800 bg-white hover:bg-gray-50">
<i data-feather="log-out" class="mr-2"></i>
Sign out
</button>
</div>
</div>
<!-- Main Content -->
<div id="main-content" class="main-content flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<h1 class="text-lg font-semibold text-gray-900">Admin Dashboard</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
</div>
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i data-feather="bell"></i>
</button>
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i data-feather="help-circle"></i>
</button>
</div>
</div>
</header>
<!-- Dashboard Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Stats -->
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
<!-- Total Students -->
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="users" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-500 truncate">Total Students</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">1,248</div>
</dd>
</div>
</div>
</div>
</div>
<!-- Active Courses -->
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
<i data-feather="book" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-500 truncate">Active Courses</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">24</div>
</dd>
</div>
</div>
</div>
</div>
<!-- New Applications -->
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
<i data-feather="file-text" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-500 truncate">New Applications</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">87</div>
<span class="ml-2 text-sm font-medium text-yellow-800">+12%</span>
</dd>
</div>
</div>
</div>
</div>
<!-- Completion Rate -->
<div class="bg-white overflow-hidden shadow rounded-lg card-hover">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
<i data-feather="bar-chart-2" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dt class="text-sm font-medium text-gray-500 truncate">Completion Rate</dt>
<dd class="flex items-baseline">
<div class="text-2xl font-semibold text-gray-900">82%</div>
<span class="ml-2 text-sm font-medium text-purple-800">+5%</span>
</dd>
</div>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<!-- Enrollment Chart -->
<div class="bg-white shadow rounded-lg p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Student Enrollment</h3>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>Last 30 days</option>
<option>Last 90 days</option>
<option>This Year</option>
</select>
<i data-feather="chevron-down" class="absolute right-2 top-1.5 text-gray-400"></i>
</div>
</div>
<div class="chart-container">
<!-- Chart placeholder - would be replaced with actual chart library -->
<div class="flex items-end h-full">
<div class="flex-1 flex justify-around">
<div class="w-8 bg-blue-100" style="height: 30%;"></div>
<div class="w-8 bg-blue-200" style="height: 50%;"></div>
<div class="w-8 bg-blue-300" style="height: 70%;"></div>
<div class="w-8 bg-blue-400" style="height: 90%;"></div>
<div class="w-8 bg-blue-500" style="height: 60%;"></div>
<div class="w-8 bg-blue-600" style="height: 80%;"></div>
<div class="w-8 bg-blue-700" style="height: 40%;"></div>
</div>
</div>
</div>
</div>
<!-- Course Popularity -->
<div class="bg-white shadow rounded-lg p-6 card-hover">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900">Course Popularity</h3>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>All Programs</option>
<option>Youth Leadership</option>
<option>Executive Leadership</option>
</select>
<i data-feather="chevron-down" class="absolute right-2 top-1.5 text-gray-400"></i>
</div>
</div>
<div class="chart-container">
<!-- Chart placeholder - would be replaced with actual chart library -->
<div class="flex items-center h-full">
<div class="w-full">
<div class="flex items-center mb-2">
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<div class="text-sm text-gray-600">Leadership 101</div>
<div class="ml-auto text-sm font-medium">35%</div>
</div>
<div class="flex items-center mb-2">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
<div class="text-sm text-gray-600">Public Speaking</div>
<div class="ml-auto text-sm font-medium">25%</div>
</div>
<div class="flex items-center mb-2">
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<div class="text-sm text-gray-600">Strategic Thinking</div>
<div class="ml-auto text-sm font-medium">20%</div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
<div class="text-sm text-gray-600">Global Perspectives</div>
<div class="ml-auto text-sm font-medium">15%</div>
</div>
<div class="flex items-center mt-2">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<div class="text-sm text-gray-600">Other Courses</div>
<div class="ml-auto text-sm font-medium">5%</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="mb-8">
<h2 class="text-lg font-medium text-gray-900 mb-4">Recent Activity</h2>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
<h3 class="text-sm font-medium text-gray-500">Latest system activities</h3>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all</a>
</div>
<ul class="divide-y divide-gray-200">
<li>
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
<i data-feather="user-plus" class="h-5 w-5 text-blue-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">New student registration</p>
<p class="text-sm text-gray-500">Ahmed Al-Rashid registered for Leadership 101</p>
</div>
<div class="ml-auto text-sm text-gray-500">2 hours ago</div>
</div>
</div>
</li>
<li>
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-md p-2">
<i data-feather="check-circle" class="h-5 w-5 text-green-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Assignment submitted</p>
<p class="text-sm text-gray-500">Noor Ali submitted Reflection Paper for Week 3</p>
</div>
<div class="ml-auto text-sm text-gray-500">5 hours ago</div>
</div>
</div>
</li>
<li>
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-purple-100 rounded-md p-2">
<i data-feather="message-square" class="h-5 w-5 text-purple-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">New message</p>
<p class="text-sm text-gray-500">Karim Hassan sent a message regarding course schedule</p>
</div>
<div class="ml-auto text-sm text-gray-500">1 day ago</div>
</div>
</div>
</li>
<li>
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-yellow-100 rounded-md p-2">
<i data-fe
</body>
</html>