Hugging Face's logo

Spaces:
iBehzad
/
crm
Running

App Files Community
iBehzad commited on
Commit
5fc66e1
·
verified ·
1 Parent(s): f9dd8c5

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1072 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Crm
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: purple
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: crm
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,1072 @@
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="en" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام مدیریت منابع انسانی | HRM System</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
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ fontFamily: {
14
+ 'sans': ['Vazir', 'Tahoma', 'sans-serif'],
15
+ },
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 50: '#f0f9ff',
20
+ 100: '#e0f2fe',
21
+ 200: '#bae6fd',
22
+ 300: '#7dd3fc',
23
+ 400: '#38bdf8',
24
+ 500: '#0ea5e9',
25
+ 600: '#0284c7',
26
+ 700: '#0369a1',
27
+ 800: '#075985',
28
+ 900: '#0c4a6e',
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ <style>
36
+ @font-face {
37
+ font-family: 'Vazir';
38
+ src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/Vazir.woff2') format('woff2');
39
+ font-weight: normal;
40
+ font-style: normal;
41
+ }
42
+
43
+ body {
44
+ font-family: 'Vazir', Tahoma, sans-serif;
45
+ }
46
+
47
+ /* Custom scrollbar */
48
+ ::-webkit-scrollbar {
49
+ width: 8px;
50
+ height: 8px;
51
+ }
52
+
53
+ ::-webkit-scrollbar-track {
54
+ background: #f1f1f1;
55
+ }
56
+
57
+ ::-webkit-scrollbar-thumb {
58
+ background: #888;
59
+ border-radius: 4px;
60
+ }
61
+
62
+ ::-webkit-scrollbar-thumb:hover {
63
+ background: #555;
64
+ }
65
+
66
+ .dark ::-webkit-scrollbar-track {
67
+ background: #374151;
68
+ }
69
+
70
+ .dark ::-webkit-scrollbar-thumb {
71
+ background: #6b7280;
72
+ }
73
+
74
+ /* Persian calendar input */
75
+ .jalali-date-input {
76
+ direction: ltr;
77
+ text-align: right;
78
+ }
79
+
80
+ /* Animation for notifications */
81
+ @keyframes fadeIn {
82
+ from { opacity: 0; transform: translateY(10px); }
83
+ to { opacity: 1; transform: translateY(0); }
84
+ }
85
+
86
+ .notification-item {
87
+ animation: fadeIn 0.3s ease-out;
88
+ }
89
+
90
+ /* Employee photo upload */
91
+ .employee-photo-upload {
92
+ position: relative;
93
+ overflow: hidden;
94
+ display: inline-block;
95
+ }
96
+
97
+ .employee-photo-upload input[type="file"] {
98
+ position: absolute;
99
+ left: 0;
100
+ top: 0;
101
+ opacity: 0;
102
+ width: 100%;
103
+ height: 100%;
104
+ cursor: pointer;
105
+ }
106
+
107
+ /* Custom switch */
108
+ .switch {
109
+ position: relative;
110
+ display: inline-block;
111
+ width: 50px;
112
+ height: 24px;
113
+ }
114
+
115
+ .switch input {
116
+ opacity: 0;
117
+ width: 0;
118
+ height: 0;
119
+ }
120
+
121
+ .slider {
122
+ position: absolute;
123
+ cursor: pointer;
124
+ top: 0;
125
+ left: 0;
126
+ right: 0;
127
+ bottom: 0;
128
+ background-color: #ccc;
129
+ transition: .4s;
130
+ border-radius: 24px;
131
+ }
132
+
133
+ .slider:before {
134
+ position: absolute;
135
+ content: "";
136
+ height: 16px;
137
+ width: 16px;
138
+ left: 4px;
139
+ bottom: 4px;
140
+ background-color: white;
141
+ transition: .4s;
142
+ border-radius: 50%;
143
+ }
144
+
145
+ input:checked + .slider {
146
+ background-color: #0ea5e9;
147
+ }
148
+
149
+ input:checked + .slider:before {
150
+ transform: translateX(26px);
151
+ }
152
+ </style>
153
+ </head>
154
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
155
+ <div class="min-h-screen flex flex-col">
156
+ <!-- Header -->
157
+ <header class="bg-white dark:bg-gray-800 shadow-md py-4 px-6 flex justify-between items-center">
158
+ <div class="flex items-center space-x-4 space-x-reverse">
159
+ <button id="sidebar-toggle" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
160
+ <i class="fas fa-bars text-xl"></i>
161
+ </button>
162
+ <h1 class="text-xl font-bold text-primary-600 dark:text-primary-400">نظام مدیریت منابع انسانی</h1>
163
+ </div>
164
+ <div class="flex items-center space-x-4 space-x-reverse">
165
+ <div class="relative">
166
+ <button id="notification-btn" class="relative text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
167
+ <i class="fas fa-bell text-xl"></i>
168
+ <span id="notification-badge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
169
+ </button>
170
+ <div id="notification-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto">
171
+ <div class="p-3 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
172
+ <h3 class="font-semibold">اعلانات</h3>
173
+ <button id="mark-all-read" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">خواندن همه</button>
174
+ </div>
175
+ <div id="notification-list" class="divide-y divide-gray-200 dark:divide-gray-700">
176
+ <!-- Notifications will be added here dynamically -->
177
+ <div class="p-3 text-center text-gray-500 dark:text-gray-400">هیچ اعلانی وجود ندارد</div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ <div class="flex items-center space-x-2 space-x-reverse">
182
+ <img src="https://ui-avatars.com/api/?name=مدیر+سیستم&background=0ea5e9&color=fff" alt="Profile" class="w-8 h-8 rounded-full">
183
+ <span class="font-medium hidden md:inline">مدیر سیستم</span>
184
+ </div>
185
+ <button id="dark-mode-toggle" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
186
+ <i class="fas fa-moon text-xl dark:hidden"></i>
187
+ <i class="fas fa-sun text-xl hidden dark:inline"></i>
188
+ </button>
189
+ </div>
190
+ </header>
191
+
192
+ <div class="flex flex-1">
193
+ <!-- Sidebar -->
194
+ <aside id="sidebar" class="w-64 bg-white dark:bg-gray-800 shadow-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 fixed md:static h-full z-40">
195
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
196
+ <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-300">منو</h2>
197
+ </div>
198
+ <nav class="p-2">
199
+ <ul class="space-y-1">
200
+ <li>
201
+ <a href="#" class="dashboard-link flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
202
+ <i class="fas fa-tachometer-alt ml-2"></i>
203
+ <span>داشبورد</span>
204
+ </a>
205
+ </li>
206
+ <li>
207
+ <a href="#" class="employees-link flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
208
+ <i class="fas fa-users ml-2"></i>
209
+ <span>کارمندان</span>
210
+ </a>
211
+ </li>
212
+ <li>
213
+ <a href="#" class="requests-link flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
214
+ <i class="fas fa-file-alt ml-2"></i>
215
+ <span>درخواست‌ها</span>
216
+ </a>
217
+ </li>
218
+ <li>
219
+ <a href="#" class="payroll-link flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
220
+ <i class="fas fa-money-bill-wave ml-2"></i>
221
+ <span>حقوق و دستمزد</span>
222
+ </a>
223
+ </li>
224
+ <li>
225
+ <a href="#" class="reports-link flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
226
+ <i class="fas fa-chart-bar ml-2"></i>
227
+ <span>گزارشات</span>
228
+ </a>
229
+ </li>
230
+ <li>
231
+ <a href="#" class="settings-link flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
232
+ <i class="fas fa-cog ml-2"></i>
233
+ <span>تنظیمات</span>
234
+ </a>
235
+ </li>
236
+ </ul>
237
+ </nav>
238
+ </aside>
239
+
240
+ <!-- Main Content -->
241
+ <main class="flex-1 p-6 ml-0 md:ml-64 transition-all duration-300">
242
+ <!-- Dashboard Content (Default View) -->
243
+ <div id="dashboard-content">
244
+ <div class="mb-6 flex justify-between items-center">
245
+ <h2 class="text-2xl font-bold">داشبورد مدیریتی</h2>
246
+ <div class="flex items-center space-x-2 space-x-reverse">
247
+ <span class="text-sm text-gray-600 dark:text-gray-400">امروز:</span>
248
+ <span id="current-date" class="text-sm font-medium">1402/05/15</span>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Stats Cards -->
253
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
254
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
255
+ <div class="flex items-center justify-between">
256
+ <div>
257
+ <p class="text-gray-500 dark:text-gray-400">تعداد کارمندان</p>
258
+ <h3 class="text-2xl font-bold mt-2">47</h3>
259
+ </div>
260
+ <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400">
261
+ <i class="fas fa-users text-xl"></i>
262
+ </div>
263
+ </div>
264
+ <p class="text-sm text-green-500 mt-2"><i class="fas fa-arrow-up ml-1"></i> 5% افزایش نسبت به ماه قبل</p>
265
+ </div>
266
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
267
+ <div class="flex items-center justify-between">
268
+ <div>
269
+ <p class="text-gray-500 dark:text-gray-400">درخواست‌های جدید</p>
270
+ <h3 class="text-2xl font-bold mt-2">12</h3>
271
+ </div>
272
+ <div class="p-3 rounded-full bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-400">
273
+ <i class="fas fa-file-alt text-xl"></i>
274
+ </div>
275
+ </div>
276
+ <p class="text-sm text-red-500 mt-2"><i class="fas fa-arrow-down ml-1"></i> 2% کاهش نسبت به ماه قبل</p>
277
+ </div>
278
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
279
+ <div class="flex items-center justify-between">
280
+ <div>
281
+ <p class="text-gray-500 dark:text-gray-400">حقوق این ماه</p>
282
+ <h3 class="text-2xl font-bold mt-2">245,000,000 تومان</h3>
283
+ </div>
284
+ <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400">
285
+ <i class="fas fa-money-bill-wave text-xl"></i>
286
+ </div>
287
+ </div>
288
+ <p class="text-sm text-green-500 mt-2"><i class="fas fa-arrow-up ml-1"></i> 8% افزایش نسبت به ماه قبل</p>
289
+ </div>
290
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
291
+ <div class="flex items-center justify-between">
292
+ <div>
293
+ <p class="text-gray-500 dark:text-gray-400">فروش این ماه</p>
294
+ <h3 class="text-2xl font-bold mt-2">1,250,000,000 تومان</h3>
295
+ </div>
296
+ <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400">
297
+ <i class="fas fa-chart-line text-xl"></i>
298
+ </div>
299
+ </div>
300
+ <p class="text-sm text-green-500 mt-2"><i class="fas fa-arrow-up ml-1"></i> 15% افزایش نسبت به ماه قبل</p>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Recent Activities and Employees -->
305
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
306
+ <!-- Recent Activities -->
307
+ <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
308
+ <div class="flex justify-between items-center mb-4">
309
+ <h3 class="text-lg font-semibold">فعالیت‌های اخیر</h3>
310
+ <a href="#" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</a>
311
+ </div>
312
+ <div class="space-y-4">
313
+ <div class="flex items-start space-x-3 space-x-reverse">
314
+ <div class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400">
315
+ <i class="fas fa-user-plus"></i>
316
+ </div>
317
+ <div class="flex-1">
318
+ <p class="font-medium">کارمند جدید اضافه شد</p>
319
+ <p class="text-sm text-gray-500 dark:text-gray-400">آقای محمد رضایی به عنوان توسعه‌دهنده فرانت‌اند استخدام شد.</p>
320
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">2 ساعت پیش</p>
321
+ </div>
322
+ </div>
323
+ <div class="flex items-start space-x-3 space-x-reverse">
324
+ <div class="p-2 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400">
325
+ <i class="fas fa-check-circle"></i>
326
+ </div>
327
+ <div class="flex-1">
328
+ <p class="font-medium">درخواست مرخصی تایید شد</p>
329
+ <p class="text-sm text-gray-500 dark:text-gray-400">درخواست مرخصی خانم زهرا محمدی برای تاریخ 1402/05/20 تایید شد.</p>
330
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">5 ساعت پیش</p>
331
+ </div>
332
+ </div>
333
+ <div class="flex items-start space-x-3 space-x-reverse">
334
+ <div class="p-2 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400">
335
+ <i class="fas fa-file-invoice-dollar"></i>
336
+ </div>
337
+ <div class="flex-1">
338
+ <p class="font-medium">فیش حقوقی جدید</p>
339
+ <p class="text-sm text-gray-500 dark:text-gray-400">فیش حقوقی مرداد ماه 1402 برای 47 کارمند صادر شد.</p>
340
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">1 روز پیش</p>
341
+ </div>
342
+ </div>
343
+ <div class="flex items-start space-x-3 space-x-reverse">
344
+ <div class="p-2 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400">
345
+ <i class="fas fa-exclamation-triangle"></i>
346
+ </div>
347
+ <div class="flex-1">
348
+ <p class="font-medium">درخواست وام جدید</p>
349
+ <p class="text-sm text-gray-500 dark:text-gray-400">آقای علی حسینی درخواست وام به مبلغ 50,000,000 تومان ثبت کرده است.</p>
350
+ <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">2 روز پیش</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- New Employees -->
357
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
358
+ <div class="flex justify-between items-center mb-4">
359
+ <h3 class="text-lg font-semibold">کارمندان جدید</h3>
360
+ <a href="#" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</a>
361
+ </div>
362
+ <div class="space-y-4">
363
+ <div class="flex items-center space-x-3 space-x-reverse">
364
+ <img src="https://ui-avatars.com/api/?name=محمد+رضایی" alt="Profile" class="w-10 h-10 rounded-full">
365
+ <div>
366
+ <p class="font-medium">محمد رضایی</p>
367
+ <p class="text-sm text-gray-500 dark:text-gray-400">توسعه‌دهنده فرانت‌اند</p>
368
+ </div>
369
+ </div>
370
+ <div class="flex items-center space-x-3 space-x-reverse">
371
+ <img src="https://ui-avatars.com/api/?name=فاطمه+کریمی" alt="Profile" class="w-10 h-10 rounded-full">
372
+ <div>
373
+ <p class="font-medium">فاطمه کریمی</p>
374
+ <p class="text-sm text-gray-500 dark:text-gray-400">طراح UI/UX</p>
375
+ </div>
376
+ </div>
377
+ <div class="flex items-center space-x-3 space-x-reverse">
378
+ <img src="https://ui-avatars.com/api/?name=امیر+حسینی" alt="Profile" class="w-10 h-10 rounded-full">
379
+ <div>
380
+ <p class="font-medium">امیر حسینی</p>
381
+ <p class="text-sm text-gray-500 dark:text-gray-400">تحلیلگر داده</p>
382
+ </div>
383
+ </div>
384
+ <div class="flex items-center space-x-3 space-x-reverse">
385
+ <img src="https://ui-avatars.com/api/?name=زهرا+محمدی" alt="Profile" class="w-10 h-10 rounded-full">
386
+ <div>
387
+ <p class="font-medium">زهرا محمدی</p>
388
+ <p class="text-sm text-gray-500 dark:text-gray-400">مدیر پروژه</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Requests Status -->
396
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
397
+ <div class="flex justify-between items-center mb-4">
398
+ <h3 class="text-lg font-semibold">وضعیت درخواست‌ها</h3>
399
+ <a href="#" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</a>
400
+ </div>
401
+ <div class="overflow-x-auto">
402
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
403
+ <thead class="bg-gray-50 dark:bg-gray-700">
404
+ <tr>
405
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">نوع درخواست</th>
406
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">کارمند</th>
407
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">تاریخ</th>
408
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">وضعیت</th>
409
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">عملیات</th>
410
+ </tr>
411
+ </thead>
412
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
413
+ <tr>
414
+ <td class="px-6 py-4 whitespace-nowrap">
415
+ <div class="flex items-center">
416
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
417
+ <i class="fas fa-umbrella-beach text-blue-600 dark:text-blue-400"></i>
418
+ </div>
419
+ <div class="mr-4">
420
+ <div class="text-sm font-medium">مرخصی استعلاجی</div>
421
+ <div class="text-sm text-gray-500 dark:text-gray-400">3 روز</div>
422
+ </div>
423
+ </div>
424
+ </td>
425
+ <td class="px-6 py-4 whitespace-nowrap">
426
+ <div class="text-sm font-medium">علی احمدی</div>
427
+ <div class="text-sm text-gray-500 dark:text-gray-400">توسعه‌دهنده بک‌اند</div>
428
+ </td>
429
+ <td class="px-6 py-4 whitespace-nowrap">
430
+ <div class="text-sm">1402/05/10</div>
431
+ <div class="text-sm text-gray-500 dark:text-gray-400">تا 1402/05/13</div>
432
+ </td>
433
+ <td class="px-6 py-4 whitespace-nowrap">
434
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">تایید شده</span>
435
+ </td>
436
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
437
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">مشاهده</a>
438
+ </td>
439
+ </tr>
440
+ <tr>
441
+ <td class="px-6 py-4 whitespace-nowrap">
442
+ <div class="flex items-center">
443
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
444
+ <i class="fas fa-hand-holding-usd text-purple-600 dark:text-purple-400"></i>
445
+ </div>
446
+ <div class="mr-4">
447
+ <div class="text-sm font-medium">درخواست وام</div>
448
+ <div class="text-sm text-gray-500 dark:text-gray-400">30,000,000 تومان</div>
449
+ </div>
450
+ </div>
451
+ </td>
452
+ <td class="px-6 py-4 whitespace-nowrap">
453
+ <div class="text-sm font-medium">فاطمه موسوی</div>
454
+ <div class="text-sm text-gray-500 dark:text-gray-400">مدیر مالی</div>
455
+ </td>
456
+ <td class="px-6 py-4 whitespace-nowrap">
457
+ <div class="text-sm">1402/05/12</div>
458
+ </td>
459
+ <td class="px-6 py-4 whitespace-nowrap">
460
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">در انتظار بررسی</span>
461
+ </td>
462
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
463
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">مشاهده</a>
464
+ </td>
465
+ </tr>
466
+ <tr>
467
+ <td class="px-6 py-4 whitespace-nowrap">
468
+ <div class="flex items-center">
469
+ <div class="flex-shrink-0 h-10 w-10 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center">
470
+ <i class="fas fa-plane text-orange-600 dark:text-orange-400"></i>
471
+ </div>
472
+ <div class="mr-4">
473
+ <div class="text-sm font-medium">مرخصی سالیانه</div>
474
+ <div class="text-sm text-gray-500 dark:text-gray-400">10 روز</div>
475
+ </div>
476
+ </div>
477
+ </td>
478
+ <td class="px-6 py-4 whitespace-nowrap">
479
+ <div class="text-sm font-medium">رضا محمدی</div>
480
+ <div class="text-sm text-gray-500 dark:text-gray-400">مدیر فروش</div>
481
+ </td>
482
+ <td class="px-6 py-4 whitespace-nowrap">
483
+ <div class="text-sm">1402/05/14</div>
484
+ <div class="text-sm text-gray-500 dark:text-gray-400">تا 1402/05/24</div>
485
+ </td>
486
+ <td class="px-6 py-4 whitespace-nowrap">
487
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">در حال بررسی</span>
488
+ </td>
489
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
490
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">مشاهده</a>
491
+ </td>
492
+ </tr>
493
+ </tbody>
494
+ </table>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Employees Content -->
500
+ <div id="employees-content" class="hidden">
501
+ <div class="mb-6 flex justify-between items-center">
502
+ <h2 class="text-2xl font-bold">مدیریت کارمندان</h2>
503
+ <button id="add-employee-btn" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg flex items-center">
504
+ <i class="fas fa-plus ml-2"></i>
505
+ <span>کارمند جدید</span>
506
+ </button>
507
+ </div>
508
+
509
+ <!-- Employee List -->
510
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
511
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
512
+ <div class="flex items-center space-x-4 space-x-reverse">
513
+ <div class="relative">
514
+ <input type="text" placeholder="جستجو..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
515
+ <div class="absolute left-3 top-2.5 text-gray-400 dark:text-gray-500">
516
+ <i class="fas fa-search"></i>
517
+ </div>
518
+ </div>
519
+ <select class="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
520
+ <option>همه دپارتمان‌ها</option>
521
+ <option>فنی</option>
522
+ <option>مالی</option>
523
+ <option>فروش</option>
524
+ <option>پشتیبانی</option>
525
+ </select>
526
+ </div>
527
+ <div class="flex items-center space-x-2 space-x-reverse">
528
+ <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
529
+ <i class="fas fa-filter"></i>
530
+ </button>
531
+ <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
532
+ <i class="fas fa-download"></i>
533
+ </button>
534
+ </div>
535
+ </div>
536
+ <div class="overflow-x-auto">
537
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
538
+ <thead class="bg-gray-50 dark:bg-gray-700">
539
+ <tr>
540
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">نام و نام خانوادگی</th>
541
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">شماره پرسنلی</th>
542
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">سمت</th>
543
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">دپارتمان</th>
544
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">وضعیت</th>
545
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">عملیات</th>
546
+ </tr>
547
+ </thead>
548
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
549
+ <tr>
550
+ <td class="px-6 py-4 whitespace-nowrap">
551
+ <div class="flex items-center">
552
+ <div class="flex-shrink-0 h-10 w-10">
553
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=علی+احمدی" alt="">
554
+ </div>
555
+ <div class="mr-4">
556
+ <div class="text-sm font-medium">علی احمدی</div>
557
+ <div class="text-sm text-gray-500 dark:text-gray-400">ali.ahmadi@example.com</div>
558
+ </div>
559
+ </div>
560
+ </td>
561
+ <td class="px-6 py-4 whitespace-nowrap">
562
+ <div class="text-sm">1001</div>
563
+ </td>
564
+ <td class="px-6 py-4 whitespace-nowrap">
565
+ <div class="text-sm">توسعه‌دهنده بک‌اند</div>
566
+ </td>
567
+ <td class="px-6 py-4 whitespace-nowrap">
568
+ <div class="text-sm">فنی</div>
569
+ </td>
570
+ <td class="px-6 py-4 whitespace-nowrap">
571
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">فعال</span>
572
+ </td>
573
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
574
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">ویرایش</a>
575
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
576
+ </td>
577
+ </tr>
578
+ <tr>
579
+ <td class="px-6 py-4 whitespace-nowrap">
580
+ <div class="flex items-center">
581
+ <div class="flex-shrink-0 h-10 w-10">
582
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=فاطمه+موسوی" alt="">
583
+ </div>
584
+ <div class="mr-4">
585
+ <div class="text-sm font-medium">فاطمه موسوی</div>
586
+ <div class="text-sm text-gray-500 dark:text-gray-400">fateme.mousavi@example.com</div>
587
+ </div>
588
+ </div>
589
+ </td>
590
+ <td class="px-6 py-4 whitespace-nowrap">
591
+ <div class="text-sm">1002</div>
592
+ </td>
593
+ <td class="px-6 py-4 whitespace-nowrap">
594
+ <div class="text-sm">مدیر مالی</div>
595
+ </td>
596
+ <td class="px-6 py-4 whitespace-nowrap">
597
+ <div class="text-sm">مالی</div>
598
+ </td>
599
+ <td class="px-6 py-4 whitespace-nowrap">
600
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">فعال</span>
601
+ </td>
602
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
603
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">ویرایش</a>
604
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
605
+ </td>
606
+ </tr>
607
+ <tr>
608
+ <td class="px-6 py-4 whitespace-nowrap">
609
+ <div class="flex items-center">
610
+ <div class="flex-shrink-0 h-10 w-10">
611
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=رضا+محمدی" alt="">
612
+ </div>
613
+ <div class="mr-4">
614
+ <div class="text-sm font-medium">رضا محمدی</div>
615
+ <div class="text-sm text-gray-500 dark:text-gray-400">reza.mohammadi@example.com</div>
616
+ </div>
617
+ </div>
618
+ </td>
619
+ <td class="px-6 py-4 whitespace-nowrap">
620
+ <div class="text-sm">1003</div>
621
+ </td>
622
+ <td class="px-6 py-4 whitespace-nowrap">
623
+ <div class="text-sm">مدیر فروش</div>
624
+ </td>
625
+ <td class="px-6 py-4 whitespace-nowrap">
626
+ <div class="text-sm">فروش</div>
627
+ </td>
628
+ <td class="px-6 py-4 whitespace-nowrap">
629
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">فعال</span>
630
+ </td>
631
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
632
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">ویرایش</a>
633
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
634
+ </td>
635
+ </tr>
636
+ <tr>
637
+ <td class="px-6 py-4 whitespace-nowrap">
638
+ <div class="flex items-center">
639
+ <div class="flex-shrink-0 h-10 w-10">
640
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=زهرا+کریمی" alt="">
641
+ </div>
642
+ <div class="mr-4">
643
+ <div class="text-sm font-medium">زهرا کریمی</div>
644
+ <div class="text-sm text-gray-500 dark:text-gray-400">zahra.karimi@example.com</div>
645
+ </div>
646
+ </div>
647
+ </td>
648
+ <td class="px-6 py-4 whitespace-nowrap">
649
+ <div class="text-sm">1004</div>
650
+ </td>
651
+ <td class="px-6 py-4 whitespace-nowrap">
652
+ <div class="text-sm">توسعه‌دهنده فرانت‌اند</div>
653
+ </td>
654
+ <td class="px-6 py-4 whitespace-nowrap">
655
+ <div class="text-sm">فنی</div>
656
+ </td>
657
+ <td class="px-6 py-4 whitespace-nowrap">
658
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">مرخصی</span>
659
+ </td>
660
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
661
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">ویرایش</a>
662
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
663
+ </td>
664
+ </tr>
665
+ <tr>
666
+ <td class="px-6 py-4 whitespace-nowrap">
667
+ <div class="flex items-center">
668
+ <div class="flex-shrink-0 h-10 w-10">
669
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=محمد+رضایی" alt="">
670
+ </div>
671
+ <div class="mr-4">
672
+ <div class="text-sm font-medium">محمد رضایی</div>
673
+ <div class="text-sm text-gray-500 dark:text-gray-400">mohammad.rezaei@example.com</div>
674
+ </div>
675
+ </div>
676
+ </td>
677
+ <td class="px-6 py-4 whitespace-nowrap">
678
+ <div class="text-sm">1005</div>
679
+ </td>
680
+ <td class="px-6 py-4 whitespace-nowrap">
681
+ <div class="text-sm">تحلیلگر داده</div>
682
+ </td>
683
+ <td class="px-6 py-4 whitespace-nowrap">
684
+ <div class="text-sm">فنی</div>
685
+ </td>
686
+ <td class="px-6 py-4 whitespace-nowrap">
687
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">فعال</span>
688
+ </td>
689
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
690
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">ویرایش</a>
691
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
692
+ </td>
693
+ </tr>
694
+ </tbody>
695
+ </table>
696
+ </div>
697
+ <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
698
+ <div class="flex-1 flex justify-between sm:hidden">
699
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">قبلی</a>
700
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">بعدی</a>
701
+ </div>
702
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
703
+ <div>
704
+ <p class="text-sm text-gray-700 dark:text-gray-300">
705
+ نمایش
706
+ <span class="font-medium">1</span>
707
+ تا
708
+ <span class="font-medium">5</span>
709
+ از
710
+ <span class="font-medium">47</span>
711
+ نتیجه
712
+ </p>
713
+ </div>
714
+ <div>
715
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
716
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
717
+ <span class="sr-only">قبلی</span>
718
+ <i class="fas fa-chevron-right"></i>
719
+ </a>
720
+ <a href="#" aria-current="page" class="z-10 bg-primary-50 dark:bg-primary-900 border-primary-500 dark:border-primary-700 text-primary-600 dark:text-primary-400 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
721
+ <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
722
+ <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
723
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
724
+ <span class="sr-only">بعدی</span>
725
+ <i class="fas fa-chevron-left"></i>
726
+ </a>
727
+ </nav>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <!-- Add/Edit Employee Modal -->
735
+ <div id="employee-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
736
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
737
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
738
+ <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
739
+ </div>
740
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
741
+ <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
742
+ <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
743
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white" id="modal-title">افزودن کارمند جدید</h3>
744
+ <button type="button" class="text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200">
745
+ <i class="fas fa-times"></i>
746
+ </button>
747
+ </div>
748
+ <div class="px-6 py-4">
749
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
750
+ <div class="col-span-2 flex justify-center">
751
+ <div class="employee-photo-upload">
752
+ <div class="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
753
+ <img id="employee-photo-preview" src="https://ui-avatars.com/api/?name=کارمند+جدید&background=cccccc&color=fff" alt="Employee Photo" class="w-full h-full object-cover hidden">
754
+ <i class="fas fa-user text-4xl text-gray-400 dark:text-gray-500" id="employee-photo-icon"></i>
755
+ </div>
756
+ <input type="file" id="employee-photo" accept="image/*" class="hidden">
757
+ <label for="employee-photo" class="block text-center mt-2 text-sm text-primary-600 dark:text-primary-400 cursor-pointer hover:underline">انتخاب تصویر</label>
758
+ </div>
759
+ </div>
760
+
761
+ <div>
762
+ <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام و نام خانوادگی</label>
763
+ <input type="text" id="full-name" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
764
+ </div>
765
+
766
+ <div>
767
+ <label for="employee-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">شماره پرسنلی</label>
768
+ <input type="text" id="employee-code" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
769
+ </div>
770
+
771
+ <div>
772
+ <label for="national-id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">کد ملی</label>
773
+ <input type="text" id="national-id" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
774
+ </div>
775
+
776
+ <div>
777
+ <label for="birth-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">تاریخ تولد</label>
778
+ <input type="text" id="birth-date" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white jalali-date-input" placeholder="1400/01/01">
779
+ </div>
780
+
781
+ <div>
782
+ <label for="job-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">سمت</label>
783
+ <select id="job-title" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
784
+ <option value="">انتخاب کنید</option>
785
+ <option value="developer">توسعه‌دهنده</option>
786
+ <option value="manager">مدیر</option>
787
+ <option value="accountant">حسابدار</option>
788
+ <option value="designer">طراح</option>
789
+ </select>
790
+ </div>
791
+
792
+ <div>
793
+ <label for="department" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">دپارتمان</label>
794
+ <select id="department" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
795
+ <option value="">انتخاب کنید</option>
796
+ <option value="technical">فنی</option>
797
+ <option value="financial">مالی</option>
798
+ <option value="sales">فروش</option>
799
+ <option value="support">پشتیبانی</option>
800
+ </select>
801
+ </div>
802
+
803
+ <div>
804
+ <label for="branch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">شعبه</label>
805
+ <select id="branch" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
806
+ <option value="">انتخاب کنید</option>
807
+ <option value="tehran">تهران</option>
808
+ <option value="mashhad">مشهد</option>
809
+ <option value="isfahan">اصفهان</option>
810
+ <option value="shiraz">شیراز</option>
811
+ </select>
812
+ </div>
813
+
814
+ <div>
815
+ <label for="date-joined" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">تاریخ استخدام</label>
816
+ <input type="text" id="date-joined" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white jalali-date-input" placeholder="1402/01/01">
817
+ </div>
818
+
819
+ <div>
820
+ <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">شماره تماس</label>
821
+ <input type="tel" id="phone" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
822
+ </div>
823
+
824
+ <div>
825
+ <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ایمیل</label>
826
+ <input type="email" id="email" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
827
+ </div>
828
+
829
+ <div>
830
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">جنسیت</label>
831
+ <div class="flex space-x-4 space-x-reverse">
832
+ <label class="inline-flex items-center">
833
+ <input type="radio" name="gender" value="male" class="form-radio h-4 w-4 text-primary-600 dark:text-primary-400" checked>
834
+ <span class="mr-2">مرد</span>
835
+ </label>
836
+ <label class="inline-flex items-center">
837
+ <input type="radio" name="gender" value="female" class="form-radio h-4 w-4 text-primary-600 dark:text-primary-400">
838
+ <span class="mr-2">زن</span>
839
+ </label>
840
+ </div>
841
+ </div>
842
+
843
+ <div>
844
+ <label for="military-status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">وضعیت نظام وظیفه</label>
845
+ <select id="military-status" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
846
+ <option value="exempt">معاف</option>
847
+ <option value="completed">پایان خدمت</option>
848
+ <option value="serving">در حال خدمت</option>
849
+ <option value="not-applicable">مشمول نیست</option>
850
+ </select>
851
+ </div>
852
+
853
+ <div>
854
+ <label for="salary" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">حقوق ماهیانه (تومان)</label>
855
+ <input type="text" id="salary" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
856
+ </div>
857
+
858
+ <div>
859
+ <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">وضعیت</label>
860
+ <select id="status" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
861
+ <option value="active">فعال</option>
862
+ <option value="inactive">غیرفعال</option>
863
+ <option value="on-leave">مرخصی</option>
864
+ <option value="terminated">ترک خدمت</option>
865
+ </select>
866
+ </div>
867
+
868
+ <div class="col-span-2">
869
+ <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">توضیحات</label>
870
+ <textarea id="notes" rows="3" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white"></textarea>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3 space-x-reverse">
875
+ <button type="button" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
876
+ انصراف
877
+ </button>
878
+ <button type="button" class="px-4 py-2 rounded-lg text-white bg-primary-600 hover:bg-primary-700">
879
+ ذخیره اطلاعات
880
+ </button>
881
+ </div>
882
+ </div>
883
+ </div>
884
+ </div>
885
+
886
+ <!-- Requests Content -->
887
+ <div id="requests-content" class="hidden">
888
+ <div class="mb-6 flex justify-between items-center">
889
+ <h2 class="text-2xl font-bold">مدیریت درخواست‌ها</h2>
890
+ <div class="flex space-x-3 space-x-reverse">
891
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg flex items-center">
892
+ <i class="fas fa-plus ml-2"></i>
893
+ <span>درخواست جدید</span>
894
+ </button>
895
+ <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg flex items-center">
896
+ <i class="fas fa-filter ml-2"></i>
897
+ <span>فیلترها</span>
898
+ </button>
899
+ </div>
900
+ </div>
901
+
902
+ <!-- Request Tabs -->
903
+ <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
904
+ <ul class="flex flex-wrap -mb-px" id="request-tabs" role="tablist">
905
+ <li class="mr-2" role="presentation">
906
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700" id="all-requests-tab" data-tabs-target="#all-requests" type="button" role="tab" aria-controls="all-requests" aria-selected="true">همه درخواست‌ها</button>
907
+ </li>
908
+ <li class="mr-2" role="presentation">
909
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700" id="leave-requests-tab" data-tabs-target="#leave-requests" type="button" role="tab" aria-controls="leave-requests" aria-selected="false">مرخصی</button>
910
+ </li>
911
+ <li class="mr-2" role="presentation">
912
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700" id="loan-requests-tab" data-tabs-target="#loan-requests" type="button" role="tab" aria-controls="loan-requests" aria-selected="false">وام</button>
913
+ </li>
914
+ <li class="mr-2" role="presentation">
915
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700" id="pending-requests-tab" data-tabs-target="#pending-requests" type="button" role="tab" aria-controls="pending-requests" aria-selected="false">در انتظار تایید</button>
916
+ </li>
917
+ <li role="presentation">
918
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700" id="rejected-requests-tab" data-tabs-target="#rejected-requests" type="button" role="tab" aria-controls="rejected-requests" aria-selected="false">رد شده</button>
919
+ </li>
920
+ </ul>
921
+ </div>
922
+
923
+ <!-- Request List -->
924
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
925
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
926
+ <div class="flex items-center space-x-4 space-x-reverse">
927
+ <div class="relative">
928
+ <input type="text" placeholder="جستجو..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
929
+ <div class="absolute left-3 top-2.5 text-gray-400 dark:text-gray-500">
930
+ <i class="fas fa-search"></i>
931
+ </div>
932
+ </div>
933
+ <select class="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
934
+ <option>همه کارمندان</option>
935
+ <option>علی احمدی</option>
936
+ <option>فاطمه موسوی</option>
937
+ <option>رضا محمدی</option>
938
+ </select>
939
+ </div>
940
+ <div class="flex items-center space-x-2 space-x-reverse">
941
+ <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
942
+ <i class="fas fa-download"></i>
943
+ </button>
944
+ </div>
945
+ </div>
946
+ <div class="overflow-x-auto">
947
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
948
+ <thead class="bg-gray-50 dark:bg-gray-700">
949
+ <tr>
950
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">نوع درخواست</th>
951
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">کارمند</th>
952
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">تاریخ ثبت</th>
953
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">جزئیات</th>
954
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">وضعیت</th>
955
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">عملیات</th>
956
+ </tr>
957
+ </thead>
958
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
959
+ <tr>
960
+ <td class="px-6 py-4 whitespace-nowrap">
961
+ <div class="flex items-center">
962
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
963
+ <i class="fas fa-umbrella-beach text-blue-600 dark:text-blue-400"></i>
964
+ </div>
965
+ <div class="mr-4">
966
+ <div class="text-sm font-medium">مرخصی استعلاجی</div>
967
+ <div class="text-sm text-gray-500 dark:text-gray-400">3 روز</div>
968
+ </div>
969
+ </div>
970
+ </td>
971
+ <td class="px-6 py-4 whitespace-nowrap">
972
+ <div class="flex items-center">
973
+ <div class="flex-shrink-0 h-10 w-10">
974
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=علی+احمدی" alt="">
975
+ </div>
976
+ <div class="mr-4">
977
+ <div class="text-sm font-medium">علی احمدی</div>
978
+ <div class="text-sm text-gray-500 dark:text-gray-400">توسعه‌دهنده بک‌اند</div>
979
+ </div>
980
+ </div>
981
+ </td>
982
+ <td class="px-6 py-4 whitespace-nowrap">
983
+ <div class="text-sm">1402/05/10</div>
984
+ </td>
985
+ <td class="px-6 py-4">
986
+ <div class="text-sm">از 1402/05/15 تا 1402/05/17</div>
987
+ <div class="text-sm text-gray-500 dark:text-gray-400">درد پا و ��یاز به استراحت</div>
988
+ </td>
989
+ <td class="px-6 py-4 whitespace-nowrap">
990
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">تایید شده</span>
991
+ </td>
992
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
993
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">مشاهده</a>
994
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 mr-3">چاپ</a>
995
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
996
+ </td>
997
+ </tr>
998
+ <tr>
999
+ <td class="px-6 py-4 whitespace-nowrap">
1000
+ <div class="flex items-center">
1001
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
1002
+ <i class="fas fa-hand-holding-usd text-purple-600 dark:text-purple-400"></i>
1003
+ </div>
1004
+ <div class="mr-4">
1005
+ <div class="text-sm font-medium">درخواست وام</div>
1006
+ <div class="text-sm text-gray-500 dark:text-gray-400">50,000,000 تومان</div>
1007
+ </div>
1008
+ </div>
1009
+ </td>
1010
+ <td class="px-6 py-4 whitespace-nowrap">
1011
+ <div class="flex items-center">
1012
+ <div class="flex-shrink-0 h-10 w-10">
1013
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=فاطمه+موسوی" alt="">
1014
+ </div>
1015
+ <div class="mr-4">
1016
+ <div class="text-sm font-medium">فاطمه موسوی</div>
1017
+ <div class="text-sm text-gray-500 dark:text-gray-400">مدیر مالی</div>
1018
+ </div>
1019
+ </div>
1020
+ </td>
1021
+ <td class="px-6 py-4 whitespace-nowrap">
1022
+ <div class="text-sm">1402/05/12</div>
1023
+ </td>
1024
+ <td class="px-6 py-4">
1025
+ <div class="text-sm">قسط 12 ماهه</div>
1026
+ <div class="text-sm text-gray-500 dark:text-gray-400">برای خرید لوازم منزل</div>
1027
+ </td>
1028
+ <td class="px-6 py-4 whitespace-nowrap">
1029
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">در انتظار بررسی</span>
1030
+ </td>
1031
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
1032
+ <a href="#" class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-3">مشاهده</a>
1033
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 mr-3">چاپ</a>
1034
+ <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">حذف</a>
1035
+ </td>
1036
+ </tr>
1037
+ <tr>
1038
+ <td class="px-6 py-4 whitespace-nowrap">
1039
+ <div class="flex items-center">
1040
+ <div class="flex-shrink-0 h-10 w-10 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center">
1041
+ <i class="fas fa-plane text-orange-600 dark:text-orange-400"></i>
1042
+ </div>
1043
+ <div class="mr-4">
1044
+ <div class="text-sm font-medium">مرخصی سالیانه</div>
1045
+ <div class="text-sm text-gray-500 dark:text-gray-400">10 روز</div>
1046
+ </div>
1047
+ </div>
1048
+ </td>
1049
+ <td class="px-6 py-4 whitespace-nowrap">
1050
+ <div class="flex items-center">
1051
+ <div class="flex-shrink-0 h-10 w-10">
1052
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=رضا+محمدی" alt="">
1053
+ </div>
1054
+ <div class="mr-4">
1055
+ <div class="text-sm font-medium">رضا محمدی</div>
1056
+ <div class="text-sm text-gray-500 dark:text-gray-400">مدیر فروش</div>
1057
+ </div>
1058
+ </div>
1059
+ </td>
1060
+ <td class="px-6 py-4 whitespace-nowrap">
1061
+ <div class="text-sm">1402/05/08</div>
1062
+ </td>
1063
+ <td class="px-6 py-4">
1064
+ <div class="text-sm">از 1402/06/01 تا 1402/06/10</div>
1065
+ <div class="text-sm text-gray-500 dark:text-gray-400">مسافرت خانوادگی</div>
1066
+ </td>
1067
+ <td class="px-6 py-4 whitespace-nowrap">
1068
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">در حال بررسی</span>
1069
+ </td>
1070
+ <td class="px-6 py-4 whitespace-nowrap text-sm font
1071
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iBehzad/crm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1072
+ </html>