Hugging Face's logo

Spaces:
Bimarz
/
adminpanel
Running

App Files Community
adminpanel / index.html
Bimarz's picture
Bimarz
Add 2 files
50b9b26 verified
raw
history blame contribute delete
40.9 kB
 <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پنل مدیریت مدرسه</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>
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
body {
font-family: 'Noto Naskh Arabic', serif;
}
.sidebar-item:hover .sidebar-submenu {
display: block;
}
.chart-container {
height: 300px;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
</style>
</head>
<body class="bg-gray-100 text-gray-800">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-indigo-800 text-white">
<div class="flex items-center justify-center h-16 px-4 border-b border-indigo-700">
<div class="flex items-center">
<i class="fas fa-school text-2xl mr-2 text-indigo-300"></i>
<span class="text-xl font-bold">مدرسه دانش</span>
</div>
</div>
<div class="flex flex-col flex-grow overflow-y-auto">
<div class="px-4 py-6">
<div class="flex items-center px-4 py-3 bg-indigo-700 rounded-lg">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="مدیر">
<div class="mr-3">
<p class="text-sm font-medium">محمد رضایی</p>
<p class="text-xs text-indigo-200">مدیر مدرسه</p>
</div>
</div>
</div>
<nav class="flex-1 px-2 space-y-1">
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-700 text-white">
<i class="fas fa-tachometer-alt ml-2"></i>
داشبورد
</a>
<div class="sidebar-item relative">
<button class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<div class="flex items-center">
<i class="fas fa-users ml-2"></i>
دانش‌آموزان
</div>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="sidebar-submenu hidden absolute right-0 left-0 mt-1 py-1 bg-indigo-900 rounded-lg shadow-lg z-10">
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">لیست دانش‌آموزان</a>
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">ثبت دانش‌آموز جدید</a>
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">گزارشات حضور و غیاب</a>
</div>
</div>
<div class="sidebar-item relative">
<button class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<div class="flex items-center">
<i class="fas fa-chalkboard-teacher ml-2"></i>
معلمان
</div>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="sidebar-submenu hidden absolute right-0 left-0 mt-1 py-1 bg-indigo-900 rounded-lg shadow-lg z-10">
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">لیست معلمان</a>
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">ثبت معلم جدید</a>
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">برنامه تدریس</a>
</div>
</div>
<div class="sidebar-item relative">
<button class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<div class="flex items-center">
<i class="fas fa-book ml-2"></i>
دروس
</div>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="sidebar-submenu hidden absolute right-0 left-0 mt-1 py-1 bg-indigo-900 rounded-lg shadow-lg z-10">
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">لیست دروس</a>
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">ثبت درس جدید</a>
<a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">برنامه درسی</a>
</div>
</div>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<i class="fas fa-calendar-alt ml-2"></i>
برنامه هفتگی
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<i class="fas fa-clipboard-list ml-2"></i>
نمرات
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<i class="fas fa-money-bill-wave ml-2"></i>
مالی
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<i class="fas fa-bell ml-2"></i>
اعلانات
</a>
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-700 hover:text-white">
<i class="fas fa-cog ml-2"></i>
تنظیمات
</a>
</nav>
</div>
<div class="px-4 py-4 border-t border-indigo-700">
<a href="#" class="flex items-center text-sm font-medium text-indigo-200 hover:text-white">
<i class="fas fa-sign-out-alt ml-2"></i>
خروج از سیستم
</a>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top Navigation -->
<header class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
<div class="flex items-center">
<button class="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100">
<i class="fas fa-bars"></i>
</button>
<h1 class="text-lg font-semibold mr-4">داشبورد مدیریت</h1>
</div>
<div class="flex items-center space-x-4 space-x-reverse">
<div class="relative">
<button class="p-2 rounded-full text-gray-600 hover:bg-gray-100">
<i class="fas fa-bell"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
</div>
<div class="relative">
<button class="p-2 rounded-full text-gray-600 hover:bg-gray-100">
<i class="fas fa-envelope"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span>
</button>
</div>
<div class="relative">
<button class="flex items-center space-x-2 space-x-reverse">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="مدیر">
<span class="hidden md:inline">محمد رضایی</span>
</button>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto p-4 bg-gray-50">
<div class="mb-6">
<h2 class="text-xl font-semibold text-gray-800">خلاصه وضعیت مدرسه</h2>
<p class="text-gray-600">آمار و اطلاعات کلی مدرسه در یک نگاه</p>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">تعداد دانش‌آموزان</p>
<h3 class="text-2xl font-bold text-indigo-600">452</h3>
<p class="text-sm text-green-500 mt-1">
<i class="fas fa-arrow-up ml-1"></i>
12% افزایش نسبت به ماه گذشته
</p>
</div>
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-users text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">تعداد معلمان</p>
<h3 class="text-2xl font-bold text-blue-600">28</h3>
<p class="text-sm text-green-500 mt-1">
<i class="fas fa-arrow-up ml-1"></i>
2 نفر جدید
</p>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-chalkboard-teacher text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">معدل کل مدرسه</p>
<h3 class="text-2xl font-bold text-green-600">18.7</h3>
<p class="text-sm text-red-500 mt-1">
<i class="fas fa-arrow-down ml-1"></i>
0.3 کاهش نسبت به ترم قبل
</p>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i class="fas fa-chart-line text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">حضور امروز</p>
<h3 class="text-2xl font-bold text-purple-600">89%</h3>
<p class="text-sm text-gray-500 mt-1">
<i class="fas fa-info-circle ml-1"></i>
42 دانش‌آموز غایب
</p>
</div>
<div class="p-3 rounded-full bg-purple-100 text-purple-600">
<i class="fas fa-calendar-check text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Charts and Tables -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Attendance Chart -->
<div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">نمودار حضور و غیاب هفتگی</h3>
<div class="flex space-x-2 space-x-reverse">
<button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">هفتگی</button>
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg">ماهانه</button>
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg">سالانه</button>
</div>
</div>
<div class="chart-container">
<canvas id="attendanceChart"></canvas>
</div>
</div>
<!-- Recent Activities -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">فعالیت‌های اخیر</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
<i class="fas fa-user-plus"></i>
</div>
<div>
<p class="font-medium">دانش‌آموز جدید ثبت شد</p>
<p class="text-sm text-gray-500">علی محمدی در پایه هشتم ثبت نام کرد</p>
<p class="text-xs text-gray-400 mt-1">2 ساعت پیش</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
<i class="fas fa-check-circle"></i>
</div>
<div>
<p class="font-medium">جلسه معلمان برگزار شد</p>
<p class="text-sm text-gray-500">جلسه ماهانه معلمان با موضوع بهبود کیفیت تدریس</p>
<p class="text-xs text-gray-400 mt-1">دیروز</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div>
<p class="font-medium">هشدار حضور و غیاب</p>
<p class="text-sm text-gray-500">3 دانش‌آموز بیش از 3 جلسه غیبت داشته‌اند</p>
<p class="text-xs text-gray-400 mt-1">2 روز پیش</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
<i class="fas fa-money-bill-wave"></i>
</div>
<div>
<p class="font-medium">پرداخت شهریه</p>
<p class="text-sm text-gray-500">85% دانش‌آموزان شهریه این ماه را پرداخت کرده‌اند</p>
<p class="text-xs text-gray-400 mt-1">3 روز پیش</p>
</div>
</div>
</div>
</div>
</div>
<!-- Students Table -->
<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">دانش‌آموزان جدید</h3>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
مشاهده همه
</button>
</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-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام و نام خانوادگی</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">پایه تحصیلی</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شماره تماس</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ ثبت‌نام</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</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/men/1.jpg" alt="">
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">رضا محمدی</div>
<div class="text-sm text-gray-500">کد: 98001</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">هفتم</div>
<div class="text-sm text-gray-500">کلاس 102</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
09123456789
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1402/05/15
</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">
فعال
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
<a href="#" class="text-red-600 hover:text-red-900">حذف</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/2.jpg" alt="">
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">فاطمه احمدی</div>
<div class="text-sm text-gray-500">کد: 98002</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">نهم</div>
<div class="text-sm text-gray-500">کلاس 203</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
09129876543
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1402/05/10
</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">
فعال
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
<a href="#" class="text-red-600 hover:text-red-900">حذف</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/3.jpg" alt="">
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">امیر حسینی</div>
<div class="text-sm text-gray-500">کد: 98003</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">دهم</div>
<div class="text-sm text-gray-500">کلاس 301</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
09121112233
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1402/05/05
</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">
در انتظار پرداخت
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
<a href="#" class="text-red-600 hover:text-red-900">حذف</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/4.jpg" alt="">
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">زهرا رضایی</div>
<div class="text-sm text-gray-500">کد: 98004</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">یازدهم</div>
<div class="text-sm text-gray-500">کلاس 402</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
09124445566
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1402/04/28
</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">
فعال
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
<a href="#" class="text-red-600 hover:text-red-900">حذف</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-500">
نمایش <span class="font-medium">1</span> تا <span class="font-medium">4</span> از <span class="font-medium">452</span> دانش‌آموز
</div>
<div class="flex space-x-2 space-x-reverse">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">قبلی</button>
<button class="px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">3</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">بعدی</button>
</div>
</div>
</div>
</div>
<!-- Upcoming Events -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">رویدادهای پیش‌رو</h3>
<div class="space-y-4">
<div class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-2 rounded-full bg-red-100 text-red-600 mr-3">
<i class="fas fa-calendar-day"></i>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium">امتحان میان‌ترم ریاضی</h4>
<span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">فوری</span>
</div>
<p class="text-sm text-gray-500 mt-1">امتحان میان‌ترم ریاضی پایه نهم</p>
<div class="flex items-center mt-2 text-sm text-gray-500">
<i class="far fa-clock ml-1"></i>
<span>1402/05/20 - ساعت 10:00</span>
</div>
</div>
</div>
<div class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
<i class="fas fa-users"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">جلسه اولیا و مربیان</h4>
<p class="text-sm text-gray-500 mt-1">جلسه عمومی اولیا و مربیان پایه هفتم</p>
<div class="flex items-center mt-2 text-sm text-gray-500">
<i class="far fa-clock ml-1"></i>
<span>1402/05/25 - ساعت 16:00</span>
</div>
</div>
</div>
<div class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">مراسم تقدیر از دانش‌آموزان برتر</h4>
<p class="text-sm text-gray-500 mt-1">تقدیر از دانش‌آموزان برتر ترم اول</p>
<div class="flex items-center mt-2 text-sm text-gray-500">
<i class="far fa-clock ml-1"></i>
<span>1402/06/05 - ساعت 9:00</span>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">عملیات سریع</h3>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mb-2">
<i class="fas fa-user-plus text-xl"></i>
</div>
<span class="text-sm font-medium">ثبت دانش‌آموز جدید</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
<i class="fas fa-chalkboard-teacher text-xl"></i>
</div>
<span class="text-sm font-medium">ثبت معلم جدید</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-3 rounded-full bg-green-100 text-green-600 mb-2">
<i class="fas fa-clipboard-list text-xl"></i>
</div>
<span class="text-sm font-medium">ثبت نمرات</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
<i class="fas fa-bullhorn text-xl"></i>
</div>
<span class="text-sm font-medium">ارسال اعلان</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
<i class="fas fa-file-invoice-dollar text-xl"></i>
</div>
<span class="text-sm font-medium">گزارش مالی</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="p-3 rounded-full bg-red-100 text-red-600 mb-2">
<i class="fas fa-cog text-xl"></i>
</div>
<span class="text-sm font-medium">تنظیمات سیستم</span>
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Initialize sidebar functionality
document.addEventListener('DOMContentLoaded', function() {
// Toggle sidebar items
const sidebarItems = document.querySelectorAll('.sidebar-item');
sidebarItems.forEach(item => {
item.addEventListener('click', function(e) {
if (e.target.closest('button')) {
const submenu = this.querySelector('.sidebar-submenu');
submenu.classList.toggle('hidden');
}
});
});
// Close submenus when clicking outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.sidebar-item')) {
document.querySelectorAll('.sidebar-submenu').forEach(submenu => {
submenu.classList.add('hidden');
});
}
});
// Mobile menu toggle
const mobileMenuButton = document.querySelector('button[class*="md:hidden"]');
const sidebar = document.querySelector('.hidden.md\\:flex');
if (mobileMenuButton && sidebar) {
mobileMenuButton.addEventListener('click', function() {
sidebar.classList.toggle('hidden');
});
}
// Initialize attendance chart
const ctx = document.getElementById('attendanceChart').getContext('2d');
const attendanceChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنجشنبه'],
datasets: [{
label: 'حضور (%)',
data: [92, 95, 89, 87, 91, 85],
backgroundColor: 'rgba(79, 70, 229, 0.
</html>