Code Detail

import React, { useState, useEffect } from 'react';

const App = () => {
  const [employees, setEmployees] = useState([]);
  const [formData, setFormData] = useState({ name: '', position: '', department: '' });

  useEffect(() => {
    const savedEmployees = JSON.parse(localStorage.getItem('employees')) || [];
    setEmployees(savedEmployees);
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newEmployee = { ...formData, id: Date.now() };
    const updatedEmployees = [...employees, newEmployee];
    setEmployees(updatedEmployees);
    localStorage.setItem('employees', JSON.stringify(updatedEmployees));
    setFormData({ name: '', position: '', department: '' });
  };

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-4xl font-bold text-center text-gray-800 mb-8">إدارة الموارد البشرية</h1>
      <div className="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-lg">
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-gray-700">الاسم</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <div>
            <label className="block text-gray-700">الوظيفة</label>
            <input
              type="text"
              name="position"
              value={formData.position}
              onChange={handleInputChange}
              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <div>
            <label className="block text-gray-700">القسم</label>
            <input
              type="text"
              name="department"
              value={formData.department}
              onChange={handleInputChange}
              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-300"
          >
            إضافة موظف
          </button>
        </form>
        <div className="mt-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">قائمة الموظفين</h2>
          <div className="space-y-4">
            {employees.map((employee) => (
              <div key={employee.id} className="p-4 border rounded-lg bg-gray-50">
                <p className="text-gray-700"><strong>الاسم:</strong> {employee.name}</p>
                <p className="text-gray-700"><strong>الوظيفة:</strong> {employee.position}</p>
                <p className="text-gray-700"><strong>القسم:</strong> {employee.department}</p>
              </div>
            ))}
          </div>
        </div>
        <button
          onClick={handlePrint}
          className="mt-8 w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition duration-300"
        >
          طباعة التقرير
        </button>
      </div>
      <footer className="text-center text-gray-600 mt-8">
        © 2025 جميع الحقوق محفوظة
      </footer>
    </div>
  );
};

export default App;