Code Detail

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [activeTab, setActiveTab] = useState('technicians');
  const [technicians, setTechnicians] = useState([]);
  const [projects, setProjects] = useState([]);
  const [dailyWork, setDailyWork] = useState([]);
  const [reports, setReports] = useState([]);

  const handleTabChange = (tab) => {
    setActiveTab(tab);
  };

  const addTechnician = (technician) => {
    setTechnicians([...technicians, technician]);
  };

  const addProject = (project) => {
    setProjects([...projects, project]);
  };

  const addDailyWork = (work) => {
    setDailyWork([...dailyWork, work]);
  };

  const addReport = (report) => {
    setReports([...reports, report]);
  };

  return (
    <div className="App">
      <div className="bg-blue-900 text-white p-4">
        <h1 className="text-2xl font-bold">برنامج الإدارة</h1>
      </div>
      <div className="flex mt-4">
        <button
          onClick={() => handleTabChange('technicians')}
          className={`flex-1 p-2 ${activeTab === 'technicians' ? 'bg-blue-500' : 'bg-blue-300'}`}
        >
          الفنيين والعمال
        </button>
        <button
          onClick={() => handleTabChange('projects')}
          className={`flex-1 p-2 ${activeTab === 'projects' ? 'bg-blue-500' : 'bg-blue-300'}`}
        >
          المشاريع
        </button>
        <button
          onClick={() => handleTabChange('dailyWork')}
          className={`flex-1 p-2 ${activeTab === 'dailyWork' ? 'bg-blue-500' : 'bg-blue-300'}`}
        >
          العمل اليومي
        </button>
        <button
          onClick={() => handleTabChange('reports')}
          className={`flex-1 p-2 ${activeTab === 'reports' ? 'bg-blue-500' : 'bg-blue-300'}`}
        >
          التقارير
        </button>
      </div>
      <div className="p-4">
        {activeTab === 'technicians' && (
          <TechniciansForm addTechnician={addTechnician} />
        )}
        {activeTab === 'projects' && (
          <ProjectsForm addProject={addProject} />
        )}
        {activeTab === 'dailyWork' && (
          <DailyWorkForm addDailyWork={addDailyWork} />
        )}
        {activeTab === 'reports' && (
          <Reports reports={reports} />
        )}
      </div>
    </div>
  );
};

const TechniciansForm = ({ addTechnician }) => {
  const [technician, setTechnician] = useState({
    name: '',
    phone: '',
    jobType: '',
    dueAmount: '',
    receivedAmount: '',
    remainingAmount: '',
    hireDate: ''
  });

  const handleChange = (e) => {
    setTechnician({ ...technician, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    addTechnician(technician);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="name" placeholder="اسم الفني" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="text" name="phone" placeholder="رقم الهاتف" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="text" name="jobType" placeholder="نوع العمل" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="dueAmount" placeholder="الاجور المستحقة" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="receivedAmount" placeholder="الاجور المستلمة" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="remainingAmount" placeholder="المبلغ المتبقي" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="date" name="hireDate" placeholder="تاريخ التعيين" onChange={handleChange} className="w-full p-2 border rounded" />
      <button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">حفظ</button>
    </form>
  );
};

const ProjectsForm = ({ addProject }) => {
  const [project, setProject] = useState({
    projectName: '',
    clientName: '',
    phone: '',
    agreedAmount: '',
    receivedAmount: '',
    remainingAmount: '',
    date: ''
  });

  const handleChange = (e) => {
    setProject({ ...project, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    addProject(project);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="projectName" placeholder="اسم المشروع" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="text" name="clientName" placeholder="اسم صاحب المشروع" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="text" name="phone" placeholder="رقم الهاتف" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="agreedAmount" placeholder="المبلغ المتفق عليه" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="receivedAmount" placeholder="المبالغ المستلمة" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="remainingAmount" placeholder="المبلغ المتبقي" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="date" name="date" placeholder="التاريخ" onChange={handleChange} className="w-full p-2 border rounded" />
      <button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">حفظ</button>
    </form>
  );
};

const DailyWorkForm = ({ addDailyWork }) => {
  const [work, setWork] = useState({
    technicianName: '',
    projectName: '',
    date: '',
    attendanceTime: '',
    departureTime: '',
    hourlyRate: '',
    dailyWage: '',
    otherFees: '',
    totalAmount: '',
    notes: ''
  });

  const handleChange = (e) => {
    setWork({ ...work, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const hoursWorked = (new Date(work.departureTime) - new Date(work.attendanceTime)) / (1000 * 60 * 60);
    const dailyWage = hoursWorked * work.hourlyRate;
    const totalAmount = dailyWage + parseFloat(work.otherFees);
    addDailyWork({ ...work, dailyWage, totalAmount });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="technicianName" placeholder="اسم الفني" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="text" name="projectName" placeholder="اسم المشروع" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="date" name="date" placeholder="التاريخ" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="time" name="attendanceTime" placeholder="وقت الحضور" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="time" name="departureTime" placeholder="وقت الانصراف" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="hourlyRate" placeholder="سعر معدل الساعة" onChange={handleChange} className="w-full p-2 border rounded" />
      <input type="number" name="otherFees" placeholder="اجور اخرى" onChange={handleChange} className="w-full p-2 border rounded" />
      <textarea name="notes" placeholder="ملاحظات" onChange={handleChange} className="w-full p-2 border rounded" />
      <button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">حفظ</button>
    </form>
  );
};

const Reports = ({ reports }) => {
  return (
    <div className="space-y-4">
      {reports.map((report, index) => (
        <div key={index} className="p-4 border rounded">
          <h3 className="text-lg font-bold">التقرير {index + 1}</h3>
          <p>اسم الفني: {report.technicianName}</p>
          <p>اسم المشروع: {report.projectName}</p>
          <p>التاريخ: {report.date}</p>
          <p>عدد ساعات العمل: {report.hoursWorked}</p>
          <p>الاجر اليومي: {report.dailyWage}</p>
          <p>اجور اخرى: {report.otherFees}</p>
          <p>المبلغ الكلي: {report.totalAmount}</p>
          <p>ملاحظات: {report.notes}</p>
        </div>
      ))}
    </div>
  );
};

export default App;