Hugging Face's logo

Spaces:
Yusf12
/
https-huggingface-co-spaces-enzostvs-deepsite
Running

App Files Community
Yusf12 commited on
Commit
472ff6c
·
verified ·
1 Parent(s): 16be5ed

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +631 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co Spaces Enzostvs Deepsite
3
- emoji: 📉
4
- colorFrom: indigo
5
- colorTo: red
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: https-huggingface-co-spaces-enzostvs-deepsite
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,631 @@
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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#0d9488',
15
+ secondary: '#0f766e',
16
+ accent: '#f59e0b',
17
+ light: '#f0fdfa',
18
+ dark: '#134e4a'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
26
+
27
+ body {
28
+ font-family: 'Tajawal', sans-serif;
29
+ }
30
+
31
+ input::placeholder {
32
+ text-align: right;
33
+ }
34
+
35
+ .table-container {
36
+ max-height: 400px;
37
+ overflow-y: auto;
38
+ }
39
+
40
+ .report-table {
41
+ min-width: 1000px;
42
+ }
43
+
44
+ .scrollbar-hide::-webkit-scrollbar {
45
+ display: none;
46
+ }
47
+
48
+ .fade-in {
49
+ animation: fadeIn 0.5s ease-in-out;
50
+ }
51
+
52
+ @keyframes fadeIn {
53
+ from { opacity: 0; transform: translateY(10px); }
54
+ to { opacity: 1; transform: translateY(0); }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-50 text-gray-800">
59
+ <div class="min-h-screen flex flex-col">
60
+ <!-- Header -->
61
+ <header class="bg-primary text-white shadow-md">
62
+ <div class="container mx-auto px-4 py-6">
63
+ <div class="flex flex-col lg:flex-row justify-between items-center">
64
+ <div class="flex items-center space-x-3">
65
+ <i class="fas fa-charging-station text-3xl text-accent"></i>
66
+ <div>
67
+ <h1 class="text-2xl font-bold">نظام إدارة تقارير المولدات</h1>
68
+ <p class="text-light opacity-80">تتبع صيانة المولدات وإدارة التقارير اليومية</p>
69
+ </div>
70
+ </div>
71
+ <div class="mt-4 lg:mt-0">
72
+ <div class="text-sm bg-secondary px-3 py-1 rounded-full">آخر تحديث: <span id="current-date"></span></div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </header>
77
+
78
+ <!-- Main Content -->
79
+ <main class="flex-grow container mx-auto px-4 py-8">
80
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
81
+ <!-- Data Entry Form -->
82
+ <div class="lg:col-span-2 space-y-8">
83
+ <div class="bg-white rounded-lg shadow-lg p-6 fade-in">
84
+ <div class="flex items-center justify-between mb-6">
85
+ <h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">نموذج إدخال البيانات</h2>
86
+ <button id="reset-form" class="text-secondary hover:text-primary">
87
+ <i class="fas fa-redo-alt mr-1"></i> إعادة تعيين
88
+ </button>
89
+ </div>
90
+
91
+ <form id="report-form" class="grid grid-cols-1 md:grid-cols-2 gap-6">
92
+ <!-- Date and Employee -->
93
+ <div class="space-y-4">
94
+ <div>
95
+ <label class="block text-sm font-medium mb-1 text-gray-600">التاريخ</label>
96
+ <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
97
+ </div>
98
+
99
+ <div>
100
+ <label class="block text-sm font-medium mb-1 text-gray-600">اسم الموظف</label>
101
+ <input type="text" id="employee" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل اسم الموظف">
102
+ </div>
103
+
104
+ <div>
105
+ <label class="block text-sm font-medium mb-1 text-gray-600">اسم المولد</label>
106
+ <select id="generator-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
107
+ <option value="">اختر اسم المولد</option>
108
+ <option value="المولد 1">المولد 1</option>
109
+ <option value="المولد 2">المولد 2</option>
110
+ <option value="المولد 3">المولد 3</option>
111
+ <option value="المولد 4">المولد 4</option>
112
+ </select>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Process and Oil -->
117
+ <div class="space-y-4">
118
+ <div>
119
+ <label class="block text-sm font-medium mb-1 text-gray-600">العملية</label>
120
+ <select id="process" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
121
+ <option value="">اختر العملية</option>
122
+ <option value="تغيير الزيت">تغيير الزيت</option>
123
+ <option value="صيانة دورية">صيانة دورية</option>
124
+ <option value="تزويد بالوقود">تزويد بالوقود</option>
125
+ <option value="فحص طارئ">فحص طارئ</option>
126
+ </select>
127
+ </div>
128
+
129
+ <div>
130
+ <label class="block text-sm font-medium mb-1 text-gray-600">نوع الزيت</label>
131
+ <select id="oil-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
132
+ <option value="">اختر نوع الزيت</option>
133
+ <option value="زيت محرك 10W-30">زيت محرك 10W-30</option>
134
+ <option value="زيت محرك 15W-40">زيت محرك 15W-40</option>
135
+ <option value="زيت محرك اصطناعي">زيت محرك اصطناعي</option>
136
+ </select>
137
+ </div>
138
+
139
+ <div>
140
+ <label class="block text-sm font-medium mb-1 text-gray-600">عدد ساعات العمل</label>
141
+ <input type="number" id="working-hours" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل عدد الساعات">
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Liters Section -->
146
+ <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-6 bg-light p-4 rounded-lg">
147
+ <div>
148
+ <label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات (داخل)</label>
149
+ <input type="number" id="liters-in" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل عدد اللترات">
150
+ </div>
151
+
152
+ <div>
153
+ <label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات الإضافية</label>
154
+ <input type="number" id="supply-liters" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل اللترات الإضافية">
155
+ </div>
156
+
157
+ <div>
158
+ <label class="block text-sm font-medium mb-1 text-gray-600">إجمالي اللترات</label>
159
+ <input type="number" id="total-liters" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
160
+ </div>
161
+
162
+ <div>
163
+ <label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات (خارج)</label>
164
+ <input type="number" id="liters-out" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="أدخل اللترات المستهلكة">
165
+ </div>
166
+
167
+ <div>
168
+ <label class="block text-sm font-medium mb-1 text-gray-600">الفرق في اللترات</label>
169
+ <input type="number" id="liters-diff" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
170
+ </div>
171
+
172
+ <div>
173
+ <label class="block text-sm font-medium mb-1 text-gray-600">الفرق في ساعات العمل</label>
174
+ <input type="number" id="hours-diff" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Submit Button -->
179
+ <div class="md:col-span-2 flex justify-center">
180
+ <button type="submit" class="w-full md:w-64 py-3 bg-primary hover:bg-secondary text-white font-medium rounded-lg transition duration-300 flex items-center justify-center">
181
+ <i class="fas fa-save ml-2"></i> حفظ التقرير
182
+ </button>
183
+ </div>
184
+ </form>
185
+ </div>
186
+
187
+ <!-- Recent Reports -->
188
+ <div class="bg-white rounded-lg shadow-lg p-6 fade-in">
189
+ <div class="flex items-center justify-between mb-6">
190
+ <h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">آخر التقارير</h2>
191
+ <button id="refresh-reports" class="text-secondary hover:text-primary">
192
+ <i class="fas fa-sync-alt mr-1"></i> تحديث
193
+ </button>
194
+ </div>
195
+
196
+ <div class="overflow-x-auto">
197
+ <table class="min-w-full divide-y divide-gray-200">
198
+ <thead class="bg-gray-50">
199
+ <tr>
200
+ <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
201
+ <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المولد</th>
202
+ <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العملية</th>
203
+ <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي اللترات</th>
204
+ <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق</th>
205
+ </tr>
206
+ </thead>
207
+ <tbody id="recent-reports" class="bg-white divide-y divide-gray-200">
208
+ <!-- Reports will be inserted here -->
209
+ </tbody>
210
+ </table>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Reports Section -->
216
+ <div class="space-y-8">
217
+ <!-- Report Generator -->
218
+ <div class="bg-white rounded-lg shadow-lg p-6 fade-in">
219
+ <h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3 mb-6">إنشاء تقرير</h2>
220
+
221
+ <form id="report-generator" class="space-y-5">
222
+ <div>
223
+ <label class="block text-sm font-medium mb-1 text-gray-600">اسم المولد</label>
224
+ <select id="report-generator-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
225
+ <option value="all">جميع المولدات</option>
226
+ <option value="المولد 1">المولد 1</option>
227
+ <option value="المولد 2">المولد 2</option>
228
+ <option value="المولد 3">المولد 3</option>
229
+ <option value="المولد 4">المولد 4</option>
230
+ </select>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
234
+ <div>
235
+ <label class="block text-sm font-medium mb-1 text-gray-600">من تاريخ</label>
236
+ <input type="date" id="start-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
237
+ </div>
238
+
239
+ <div>
240
+ <label class="block text-sm font-medium mb-1 text-gray-600">إلى تاريخ</label>
241
+ <input type="date" id="end-date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
242
+ </div>
243
+ </div>
244
+
245
+ <div class="flex justify-center pt-2">
246
+ <button type="submit" class="w-full py-3 bg-accent hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300 flex items-center justify-center">
247
+ <i class="fas fa-file-alt ml-2"></i> إنشاء تقرير
248
+ </button>
249
+ </div>
250
+ </form>
251
+ </div>
252
+
253
+ <!-- Report Result -->
254
+ <div class="bg-white rounded-lg shadow-lg p-6 fade-in">
255
+ <div class="flex items-center justify-between mb-6">
256
+ <h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">نتيجة التقرير</h2>
257
+ <button id="export-report" class="text-secondary hover:text-primary disabled:opacity-50" disabled>
258
+ <i class="fas fa-file-export mr-1"></i> تصدير
259
+ </button>
260
+ </div>
261
+
262
+ <div id="report-result" class="table-container scrollbar-hide">
263
+ <p class="text-center text-gray-500 py-8">لم يتم إنشاء أي تقرير بعد. استخدم نموذج إنشاء التقرير لإنشاء تقرير جديد.</p>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Statistics -->
268
+ <div class="bg-white rounded-lg shadow-lg p-6 fade-in">
269
+ <h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3 mb-6">إحصائيات</h2>
270
+
271
+ <div class="grid grid-cols-2 gap-4">
272
+ <div class="bg-light p-4 rounded-lg text-center">
273
+ <div class="text-3xl font-bold text-primary" id="total-reports">0</div>
274
+ <div class="text-sm text-gray-600 mt-1">إجمالي التقارير</div>
275
+ </div>
276
+
277
+ <div class="bg-light p-4 rounded-lg text-center">
278
+ <div class="text-3xl font-bold text-primary" id="oil-changes">0</div>
279
+ <div class="text-sm text-gray-600 mt-1">عمليات تغيير الزيت</div>
280
+ </div>
281
+
282
+ <div class="bg-light p-4 rounded-lg text-center">
283
+ <div class="text-3xl font-bold text-primary" id="total-liters-stats">0</div>
284
+ <div class="text-sm text-gray-6 00 mt-1">إجمالي اللترات</div>
285
+ </div>
286
+
287
+ <div class="bg-light p-4 rounded-lg text-center">
288
+ <div class="text-3xl font-bold text-primary" id="avg-hours">0</div>
289
+ <div class="text-sm text-gray-600 mt-1">متوسط ساعات التشغيل</div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </main>
296
+
297
+ <!-- Footer -->
298
+ <footer class="bg-dark text-white py-6 mt-12">
299
+ <div class="container mx-auto px-4 text-center">
300
+ <p>نظام تقارير المولدات &copy; <span id="current-year"></span> - جميع الحقوق محفوظة</p>
301
+ <p class="text-light opacity-80 mt-2">تم التطوير باستخدام HTML, CSS, JavaScript</p>
302
+ </div>
303
+ </footer>
304
+ </div>
305
+
306
+ <script>
307
+ // Initialize the application
308
+ document.addEventListener('DOMContentLoaded', function() {
309
+ // Set current date and year
310
+ const now = new Date();
311
+ document.getElementById('current-date').textContent = now.toLocaleDateString('ar-EG');
312
+ document.getElementById('current-year').textContent = now.getFullYear();
313
+
314
+ // Set default dates for report
315
+ const today = new Date().toISOString().split('T')[0];
316
+ document.getElementById('date').value = today;
317
+ document.getElementById('start-date').value = today;
318
+ document.getElementById('end-date').value = today;
319
+
320
+ // Generate sample data if no data exists
321
+ if (!localStorage.getItem('generatorReports')) {
322
+ generateSampleData();
323
+ }
324
+
325
+ // Calculate and update statistics
326
+ updateStatistics();
327
+
328
+ // Load recent reports
329
+ loadRecentReports();
330
+
331
+ // Add event listeners
332
+ setupEventListeners();
333
+ });
334
+
335
+ // Generate sample data
336
+ function generateSampleData() {
337
+ const sampleData = [
338
+ {
339
+ date: '2023-10-01',
340
+ employee: 'أحمد محمد',
341
+ generatorName: 'المولد 1',
342
+ process: 'تغيير الزيت',
343
+ oilType: 'زيت محرك 10W-30',
344
+ litersIn: 50,
345
+ supplyLiters: 10,
346
+ totalLiters: 60,
347
+ litersOut: 45,
348
+ litersDiff: 15,
349
+ workingHours: 120,
350
+ hoursDiff: 120
351
+ },
352
+ {
353
+ date: '2023-10-03',
354
+ employee: 'علي حسن',
355
+ generatorName: 'المولد 2',
356
+ process: 'تزويد بالوقود',
357
+ oilType: '',
358
+ litersIn: 30,
359
+ supplyLiters: 0,
360
+ totalLiters: 30,
361
+ litersOut: 25,
362
+ litersDiff: 5,
363
+ workingHours: 80,
364
+ hoursDiff: 80
365
+ },
366
+ {
367
+ date: '2023-10-05',
368
+ employee: 'محمد خالد',
369
+ generatorName: 'المولد 3',
370
+ process: 'صيانة دورية',
371
+ oilType: 'زيت محرك 15W-40',
372
+ litersIn: 40,
373
+ supplyLiters: 5,
374
+ totalLiters: 45,
375
+ litersOut: 30,
376
+ litersDiff: 15,
377
+ workingHours: 150,
378
+ hoursDiff: 150
379
+ }
380
+ ];
381
+
382
+ localStorage.setItem('generatorReports', JSON.stringify(sampleData));
383
+ }
384
+
385
+ // Update statistics
386
+ function updateStatistics() {
387
+ const reports = JSON.parse(localStorage.getItem('generatorReports')) || [];
388
+
389
+ document.getElementById('total-reports').textContent = reports.length;
390
+
391
+ const oilChanges = reports.filter(report => report.process === 'تغيير الزيت').length;
392
+ document.getElementById('oil-changes').textContent = oilChanges;
393
+
394
+ const totalLiters = reports.reduce((sum, report) => sum + report.totalLiters, 0);
395
+ document.getElementById('total-liters-stats').textContent = totalLiters;
396
+
397
+ const avgHours = reports.length > 0
398
+ ? (reports.reduce((sum, report) => sum + report.workingHours, 0) / reports.length).toFixed(1)
399
+ : 0;
400
+ document.getElementById('avg-hours').textContent = avgHours;
401
+ }
402
+
403
+ // Load recent reports
404
+ function loadRecentReports() {
405
+ const reports = JSON.parse(localStorage.getItem('generatorReports')) || [];
406
+ const container = document.getElementById('recent-reports');
407
+ container.innerHTML = '';
408
+
409
+ // Show only last 5 reports
410
+ const recentReports = reports.slice(-5).reverse();
411
+
412
+ if (recentReports.length === 0) {
413
+ container.innerHTML = `
414
+ <tr>
415
+ <td colspan="5" class="px-4 py-4 text-center text-gray-500">
416
+ لا توجد تقارير متاحة
417
+ </td>
418
+ </tr>
419
+ `;
420
+ return;
421
+ }
422
+
423
+ recentReports.forEach(report => {
424
+ const row = document.createElement('tr');
425
+ row.innerHTML = `
426
+ <td class="px-4 py-2 text-sm">${report.date}</td>
427
+ <td class="px-4 py-2 text-sm font-medium">${report.generatorName}</td>
428
+ <td class="px-4 py-2 text-sm">${report.process}</td>
429
+ <td class="px-4 py-2 text-sm">${report.totalLiters} لتر</td>
430
+ <td class="px-4 py-2 text-sm font-medium ${report.litersDiff >= 0 ? 'text-green-600' : 'text-red-600'}">${report.litersDiff} لتر</td>
431
+ `;
432
+ container.appendChild(row);
433
+ });
434
+ }
435
+
436
+ // Setup event listeners
437
+ function setupEventListeners() {
438
+ // Calculate total liters
439
+ document.getElementById('liters-in').addEventListener('input', calculateTotalLiters);
440
+ document.getElementById('supply-liters').addEventListener('input', calculateTotalLiters);
441
+
442
+ // Calculate liters difference
443
+ document.getElementById('liters-out').addEventListener('input', calculateLitersDiff);
444
+
445
+ // Form submission
446
+ document.getElementById('report-form').addEventListener('submit', function(e) {
447
+ e.preventDefault();
448
+ saveReport();
449
+ });
450
+
451
+ // Report generator submission
452
+ document.getElementById('report-generator').addEventListener('submit', function(e) {
453
+ e.preventDefault();
454
+ generateReport();
455
+ });
456
+
457
+ // Reset form
458
+ document.getElementById('reset-form').addEventListener('click', function() {
459
+ document.getElementById('report-form').reset();
460
+ document.getElementById('total-liters').value = '';
461
+ document.getElementById('liters-diff').value = '';
462
+ document.getElementById('hours-diff').value = '';
463
+ });
464
+
465
+ // Refresh reports
466
+ document.getElementById('refresh-reports').addEventListener('click', function() {
467
+ loadRecentReports();
468
+ updateStatistics();
469
+ });
470
+
471
+ // Export report
472
+ document.getElementById('export-report').addEventListener('click', function() {
473
+ exportToExcel();
474
+ });
475
+ }
476
+
477
+ // Calculate total liters
478
+ function calculateTotalLiters() {
479
+ const litersIn = parseFloat(document.getElementById('liters-in').value) || 0;
480
+ const supplyLiters = parseFloat(document.getElementById('supply-liters').value) || 0;
481
+ const totalLiters = litersIn + supplyLiters;
482
+ document.getElementById('total-liters').value = totalLiters;
483
+ calculateLitersDiff();
484
+ }
485
+
486
+ // Calculate liters difference
487
+ function calculateLitersDiff() {
488
+ const totalLiters = parseFloat(document.getElementById('total-liters').value) || 0;
489
+ const litersOut = parseFloat(document.getElementById('liters-out').value) || 0;
490
+ const litersDiff = totalLiters - litersOut;
491
+ document.getElementById('liters-diff').value = litersDiff;
492
+ }
493
+
494
+ // Save report
495
+ function saveReport() {
496
+ // Get form values
497
+ const date = document.getElementById('date').value;
498
+ const employee = document.getElementById('employee').value;
499
+ const generatorName = document.getElementById('generator-name').value;
500
+ const process = document.getElementById('process').value;
501
+ const oilType = document.getElementById('oil-type').value;
502
+ const litersIn = parseFloat(document.getElementById('liters-in').value) || 0;
503
+ const supplyLiters = parseFloat(document.getElementById('supply-liters').value) || 0;
504
+ const totalLiters = parseFloat(document.getElementById('total-liters').value) || 0;
505
+ const litersOut = parseFloat(document.getElementById('liters-out').value) || 0;
506
+ const litersDiff = parseFloat(document.getElementById('liters-diff').value) || 0;
507
+ const workingHours = parseFloat(document.getElementById('working-hours').value) || 0;
508
+
509
+ // Calculate hours difference (for demo purposes)
510
+ // In a real system, this would be calculated based on previous records
511
+ const hoursDiff = workingHours;
512
+
513
+ // Create report object
514
+ const report = {
515
+ date,
516
+ employee,
517
+ generatorName,
518
+ process,
519
+ oilType,
520
+ litersIn,
521
+ supplyLiters,
522
+ totalLiters,
523
+ litersOut,
524
+ litersDiff,
525
+ workingHours,
526
+ hoursDiff
527
+ };
528
+
529
+ // Save to localStorage
530
+ const reports = JSON.parse(localStorage.getItem('generatorReports')) || [];
531
+ reports.push(report);
532
+ localStorage.setItem('generatorReports', JSON.stringify(reports));
533
+
534
+ // Show success message
535
+ alert('تم حفظ التقرير بنجاح!');
536
+
537
+ // Reset form
538
+ document.getElementById('report-form').reset();
539
+ document.getElementById('total-liters').value = '';
540
+ document.getElementById('liters-diff').value = '';
541
+ document.getElementById('hours-diff').value = '';
542
+
543
+ // Update UI
544
+ updateStatistics();
545
+ loadRecentReports();
546
+ }
547
+
548
+ // Generate report
549
+ function generateReport() {
550
+ const generatorName = document.getElementById('report-generator-name').value;
551
+ const startDate = document.getElementById('start-date').value;
552
+ const endDate = document.getElementById('end-date').value;
553
+
554
+ const reports = JSON.parse(localStorage.getItem('generatorReports')) || [];
555
+
556
+ // Filter reports
557
+ let filteredReports = reports.filter(report => {
558
+ const reportDate = new Date(report.date);
559
+ const start = new Date(startDate);
560
+ const end = new Date(endDate);
561
+
562
+ const dateInRange = reportDate >= start && reportDate <= end;
563
+ const generatorMatch = generatorName === 'all' || report.generatorName === generatorName;
564
+
565
+ return dateInRange && generatorMatch;
566
+ });
567
+
568
+ // Sort by date descending
569
+ filteredReports.sort((a, b) => new Date(b.date) - new Date(a.date));
570
+
571
+ // Display results
572
+ const container = document.getElementById('report-result');
573
+
574
+ if (filteredReports.length === 0) {
575
+ container.innerHTML = `
576
+ <p class="text-center text-gray-500 py-8">
577
+ لا توجد نتائج للتقارير في الفترة المحددة
578
+ </p>
579
+ `;
580
+ document.getElementById('export-report').disabled = true;
581
+ return;
582
+ }
583
+
584
+ let tableHTML = `
585
+ <table class="min-w-full divide-y divide-gray-200 report-table">
586
+ <thead class="bg-gray-50 sticky top-0">
587
+ <tr>
588
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
589
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الموظف</th>
590
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المولد</th>
591
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العملية</th>
592
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي اللترات</th>
593
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق في اللترات</th>
594
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">ساعات العمل</th>
595
+ <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق في الساعات</th>
596
+ </tr>
597
+ </thead>
598
+ <tbody class="bg-white divide-y divide-gray-200">
599
+ `;
600
+
601
+ filteredReports.forEach(report => {
602
+ tableHTML += `
603
+ <tr>
604
+ <td class="px-4 py-2 text-sm">${report.date}</td>
605
+ <td class="px-4 py-2 text-sm">${report.employee}</td>
606
+ <td class="px-4 py-2 text-sm font-medium">${report.generatorName}</td>
607
+ <td class="px-4 py-2 text-sm">${report.process}</td>
608
+ <td class="px-4 py-2 text-sm">${report.totalLiters} لتر</td>
609
+ <td class="px-4 py-2 text-sm font-medium ${report.litersDiff >= 0 ? 'text-green-600' : 'text-red-600'}">${report.litersDiff} لتر</td>
610
+ <td class="px-4 py-2 text-sm">${report.workingHours}</td>
611
+ <td class="px-4 py-2 text-sm">${report.hoursDiff}</td>
612
+ </tr>
613
+ `;
614
+ });
615
+
616
+ tableHTML += `
617
+ </tbody>
618
+ </table>
619
+ `;
620
+
621
+ container.innerHTML = tableHTML;
622
+ document.getElementById('export-report').disabled = false;
623
+ }
624
+
625
+ // Export to Excel
626
+ function exportToExcel() {
627
+ alert('في نظام حقيقي، سيتم تنزيل التقرير كملف Excel. هذه مجرد محاكاة.');
628
+ }
629
+ </script>
630
+ <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=Yusf12/https-huggingface-co-spaces-enzostvs-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
631
+ </html>