Spaces:

Alaa123
/

alll

Running

alll / index.html

صمم موقع تسجيل بيانات العاملين بالادارة التعليميه من خلال رابط يمكن الدخول عليه لتسجيل تلك الباينات في علي ان يتم التسجيل لكفاه البيانات في ملف اكسيل علي ان تشمل البايانات التاليه الاسم الكود الرقم القومي الوظيفه تاريخ الميلاد تاريخ التعيين التليفون العنوان - Follow Up Deployment

b48f5cc verified 3 months ago

raw

history blame contribute delete

16.4 kB

	<!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>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Tajawal', sans-serif;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<div class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="bg-blue-700 text-white shadow-lg">
	<div class="container mx-auto px-4 py-6">
	<div class="flex justify-between items-center">
	<div class="flex items-center space-x-4">
	<i data-feather="users" class="w-8 h-8"></i>
	<h1 class="text-2xl font-bold">نظام تسجيل بيانات العاملين</h1>
	</div>
	<div>
	<p class="text-sm">الإدارة التعليمية</p>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-grow container mx-auto px-4 py-8">
	<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
	<div class="bg-blue-600 px-6 py-4">
	<h2 class="text-xl font-bold text-white">نموذج تسجيل بيانات العاملين</h2>
	</div>

	<form id="employeeForm" class="p-6 space-y-6">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- الاسم -->
	<div>
	<label for="name" class="block text-sm font-medium text-gray-700 mb-1">الاسم بالكامل</label>
	<input type="text" id="name" name="name" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- الكود -->
	<div>
	<label for="code" class="block text-sm font-medium text-gray-700 mb-1">الكود</label>
	<input type="text" id="code" name="code" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- الرقم القومي -->
	<div>
	<label for="nationalId" class="block text-sm font-medium text-gray-700 mb-1">الرقم القومي</label>
	<input type="text" id="nationalId" name="nationalId" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- الوظيفة -->
	<div>
	<label for="jobTitle" class="block text-sm font-medium text-gray-700 mb-1">الوظيفة</label>
	<input type="text" id="jobTitle" name="jobTitle" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- تاريخ الميلاد -->
	<div>
	<label for="birthDate" class="block text-sm font-medium text-gray-700 mb-1">تاريخ الميلاد</label>
	<input type="date" id="birthDate" name="birthDate" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- تاريخ التعيين -->
	<div>
	<label for="hireDate" class="block text-sm font-medium text-gray-700 mb-1">تاريخ التعيين</label>
	<input type="date" id="hireDate" name="hireDate" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- التليفون -->
	<div>
	<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">رقم التليفون</label>
	<input type="tel" id="phone" name="phone" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
	</div>

	<!-- العنوان -->
	<div class="md:col-span-2">
	<label for="address" class="block text-sm font-medium text-gray-700 mb-1">العنوان</label>
	<textarea id="address" name="address" rows="3" required
	class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
	</div>
	</div>

	<div class="flex justify-end space-x-4">
	<button type="reset" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
	مسح البيانات
	</button>
	<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">
	<i data-feather="save" class="w-4 h-4 ml-2"></i>
	حفظ البيانات
	</button>
	</div>
	</form>
	</div>

	<!-- Data Table Section -->
	<div class="mt-12 max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
	<div class="bg-blue-600 px-6 py-4">
	<h2 class="text-xl font-bold text-white">بيانات العاملين المسجلة</h2>
	</div>

	<div class="p-6">
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكود</th>
	<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
	<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الوظيفة</th>
	<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التليفون</th>
	<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">خيارات</th>
	</tr>
	</thead>
	<tbody id="employeeTable" class="bg-white divide-y divide-gray-200">
	<!-- Data will be inserted here by JavaScript -->
	<tr>
	<td colspan="5" class="px-6 py-4 text-center text-gray-500">لا توجد بيانات مسجلة بعد</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="mt-4 flex justify-end">
	<button id="exportBtn" class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center">
	<i data-feather="download" class="w-4 h-4 ml-2"></i>
	تصدير إلى Excel
	</button>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-gray-800 text-white py-6">
	<div class="container mx-auto px-4 text-center">
	<p>جميع الحقوق محفوظة © نظام الإدارة التعليمية 2023</p>
	</div>
	</footer>
	</div>

	<!-- Success Modal -->
	<div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
	<div class="bg-white rounded-lg p-6 max-w-sm w-full">
	<div class="text-center">
	<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
	<i data-feather="check" class="h-6 w-6 text-green-600"></i>
	</div>
	<h3 class="mt-3 text-lg font-medium text-gray-900">تم بنجاح!</h3>
	<div class="mt-2 text-sm text-gray-500">
	<p>تم حفظ بيانات العامل بنجاح</p>
	</div>
	<div class="mt-4">
	<button onclick="document.getElementById('successModal').classList.add('hidden')"
	class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
	موافق
	</button>
	</div>
	</div>
	</div>
	</div>

	<script>
	feather.replace();

	// Employee data array
	let employees = [];

	// Form submission
	document.getElementById('employeeForm').addEventListener('submit', function(e) {
	e.preventDefault();

	const formData = new FormData(this);
	const employee = {
	name: formData.get('name'),
	code: formData.get('code'),
	nationalId: formData.get('nationalId'),
	jobTitle: formData.get('jobTitle'),
	birthDate: formData.get('birthDate'),
	hireDate: formData.get('hireDate'),
	phone: formData.get('phone'),
	address: formData.get('address')
	};

	employees.push(employee);
	updateEmployeeTable();
	this.reset();

	// Show success modal
	document.getElementById('successModal').classList.remove('hidden');
	});

	// Update employee table
	function updateEmployeeTable() {
	const tableBody = document.getElementById('employeeTable');

	if (employees.length === 0) {
	tableBody.innerHTML = `
	<tr>
	<td colspan="5" class="px-6 py-4 text-center text-gray-500">لا توجد بيانات مسجلة بعد</td>
	</tr>
	`;
	return;
	}

	tableBody.innerHTML = '';

	employees.forEach((employee, index) => {
	const row = document.createElement('tr');
	row.innerHTML = `
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${employee.code}</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${employee.name}</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${employee.jobTitle}</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${employee.phone}</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
	<button onclick="viewEmployeeDetails(${index})" class="text-blue-600 hover:text-blue-900 ml-2">
	<i data-feather="eye" class="w-4 h-4"></i>
	</button>
	<button onclick="editEmployee(${index})" class="text-yellow-600 hover:text-yellow-900 ml-2">
	<i data-feather="edit" class="w-4 h-4"></i>
	</button>
	<button onclick="deleteEmployee(${index})" class="text-red-600 hover:text-red-900 ml-2">
	<i data-feather="trash-2" class="w-4 h-4"></i>
	</button>
	</td>
	`;
	tableBody.appendChild(row);
	});

	feather.replace();
	}

	// View employee details
	function viewEmployeeDetails(index) {
	const employee = employees[index];
	alert(
	`الاسم: ${employee.name}\n` +
	`الكود: ${employee.code}\n` +
	`الرقم القومي: ${employee.nationalId}\n` +
	`الوظيفة: ${employee.jobTitle}\n` +
	`تاريخ الميلاد: ${employee.birthDate}\n` +
	`تاريخ التعيين: ${employee.hireDate}\n` +
	`التليفون: ${employee.phone}\n` +
	`العنوان: ${employee.address}`
	);
	}

	// Edit employee
	function editEmployee(index) {
	const employee = employees[index];
	const form = document.getElementById('employeeForm');

	form.name.value = employee.name;
	form.code.value = employee.code;
	form.nationalId.value = employee.nationalId;
	form.jobTitle.value = employee.jobTitle;
	form.birthDate.value = employee.birthDate;
	form.hireDate.value = employee.hireDate;
	form.phone.value = employee.phone;
	form.address.value = employee.address;

	// Remove the employee from the array
	employees.splice(index, 1);
	updateEmployeeTable();
	}

	// Delete employee
	function deleteEmployee(index) {
	if (confirm('هل أنت متأكد من حذف هذا الموظف؟')) {
	employees.splice(index, 1);
	updateEmployeeTable();
	}
	}

	// Export to Excel
	document.getElementById('exportBtn').addEventListener('click', function() {
	if (employees.length === 0) {
	alert('لا توجد بيانات لتصديرها');
	return;
	}

	// Create CSV content
	let csvContent = "data:text/csv;charset=utf-8,";

	// Add headers
	csvContent += "الكود,الاسم,الرقم القومي,الوظيفة,تاريخ الميلاد,تاريخ التعيين,التليفون,العنوان\n";

	// Add employee data
	employees.forEach(employee => {
	csvContent += `${employee.code},${employee.name},${employee.nationalId},${employee.jobTitle},${employee.birthDate},${employee.hireDate},${employee.phone},"${employee.address}"\n`;
	});

	// Create download link
	const encodedUri = encodeURI(csvContent);
	const link = document.createElement("a");
	link.setAttribute("href", encodedUri);
	link.setAttribute("download", "بيانات_العاملين.csv");
	document.body.appendChild(link);

	// Trigger download
	link.click();
	document.body.removeChild(link);
	});
	</script>
	</body>
	</html>