Hugging Face's logo

Spaces:
samerzaher80
/
sam
Running

App Files Community
samerzaher80 commited on
Commit
da4dd10
·
verified ·
1 Parent(s): dc58a6a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1048 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sam
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: indigo
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: sam
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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,1048 @@
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="ar" 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=Tajawal:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ }
15
+
16
+ .sidebar {
17
+ transition: all 0.3s ease;
18
+ }
19
+
20
+ .sidebar.collapsed {
21
+ width: 70px;
22
+ }
23
+
24
+ .sidebar.collapsed .sidebar-text {
25
+ display: none;
26
+ }
27
+
28
+ .notification-badge {
29
+ position: absolute;
30
+ top: -5px;
31
+ right: -5px;
32
+ font-size: 10px;
33
+ background-color: #ef4444;
34
+ }
35
+
36
+ .document-expiry-warning {
37
+ animation: pulse 2s infinite;
38
+ }
39
+
40
+ @keyframes pulse {
41
+ 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
42
+ 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
43
+ 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
44
+ }
45
+
46
+ .file-upload input[type="file"] {
47
+ display: none;
48
+ }
49
+
50
+ .file-upload-label {
51
+ cursor: pointer;
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .file-upload-label:hover {
56
+ background-color: #e5e7eb;
57
+ }
58
+
59
+ .worker-photo {
60
+ width: 120px;
61
+ height: 120px;
62
+ object-fit: cover;
63
+ }
64
+
65
+ .document-thumbnail {
66
+ width: 80px;
67
+ height: 80px;
68
+ object-fit: cover;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-100">
73
+ <div class="flex h-screen overflow-hidden">
74
+ <!-- Sidebar -->
75
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
76
+ <div class="p-4 flex items-center justify-between border-b border-blue-700">
77
+ <div class="flex items-center">
78
+ <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
79
+ <span class="sidebar-text mr-2 font-bold text-lg">زهرة كركوك</span>
80
+ </div>
81
+ <button id="toggleSidebar" class="text-white focus:outline-none">
82
+ <i class="fas fa-bars"></i>
83
+ </button>
84
+ </div>
85
+
86
+ <div class="flex-1 overflow-y-auto">
87
+ <nav class="p-2">
88
+ <a href="#" class="flex items-center p-3 rounded-lg bg-blue-700 mb-1" id="dashboardLink">
89
+ <i class="fas fa-home"></i>
90
+ <span class="sidebar-text mr-3">الرئيسية</span>
91
+ </a>
92
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="workersLink">
93
+ <i class="fas fa-users"></i>
94
+ <span class="sidebar-text mr-3">إدارة العمال</span>
95
+ </a>
96
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="documentsLink">
97
+ <i class="fas fa-file-alt"></i>
98
+ <span class="sidebar-text mr-3">المستندات</span>
99
+ </a>
100
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1 relative" id="notificationsLink">
101
+ <i class="fas fa-bell"></i>
102
+ <span class="sidebar-text mr-3">التنبيهات</span>
103
+ <span class="notification-badge rounded-full h-5 w-5 flex items-center justify-center" id="notificationCount">0</span>
104
+ </a>
105
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="reportsLink">
106
+ <i class="fas fa-chart-bar"></i>
107
+ <span class="sidebar-text mr-3">التقارير</span>
108
+ </a>
109
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 mb-1" id="settingsLink">
110
+ <i class="fas fa-cog"></i>
111
+ <span class="sidebar-text mr-3">الإعدادات</span>
112
+ </a>
113
+ </nav>
114
+ </div>
115
+
116
+ <div class="p-4 border-t border-blue-700">
117
+ <div class="flex items-center">
118
+ <img src="https://via.placeholder.com/40" alt="User" class="h-10 w-10 rounded-full">
119
+ <div class="sidebar-text mr-3">
120
+ <div class="font-medium">مدير النظام</div>
121
+ <div class="text-sm text-blue-200">admin@zahrakirkuk.com</div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Main Content -->
128
+ <div class="flex-1 overflow-auto">
129
+ <!-- Top Navigation -->
130
+ <header class="bg-white shadow-sm">
131
+ <div class="flex justify-between items-center p-4">
132
+ <h1 class="text-xl font-bold text-gray-800" id="pageTitle">نظام إدارة بيانات العمال الأجانب</h1>
133
+
134
+ <div class="flex items-center space-x-4">
135
+ <div class="relative">
136
+ <input type="text" placeholder="بحث..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="searchInput">
137
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
138
+ </div>
139
+
140
+ <button class="text-gray-600 hover:text-gray-800 relative" id="notificationButton">
141
+ <i class="fas fa-bell text-xl"></i>
142
+ <span class="notification-badge rounded-full h-5 w-5 flex items-center justify-center" id="mobileNotificationCount">0</span>
143
+ </button>
144
+
145
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
146
+ <i class="fas fa-user text-blue-600"></i>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </header>
151
+
152
+ <!-- Content Sections -->
153
+ <main class="p-6">
154
+ <!-- Dashboard Section -->
155
+ <div id="dashboardSection">
156
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
157
+ <div class="bg-white p-6 rounded-lg shadow-md">
158
+ <div class="flex items-center justify-between">
159
+ <div>
160
+ <p class="text-gray-500">إجمالي العمال</p>
161
+ <h3 class="text-2xl font-bold" id="totalWorkers">0</h3>
162
+ </div>
163
+ <div class="bg-blue-100 p-3 rounded-full">
164
+ <i class="fas fa-users text-blue-600 text-xl"></i>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-white p-6 rounded-lg shadow-md">
170
+ <div class="flex items-center justify-between">
171
+ <div>
172
+ <p class="text-gray-500">جوازات منتهية</p>
173
+ <h3 class="text-2xl font-bold" id="expiredPassports">0</h3>
174
+ </div>
175
+ <div class="bg-red-100 p-3 rounded-full">
176
+ <i class="fas fa-passport text-red-600 text-xl"></i>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-white p-6 rounded-lg shadow-md">
182
+ <div class="flex items-center justify-between">
183
+ <div>
184
+ <p class="text-gray-500">إقامات منتهية</p>
185
+ <h3 class="text-2xl font-bold" id="expiredResidences">0</h3>
186
+ </div>
187
+ <div class="bg-yellow-100 p-3 rounded-full">
188
+ <i class="fas fa-id-card text-yellow-600 text-xl"></i>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="bg-white p-6 rounded-lg shadow-md">
194
+ <div class="flex items-center justify-between">
195
+ <div>
196
+ <p class="text-gray-500">بطاقات عمل منتهية</p>
197
+ <h3 class="text-2xl font-bold" id="expiredWorkCards">0</h3>
198
+ </div>
199
+ <div class="bg-purple-100 p-3 rounded-full">
200
+ <i class="fas fa-id-badge text-purple-600 text-xl"></i>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
207
+ <div class="flex justify-between items-center mb-4">
208
+ <h3 class="text-lg font-semibold text-gray-700">التنبيهات القريبة</h3>
209
+ <a href="#" class="text-blue-600 hover:text-blue-800" id="viewAllAlerts">عرض الكل</a>
210
+ </div>
211
+
212
+ <div class="space-y-3" id="recentAlerts">
213
+ <!-- Alerts will be populated here -->
214
+ </div>
215
+ </div>
216
+
217
+ <div class="bg-white rounded-lg shadow-md p-6">
218
+ <h3 class="text-lg font-semibold mb-4 text-gray-700">أحدث العمال المسجلين</h3>
219
+
220
+ <div class="overflow-x-auto">
221
+ <table class="min-w-full divide-y divide-gray-200">
222
+ <thead class="bg-gray-50">
223
+ <tr>
224
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم العامل</th>
225
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الجنسية</th>
226
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الجواز</th>
227
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ انتهاء الجواز</th>
228
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">حالة الجواز</th>
229
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجراءات</th>
230
+ </tr>
231
+ </thead>
232
+ <tbody class="bg-white divide-y divide-gray-200" id="recentWorkersTable">
233
+ <!-- Workers will be populated here -->
234
+ </tbody>
235
+ </table>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Workers Management Section -->
241
+ <div id="workersSection" class="hidden">
242
+ <div class="mb-6 flex justify-between items-center">
243
+ <h2 class="text-2xl font-bold text-gray-800">إدارة العمال الأجانب</h2>
244
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="addWorkerBtn">
245
+ <i class="fas fa-plus ml-2"></i>
246
+ <span>إضافة عامل جديد</span>
247
+ </button>
248
+ </div>
249
+
250
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
251
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
252
+ <div class="mb-4 md:mb-0">
253
+ <label for="workerFilter" class="block text-gray-700 mb-2">تصفية حسب:</label>
254
+ <select id="workerFilter" class="border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
255
+ <option value="all">جميع العمال</option>
256
+ <option value="expiring">وثائق قريبة الانتهاء</option>
257
+ <option value="expired">وثائق منتهية</option>
258
+ <option value="active">وثائق سارية</option>
259
+ </select>
260
+ </div>
261
+ <div class="relative">
262
+ <input type="text" placeholder="بحث عن عامل..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="workerSearch">
263
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="overflow-x-auto">
268
+ <table class="min-w-full divide-y divide-gray-200">
269
+ <thead class="bg-gray-50">
270
+ <tr>
271
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th>
272
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم العامل</th>
273
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الجنسية</th>
274
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">حالة الجواز</th>
275
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">حالة الإقامة</th>
276
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">حالة بطاقة العمل</th>
277
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجراءات</th>
278
+ </tr>
279
+ </thead>
280
+ <tbody class="bg-white divide-y divide-gray-200" id="workersTable">
281
+ <!-- Workers will be populated here -->
282
+ </tbody>
283
+ </table>
284
+ </div>
285
+
286
+ <div class="flex items-center justify-between mt-4">
287
+ <div class="text-sm text-gray-500">
288
+ عرض <span id="workersStart">1</span> إلى <span id="workersEnd">10</span> من <span id="workersTotal">0</span> عامل
289
+ </div>
290
+ <div class="flex space-x-2">
291
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="workersPrevPage">
292
+ <i class="fas fa-chevron-right"></i>
293
+ </button>
294
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="workersNextPage">
295
+ <i class="fas fa-chevron-left"></i>
296
+ </button>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Add/Edit Worker Section -->
303
+ <div id="workerFormSection" class="hidden">
304
+ <div class="mb-6 flex justify-between items-center">
305
+ <h2 class="text-2xl font-bold text-gray-800" id="formTitle">إضافة عامل جديد</h2>
306
+ <button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center" id="backToWorkersBtn">
307
+ <i class="fas fa-arrow-left ml-2"></i>
308
+ <span>العودة إلى القائمة</span>
309
+ </button>
310
+ </div>
311
+
312
+ <form id="workerForm" class="bg-white rounded-lg shadow-md p-6 mb-6">
313
+ <input type="hidden" id="workerId">
314
+
315
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
316
+ <div class="md:w-1/4 flex flex-col items-center">
317
+ <div class="mb-4">
318
+ <img id="workerPhotoPreview" src="https://via.placeholder.com/150" alt="Worker Photo" class="worker-photo rounded-lg mb-2">
319
+ </div>
320
+ <div class="file-upload w-full">
321
+ <label for="workerPhoto" class="file-upload-label border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center">
322
+ <i class="fas fa-camera text-3xl text-gray-400 mb-2"></i>
323
+ <span class="text-gray-500">اضغط لرفع صورة العامل</span>
324
+ <span class="text-sm text-gray-400">(JPG, PNG)</span>
325
+ <input type="file" id="workerPhoto" accept=".jpg,.jpeg,.png">
326
+ </label>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="md:w-3/4">
331
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">البيانات الشخصية</h3>
332
+
333
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
334
+ <div>
335
+ <label for="workerName" class="block text-gray-700 mb-2">اسم العامل</label>
336
+ <input type="text" id="workerName" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
337
+ </div>
338
+
339
+ <div>
340
+ <label for="workerNationality" class="block text-gray-700 mb-2">الجنسية</label>
341
+ <select id="workerNationality" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
342
+ <option value="">اختر الجنسية</option>
343
+ <option value="الهند">الهند</option>
344
+ <option value="بنغلاديش">بنغلاديش</option>
345
+ <option value="باكستان">باكستان</option>
346
+ <option value="نيبال">نيبال</option>
347
+ <option value="سريلانكا">سريلانكا</option>
348
+ <option value="الفلبين">الفلبين</option>
349
+ </select>
350
+ </div>
351
+
352
+ <div>
353
+ <label for="workerBirthDate" class="block text-gray-700 mb-2">تاريخ الميلاد</label>
354
+ <input type="date" id="workerBirthDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
355
+ </div>
356
+
357
+ <div>
358
+ <label for="workerPhone" class="block text-gray-700 mb-2">رقم الهاتف</label>
359
+ <input type="tel" id="workerPhone" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
360
+ </div>
361
+
362
+ <div>
363
+ <label for="workerEmail" class="block text-gray-700 mb-2">البريد الإلكتروني</label>
364
+ <input type="email" id="workerEmail" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
365
+ </div>
366
+
367
+ <div>
368
+ <label for="workerAddress" class="block text-gray-700 mb-2">العنوان</label>
369
+ <input type="text" id="workerAddress" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
376
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">بيانات الجواز</h3>
377
+
378
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
379
+ <div>
380
+ <label for="passportNumber" class="block text-gray-700 mb-2">رقم الجواز</label>
381
+ <input type="text" id="passportNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
382
+ </div>
383
+
384
+ <div>
385
+ <label for="passportIssueDate" class="block text-gray-700 mb-2">تاريخ إصدار الجواز</label>
386
+ <input type="date" id="passportIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
387
+ </div>
388
+
389
+ <div>
390
+ <label for="passportExpiryDate" class="block text-gray-700 mb-2">تاريخ انتهاء الجواز</label>
391
+ <input type="date" id="passportExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
392
+ </div>
393
+
394
+ <div class="md:col-span-3">
395
+ <label class="block text-gray-700 mb-2">صورة الجواز</label>
396
+ <div class="flex flex-wrap gap-4" id="passportImagesContainer">
397
+ <!-- Passport images will be added here -->
398
+ </div>
399
+ <div class="file-upload mt-2">
400
+ <label for="passportImage" class="file-upload-label border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center">
401
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
402
+ <span class="text-gray-500">اضغط لرفع صورة الجواز</span>
403
+ <span class="text-sm text-gray-400">(PDF, JPG, PNG)</span>
404
+ <input type="file" id="passportImage" accept=".pdf,.jpg,.jpeg,.png" multiple>
405
+ </label>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
412
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">بيانات الإقامة</h3>
413
+
414
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
415
+ <div>
416
+ <label for="residenceNumber" class="block text-gray-700 mb-2">رقم إقامة العمل</label>
417
+ <input type="text" id="residenceNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
418
+ </div>
419
+
420
+ <div>
421
+ <label for="residenceIssueDate" class="block text-gray-700 mb-2">تاريخ إصدار الإقامة</label>
422
+ <input type="date" id="residenceIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
423
+ </div>
424
+
425
+ <div>
426
+ <label for="residenceExpiryDate" class="block text-gray-700 mb-2">تاريخ انتهاء الإقامة</label>
427
+ <input type="date" id="residenceExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
428
+ </div>
429
+
430
+ <div class="md:col-span-3">
431
+ <label class="block text-gray-700 mb-2">صورة الإقامة</label>
432
+ <div class="flex flex-wrap gap-4" id="residenceImagesContainer">
433
+ <!-- Residence images will be added here -->
434
+ </div>
435
+ <div class="file-upload mt-2">
436
+ <label for="residenceImage" class="file-upload-label border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center">
437
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
438
+ <span class="text-gray-500">اضغط لرفع صورة الإقامة</span>
439
+ <span class="text-sm text-gray-400">(PDF, JPG, PNG)</span>
440
+ <input type="file" id="residenceImage" accept=".pdf,.jpg,.jpeg,.png" multiple>
441
+ </label>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
448
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">بيانات العمل</h3>
449
+
450
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
451
+ <div>
452
+ <label for="workCardNumber" class="block text-gray-700 mb-2">رقم بطاقة العمل</label>
453
+ <input type="text" id="workCardNumber" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
454
+ </div>
455
+
456
+ <div>
457
+ <label for="workCardIssueDate" class="block text-gray-700 mb-2">تاريخ إصدار بطاقة العمل</label>
458
+ <input type="date" id="workCardIssueDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
459
+ </div>
460
+
461
+ <div>
462
+ <label for="workCardExpiryDate" class="block text-gray-700 mb-2">تاريخ انتهاء بطاقة العمل</label>
463
+ <input type="date" id="workCardExpiryDate" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
464
+ </div>
465
+
466
+ <div>
467
+ <label for="arrivalAirport" class="block text-gray-700 mb-2">مطار الوصول</label>
468
+ <input type="text" id="arrivalAirport" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
469
+ </div>
470
+
471
+ <div>
472
+ <label for="workType" class="block text-gray-700 mb-2">آلية العمل</label>
473
+ <select id="workType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
474
+ <option value="">اختر آلية العمل</option>
475
+ <option value="دوام كامل">دوام كامل</option>
476
+ <option value="دوام جزئي">دوام جزئي</option>
477
+ <option value="عقد مؤقت">عقد مؤقت</option>
478
+ </select>
479
+ </div>
480
+
481
+ <div class="md:col-span-3">
482
+ <label class="block text-gray-700 mb-2">صورة بطاقة العمل</label>
483
+ <div class="flex flex-wrap gap-4" id="workCardImagesContainer">
484
+ <!-- Work card images will be added here -->
485
+ </div>
486
+ <div class="file-upload mt-2">
487
+ <label for="workCardImage" class="file-upload-label border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center">
488
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
489
+ <span class="text-gray-500">اضغط لرفع صورة بطاقة العمل</span>
490
+ <span class="text-sm text-gray-400">(PDF, JPG, PNG)</span>
491
+ <input type="file" id="workCardImage" accept=".pdf,.jpg,.jpeg,.png" multiple>
492
+ </label>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="bg-white rounded-lg shadow-md p-6">
499
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">إعدادات التنبيهات</h3>
500
+
501
+ <div class="space-y-4">
502
+ <div class="flex items-center">
503
+ <input type="checkbox" id="passportAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
504
+ <label for="passportAlert" class="mr-2 block text-gray-700">تنبيه قبل انتهاء الجواز بشهر</label>
505
+ </div>
506
+
507
+ <div class="flex items-center">
508
+ <input type="checkbox" id="residenceAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
509
+ <label for="residenceAlert" class="mr-2 block text-gray-700">تنبيه قبل انتهاء الإقامة بشهر</label>
510
+ </div>
511
+
512
+ <div class="flex items-center">
513
+ <input type="checkbox" id="workCardAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
514
+ <label for="workCardAlert" class="mr-2 block text-gray-700">تنبيه قبل انتهاء بطاقة العمل بشهر</label>
515
+ </div>
516
+
517
+ <div class="pt-4 border-t border-gray-200">
518
+ <label class="block text-gray-700 mb-2">طريقة إرسال التنبيهات</label>
519
+ <div class="space-y-2">
520
+ <div class="flex items-center">
521
+ <input type="checkbox" id="emailAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
522
+ <label for="emailAlert" class="mr-2 block text-gray-700">البريد الإلكتروني</label>
523
+ </div>
524
+ <div class="flex items-center">
525
+ <input type="checkbox" id="smsAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
526
+ <label for="smsAlert" class="mr-2 block text-gray-700">رسالة SMS</label>
527
+ </div>
528
+ <div class="flex items-center">
529
+ <input type="checkbox" id="appAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
530
+ <label for="appAlert" class="mr-2 block text-gray-700">إشعار داخل التطبيق</label>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="mt-6 flex justify-end space-x-4">
538
+ <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-6 rounded-lg" id="cancelWorkerBtn">
539
+ إلغاء
540
+ </button>
541
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg">
542
+ حفظ البيانات
543
+ </button>
544
+ </div>
545
+ </form>
546
+ </div>
547
+
548
+ <!-- Documents Section -->
549
+ <div id="documentsSection" class="hidden">
550
+ <div class="mb-6 flex justify-between items-center">
551
+ <h2 class="text-2xl font-bold text-gray-800">إدارة المستندات</h2>
552
+ <div class="flex space-x-4">
553
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="exportDocumentsBtn">
554
+ <i class="fas fa-file-export ml-2"></i>
555
+ <span>تصدير المستندات</span>
556
+ </button>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
561
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
562
+ <div class="mb-4 md:mb-0">
563
+ <label for="documentFilter" class="block text-gray-700 mb-2">تصفية حسب نوع المستند:</label>
564
+ <select id="documentFilter" class="border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
565
+ <option value="all">جميع المستندات</option>
566
+ <option value="passport">جوازات السفر</option>
567
+ <option value="residence">إقامات العمل</option>
568
+ <option value="workCard">بطاقات العمل</option>
569
+ </select>
570
+ </div>
571
+ <div class="relative">
572
+ <input type="text" placeholder="بحث في المستندات..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="documentSearch">
573
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="overflow-x-auto">
578
+ <table class="min-w-full divide-y divide-gray-200">
579
+ <thead class="bg-gray-50">
580
+ <tr>
581
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع المستند</th>
582
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم العامل</th>
583
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم المستند</th>
584
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الانتهاء</th>
585
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
586
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المستند</th>
587
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجراءات</th>
588
+ </tr>
589
+ </thead>
590
+ <tbody class="bg-white divide-y divide-gray-200" id="documentsTable">
591
+ <!-- Documents will be populated here -->
592
+ </tbody>
593
+ </table>
594
+ </div>
595
+
596
+ <div class="flex items-center justify-between mt-4">
597
+ <div class="text-sm text-gray-500">
598
+ عرض <span id="documentsStart">1</span> إلى <span id="documentsEnd">10</span> من <span id="documentsTotal">0</span> مستند
599
+ </div>
600
+ <div class="flex space-x-2">
601
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="documentsPrevPage">
602
+ <i class="fas fa-chevron-right"></i>
603
+ </button>
604
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="documentsNextPage">
605
+ <i class="fas fa-chevron-left"></i>
606
+ </button>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+
612
+ <!-- Notifications Section -->
613
+ <div id="notificationsSection" class="hidden">
614
+ <div class="mb-6 flex justify-between items-center">
615
+ <h2 class="text-2xl font-bold text-gray-800">إدارة التنبيهات</h2>
616
+ <div class="flex space-x-4">
617
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="markAllAsReadBtn">
618
+ <i class="fas fa-check-circle ml-2"></i>
619
+ <span>تعيين الكل كمقروء</span>
620
+ </button>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
625
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
626
+ <div class="mb-4 md:mb-0">
627
+ <label for="notificationFilter" class="block text-gray-700 mb-2">تصفية حسب نوع التنبيه:</label>
628
+ <select id="notificationFilter" class="border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
629
+ <option value="all">جميع التنبيهات</option>
630
+ <option value="passport">جوازات السفر</option>
631
+ <option value="residence">إقامات العمل</option>
632
+ <option value="workCard">بطاقات العمل</option>
633
+ <option value="unread">غير مقروء</option>
634
+ <option value="read">مقروء</option>
635
+ </select>
636
+ </div>
637
+ <div class="relative">
638
+ <input type="text" placeholder="بحث في التنبيهات..." class="border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500" id="notificationSearch">
639
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
640
+ </div>
641
+ </div>
642
+
643
+ <div class="space-y-3" id="notificationsList">
644
+ <!-- Notifications will be populated here -->
645
+ </div>
646
+
647
+ <div class="flex items-center justify-between mt-4">
648
+ <div class="text-sm text-gray-500">
649
+ عرض <span id="notificationsStart">1</span> إلى <span id="notificationsEnd">10</span> من <span id="notificationsTotal">0</span> تنبيه
650
+ </div>
651
+ <div class="flex space-x-2">
652
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="notificationsPrevPage">
653
+ <i class="fas fa-chevron-right"></i>
654
+ </button>
655
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-white" id="notificationsNextPage">
656
+ <i class="fas fa-chevron-left"></i>
657
+ </button>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ <!-- Reports Section -->
664
+ <div id="reportsSection" class="hidden">
665
+ <div class="mb-6 flex justify-between items-center">
666
+ <h2 class="text-2xl font-bold text-gray-800">التقارير والإحصائيات</h2>
667
+ <div class="flex space-x-4">
668
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center" id="generateReportBtn">
669
+ <i class="fas fa-file-pdf ml-2"></i>
670
+ <span>تصدير تقرير</span>
671
+ </button>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
676
+ <div class="bg-white p-6 rounded-lg shadow-md">
677
+ <h3 class="text-lg font-semibold mb-4 text-gray-700">توزيع العمال حسب الجنسية</h3>
678
+ <div class="h-64" id="nationalityChart">
679
+ <!-- Chart will be rendered here -->
680
+ </div>
681
+ </div>
682
+
683
+ <div class="bg-white p-6 rounded-lg shadow-md">
684
+ <h3 class="text-lg font-semibold mb-4 text-gray-700">حالة الوثائق</h3>
685
+ <div class="h-64" id="documentsStatusChart">
686
+ <!-- Chart will be rendered here -->
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
692
+ <h3 class="text-lg font-semibold mb-4 text-gray-700">الوثائق القريبة من الانتهاء</h3>
693
+
694
+ <div class="overflow-x-auto">
695
+ <table class="min-w-full divide-y divide-gray-200">
696
+ <thead class="bg-gray-50">
697
+ <tr>
698
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع الوثيقة</th>
699
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم العامل</th>
700
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الوثيقة</th>
701
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الانتهاء</th>
702
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الأيام المتبقية</th>
703
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجراءات</th>
704
+ </tr>
705
+ </thead>
706
+ <tbody class="bg-white divide-y divide-gray-200" id="expiringDocumentsTable">
707
+ <!-- Expiring documents will be populated here -->
708
+ </tbody>
709
+ </table>
710
+ </div>
711
+ </div>
712
+
713
+ <div class="bg-white rounded-lg shadow-md p-6">
714
+ <h3 class="text-lg font-semibold mb-4 text-gray-700">إحصائيات الوثائق المنتهية</h3>
715
+
716
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
717
+ <div class="bg-blue-50 p-4 rounded-lg">
718
+ <h4 class="text-lg font-medium text-blue-800 mb-2">جوازات السفر المنتهية</h4>
719
+ <div class="flex justify-between items-center">
720
+ <span class="text-3xl font-bold" id="expiredPassportsCount">0</span>
721
+ <i class="fas fa-passport text-blue-500 text-4xl"></i>
722
+ </div>
723
+ </div>
724
+
725
+ <div class="bg-yellow-50 p-4 rounded-lg">
726
+ <h4 class="text-lg font-medium text-yellow-800 mb-2">إقامات العمل المنتهية</h4>
727
+ <div class="flex justify-between items-center">
728
+ <span class="text-3xl font-bold" id="expiredResidencesCount">0</span>
729
+ <i class="fas fa-id-card text-yellow-500 text-4xl"></i>
730
+ </div>
731
+ </div>
732
+
733
+ <div class="bg-purple-50 p-4 rounded-lg">
734
+ <h4 class="text-lg font-medium text-purple-800 mb-2">بطاقات العمل المنتهية</h4>
735
+ <div class="flex justify-between items-center">
736
+ <span class="text-3xl font-bold" id="expiredWorkCardsCount">0</span>
737
+ <i class="fas fa-id-badge text-purple-500 text-4xl"></i>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <div class="h-96" id="expiryTrendsChart">
743
+ <!-- Chart will be rendered here -->
744
+ </div>
745
+ </div>
746
+ </div>
747
+
748
+ <!-- Settings Section -->
749
+ <div id="settingsSection" class="hidden">
750
+ <div class="mb-6">
751
+ <h2 class="text-2xl font-bold text-gray-800">إعدادات النظام</h2>
752
+ </div>
753
+
754
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
755
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">إعدادات التنبيهات</h3>
756
+
757
+ <form id="notificationSettingsForm">
758
+ <div class="space-y-4">
759
+ <div>
760
+ <label class="block text-gray-700 mb-2">أيام التنبيه المسبق</label>
761
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
762
+ <div>
763
+ <label for="passportAlertDays" class="block text-gray-600 mb-1">جواز السفر</label>
764
+ <input type="number" id="passportAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30" min="1">
765
+ </div>
766
+ <div>
767
+ <label for="residenceAlertDays" class="block text-gray-600 mb-1">إقامة العمل</label>
768
+ <input type="number" id="residenceAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30" min="1">
769
+ </div>
770
+ <div>
771
+ <label for="workCardAlertDays" class="block text-gray-600 mb-1">بطاقة العمل</label>
772
+ <input type="number" id="workCardAlertDays" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="30" min="1">
773
+ </div>
774
+ </div>
775
+ </div>
776
+
777
+ <div class="pt-4 border-t border-gray-200">
778
+ <label class="block text-gray-700 mb-2">طرق إرسال التنبيهات</label>
779
+ <div class="space-y-2">
780
+ <div class="flex items-center">
781
+ <input type="checkbox" id="globalEmailAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
782
+ <label for="globalEmailAlert" class="mr-2 block text-gray-700">البريد الإلكتروني</label>
783
+ </div>
784
+ <div class="flex items-center">
785
+ <input type="checkbox" id="globalSmsAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
786
+ <label for="globalSmsAlert" class="mr-2 block text-gray-700">رسالة SMS</label>
787
+ </div>
788
+ <div class="flex items-center">
789
+ <input type="checkbox" id="globalAppAlert" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
790
+ <label for="globalAppAlert" class="mr-2 block text-gray-700">إشعار داخل التطبيق</label>
791
+ </div>
792
+ </div>
793
+ </div>
794
+
795
+ <div class="pt-4 border-t border-gray-200">
796
+ <label for="adminEmail" class="block text-gray-700 mb-2">البريد الإلكتروني للمسؤول</label>
797
+ <input type="email" id="adminEmail" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500" value="admin@zahrakirkuk.com">
798
+ </div>
799
+ </div>
800
+
801
+ <div class="mt-6 flex justify-end">
802
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg">
803
+ حفظ الإعدادات
804
+ </button>
805
+ </div>
806
+ </form>
807
+ </div>
808
+
809
+ <div class="bg-white rounded-lg shadow-md p-6">
810
+ <h3 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">نسخ احتياطي للنظام</h3>
811
+
812
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
813
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center">
814
+ <i class="fas fa-download text-4xl text-blue-500 mb-4"></i>
815
+ <p class="text-gray-600 mb-4">قم بإنشاء نسخة احتياطية من جميع بيانات النظام</p>
816
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg" id="backupBtn">
817
+ إنشاء نسخة احتياطية
818
+ </button>
819
+ </div>
820
+
821
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center">
822
+ <i class="fas fa-upload text-4xl text-green-500 mb-4"></i>
823
+ <p class="text-gray-600 mb-4">استعادة البيانات من نسخة احتياطية سابقة</p>
824
+ <div class="file-upload">
825
+ <label for="restoreFile" class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg cursor-pointer">
826
+ استعادة النسخة الاحتياطية
827
+ </label>
828
+ <input type="file" id="restoreFile" class="hidden">
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </main>
835
+ </div>
836
+ </div>
837
+
838
+ <!-- Document Preview Modal -->
839
+ <div id="documentPreviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
840
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-auto">
841
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
842
+ <h3 class="text-lg font-semibold text-gray-800" id="documentPreviewTitle">معاينة المستند</h3>
843
+ <button id="closeDocumentPreview" class="text-gray-500 hover:text-gray-700">
844
+ <i class="fas fa-times"></i>
845
+ </button>
846
+ </div>
847
+
848
+ <div class="p-4" id="documentPreviewContent">
849
+ <!-- Document content will be shown here -->
850
+ </div>
851
+
852
+ <div class="p-4 border-t border-gray-200 flex justify-end sticky bottom-0 bg-white">
853
+ <button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg mr-2" id="printDocumentBtn">
854
+ <i class="fas fa-print ml-2"></i>
855
+ طباعة
856
+ </button>
857
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg" id="downloadDocumentBtn">
858
+ <i class="fas fa-download ml-2"></i>
859
+ تحميل
860
+ </button>
861
+ </div>
862
+ </div>
863
+ </div>
864
+
865
+ <!-- Confirmation Modal -->
866
+ <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
867
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
868
+ <div class="p-4 border-b border-gray-200">
869
+ <h3 class="text-lg font-semibold text-gray-800" id="confirmationTitle">تأكيد الإجراء</h3>
870
+ </div>
871
+
872
+ <div class="p-4">
873
+ <p class="text-gray-700" id="confirmationMessage">هل أنت متأكد من أنك تريد تنفيذ هذا الإجراء؟</p>
874
+ </div>
875
+
876
+ <div class="p-4 border-t border-gray-200 flex justify-end">
877
+ <button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg mr-2" id="cancelActionBtn">
878
+ إلغاء
879
+ </button>
880
+ <button class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg" id="confirmActionBtn">
881
+ تأكيد
882
+ </button>
883
+ </div>
884
+ </div>
885
+ </div>
886
+
887
+ <!-- Worker Details Modal -->
888
+ <div id="workerDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
889
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-auto">
890
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
891
+ <h3 class="text-lg font-semibold text-gray-800">تفاصيل العامل</h3>
892
+ <button id="closeWorkerDetails" class="text-gray-500 hover:text-gray-700">
893
+ <i class="fas fa-times"></i>
894
+ </button>
895
+ </div>
896
+
897
+ <div class="p-4" id="workerDetailsContent">
898
+ <!-- Worker details will be shown here -->
899
+ </div>
900
+
901
+ <div class="p-4 border-t border-gray-200 flex justify-end sticky bottom-0 bg-white">
902
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg" id="editWorkerBtn">
903
+ <i class="fas fa-edit ml-2"></i>
904
+ تعديل
905
+ </button>
906
+ </div>
907
+ </div>
908
+ </div>
909
+
910
+ <!-- Success Toast -->
911
+ <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden flex items-center">
912
+ <i class="fas fa-check-circle mr-2"></i>
913
+ <span id="successMessage">تم تنفيذ العملية بنجاح</span>
914
+ </div>
915
+
916
+ <!-- Error Toast -->
917
+ <div id="errorToast" class="fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg hidden flex items-center">
918
+ <i class="fas fa-exclamation-circle mr-2"></i>
919
+ <span id="errorMessage">حدث خطأ أثناء تنفيذ العملية</span>
920
+ </div>
921
+
922
+ <script>
923
+ // Database Simulation
924
+ const database = {
925
+ workers: [
926
+ {
927
+ id: 1,
928
+ name: "أحمد محمد",
929
+ photo: "https://randomuser.me/api/portraits/men/1.jpg",
930
+ nationality: "الهند",
931
+ birthDate: "1985-05-15",
932
+ phone: "1234567890",
933
+ email: "ahmed@example.com",
934
+ address: "شارع النخيل، بغداد",
935
+ passport: {
936
+ number: "A12345678",
937
+ issueDate: "2020-01-10",
938
+ expiryDate: "2025-01-10",
939
+ images: ["passport1.jpg", "passport2.jpg"]
940
+ },
941
+ residence: {
942
+ number: "R987654",
943
+ issueDate: "2021-03-15",
944
+ expiryDate: "2023-09-15",
945
+ images: ["residence1.jpg"]
946
+ },
947
+ workCard: {
948
+ number: "W456789",
949
+ issueDate: "2021-04-01",
950
+ expiryDate: "2023-10-01",
951
+ images: ["workcard1.jpg"]
952
+ },
953
+ arrivalAirport: "مطار بغداد الدولي",
954
+ workType: "دوام كامل",
955
+ alertSettings: {
956
+ passport: true,
957
+ residence: true,
958
+ workCard: true,
959
+ email: true,
960
+ sms: false,
961
+ app: true
962
+ },
963
+ createdAt: "2021-03-10T08:00:00Z"
964
+ },
965
+ {
966
+ id: 2,
967
+ name: "علي حسن",
968
+ photo: "https://randomuser.me/api/portraits/men/2.jpg",
969
+ nationality: "باكستان",
970
+ birthDate: "1990-08-20",
971
+ phone: "9876543210",
972
+ email: "ali@example.com",
973
+ address: "حي الزهور، كركوك",
974
+ passport: {
975
+ number: "B87654321",
976
+ issueDate: "2019-11-05",
977
+ expiryDate: "2024-11-05",
978
+ images: ["passport3.jpg"]
979
+ },
980
+ residence: {
981
+ number: "R123456",
982
+ issueDate: "2022-01-20",
983
+ expiryDate: "2023-07-20",
984
+ images: ["residence2.jpg", "residence3.jpg"]
985
+ },
986
+ workCard: {
987
+ number: "W123456",
988
+ issueDate: "2022-02-01",
989
+ expiryDate: "2023-08-01",
990
+ images: ["workcard2.jpg"]
991
+ },
992
+ arrivalAirport: "مطار أربيل الدولي",
993
+ workType: "عقد مؤقت",
994
+ alertSettings: {
995
+ passport: true,
996
+ residence: true,
997
+ workCard: true,
998
+ email: true,
999
+ sms: true,
1000
+ app: true
1001
+ },
1002
+ createdAt: "2022-01-15T10:30:00Z"
1003
+ },
1004
+ {
1005
+ id: 3,
1006
+ name: "محمد عبدالله",
1007
+ photo: "https://randomuser.me/api/portraits/men/3.jpg",
1008
+ nationality: "بنغلاديش",
1009
+ birthDate: "1988-12-10",
1010
+ phone: "5555555555",
1011
+ email: "mohammed@example.com",
1012
+ address: "شارع السلام، السليمانية",
1013
+ passport: {
1014
+ number: "C55555555",
1015
+ issueDate: "2021-06-15",
1016
+ expiryDate: "2026-06-15",
1017
+ images: ["passport4.jpg"]
1018
+ },
1019
+ residence: {
1020
+ number: "R555555",
1021
+ issueDate: "2021-08-10",
1022
+ expiryDate: "2023-08-10",
1023
+ images: ["residence4.jpg"]
1024
+ },
1025
+ workCard: {
1026
+ number: "W555555",
1027
+ issueDate: "2021-09-01",
1028
+ expiryDate: "2023-09-01",
1029
+ images: ["workcard3.jpg"]
1030
+ },
1031
+ arrivalAirport: "مطار السليمانية الدولي",
1032
+ workType: "دوام جزئي",
1033
+ alertSettings: {
1034
+ passport: true,
1035
+ residence: true,
1036
+ workCard: true,
1037
+ email: false,
1038
+ sms: false,
1039
+ app: true
1040
+ },
1041
+ createdAt: "2021-07-20T14:15:00Z"
1042
+ }
1043
+ ],
1044
+ notifications: [
1045
+ {
1046
+ id: 1,
1047
+ worker
1048
+ </html>
prompts.txt ADDED
File without changes