صمم موقع تسجيل بيانات العاملين بالادارة التعليميه من خلال رابط يمكن الدخول عليه لتسجيل تلك الباينات في علي ان يتم التسجيل لكفاه البيانات في ملف اكسيل علي ان تشمل البايانات التاليه الاسم الكود الرقم القومي الوظيفه تاريخ الميلاد تاريخ التعيين التليفون العنوان - Follow Up Deployment
b48f5cc verified | <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> | |