Hugging Face's logo

Spaces:
Bimarz
/
adminpanel
Running

App Files Community
Bimarz commited on
Commit
50b9b26
·
verified ·
1 Parent(s): 8b7040a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +641 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Adminpanel
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: adminpanel
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,641 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>پنل مدیریت مدرسه</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Naskh Arabic', serif;
14
+ }
15
+
16
+ .sidebar-item:hover .sidebar-submenu {
17
+ display: block;
18
+ }
19
+
20
+ .chart-container {
21
+ height: 300px;
22
+ }
23
+
24
+ .animate-pulse {
25
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
26
+ }
27
+
28
+ @keyframes pulse {
29
+ 0%, 100% {
30
+ opacity: 1;
31
+ }
32
+ 50% {
33
+ opacity: 0.5;
34
+ }
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-100 text-gray-800">
39
+ <div class="flex h-screen overflow-hidden">
40
+ <!-- Sidebar -->
41
+ <div class="hidden md:flex md:flex-shrink-0">
42
+ <div class="flex flex-col w-64 bg-indigo-800 text-white">
43
+ <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-700">
44
+ <div class="flex items-center">
45
+ <i class="fas fa-school text-2xl mr-2 text-indigo-300"></i>
46
+ <span class="text-xl font-bold">مدرسه دانش</span>
47
+ </div>
48
+ </div>
49
+ <div class="flex flex-col flex-grow overflow-y-auto">
50
+ <div class="px-4 py-6">
51
+ <div class="flex items-center px-4 py-3 bg-indigo-700 rounded-lg">
52
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="مدیر">
53
+ <div class="mr-3">
54
+ <p class="text-sm font-medium">محمد رضایی</p>
55
+ <p class="text-xs text-indigo-200">مدیر مدرسه</p>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ <nav class="flex-1 px-2 space-y-1">
60
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-700 text-white">
61
+ <i class="fas fa-tachometer-alt ml-2"></i>
62
+ داشبورد
63
+ </a>
64
+
65
+ <div class="sidebar-item relative">
66
+ <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">
67
+ <div class="flex items-center">
68
+ <i class="fas fa-users ml-2"></i>
69
+ دانش‌آموزان
70
+ </div>
71
+ <i class="fas fa-chevron-down text-xs"></i>
72
+ </button>
73
+ <div class="sidebar-submenu hidden absolute right-0 left-0 mt-1 py-1 bg-indigo-900 rounded-lg shadow-lg z-10">
74
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">لیست دانش‌آموزان</a>
75
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">ثبت دانش‌آموز جدید</a>
76
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">گزارشات حضور و غیاب</a>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="sidebar-item relative">
81
+ <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">
82
+ <div class="flex items-center">
83
+ <i class="fas fa-chalkboard-teacher ml-2"></i>
84
+ معلمان
85
+ </div>
86
+ <i class="fas fa-chevron-down text-xs"></i>
87
+ </button>
88
+ <div class="sidebar-submenu hidden absolute right-0 left-0 mt-1 py-1 bg-indigo-900 rounded-lg shadow-lg z-10">
89
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">لیست معلمان</a>
90
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">ثبت معلم جدید</a>
91
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">برنامه تدریس</a>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="sidebar-item relative">
96
+ <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">
97
+ <div class="flex items-center">
98
+ <i class="fas fa-book ml-2"></i>
99
+ دروس
100
+ </div>
101
+ <i class="fas fa-chevron-down text-xs"></i>
102
+ </button>
103
+ <div class="sidebar-submenu hidden absolute right-0 left-0 mt-1 py-1 bg-indigo-900 rounded-lg shadow-lg z-10">
104
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">لیست دروس</a>
105
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">ثبت درس جدید</a>
106
+ <a href="#" class="block px-4 py-2 text-sm text-indigo-200 hover:bg-indigo-800">برنامه درسی</a>
107
+ </div>
108
+ </div>
109
+
110
+ <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">
111
+ <i class="fas fa-calendar-alt ml-2"></i>
112
+ برنامه هفتگی
113
+ </a>
114
+
115
+ <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">
116
+ <i class="fas fa-clipboard-list ml-2"></i>
117
+ نمرات
118
+ </a>
119
+
120
+ <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">
121
+ <i class="fas fa-money-bill-wave ml-2"></i>
122
+ مالی
123
+ </a>
124
+
125
+ <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">
126
+ <i class="fas fa-bell ml-2"></i>
127
+ اعلانات
128
+ </a>
129
+
130
+ <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">
131
+ <i class="fas fa-cog ml-2"></i>
132
+ تنظیمات
133
+ </a>
134
+ </nav>
135
+ </div>
136
+ <div class="px-4 py-4 border-t border-indigo-700">
137
+ <a href="#" class="flex items-center text-sm font-medium text-indigo-200 hover:text-white">
138
+ <i class="fas fa-sign-out-alt ml-2"></i>
139
+ خروج از سیستم
140
+ </a>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Main Content -->
146
+ <div class="flex flex-col flex-1 overflow-hidden">
147
+ <!-- Top Navigation -->
148
+ <header class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
149
+ <div class="flex items-center">
150
+ <button class="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100">
151
+ <i class="fas fa-bars"></i>
152
+ </button>
153
+ <h1 class="text-lg font-semibold mr-4">داشبورد مدیریت</h1>
154
+ </div>
155
+
156
+ <div class="flex items-center space-x-4 space-x-reverse">
157
+ <div class="relative">
158
+ <button class="p-2 rounded-full text-gray-600 hover:bg-gray-100">
159
+ <i class="fas fa-bell"></i>
160
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
161
+ </button>
162
+ </div>
163
+ <div class="relative">
164
+ <button class="p-2 rounded-full text-gray-600 hover:bg-gray-100">
165
+ <i class="fas fa-envelope"></i>
166
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span>
167
+ </button>
168
+ </div>
169
+ <div class="relative">
170
+ <button class="flex items-center space-x-2 space-x-reverse">
171
+ <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="مدیر">
172
+ <span class="hidden md:inline">محمد رضایی</span>
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </header>
177
+
178
+ <!-- Main Content Area -->
179
+ <main class="flex-1 overflow-y-auto p-4 bg-gray-50">
180
+ <div class="mb-6">
181
+ <h2 class="text-xl font-semibold text-gray-800">خلاصه وضعیت مدرسه</h2>
182
+ <p class="text-gray-600">آمار و اطلاعات کلی مدرسه در یک نگاه</p>
183
+ </div>
184
+
185
+ <!-- Stats Cards -->
186
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
187
+ <div class="bg-white rounded-lg shadow p-6">
188
+ <div class="flex items-center justify-between">
189
+ <div>
190
+ <p class="text-gray-500">تعداد دانش‌آموزان</p>
191
+ <h3 class="text-2xl font-bold text-indigo-600">452</h3>
192
+ <p class="text-sm text-green-500 mt-1">
193
+ <i class="fas fa-arrow-up ml-1"></i>
194
+ 12% افزایش نسبت به ماه گذشته
195
+ </p>
196
+ </div>
197
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
198
+ <i class="fas fa-users text-xl"></i>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="bg-white rounded-lg shadow p-6">
204
+ <div class="flex items-center justify-between">
205
+ <div>
206
+ <p class="text-gray-500">تعداد معلمان</p>
207
+ <h3 class="text-2xl font-bold text-blue-600">28</h3>
208
+ <p class="text-sm text-green-500 mt-1">
209
+ <i class="fas fa-arrow-up ml-1"></i>
210
+ 2 نفر جدید
211
+ </p>
212
+ </div>
213
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
214
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="bg-white rounded-lg shadow p-6">
220
+ <div class="flex items-center justify-between">
221
+ <div>
222
+ <p class="text-gray-500">معدل کل مدرسه</p>
223
+ <h3 class="text-2xl font-bold text-green-600">18.7</h3>
224
+ <p class="text-sm text-red-500 mt-1">
225
+ <i class="fas fa-arrow-down ml-1"></i>
226
+ 0.3 کاهش نسبت به ترم قبل
227
+ </p>
228
+ </div>
229
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
230
+ <i class="fas fa-chart-line text-xl"></i>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="bg-white rounded-lg shadow p-6">
236
+ <div class="flex items-center justify-between">
237
+ <div>
238
+ <p class="text-gray-500">حضور امروز</p>
239
+ <h3 class="text-2xl font-bold text-purple-600">89%</h3>
240
+ <p class="text-sm text-gray-500 mt-1">
241
+ <i class="fas fa-info-circle ml-1"></i>
242
+ 42 دانش‌آموز غایب
243
+ </p>
244
+ </div>
245
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
246
+ <i class="fas fa-calendar-check text-xl"></i>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Charts and Tables -->
253
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
254
+ <!-- Attendance Chart -->
255
+ <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
256
+ <div class="flex items-center justify-between mb-4">
257
+ <h3 class="text-lg font-semibold">نمودار حضور و غیاب هفتگی</h3>
258
+ <div class="flex space-x-2 space-x-reverse">
259
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">هفتگی</button>
260
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg">ماهانه</button>
261
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg">سالانه</button>
262
+ </div>
263
+ </div>
264
+ <div class="chart-container">
265
+ <canvas id="attendanceChart"></canvas>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Recent Activities -->
270
+ <div class="bg-white rounded-lg shadow p-6">
271
+ <h3 class="text-lg font-semibold mb-4">فعالیت‌های اخیر</h3>
272
+ <div class="space-y-4">
273
+ <div class="flex items-start">
274
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
275
+ <i class="fas fa-user-plus"></i>
276
+ </div>
277
+ <div>
278
+ <p class="font-medium">دانش‌آموز جدید ثبت شد</p>
279
+ <p class="text-sm text-gray-500">علی محمدی در پایه هشتم ثبت نام کرد</p>
280
+ <p class="text-xs text-gray-400 mt-1">2 ساعت پیش</p>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="flex items-start">
285
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
286
+ <i class="fas fa-check-circle"></i>
287
+ </div>
288
+ <div>
289
+ <p class="font-medium">جلسه معلمان برگزار شد</p>
290
+ <p class="text-sm text-gray-500">جلسه ماهانه معلمان با موضوع بهبود کیفیت تدریس</p>
291
+ <p class="text-xs text-gray-400 mt-1">دیروز</p>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="flex items-start">
296
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
297
+ <i class="fas fa-exclamation-triangle"></i>
298
+ </div>
299
+ <div>
300
+ <p class="font-medium">هشدار حضور و غیاب</p>
301
+ <p class="text-sm text-gray-500">3 دانش‌آموز بیش از 3 جلسه غیبت داشته‌اند</p>
302
+ <p class="text-xs text-gray-400 mt-1">2 روز پیش</p>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="flex items-start">
307
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
308
+ <i class="fas fa-money-bill-wave"></i>
309
+ </div>
310
+ <div>
311
+ <p class="font-medium">پرداخت شهریه</p>
312
+ <p class="text-sm text-gray-500">85% دانش‌آموزان شهریه این ماه را پرداخت کرده‌اند</p>
313
+ <p class="text-xs text-gray-400 mt-1">3 روز پیش</p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Students Table -->
321
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
322
+ <div class="p-6 border-b border-gray-200">
323
+ <div class="flex items-center justify-between">
324
+ <h3 class="text-lg font-semibold">دانش‌آموزان جدید</h3>
325
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
326
+ مشاهده همه
327
+ </button>
328
+ </div>
329
+ </div>
330
+ <div class="overflow-x-auto">
331
+ <table class="min-w-full divide-y divide-gray-200">
332
+ <thead class="bg-gray-50">
333
+ <tr>
334
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نام و نام خانوادگی</th>
335
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">پایه تحصیلی</th>
336
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">شماره تماس</th>
337
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ ثبت‌نام</th>
338
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
339
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th>
340
+ </tr>
341
+ </thead>
342
+ <tbody class="bg-white divide-y divide-gray-200">
343
+ <tr>
344
+ <td class="px-6 py-4 whitespace-nowrap">
345
+ <div class="flex items-center">
346
+ <div class="flex-shrink-0 h-10 w-10">
347
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
348
+ </div>
349
+ <div class="mr-4">
350
+ <div class="text-sm font-medium text-gray-900">رضا محمدی</div>
351
+ <div class="text-sm text-gray-500">کد: 98001</div>
352
+ </div>
353
+ </div>
354
+ </td>
355
+ <td class="px-6 py-4 whitespace-nowrap">
356
+ <div class="text-sm text-gray-900">هفتم</div>
357
+ <div class="text-sm text-gray-500">کلاس 102</div>
358
+ </td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
360
+ 09123456789
361
+ </td>
362
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
363
+ 1402/05/15
364
+ </td>
365
+ <td class="px-6 py-4 whitespace-nowrap">
366
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
367
+ فعال
368
+ </span>
369
+ </td>
370
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
371
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
372
+ <a href="#" class="text-red-600 hover:text-red-900">حذف</a>
373
+ </td>
374
+ </tr>
375
+
376
+ <tr>
377
+ <td class="px-6 py-4 whitespace-nowrap">
378
+ <div class="flex items-center">
379
+ <div class="flex-shrink-0 h-10 w-10">
380
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
381
+ </div>
382
+ <div class="mr-4">
383
+ <div class="text-sm font-medium text-gray-900">فاطمه احمدی</div>
384
+ <div class="text-sm text-gray-500">کد: 98002</div>
385
+ </div>
386
+ </div>
387
+ </td>
388
+ <td class="px-6 py-4 whitespace-nowrap">
389
+ <div class="text-sm text-gray-900">نهم</div>
390
+ <div class="text-sm text-gray-500">کلاس 203</div>
391
+ </td>
392
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
393
+ 09129876543
394
+ </td>
395
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
396
+ 1402/05/10
397
+ </td>
398
+ <td class="px-6 py-4 whitespace-nowrap">
399
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
400
+ فعال
401
+ </span>
402
+ </td>
403
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
404
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
405
+ <a href="#" class="text-red-600 hover:text-red-900">حذف</a>
406
+ </td>
407
+ </tr>
408
+
409
+ <tr>
410
+ <td class="px-6 py-4 whitespace-nowrap">
411
+ <div class="flex items-center">
412
+ <div class="flex-shrink-0 h-10 w-10">
413
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
414
+ </div>
415
+ <div class="mr-4">
416
+ <div class="text-sm font-medium text-gray-900">امیر حسینی</div>
417
+ <div class="text-sm text-gray-500">کد: 98003</div>
418
+ </div>
419
+ </div>
420
+ </td>
421
+ <td class="px-6 py-4 whitespace-nowrap">
422
+ <div class="text-sm text-gray-900">دهم</div>
423
+ <div class="text-sm text-gray-500">کلاس 301</div>
424
+ </td>
425
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
426
+ 09121112233
427
+ </td>
428
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
429
+ 1402/05/05
430
+ </td>
431
+ <td class="px-6 py-4 whitespace-nowrap">
432
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
433
+ در انتظار پرداخت
434
+ </span>
435
+ </td>
436
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
437
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
438
+ <a href="#" class="text-red-600 hover:text-red-900">حذف</a>
439
+ </td>
440
+ </tr>
441
+
442
+ <tr>
443
+ <td class="px-6 py-4 whitespace-nowrap">
444
+ <div class="flex items-center">
445
+ <div class="flex-shrink-0 h-10 w-10">
446
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="">
447
+ </div>
448
+ <div class="mr-4">
449
+ <div class="text-sm font-medium text-gray-900">زهرا رضایی</div>
450
+ <div class="text-sm text-gray-500">کد: 98004</div>
451
+ </div>
452
+ </div>
453
+ </td>
454
+ <td class="px-6 py-4 whitespace-nowrap">
455
+ <div class="text-sm text-gray-900">یازدهم</div>
456
+ <div class="text-sm text-gray-500">کلاس 402</div>
457
+ </td>
458
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
459
+ 09124445566
460
+ </td>
461
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
462
+ 1402/04/28
463
+ </td>
464
+ <td class="px-6 py-4 whitespace-nowrap">
465
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
466
+ فعال
467
+ </span>
468
+ </td>
469
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
470
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">مشاهده</a>
471
+ <a href="#" class="text-red-600 hover:text-red-900">حذف</a>
472
+ </td>
473
+ </tr>
474
+ </tbody>
475
+ </table>
476
+ </div>
477
+ <div class="px-6 py-4 border-t border-gray-200">
478
+ <div class="flex items-center justify-between">
479
+ <div class="text-sm text-gray-500">
480
+ نمایش <span class="font-medium">1</span> تا <span class="font-medium">4</span> از <span class="font-medium">452</span> دانش‌آموز
481
+ </div>
482
+ <div class="flex space-x-2 space-x-reverse">
483
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">قبلی</button>
484
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">1</button>
485
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">2</button>
486
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">3</button>
487
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">بعدی</button>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Upcoming Events -->
494
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
495
+ <div class="bg-white rounded-lg shadow p-6">
496
+ <h3 class="text-lg font-semibold mb-4">رویدادهای پیش‌رو</h3>
497
+ <div class="space-y-4">
498
+ <div class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
499
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3">
500
+ <i class="fas fa-calendar-day"></i>
501
+ </div>
502
+ <div class="flex-1">
503
+ <div class="flex items-center justify-between">
504
+ <h4 class="font-medium">امتحان میان‌ترم ریاضی</h4>
505
+ <span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">فوری</span>
506
+ </div>
507
+ <p class="text-sm text-gray-500 mt-1">امتحان میان‌ترم ریاضی پایه نهم</p>
508
+ <div class="flex items-center mt-2 text-sm text-gray-500">
509
+ <i class="far fa-clock ml-1"></i>
510
+ <span>1402/05/20 - ساعت 10:00</span>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
516
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
517
+ <i class="fas fa-users"></i>
518
+ </div>
519
+ <div class="flex-1">
520
+ <h4 class="font-medium">جلسه اولیا و مربیان</h4>
521
+ <p class="text-sm text-gray-500 mt-1">جلسه عمومی اولیا و مربیان پایه هفتم</p>
522
+ <div class="flex items-center mt-2 text-sm text-gray-500">
523
+ <i class="far fa-clock ml-1"></i>
524
+ <span>1402/05/25 - ساعت 16:00</span>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <div class="flex items-start p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
530
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
531
+ <i class="fas fa-graduation-cap"></i>
532
+ </div>
533
+ <div class="flex-1">
534
+ <h4 class="font-medium">مراسم تقدیر از دانش‌آموزان برتر</h4>
535
+ <p class="text-sm text-gray-500 mt-1">تقدیر از دانش‌آموزان برتر ترم اول</p>
536
+ <div class="flex items-center mt-2 text-sm text-gray-500">
537
+ <i class="far fa-clock ml-1"></i>
538
+ <span>1402/06/05 - ساعت 9:00</span>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+
545
+ <!-- Quick Actions -->
546
+ <div class="bg-white rounded-lg shadow p-6">
547
+ <h3 class="text-lg font-semibold mb-4">عملیات سریع</h3>
548
+ <div class="grid grid-cols-2 gap-4">
549
+ <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
550
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mb-2">
551
+ <i class="fas fa-user-plus text-xl"></i>
552
+ </div>
553
+ <span class="text-sm font-medium">ثبت دانش‌آموز جدید</span>
554
+ </a>
555
+
556
+ <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
557
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
558
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
559
+ </div>
560
+ <span class="text-sm font-medium">ثبت معلم جدید</span>
561
+ </a>
562
+
563
+ <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
564
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2">
565
+ <i class="fas fa-clipboard-list text-xl"></i>
566
+ </div>
567
+ <span class="text-sm font-medium">ثبت نمرات</span>
568
+ </a>
569
+
570
+ <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
571
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
572
+ <i class="fas fa-bullhorn text-xl"></i>
573
+ </div>
574
+ <span class="text-sm font-medium">ارسال اعلان</span>
575
+ </a>
576
+
577
+ <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
578
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
579
+ <i class="fas fa-file-invoice-dollar text-xl"></i>
580
+ </div>
581
+ <span class="text-sm font-medium">گزارش مالی</span>
582
+ </a>
583
+
584
+ <a href="#" class="flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
585
+ <div class="p-3 rounded-full bg-red-100 text-red-600 mb-2">
586
+ <i class="fas fa-cog text-xl"></i>
587
+ </div>
588
+ <span class="text-sm font-medium">تنظیمات سیستم</span>
589
+ </a>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </main>
594
+ </div>
595
+ </div>
596
+
597
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
598
+ <script>
599
+ // Initialize sidebar functionality
600
+ document.addEventListener('DOMContentLoaded', function() {
601
+ // Toggle sidebar items
602
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
603
+ sidebarItems.forEach(item => {
604
+ item.addEventListener('click', function(e) {
605
+ if (e.target.closest('button')) {
606
+ const submenu = this.querySelector('.sidebar-submenu');
607
+ submenu.classList.toggle('hidden');
608
+ }
609
+ });
610
+ });
611
+
612
+ // Close submenus when clicking outside
613
+ document.addEventListener('click', function(e) {
614
+ if (!e.target.closest('.sidebar-item')) {
615
+ document.querySelectorAll('.sidebar-submenu').forEach(submenu => {
616
+ submenu.classList.add('hidden');
617
+ });
618
+ }
619
+ });
620
+
621
+ // Mobile menu toggle
622
+ const mobileMenuButton = document.querySelector('button[class*="md:hidden"]');
623
+ const sidebar = document.querySelector('.hidden.md\\:flex');
624
+
625
+ if (mobileMenuButton && sidebar) {
626
+ mobileMenuButton.addEventListener('click', function() {
627
+ sidebar.classList.toggle('hidden');
628
+ });
629
+ }
630
+
631
+ // Initialize attendance chart
632
+ const ctx = document.getElementById('attendanceChart').getContext('2d');
633
+ const attendanceChart = new Chart(ctx, {
634
+ type: 'bar',
635
+ data: {
636
+ labels: ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنجشنبه'],
637
+ datasets: [{
638
+ label: 'حضور (%)',
639
+ data: [92, 95, 89, 87, 91, 85],
640
+ backgroundColor: 'rgba(79, 70, 229, 0.
641
+ </html>