|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>نظام تقارير المولدات</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#0d9488', |
|
|
secondary: '#0f766e', |
|
|
accent: '#f59e0b', |
|
|
light: '#f0fdfa', |
|
|
dark: '#134e4a' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Tajawal', sans-serif; |
|
|
} |
|
|
|
|
|
input::placeholder { |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.table-container { |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.report-table { |
|
|
min-width: 1000px; |
|
|
} |
|
|
|
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-primary text-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex flex-col lg:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-charging-station text-3xl text-accent"></i> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold">نظام إدارة تقارير المولدات</h1> |
|
|
<p class="text-light opacity-80">تتبع صيانة المولدات وإدارة التقارير اليومية</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 lg:mt-0"> |
|
|
<div class="text-sm bg-secondary px-3 py-1 rounded-full">آخر تحديث: <span id="current-date"></span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-8"> |
|
|
<div class="bg-white rounded-lg shadow-lg p-6 fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">نموذج إدخال البيانات</h2> |
|
|
<button id="reset-form" class="text-secondary hover:text-primary"> |
|
|
<i class="fas fa-redo-alt mr-1"></i> إعادة تعيين |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form id="report-form" class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">التاريخ</label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">اسم الموظف</label> |
|
|
<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="أدخل اسم الموظف"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">اسم المولد</label> |
|
|
<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"> |
|
|
<option value="">اختر اسم المولد</option> |
|
|
<option value="المولد 1">المولد 1</option> |
|
|
<option value="المولد 2">المولد 2</option> |
|
|
<option value="المولد 3">المولد 3</option> |
|
|
<option value="المولد 4">المولد 4</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">العملية</label> |
|
|
<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"> |
|
|
<option value="">اختر العملية</option> |
|
|
<option value="تغيير الزيت">تغيير الزيت</option> |
|
|
<option value="صيانة دورية">صيانة دورية</option> |
|
|
<option value="تزويد بالوقود">تزويد بالوقود</option> |
|
|
<option value="فحص طارئ">فحص طارئ</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">نوع الزيت</label> |
|
|
<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"> |
|
|
<option value="">اختر نوع الزيت</option> |
|
|
<option value="زيت محرك 10W-30">زيت محرك 10W-30</option> |
|
|
<option value="زيت محرك 15W-40">زيت محرك 15W-40</option> |
|
|
<option value="زيت محرك اصطناعي">زيت محرك اصطناعي</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">عدد ساعات العمل</label> |
|
|
<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="أدخل عدد الساعات"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-6 bg-light p-4 rounded-lg"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات (داخل)</label> |
|
|
<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="أدخل عدد اللترات"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات الإضافية</label> |
|
|
<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="أدخل اللترات الإضافية"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">إجمالي اللترات</label> |
|
|
<input type="number" id="total-liters" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">عدد اللترات (خارج)</label> |
|
|
<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="أدخل اللترات المستهلكة"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">الفرق في اللترات</label> |
|
|
<input type="number" id="liters-diff" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">الفرق في ساعات العمل</label> |
|
|
<input type="number" id="hours-diff" readonly class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-2 flex justify-center"> |
|
|
<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"> |
|
|
<i class="fas fa-save ml-2"></i> حفظ التقرير |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">آخر التقارير</h2> |
|
|
<button id="refresh-reports" class="text-secondary hover:text-primary"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> تحديث |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المولد</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العملية</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي اللترات</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="recent-reports" class="bg-white divide-y divide-gray-200"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 fade-in"> |
|
|
<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3 mb-6">إنشاء تقرير</h2> |
|
|
|
|
|
<form id="report-generator" class="space-y-5"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">اسم المولد</label> |
|
|
<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"> |
|
|
<option value="all">جميع المولدات</option> |
|
|
<option value="المولد 1">المولد 1</option> |
|
|
<option value="المولد 2">المولد 2</option> |
|
|
<option value="المولد 3">المولد 3</option> |
|
|
<option value="المولد 4">المولد 4</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">من تاريخ</label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1 text-gray-600">إلى تاريخ</label> |
|
|
<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"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center pt-2"> |
|
|
<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"> |
|
|
<i class="fas fa-file-alt ml-2"></i> إنشاء تقرير |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 fade-in"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3">نتيجة التقرير</h2> |
|
|
<button id="export-report" class="text-secondary hover:text-primary disabled:opacity-50" disabled> |
|
|
<i class="fas fa-file-export mr-1"></i> تصدير |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="report-result" class="table-container scrollbar-hide"> |
|
|
<p class="text-center text-gray-500 py-8">لم يتم إنشاء أي تقرير بعد. استخدم نموذج إنشاء التقرير لإنشاء تقرير جديد.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6 fade-in"> |
|
|
<h2 class="text-xl font-bold text-dark border-r-4 border-primary pr-3 mb-6">إحصائيات</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-light p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-primary" id="total-reports">0</div> |
|
|
<div class="text-sm text-gray-600 mt-1">إجمالي التقارير</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-light p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-primary" id="oil-changes">0</div> |
|
|
<div class="text-sm text-gray-600 mt-1">عمليات تغيير الزيت</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-light p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-primary" id="total-liters-stats">0</div> |
|
|
<div class="text-sm text-gray-6 00 mt-1">إجمالي اللترات</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-light p-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-primary" id="avg-hours">0</div> |
|
|
<div class="text-sm text-gray-600 mt-1">متوسط ساعات التشغيل</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white py-6 mt-12"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<p>نظام تقارير المولدات © <span id="current-year"></span> - جميع الحقوق محفوظة</p> |
|
|
<p class="text-light opacity-80 mt-2">تم التطوير باستخدام HTML, CSS, JavaScript</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const now = new Date(); |
|
|
document.getElementById('current-date').textContent = now.toLocaleDateString('ar-EG'); |
|
|
document.getElementById('current-year').textContent = now.getFullYear(); |
|
|
|
|
|
|
|
|
const today = new Date().toISOString().split('T')[0]; |
|
|
document.getElementById('date').value = today; |
|
|
document.getElementById('start-date').value = today; |
|
|
document.getElementById('end-date').value = today; |
|
|
|
|
|
|
|
|
if (!localStorage.getItem('generatorReports')) { |
|
|
generateSampleData(); |
|
|
} |
|
|
|
|
|
|
|
|
updateStatistics(); |
|
|
|
|
|
|
|
|
loadRecentReports(); |
|
|
|
|
|
|
|
|
setupEventListeners(); |
|
|
}); |
|
|
|
|
|
|
|
|
function generateSampleData() { |
|
|
const sampleData = [ |
|
|
{ |
|
|
date: '2023-10-01', |
|
|
employee: 'أحمد محمد', |
|
|
generatorName: 'المولد 1', |
|
|
process: 'تغيير الزيت', |
|
|
oilType: 'زيت محرك 10W-30', |
|
|
litersIn: 50, |
|
|
supplyLiters: 10, |
|
|
totalLiters: 60, |
|
|
litersOut: 45, |
|
|
litersDiff: 15, |
|
|
workingHours: 120, |
|
|
hoursDiff: 120 |
|
|
}, |
|
|
{ |
|
|
date: '2023-10-03', |
|
|
employee: 'علي حسن', |
|
|
generatorName: 'المولد 2', |
|
|
process: 'تزويد بالوقود', |
|
|
oilType: '', |
|
|
litersIn: 30, |
|
|
supplyLiters: 0, |
|
|
totalLiters: 30, |
|
|
litersOut: 25, |
|
|
litersDiff: 5, |
|
|
workingHours: 80, |
|
|
hoursDiff: 80 |
|
|
}, |
|
|
{ |
|
|
date: '2023-10-05', |
|
|
employee: 'محمد خالد', |
|
|
generatorName: 'المولد 3', |
|
|
process: 'صيانة دورية', |
|
|
oilType: 'زيت محرك 15W-40', |
|
|
litersIn: 40, |
|
|
supplyLiters: 5, |
|
|
totalLiters: 45, |
|
|
litersOut: 30, |
|
|
litersDiff: 15, |
|
|
workingHours: 150, |
|
|
hoursDiff: 150 |
|
|
} |
|
|
]; |
|
|
|
|
|
localStorage.setItem('generatorReports', JSON.stringify(sampleData)); |
|
|
} |
|
|
|
|
|
|
|
|
function updateStatistics() { |
|
|
const reports = JSON.parse(localStorage.getItem('generatorReports')) || []; |
|
|
|
|
|
document.getElementById('total-reports').textContent = reports.length; |
|
|
|
|
|
const oilChanges = reports.filter(report => report.process === 'تغيير الزيت').length; |
|
|
document.getElementById('oil-changes').textContent = oilChanges; |
|
|
|
|
|
const totalLiters = reports.reduce((sum, report) => sum + report.totalLiters, 0); |
|
|
document.getElementById('total-liters-stats').textContent = totalLiters; |
|
|
|
|
|
const avgHours = reports.length > 0 |
|
|
? (reports.reduce((sum, report) => sum + report.workingHours, 0) / reports.length).toFixed(1) |
|
|
: 0; |
|
|
document.getElementById('avg-hours').textContent = avgHours; |
|
|
} |
|
|
|
|
|
|
|
|
function loadRecentReports() { |
|
|
const reports = JSON.parse(localStorage.getItem('generatorReports')) || []; |
|
|
const container = document.getElementById('recent-reports'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
|
|
|
const recentReports = reports.slice(-5).reverse(); |
|
|
|
|
|
if (recentReports.length === 0) { |
|
|
container.innerHTML = ` |
|
|
<tr> |
|
|
<td colspan="5" class="px-4 py-4 text-center text-gray-500"> |
|
|
لا توجد تقارير متاحة |
|
|
</td> |
|
|
</tr> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
recentReports.forEach(report => { |
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = ` |
|
|
<td class="px-4 py-2 text-sm">${report.date}</td> |
|
|
<td class="px-4 py-2 text-sm font-medium">${report.generatorName}</td> |
|
|
<td class="px-4 py-2 text-sm">${report.process}</td> |
|
|
<td class="px-4 py-2 text-sm">${report.totalLiters} لتر</td> |
|
|
<td class="px-4 py-2 text-sm font-medium ${report.litersDiff >= 0 ? 'text-green-600' : 'text-red-600'}">${report.litersDiff} لتر</td> |
|
|
`; |
|
|
container.appendChild(row); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
document.getElementById('liters-in').addEventListener('input', calculateTotalLiters); |
|
|
document.getElementById('supply-liters').addEventListener('input', calculateTotalLiters); |
|
|
|
|
|
|
|
|
document.getElementById('liters-out').addEventListener('input', calculateLitersDiff); |
|
|
|
|
|
|
|
|
document.getElementById('report-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
saveReport(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('report-generator').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
generateReport(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('reset-form').addEventListener('click', function() { |
|
|
document.getElementById('report-form').reset(); |
|
|
document.getElementById('total-liters').value = ''; |
|
|
document.getElementById('liters-diff').value = ''; |
|
|
document.getElementById('hours-diff').value = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('refresh-reports').addEventListener('click', function() { |
|
|
loadRecentReports(); |
|
|
updateStatistics(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('export-report').addEventListener('click', function() { |
|
|
exportToExcel(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function calculateTotalLiters() { |
|
|
const litersIn = parseFloat(document.getElementById('liters-in').value) || 0; |
|
|
const supplyLiters = parseFloat(document.getElementById('supply-liters').value) || 0; |
|
|
const totalLiters = litersIn + supplyLiters; |
|
|
document.getElementById('total-liters').value = totalLiters; |
|
|
calculateLitersDiff(); |
|
|
} |
|
|
|
|
|
|
|
|
function calculateLitersDiff() { |
|
|
const totalLiters = parseFloat(document.getElementById('total-liters').value) || 0; |
|
|
const litersOut = parseFloat(document.getElementById('liters-out').value) || 0; |
|
|
const litersDiff = totalLiters - litersOut; |
|
|
document.getElementById('liters-diff').value = litersDiff; |
|
|
} |
|
|
|
|
|
|
|
|
function saveReport() { |
|
|
|
|
|
const date = document.getElementById('date').value; |
|
|
const employee = document.getElementById('employee').value; |
|
|
const generatorName = document.getElementById('generator-name').value; |
|
|
const process = document.getElementById('process').value; |
|
|
const oilType = document.getElementById('oil-type').value; |
|
|
const litersIn = parseFloat(document.getElementById('liters-in').value) || 0; |
|
|
const supplyLiters = parseFloat(document.getElementById('supply-liters').value) || 0; |
|
|
const totalLiters = parseFloat(document.getElementById('total-liters').value) || 0; |
|
|
const litersOut = parseFloat(document.getElementById('liters-out').value) || 0; |
|
|
const litersDiff = parseFloat(document.getElementById('liters-diff').value) || 0; |
|
|
const workingHours = parseFloat(document.getElementById('working-hours').value) || 0; |
|
|
|
|
|
|
|
|
|
|
|
const hoursDiff = workingHours; |
|
|
|
|
|
|
|
|
const report = { |
|
|
date, |
|
|
employee, |
|
|
generatorName, |
|
|
process, |
|
|
oilType, |
|
|
litersIn, |
|
|
supplyLiters, |
|
|
totalLiters, |
|
|
litersOut, |
|
|
litersDiff, |
|
|
workingHours, |
|
|
hoursDiff |
|
|
}; |
|
|
|
|
|
|
|
|
const reports = JSON.parse(localStorage.getItem('generatorReports')) || []; |
|
|
reports.push(report); |
|
|
localStorage.setItem('generatorReports', JSON.stringify(reports)); |
|
|
|
|
|
|
|
|
alert('تم حفظ التقرير بنجاح!'); |
|
|
|
|
|
|
|
|
document.getElementById('report-form').reset(); |
|
|
document.getElementById('total-liters').value = ''; |
|
|
document.getElementById('liters-diff').value = ''; |
|
|
document.getElementById('hours-diff').value = ''; |
|
|
|
|
|
|
|
|
updateStatistics(); |
|
|
loadRecentReports(); |
|
|
} |
|
|
|
|
|
|
|
|
function generateReport() { |
|
|
const generatorName = document.getElementById('report-generator-name').value; |
|
|
const startDate = document.getElementById('start-date').value; |
|
|
const endDate = document.getElementById('end-date').value; |
|
|
|
|
|
const reports = JSON.parse(localStorage.getItem('generatorReports')) || []; |
|
|
|
|
|
|
|
|
let filteredReports = reports.filter(report => { |
|
|
const reportDate = new Date(report.date); |
|
|
const start = new Date(startDate); |
|
|
const end = new Date(endDate); |
|
|
|
|
|
const dateInRange = reportDate >= start && reportDate <= end; |
|
|
const generatorMatch = generatorName === 'all' || report.generatorName === generatorName; |
|
|
|
|
|
return dateInRange && generatorMatch; |
|
|
}); |
|
|
|
|
|
|
|
|
filteredReports.sort((a, b) => new Date(b.date) - new Date(a.date)); |
|
|
|
|
|
|
|
|
const container = document.getElementById('report-result'); |
|
|
|
|
|
if (filteredReports.length === 0) { |
|
|
container.innerHTML = ` |
|
|
<p class="text-center text-gray-500 py-8"> |
|
|
لا توجد نتائج للتقارير في الفترة المحددة |
|
|
</p> |
|
|
`; |
|
|
document.getElementById('export-report').disabled = true; |
|
|
return; |
|
|
} |
|
|
|
|
|
let tableHTML = ` |
|
|
<table class="min-w-full divide-y divide-gray-200 report-table"> |
|
|
<thead class="bg-gray-50 sticky top-0"> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الموظف</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المولد</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العملية</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">إجمالي اللترات</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق في اللترات</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">ساعات العمل</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الفرق في الساعات</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
`; |
|
|
|
|
|
filteredReports.forEach(report => { |
|
|
tableHTML += ` |
|
|
<tr> |
|
|
<td class="px-4 py-2 text-sm">${report.date}</td> |
|
|
<td class="px-4 py-2 text-sm">${report.employee}</td> |
|
|
<td class="px-4 py-2 text-sm font-medium">${report.generatorName}</td> |
|
|
<td class="px-4 py-2 text-sm">${report.process}</td> |
|
|
<td class="px-4 py-2 text-sm">${report.totalLiters} لتر</td> |
|
|
<td class="px-4 py-2 text-sm font-medium ${report.litersDiff >= 0 ? 'text-green-600' : 'text-red-600'}">${report.litersDiff} لتر</td> |
|
|
<td class="px-4 py-2 text-sm">${report.workingHours}</td> |
|
|
<td class="px-4 py-2 text-sm">${report.hoursDiff}</td> |
|
|
</tr> |
|
|
`; |
|
|
}); |
|
|
|
|
|
tableHTML += ` |
|
|
</tbody> |
|
|
</table> |
|
|
`; |
|
|
|
|
|
container.innerHTML = tableHTML; |
|
|
document.getElementById('export-report').disabled = false; |
|
|
} |
|
|
|
|
|
|
|
|
function exportToExcel() { |
|
|
alert('في نظام حقيقي، سيتم تنزيل التقرير كملف Excel. هذه مجرد محاكاة.'); |
|
|
} |
|
|
</script> |
|
|
<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> |
|
|
</html> |
