const { useEffect, useMemo, useState, Fragment } = React;

function HrApp() {
  const [employees, setEmployees] = useState([]);
  const [criterionCategories, setCriterionCategories] = useState([]);
  const [effectTypes, setEffectTypes] = useState([]);
  const [criteria, setCriteria] = useState([]);
  const [employeeCenters, setEmployeeCenters] = useState([]);
  const [criterionTree, setCriterionTree] = useState([]);
  const [employeeCategorySelections, setEmployeeCategorySelections] = useState({});
  const [assignments, setAssignments] = useState([]);
  const [users, setUsers] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");
  const [successMessage, setSuccessMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState("");
  const [activeTab, setActiveTab] = useState("employees");

  const [authToken, setAuthToken] = useState(localStorage.getItem("hr_auth_token") || "");
  const [authUser, setAuthUser] = useState(() => {
    const raw = localStorage.getItem("hr_auth_user");
    return raw ? JSON.parse(raw) : null;
  });
  const [loginForm, setLoginForm] = useState({ username: "", password: "" });
  const [newUserForm, setNewUserForm] = useState({ username: "", password: "", isAdmin: false, isSupervisor: false, isInserter: false });

  const [employeeForm, setEmployeeForm] = useState({
    selfNumber: "", nationalNumber: "", firstName: "", lastName: "", fatherName: "", motherName: "",
    currentAddressDetails: "", phoneNumber: "", email: "", hireDate: "", healthStatus: "", centerName: "",
    birthDate: "", gender: "ذكر", managerId: "", notes: "", cvAttachmentUrl: "",
  });
  const [editingEmployeeId, setEditingEmployeeId] = useState(null);
  const [editEmployeeForm, setEditEmployeeForm] = useState({
    selfNumber: "", nationalNumber: "", firstName: "", lastName: "", fatherName: "", motherName: "",
    currentAddressDetails: "", phoneNumber: "", email: "", hireDate: "", healthStatus: "", centerName: "",
    birthDate: "", gender: "ذكر", managerId: "", notes: "", cvAttachmentUrl: "",
  });
  const [editEmployeeCategorySelections, setEditEmployeeCategorySelections] = useState({});
  const [criterionForm, setCriterionForm] = useState({
    name: "", instructions: "", effectType: 0, effectValue: 0, categoryId: "", isGroupHeader: false, parentSalaryCriterionId: "",
  });
  const [editingCriterionId, setEditingCriterionId] = useState(null);
  const [editCriterionForm, setEditCriterionForm] = useState({
    name: "", instructions: "", effectType: 0, effectValue: 0, categoryId: "", isGroupHeader: false, parentSalaryCriterionId: "",
  });
  const [assignForm, setAssignForm] = useState({ employeeId: "", salaryCriterionId: "" });

  const canManage = authUser && (authUser.isAdmin === true || authUser.isSupervisor === true);
  const canInsertOnly = authUser && authUser.isInserter === true && !canManage;

  const employeeLookup = useMemo(() => {
    const map = {};
    employees.forEach((employee) => { map[employee.id] = `${employee.firstName} ${employee.lastName}`; });
    return map;
  }, [employees]);

  const assignableCriteria = useMemo(() => criteria.filter((c) => !c.isGroupHeader), [criteria]);
  const sortedCriterionCategories = useMemo(() => [...criterionCategories].sort((a, b) => a.id - b.id), [criterionCategories]);
  const groupHeaderColumns = useMemo(() => {
    const ordered = criterionTree.map((h) => ({ id: h.id, name: h.name }));
    const known = new Set(ordered.map((c) => c.id));
    employees.forEach((e) => {
      (e.salaryGroupTotals || []).forEach((g) => {
        if (!known.has(g.headerId)) {
          known.add(g.headerId);
          ordered.push({ id: g.headerId, name: g.headerName });
        }
      });
    });
    return ordered;
  }, [employees, criterionTree]);

  function getAuthHeaders(withContentType) {
    const headers = {};
    if (withContentType) headers["Content-Type"] = "application/json";
    if (authToken) headers.Authorization = "Bearer " + authToken;
    return headers;
  }

  async function apiFetch(url, options) {
    const opts = options || {};
    const response = await fetch(url, { ...opts, headers: { ...getAuthHeaders(false), ...(opts.headers || {}) } });
    if (response.status === 401) {
      doLogout();
      throw new Error("انتهت الجلسة أو لم يتم تسجيل الدخول.");
    }
    if (response.status === 403) {
      throw new Error("ليس لديك صلاحية لتنفيذ هذا الإجراء.");
    }
    return response;
  }

  function doLogout() {
    localStorage.removeItem("hr_auth_token");
    localStorage.removeItem("hr_auth_user");
    setAuthToken("");
    setAuthUser(null);
    setUsers([]);
    setSuccessMessage("");
  }

  function salaryGroupCell(employee, headerId) {
    const row = (employee.salaryGroupTotals || []).find((g) => g.headerId === headerId);
    if (!row) return "—";
    return row.totalEffectValueSum;
  }

  function categoryDisplayRow(employee, categoryId) {
    const list = employee.perCategoryDisplay || [];
    return list.find((p) => p.categoryId === categoryId);
  }

  function formatMoney(value) {
    if (value === null || value === undefined) return "—";
    if (typeof value !== "number") return String(value);
    return value.toLocaleString("ar-SY", { minimumFractionDigits: 0, maximumFractionDigits: 2 });
  }

  function finalSalary(employee) {
    const list = employee.perCategoryDisplay || [];
    return list.reduce((sum, row) => sum + (typeof row.computedAmount === "number" ? row.computedAmount : 0), 0);
  }

  function selectedCriterionIdsByCategory(selections) {
    return Object.values(selections)
      .map((raw) => (raw !== undefined && raw !== null && String(raw).trim() !== "" ? Number(raw) : null))
      .filter((value) => value && Number.isFinite(value));
  }

  async function syncEmployeeCriteria(employeeId, selectedCriterionIds) {
    const current = assignments.filter((a) => a.employeeId === employeeId);
    for (const row of current) {
      const response = await apiFetch("/api/employee-criteria/" + row.id, { method: "DELETE", headers: getAuthHeaders(false) });
      if (!response.ok) throw new Error(await response.text());
    }

    for (const criterionId of selectedCriterionIds) {
      const response = await apiFetch("/api/employee-criteria", {
        method: "POST",
        headers: getAuthHeaders(true),
        body: JSON.stringify({ employeeId, salaryCriterionId: criterionId }),
      });
      if (!response.ok) throw new Error(await response.text());
    }
  }

  async function fetchAll() {
    setIsLoading(true);
    setErrorMessage("");
    try {
      if (canInsertOnly) {
        const [categoryResponse, effectTypeResponse, criteriaResponse, treeResponse, centersResponse] = await Promise.all([
          apiFetch("/api/criterion-categories"),
          apiFetch("/api/salary-criterion-effect-types"),
          apiFetch("/api/salary-criteria"),
          apiFetch("/api/salary-criteria/tree"),
          apiFetch("/api/employee-centers"),
        ]);

        if (!categoryResponse.ok || !effectTypeResponse.ok || !criteriaResponse.ok || !treeResponse.ok || !centersResponse.ok) {
          throw new Error("فشل تحميل بيانات الإدخال.");
        }

        setEmployees([]);
        setAssignments([]);
        setCriterionCategories(await categoryResponse.json());
        setEffectTypes(await effectTypeResponse.json());
        setCriteria(await criteriaResponse.json());
        setCriterionTree(await treeResponse.json());
        setEmployeeCenters(await centersResponse.json());
        return;
      }

      const [employeeResponse, categoryResponse, effectTypeResponse, criteriaResponse, treeResponse, assignmentResponse, centersResponse] = await Promise.all([
        apiFetch("/api/employees"),
        apiFetch("/api/criterion-categories"),
        apiFetch("/api/salary-criterion-effect-types"),
        apiFetch("/api/salary-criteria"),
        apiFetch("/api/salary-criteria/tree"),
        apiFetch("/api/employee-criteria"),
        apiFetch("/api/employee-centers"),
      ]);

      if (!employeeResponse.ok || !categoryResponse.ok || !effectTypeResponse.ok || !criteriaResponse.ok || !treeResponse.ok || !assignmentResponse.ok || !centersResponse.ok) {
        throw new Error("فشل تحميل البيانات.");
      }

      const employeeJson = await employeeResponse.json();
      setEmployees(Array.isArray(employeeJson) ? employeeJson : employeeJson.employees || []);
      setCriterionCategories(await categoryResponse.json());
      setEffectTypes(await effectTypeResponse.json());
      setCriteria(await criteriaResponse.json());
      setCriterionTree(await treeResponse.json());
      setAssignments(await assignmentResponse.json());
      setEmployeeCenters(await centersResponse.json());
    } catch (error) {
      setErrorMessage(error.message || "حدث خطأ أثناء تحميل البيانات.");
    } finally {
      setIsLoading(false);
    }
  }

  async function fetchUsers() {
    if (!canManage) return;
    const response = await apiFetch("/api/users");
    if (!response.ok) throw new Error(await response.text());
    setUsers(await response.json());
  }

  useEffect(() => { fetchAll(); }, [canInsertOnly]);
  useEffect(() => { if (canManage) fetchUsers().catch((e) => setErrorMessage(e.message)); }, [canManage]);

  async function submitLogin(event) {
    event.preventDefault();
    setErrorMessage("");
    setSuccessMessage("");
    const response = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(loginForm),
    });
    if (!response.ok) {
      setErrorMessage("فشل تسجيل الدخول. تحقق من اسم المستخدم وكلمة المرور.");
      return;
    }
    const data = await response.json();
    localStorage.setItem("hr_auth_token", data.token);
    localStorage.setItem("hr_auth_user", JSON.stringify(data.user));
    setAuthToken(data.token);
    setAuthUser(data.user);
    setLoginForm({ username: "", password: "" });
    setSuccessMessage("تم تسجيل الدخول بنجاح.");
    if (data.user && (data.user.isAdmin || data.user.isSupervisor)) await fetchUsers();
  }

  async function submitEmployee(event) {
    event.preventDefault();
    setErrorMessage("");
    try {
      const selectedCriterionIds = selectedCriterionIdsByCategory(employeeCategorySelections);
      const payload = {
        selfNumber: employeeForm.selfNumber || null, nationalNumber: employeeForm.nationalNumber || null,
        currentAddressDetails: employeeForm.currentAddressDetails || null,
        phoneNumber: employeeForm.phoneNumber || null,
        email: employeeForm.email || null,
        hireDate: employeeForm.hireDate || null,
        healthStatus: employeeForm.healthStatus || null,
        centerName: employeeForm.centerName || null,
        firstName: employeeForm.firstName, lastName: employeeForm.lastName, fatherName: employeeForm.fatherName, motherName: employeeForm.motherName,
        birthDate: employeeForm.birthDate, gender: employeeForm.gender, managerId: canInsertOnly ? null : (employeeForm.managerId ? Number(employeeForm.managerId) : null),
        notes: employeeForm.notes || null, cvAttachmentUrl: employeeForm.cvAttachmentUrl || null,
      };

      const response = await apiFetch("/api/employees", {
        method: "POST",
        headers: getAuthHeaders(true),
        body: JSON.stringify(payload),
      });
      if (!response.ok) { setErrorMessage(await response.text()); return; }
      const createdEmployee = await response.json();
      await syncEmployeeCriteria(createdEmployee.id, selectedCriterionIds);

      setEmployeeForm({
        selfNumber: "", nationalNumber: "", firstName: "", lastName: "", fatherName: "", motherName: "",
        currentAddressDetails: "", phoneNumber: "", email: "", hireDate: "", healthStatus: "", centerName: "",
        birthDate: "", gender: "ذكر", managerId: "", notes: "", cvAttachmentUrl: "",
      });
      setEmployeeCategorySelections({});
      setSuccessMessage(canInsertOnly ? "تم إدراج بياناتك." : "تمت إضافة الموظف.");
      await fetchAll();
    } catch (error) {
      setErrorMessage(error.message || "تعذر حفظ معايير الموظف.");
    }
  }

  function startEditEmployee(employee) {
    setErrorMessage("");
    setSuccessMessage("");
    setEditingEmployeeId(employee.id);
    setEditEmployeeForm({
      selfNumber: employee.selfNumber || "",
      nationalNumber: employee.nationalNumber || "",
      currentAddressDetails: employee.currentAddressDetails || "",
      phoneNumber: employee.phoneNumber || "",
      email: employee.email || "",
      hireDate: employee.hireDate || "",
      healthStatus: employee.healthStatus || "",
      centerName: employee.centerName || "",
      firstName: employee.firstName || "",
      lastName: employee.lastName || "",
      fatherName: employee.fatherName || "",
      motherName: employee.motherName || "",
      birthDate: employee.birthDate || "",
      gender: employee.gender || "ذكر",
      managerId: employee.managerId ? String(employee.managerId) : "",
      notes: employee.notes || "",
      cvAttachmentUrl: employee.cvAttachmentUrl || "",
    });
    const byCategory = {};
    assignments.filter((a) => a.employeeId === employee.id).forEach((a) => { byCategory[a.categoryId] = String(a.salaryCriterionId); });
    setEditEmployeeCategorySelections(byCategory);
  }

  function cancelEditEmployee() {
    setEditingEmployeeId(null);
    setEditEmployeeCategorySelections({});
  }

  async function saveEditEmployee(event) {
    event.preventDefault();
    if (!editingEmployeeId) return;
    setErrorMessage("");
    try {
      const payload = {
        selfNumber: editEmployeeForm.selfNumber || null,
        nationalNumber: editEmployeeForm.nationalNumber || null,
        currentAddressDetails: editEmployeeForm.currentAddressDetails || null,
        phoneNumber: editEmployeeForm.phoneNumber || null,
        email: editEmployeeForm.email || null,
        hireDate: editEmployeeForm.hireDate || null,
        healthStatus: editEmployeeForm.healthStatus || null,
        centerName: editEmployeeForm.centerName || null,
        firstName: editEmployeeForm.firstName,
        lastName: editEmployeeForm.lastName,
        fatherName: editEmployeeForm.fatherName,
        motherName: editEmployeeForm.motherName,
        birthDate: editEmployeeForm.birthDate,
        gender: editEmployeeForm.gender,
        managerId: editEmployeeForm.managerId ? Number(editEmployeeForm.managerId) : null,
        notes: editEmployeeForm.notes || null,
        cvAttachmentUrl: editEmployeeForm.cvAttachmentUrl || null,
      };
      const response = await apiFetch("/api/employees/" + editingEmployeeId, {
        method: "PUT",
        headers: getAuthHeaders(true),
        body: JSON.stringify(payload),
      });
      if (!response.ok) { setErrorMessage(await response.text()); return; }
      await syncEmployeeCriteria(editingEmployeeId, selectedCriterionIdsByCategory(editEmployeeCategorySelections));
      setSuccessMessage("تم تعديل بيانات الموظف.");
      setEditingEmployeeId(null);
      setEditEmployeeCategorySelections({});
      await fetchAll();
    } catch (error) {
      setErrorMessage(error.message || "تعذر تعديل معايير الموظف.");
    }
  }

  async function deleteEmployee(id) {
    setErrorMessage("");
    const ok = window.confirm("هل تريد حذف هذا الموظف؟");
    if (!ok) return;
    const response = await apiFetch("/api/employees/" + id, { method: "DELETE", headers: getAuthHeaders(false) });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setSuccessMessage("تم حذف الموظف.");
    if (editingEmployeeId === id) setEditingEmployeeId(null);
    await fetchAll();
  }

  async function submitCriterion(event) {
    event.preventDefault();
    setErrorMessage("");
    const payload = {
      name: criterionForm.name, instructions: criterionForm.instructions || null, categoryId: Number(criterionForm.categoryId),
      effectType: Number(criterionForm.effectType), effectValue: criterionForm.isGroupHeader ? 0 : Number(criterionForm.effectValue),
      isGroupHeader: criterionForm.isGroupHeader,
      parentSalaryCriterionId: criterionForm.parentSalaryCriterionId ? Number(criterionForm.parentSalaryCriterionId) : null,
    };
    const response = await apiFetch("/api/salary-criteria", {
      method: "POST",
      headers: getAuthHeaders(true),
      body: JSON.stringify(payload),
    });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setCriterionForm({ name: "", instructions: "", effectType: 0, effectValue: 0, categoryId: "", isGroupHeader: false, parentSalaryCriterionId: "" });
    setSuccessMessage("تمت إضافة المعيار.");
    await fetchAll();
  }

  function startEditCriterion(criterion) {
    setErrorMessage("");
    setSuccessMessage("");
    setEditingCriterionId(criterion.id);
    setEditCriterionForm({
      name: criterion.name || "",
      instructions: criterion.instructions || "",
      effectType: criterion.effectType !== undefined && criterion.effectType !== null ? criterion.effectType : 0,
      effectValue: criterion.effectValue !== undefined && criterion.effectValue !== null ? criterion.effectValue : 0,
      categoryId: criterion.categoryId ? String(criterion.categoryId) : "",
      isGroupHeader: criterion.isGroupHeader === true,
      parentSalaryCriterionId: criterion.parentSalaryCriterionId && criterion.parentSalaryCriterionId !== criterion.id
        ? String(criterion.parentSalaryCriterionId)
        : "",
    });
  }

  function cancelEditCriterion() {
    setEditingCriterionId(null);
  }

  async function saveEditCriterion(event) {
    event.preventDefault();
    if (!editingCriterionId) return;
    setErrorMessage("");
    const payload = {
      name: editCriterionForm.name,
      instructions: editCriterionForm.instructions || null,
      categoryId: Number(editCriterionForm.categoryId),
      effectType: Number(editCriterionForm.effectType),
      effectValue: editCriterionForm.isGroupHeader ? 0 : Number(editCriterionForm.effectValue),
      isGroupHeader: editCriterionForm.isGroupHeader,
      parentSalaryCriterionId: editCriterionForm.parentSalaryCriterionId ? Number(editCriterionForm.parentSalaryCriterionId) : null,
    };
    const response = await apiFetch("/api/salary-criteria/" + editingCriterionId, {
      method: "PUT",
      headers: getAuthHeaders(true),
      body: JSON.stringify(payload),
    });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setSuccessMessage("تم تعديل المعيار.");
    setEditingCriterionId(null);
    await fetchAll();
  }

  async function deleteCriterion(id) {
    setErrorMessage("");
    const ok = window.confirm("هل تريد حذف هذا المعيار؟");
    if (!ok) return;
    const response = await apiFetch("/api/salary-criteria/" + id, { method: "DELETE", headers: getAuthHeaders(false) });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setSuccessMessage("تم حذف المعيار.");
    if (editingCriterionId === id) setEditingCriterionId(null);
    await fetchAll();
  }

  async function submitNewCategory(event) {
    event.preventDefault();
    setErrorMessage("");
    const name = (newCategoryName || "").trim();
    if (!name) { setErrorMessage("أدخل اسم فئة جديدة."); return; }
    const response = await apiFetch("/api/criterion-categories", {
      method: "POST",
      headers: getAuthHeaders(true),
      body: JSON.stringify({ name: name }),
    });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setNewCategoryName("");
    setSuccessMessage("تمت إضافة الفئة.");
    await fetchAll();
  }

  async function submitAssignment(event) {
    event.preventDefault();
    setErrorMessage("");
    const payload = { employeeId: Number(assignForm.employeeId), salaryCriterionId: Number(assignForm.salaryCriterionId) };
    const response = await apiFetch("/api/employee-criteria", {
      method: "POST",
      headers: getAuthHeaders(true),
      body: JSON.stringify(payload),
    });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setAssignForm({ employeeId: "", salaryCriterionId: "" });
    setSuccessMessage("تمت عملية الإسناد.");
    await fetchAll();
  }

  async function submitNewUser(event) {
    event.preventDefault();
    setErrorMessage("");
    if (!newUserForm.username || !newUserForm.password) {
      setErrorMessage("اسم المستخدم وكلمة المرور مطلوبان.");
      return;
    }
    const response = await apiFetch("/api/users", {
      method: "POST",
      headers: getAuthHeaders(true),
      body: JSON.stringify(newUserForm),
    });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setNewUserForm({ username: "", password: "", isAdmin: false, isSupervisor: false, isInserter: false });
    setSuccessMessage("تم إنشاء المستخدم.");
    await fetchUsers();
  }

  async function exportEmployeesToExcel() {
    setErrorMessage("");
    const response = await apiFetch("/api/employees/export");
    if (!response.ok) {
      setErrorMessage(await response.text());
      return;
    }

    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement("a");
    anchor.href = url;
    anchor.download = "employees.xlsx";
    document.body.appendChild(anchor);
    anchor.click();
    anchor.remove();
    window.URL.revokeObjectURL(url);
    setSuccessMessage("تم تصدير بيانات الموظفين إلى Excel.");
  }

  async function deleteUser(id) {
    setErrorMessage("");
    const ok = window.confirm("هل تريد حذف هذا المستخدم؟");
    if (!ok) return;
    const response = await apiFetch("/api/users/" + id, { method: "DELETE", headers: getAuthHeaders(false) });
    if (!response.ok) { setErrorMessage(await response.text()); return; }
    setSuccessMessage("تم حذف المستخدم.");
    await fetchUsers();
  }

  const effectTypeLabel = (value) => {
    const match = effectTypes.find((t) => t.value === value);
    return match ? match.label : String(value);
  };

  if (!authToken || !authUser) {
    return (
      <div className="hr-app container" dir="rtl">
        <div className="row justify-content-center">
          <div className="col-md-5">
            <div className="card mt-5">
              <div className="card-body">
                <h3 className="card-title mb-3">تسجيل الدخول</h3>
                {errorMessage && <div className="alert alert-danger">{errorMessage}</div>}
                <form onSubmit={submitLogin} className="row g-2">
                  <div className="col-12">
                    <input className="form-control" placeholder="اسم المستخدم" value={loginForm.username}
                      onChange={(e) => setLoginForm({ ...loginForm, username: e.target.value })} />
                  </div>
                  <div className="col-12">
                    <input type="password" className="form-control" placeholder="كلمة المرور" value={loginForm.password}
                      onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })} />
                  </div>
                  <div className="col-12">
                    <button className="btn btn-primary w-100" type="submit">دخول</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="hr-app" dir="rtl">
      <div className="d-flex justify-content-between align-items-center mb-3">
        <h1 className="mb-0">شركة أصل</h1>
        <div className="d-flex align-items-center gap-2">
          <span className="badge text-bg-secondary">{authUser.username}</span>
          <button type="button" className="btn btn-outline-danger btn-sm" onClick={doLogout}>تسجيل الخروج</button>
        </div>
      </div>

      {isLoading && <div className="alert alert-info">جاري تحميل البيانات...</div>}
      {errorMessage && <div className="alert alert-danger">{errorMessage}</div>}
      {successMessage && <div className="alert alert-success">{successMessage}</div>}
      {!canManage && !canInsertOnly && <div className="alert alert-warning">الحساب الحالي لا يملك صلاحية التعديل.</div>}

      {!canInsertOnly && <ul className="nav nav-tabs mb-3 flex-wrap" role="tablist">
        <li className="nav-item"><button type="button" className={"nav-link" + (activeTab === "employees" ? " active" : "")} onClick={() => setActiveTab("employees")}>الموظفون</button></li>
        <li className="nav-item"><button type="button" className={"nav-link" + (activeTab === "criteria" ? " active" : "")} onClick={() => setActiveTab("criteria")}>معايير الراتب</button></li>
        <li className="nav-item"><button type="button" className={"nav-link" + (activeTab === "assignments" ? " active" : "")} onClick={() => setActiveTab("assignments")}>إسناد المعايير</button></li>
        {canManage && <li className="nav-item"><button type="button" className={"nav-link" + (activeTab === "users" ? " active" : "")} onClick={() => setActiveTab("users")}>الحسابات</button></li>}
      </ul>}

      <div className="tab-content">
        {(activeTab === "employees" || canInsertOnly) && <div className="tab-pane active" role="tabpanel">
          {(canManage || canInsertOnly) && <section className="card mb-4"><div className="card-body"><h3 className="card-title">{canInsertOnly ? "إدخال بيانات موظف" : "إضافة موظف"}</h3>
            <form onSubmit={submitEmployee} className="row g-2">
              <div className="col-md-3"><input className="form-control" placeholder="الاسم" required value={employeeForm.firstName} onChange={(e) => setEmployeeForm({ ...employeeForm, firstName: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="الكنية" required value={employeeForm.lastName} onChange={(e) => setEmployeeForm({ ...employeeForm, lastName: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="اسم الأب" required value={employeeForm.fatherName} onChange={(e) => setEmployeeForm({ ...employeeForm, fatherName: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="اسم الأم" required value={employeeForm.motherName} onChange={(e) => setEmployeeForm({ ...employeeForm, motherName: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="الرقم الذاتي (اختياري)" value={employeeForm.selfNumber} onChange={(e) => setEmployeeForm({ ...employeeForm, selfNumber: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="الرقم الوطني (اختياري)" value={employeeForm.nationalNumber} onChange={(e) => setEmployeeForm({ ...employeeForm, nationalNumber: e.target.value })} /></div>
              <div className="col-md-6"><input className="form-control" placeholder="العنوان الحالي بالتفصيل" value={employeeForm.currentAddressDetails} onChange={(e) => setEmployeeForm({ ...employeeForm, currentAddressDetails: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="رقم الهاتف" value={employeeForm.phoneNumber} onChange={(e) => setEmployeeForm({ ...employeeForm, phoneNumber: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" type="email" placeholder="البريد الإلكتروني" value={employeeForm.email} onChange={(e) => setEmployeeForm({ ...employeeForm, email: e.target.value })} /></div>
              <div className="col-md-3"><label className="form-label small mb-1">تاريخ المباشرة</label><input className="form-control" type="date" title="تاريخ المباشرة في العمل" value={employeeForm.hireDate} onChange={(e) => setEmployeeForm({ ...employeeForm, hireDate: e.target.value })} /></div>
              <div className="col-md-3"><input className="form-control" placeholder="الوضع الصحي" value={employeeForm.healthStatus} onChange={(e) => setEmployeeForm({ ...employeeForm, healthStatus: e.target.value })} /></div>
              <div className="col-md-3"><select className="form-select" value={employeeForm.centerName} onChange={(e) => setEmployeeForm({ ...employeeForm, centerName: e.target.value })}><option value="">اسم المركز</option>{employeeCenters.map((center) => (<option key={center} value={center}>{center}</option>))}</select></div>
              <div className="col-md-3"><label className="form-label small mb-1">تاريخ الميلاد</label><input className="form-control" type="date" required title="تاريخ ميلاد الموظف" value={employeeForm.birthDate} onChange={(e) => setEmployeeForm({ ...employeeForm, birthDate: e.target.value })} /></div>
              <div className="col-md-3"><select className="form-select" value={employeeForm.gender} onChange={(e) => setEmployeeForm({ ...employeeForm, gender: e.target.value })}><option value="ذكر">ذكر</option><option value="أنثى">أنثى</option></select></div>
              {canManage && <div className="col-md-4"><select className="form-select" value={employeeForm.managerId} onChange={(e) => setEmployeeForm({ ...employeeForm, managerId: e.target.value })}><option value="">بدون مدير مباشر</option>{employees.map((employee) => (<option key={employee.id} value={employee.id}>{employee.firstName} {employee.lastName}</option>))}</select></div>}
              <div className="col-md-4"><input className="form-control" placeholder="ملاحظات" value={employeeForm.notes} onChange={(e) => setEmployeeForm({ ...employeeForm, notes: e.target.value })} /></div>
              {sortedCriterionCategories.length > 0 && <div className="col-12 mt-2"><p className="text-muted small mb-2">معايير الراتب حسب الفئات (اختياري):</p><div className="row g-2">{sortedCriterionCategories.map((cat) => (<div className="col-md-4" key={cat.id}><label className="form-label small mb-0">{cat.name}</label><select className="form-select form-select-sm" value={employeeCategorySelections[cat.id] != null ? employeeCategorySelections[cat.id] : ""} onChange={(e) => setEmployeeCategorySelections((prev) => ({ ...prev, [cat.id]: e.target.value }))}><option value="">— بدون اختيار —</option>{assignableCriteria.filter((criterion) => criterion.categoryId === cat.id).map((criterion) => (<option key={criterion.id} value={criterion.id}>{criterion.name}</option>))}</select></div>))}</div></div>}
              <div className="col-12"><button className="btn btn-primary" type="submit">حفظ الموظف</button></div>
            </form></div></section>}
          {canManage && <section className="card mb-4"><div className="card-body"><div className="d-flex justify-content-between align-items-center mb-2"><h4 className="card-title mb-0">قائمة الموظفين</h4>{canManage && <button type="button" className="btn btn-outline-success btn-sm" onClick={exportEmployeesToExcel}>تصدير Excel</button>}</div>{canManage && editingEmployeeId && <form onSubmit={saveEditEmployee} className="row g-2 mb-3 border rounded p-2"><div className="col-12"><strong>تعديل الموظف رقم {editingEmployeeId}</strong></div><div className="col-md-3"><input className="form-control" required placeholder="الاسم" value={editEmployeeForm.firstName} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, firstName: e.target.value })} /></div><div className="col-md-3"><input className="form-control" required placeholder="الكنية" value={editEmployeeForm.lastName} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, lastName: e.target.value })} /></div><div className="col-md-3"><input className="form-control" required placeholder="اسم الأب" value={editEmployeeForm.fatherName} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, fatherName: e.target.value })} /></div><div className="col-md-3"><input className="form-control" required placeholder="اسم الأم" value={editEmployeeForm.motherName} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, motherName: e.target.value })} /></div><div className="col-md-3"><input className="form-control" placeholder="الرقم الذاتي" value={editEmployeeForm.selfNumber} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, selfNumber: e.target.value })} /></div><div className="col-md-3"><input className="form-control" placeholder="الرقم الوطني" value={editEmployeeForm.nationalNumber} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, nationalNumber: e.target.value })} /></div><div className="col-md-6"><input className="form-control" placeholder="العنوان الحالي بالتفصيل" value={editEmployeeForm.currentAddressDetails} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, currentAddressDetails: e.target.value })} /></div><div className="col-md-3"><input className="form-control" placeholder="رقم الهاتف" value={editEmployeeForm.phoneNumber} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, phoneNumber: e.target.value })} /></div><div className="col-md-3"><input className="form-control" type="email" placeholder="البريد الإلكتروني" value={editEmployeeForm.email} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, email: e.target.value })} /></div><div className="col-md-3"><label className="form-label small mb-1">تاريخ المباشرة</label><input className="form-control" type="date" title="تاريخ المباشرة في العمل" value={editEmployeeForm.hireDate} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, hireDate: e.target.value })} /></div><div className="col-md-3"><input className="form-control" placeholder="الوضع الصحي" value={editEmployeeForm.healthStatus} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, healthStatus: e.target.value })} /></div><div className="col-md-3"><select className="form-select" value={editEmployeeForm.centerName} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, centerName: e.target.value })}><option value="">اسم المركز</option>{employeeCenters.map((center) => (<option key={center} value={center}>{center}</option>))}</select></div><div className="col-md-3"><label className="form-label small mb-1">تاريخ الميلاد</label><input className="form-control" type="date" required title="تاريخ ميلاد الموظف" value={editEmployeeForm.birthDate} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, birthDate: e.target.value })} /></div><div className="col-md-3"><select className="form-select" value={editEmployeeForm.gender} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, gender: e.target.value })}><option value="ذكر">ذكر</option><option value="أنثى">أنثى</option></select></div><div className="col-md-4"><select className="form-select" value={editEmployeeForm.managerId} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, managerId: e.target.value })}><option value="">بدون مدير مباشر</option>{employees.filter((employee) => employee.id !== editingEmployeeId).map((employee) => (<option key={employee.id} value={employee.id}>{employee.firstName} {employee.lastName}</option>))}</select></div><div className="col-md-4"><input className="form-control" placeholder="ملاحظات" value={editEmployeeForm.notes} onChange={(e) => setEditEmployeeForm({ ...editEmployeeForm, notes: e.target.value })} /></div>{sortedCriterionCategories.length > 0 && <div className="col-12 mt-2"><p className="text-muted small mb-2">معايير الراتب حسب الفئات (اختياري):</p><div className="row g-2">{sortedCriterionCategories.map((cat) => (<div className="col-md-4" key={cat.id}><label className="form-label small mb-0">{cat.name}</label><select className="form-select form-select-sm" value={editEmployeeCategorySelections[cat.id] != null ? editEmployeeCategorySelections[cat.id] : ""} onChange={(e) => setEditEmployeeCategorySelections((prev) => ({ ...prev, [cat.id]: e.target.value }))}><option value="">— بدون اختيار —</option>{assignableCriteria.filter((criterion) => criterion.categoryId === cat.id).map((criterion) => (<option key={criterion.id} value={criterion.id}>{criterion.name}</option>))}</select></div>))}</div></div>}<div className="col-12 d-flex gap-2"><button className="btn btn-primary btn-sm" type="submit">حفظ التعديل</button><button className="btn btn-outline-secondary btn-sm" type="button" onClick={cancelEditEmployee}>إلغاء</button></div></form>}<div className="table-responsive employee-table-scroll"><table className="table table-sm table-striped"><thead><tr><th>رقم</th><th>الاسم الكامل</th><th>الرقم الذاتي</th><th>الرقم الوطني</th><th>العنوان الحالي</th><th>الهاتف</th><th>البريد الإلكتروني</th><th>تاريخ التعيين</th><th>الوضع الصحي</th><th>المركز</th><th>الجنس</th><th>المدير</th>{sortedCriterionCategories.map((cat) => (<Fragment key={cat.id}><th style={{ minWidth: "230px" }}>{cat.name} (نص)</th><th style={{ minWidth: "130px" }}>{cat.name} (مبلغ)</th></Fragment>))}<th style={{ minWidth: "140px" }}>الراتب النهائي</th>{groupHeaderColumns.map((col) => (<th key={col.id} style={{ minWidth: "120px" }}>{col.name}</th>))}{canManage && <th>إجراء</th>}</tr></thead><tbody>{employees.map((employee) => (<tr key={employee.id}><td>{employee.id}</td><td>{employee.firstName} {employee.lastName}</td><td>{employee.selfNumber || "-"}</td><td>{employee.nationalNumber || "-"}</td><td>{employee.currentAddressDetails || "-"}</td><td>{employee.phoneNumber || "-"}</td><td>{employee.email || "-"}</td><td>{employee.hireDate || "-"}</td><td>{employee.healthStatus || "-"}</td><td>{employee.centerName || "-"}</td><td>{employee.gender}</td><td>{employee.managerId ? (employeeLookup[employee.managerId] || employee.managerId) : "-"}</td>{sortedCriterionCategories.map((cat) => { const cell = categoryDisplayRow(employee, cat.id); const text = cell && cell.linkedText ? cell.linkedText : "—"; const amt = cell && cell.computedAmount != null ? formatMoney(cell.computedAmount) : "—"; return (<Fragment key={cat.id}><td className="small" style={{ minWidth: "230px", whiteSpace: "normal" }}>{text}</td><td style={{ minWidth: "130px" }}>{amt}</td></Fragment>); })}<td style={{ minWidth: "140px" }}>{formatMoney(finalSalary(employee))}</td>{groupHeaderColumns.map((col) => (<td key={col.id} style={{ minWidth: "120px" }}>{salaryGroupCell(employee, col.id)}</td>))}{canManage && <td className="text-nowrap"><button type="button" className="btn btn-sm btn-outline-primary me-1" onClick={() => startEditEmployee(employee)}>تعديل</button><button type="button" className="btn btn-sm btn-outline-danger" onClick={() => deleteEmployee(employee.id)}>حذف</button></td>}</tr>))}</tbody></table></div></div></section>}
        </div>}

        {activeTab === "criteria" && <div className="tab-pane active" role="tabpanel">
          {canManage && <section className="card mb-4"><div className="card-body"><h3 className="card-title">إضافة فئة جديدة للمعايير</h3><form onSubmit={submitNewCategory} className="row g-2"><div className="col-md-6"><input className="form-control" placeholder="اسم الفئة" value={newCategoryName} onChange={(e) => setNewCategoryName(e.target.value)} /></div><div className="col-md-2"><button className="btn btn-secondary w-100" type="submit">إضافة الفئة</button></div></form></div></section>}
          {canManage && <section className="card mb-4"><div className="card-body"><h3 className="card-title">إضافة معيار راتب</h3><form onSubmit={submitCriterion} className="row g-2"><div className="col-md-3"><input className="form-control" required placeholder="اسم المعيار" value={criterionForm.name} onChange={(e) => setCriterionForm({ ...criterionForm, name: e.target.value })} /></div><div className="col-md-2"><select className="form-select" required value={criterionForm.categoryId} onChange={(e) => setCriterionForm({ ...criterionForm, categoryId: e.target.value })}><option value="">فئة المعيار</option>{criterionCategories.map((cat) => (<option key={cat.id} value={cat.id}>{cat.name}</option>))}</select></div><div className="col-md-2"><select className="form-select" disabled={criterionForm.isGroupHeader} value={criterionForm.effectType} onChange={(e) => setCriterionForm({ ...criterionForm, effectType: Number(e.target.value) })}>{effectTypes.map((t) => (<option key={t.value} value={t.value}>{t.label}</option>))}</select></div><div className="col-md-2"><input className="form-control" type="number" step="0.01" required={!criterionForm.isGroupHeader} disabled={criterionForm.isGroupHeader} placeholder="قيمة التأثير" value={criterionForm.isGroupHeader ? 0 : criterionForm.effectValue} onChange={(e) => setCriterionForm({ ...criterionForm, effectValue: e.target.value })} /></div><div className="col-md-3"><input className="form-control" placeholder="تعليمات المعيار" value={criterionForm.instructions} onChange={(e) => setCriterionForm({ ...criterionForm, instructions: e.target.value })} /></div><div className="col-md-4 d-flex align-items-center"><div className="form-check"><input className="form-check-input" type="checkbox" id="criterion-is-header" checked={criterionForm.isGroupHeader} onChange={(e) => setCriterionForm((prev) => ({ ...prev, isGroupHeader: e.target.checked, parentSalaryCriterionId: e.target.checked ? "" : prev.parentSalaryCriterionId }))} /><label className="form-check-label" htmlFor="criterion-is-header">ترويسة غصن</label></div></div><div className="col-md-4"><select className="form-select" disabled={criterionForm.isGroupHeader} value={criterionForm.parentSalaryCriterionId} onChange={(e) => setCriterionForm((prev) => ({ ...prev, parentSalaryCriterionId: e.target.value, isGroupHeader: e.target.value ? false : prev.isGroupHeader }))}><option value="">بدون أب</option>{criteria.map((c) => (<option key={c.id} value={c.id}>{c.name} {c.isGroupHeader ? "(ترويسة)" : ""} — {c.categoryName}</option>))}</select></div><div className="col-12"><button className="btn btn-success" type="submit">حفظ المعيار</button></div></form></div></section>}
          <section className="card mb-4"><div className="card-body">{canManage && editingCriterionId && <form onSubmit={saveEditCriterion} className="row g-2 mb-3 border rounded p-2"><div className="col-12"><strong>تعديل المعيار رقم {editingCriterionId}</strong></div><div className="col-md-3"><input className="form-control" required placeholder="اسم المعيار" value={editCriterionForm.name} onChange={(e) => setEditCriterionForm({ ...editCriterionForm, name: e.target.value })} /></div><div className="col-md-2"><select className="form-select" required value={editCriterionForm.categoryId} onChange={(e) => setEditCriterionForm({ ...editCriterionForm, categoryId: e.target.value })}><option value="">فئة المعيار</option>{criterionCategories.map((cat) => (<option key={cat.id} value={cat.id}>{cat.name}</option>))}</select></div><div className="col-md-2"><select className="form-select" disabled={editCriterionForm.isGroupHeader} value={editCriterionForm.effectType} onChange={(e) => setEditCriterionForm({ ...editCriterionForm, effectType: Number(e.target.value) })}>{effectTypes.map((t) => (<option key={t.value} value={t.value}>{t.label}</option>))}</select></div><div className="col-md-2"><input className="form-control" type="number" step="0.01" required={!editCriterionForm.isGroupHeader} disabled={editCriterionForm.isGroupHeader} placeholder="قيمة التأثير" value={editCriterionForm.isGroupHeader ? 0 : editCriterionForm.effectValue} onChange={(e) => setEditCriterionForm({ ...editCriterionForm, effectValue: e.target.value })} /></div><div className="col-md-3"><input className="form-control" placeholder="تعليمات المعيار" value={editCriterionForm.instructions} onChange={(e) => setEditCriterionForm({ ...editCriterionForm, instructions: e.target.value })} /></div><div className="col-md-4 d-flex align-items-center"><div className="form-check"><input className="form-check-input" type="checkbox" id="edit-criterion-is-header" checked={editCriterionForm.isGroupHeader} onChange={(e) => setEditCriterionForm((prev) => ({ ...prev, isGroupHeader: e.target.checked, parentSalaryCriterionId: e.target.checked ? "" : prev.parentSalaryCriterionId }))} /><label className="form-check-label" htmlFor="edit-criterion-is-header">ترويسة غصن</label></div></div><div className="col-md-4"><select className="form-select" disabled={editCriterionForm.isGroupHeader} value={editCriterionForm.parentSalaryCriterionId} onChange={(e) => setEditCriterionForm((prev) => ({ ...prev, parentSalaryCriterionId: e.target.value, isGroupHeader: e.target.value ? false : prev.isGroupHeader }))}><option value="">بدون أب</option>{criteria.filter((c) => c.id !== editingCriterionId).map((c) => (<option key={c.id} value={c.id}>{c.name} {c.isGroupHeader ? "(ترويسة)" : ""} — {c.categoryName}</option>))}</select></div><div className="col-12 d-flex gap-2"><button className="btn btn-primary btn-sm" type="submit">حفظ التعديل</button><button className="btn btn-outline-secondary btn-sm" type="button" onClick={cancelEditCriterion}>إلغاء</button></div></form>}<h4 className="card-title">المعايير الأساسية للراتب</h4><div className="table-responsive"><table className="table table-sm table-striped"><thead><tr><th>المعرف</th><th>المعيار</th><th>الفئة</th><th>ترويسة</th><th>الأب</th><th>نوع التأثير</th><th>القيمة</th>{canManage && <th>إجراء</th>}</tr></thead><tbody>{criteria.map((criterion) => (<tr key={criterion.id}><td>{criterion.id}</td><td>{criterion.name}</td><td>{criterion.categoryName}</td><td>{criterion.isGroupHeader ? "نعم" : "—"}</td><td>{criterion.parentSalaryCriterionId && criterion.parentSalaryCriterionId !== criterion.id ? criterion.parentSalaryCriterionId : "—"}</td><td>{effectTypeLabel(criterion.effectType)}</td><td>{criterion.effectValue}</td>{canManage && <td className="text-nowrap"><button type="button" className="btn btn-sm btn-outline-primary me-1" onClick={() => startEditCriterion(criterion)}>تعديل</button><button type="button" className="btn btn-sm btn-outline-danger" onClick={() => deleteCriterion(criterion.id)}>حذف</button></td>}</tr>))}</tbody></table></div></div></section>
        </div>}

        {activeTab === "assignments" && <div className="tab-pane active" role="tabpanel">
          {canManage && <section className="card mb-4"><div className="card-body"><h3 className="card-title">ربط موظف بمعيار</h3><form onSubmit={submitAssignment} className="row g-2"><div className="col-md-5"><select className="form-select" required value={assignForm.employeeId} onChange={(e) => setAssignForm({ ...assignForm, employeeId: e.target.value })}><option value="">اختر الموظف</option>{employees.map((employee) => (<option key={employee.id} value={employee.id}>{employee.firstName} {employee.lastName}</option>))}</select></div><div className="col-md-5"><select className="form-select" required value={assignForm.salaryCriterionId} onChange={(e) => setAssignForm({ ...assignForm, salaryCriterionId: e.target.value })}><option value="">اختر المعيار</option>{assignableCriteria.map((criterion) => (<option key={criterion.id} value={criterion.id}>{criterion.name} - {criterion.categoryName}</option>))}</select></div><div className="col-md-2"><button className="btn btn-warning w-100" type="submit">إسناد</button></div></form></div></section>}
          <section className="card"><div className="card-body"><h4 className="card-title">معايير الموظفين (مع قيد فئة واحدة)</h4><div className="table-responsive"><table className="table table-sm table-striped"><thead><tr><th>الموظف</th><th>المعيار</th><th>الفئة</th></tr></thead><tbody>{assignments.map((assignment) => (<tr key={assignment.id}><td>{assignment.employeeName}</td><td>{assignment.criterionName}</td><td>{assignment.categoryName}</td></tr>))}</tbody></table></div></div></section>
        </div>}

        {canManage && activeTab === "users" && <div className="tab-pane active" role="tabpanel">
          <section className="card mb-4"><div className="card-body"><h3 className="card-title">إضافة مستخدم جديد</h3><form onSubmit={submitNewUser} className="row g-2"><div className="col-md-3"><input className="form-control" placeholder="اسم المستخدم" value={newUserForm.username} onChange={(e) => setNewUserForm({ ...newUserForm, username: e.target.value })} /></div><div className="col-md-3"><input type="password" className="form-control" placeholder="كلمة المرور" value={newUserForm.password} onChange={(e) => setNewUserForm({ ...newUserForm, password: e.target.value })} /></div><div className="col-md-2 d-flex align-items-center"><div className="form-check"><input className="form-check-input" type="checkbox" id="new-user-admin" checked={newUserForm.isAdmin} onChange={(e) => setNewUserForm({ ...newUserForm, isAdmin: e.target.checked })} /><label className="form-check-label" htmlFor="new-user-admin">أدمن</label></div></div><div className="col-md-2 d-flex align-items-center"><div className="form-check"><input className="form-check-input" type="checkbox" id="new-user-supervisor" checked={newUserForm.isSupervisor} onChange={(e) => setNewUserForm({ ...newUserForm, isSupervisor: e.target.checked })} /><label className="form-check-label" htmlFor="new-user-supervisor">مشرف</label></div></div><div className="col-md-2"><button className="btn btn-primary w-100" type="submit">إضافة</button></div></form></div></section>
          <section className="card"><div className="card-body"><h4 className="card-title">الحسابات</h4><div className="table-responsive"><table className="table table-sm table-striped"><thead><tr><th>#</th><th>المستخدم</th><th>أدمن</th><th>مشرف</th><th>نشط</th><th>إجراء</th></tr></thead><tbody>{users.map((u) => (<tr key={u.id}><td>{u.id}</td><td>{u.username}</td><td>{u.isAdmin ? "نعم" : "لا"}</td><td>{u.isSupervisor ? "نعم" : "لا"}</td><td>{u.isActive ? "نعم" : "لا"}</td><td><button type="button" className="btn btn-sm btn-outline-danger" onClick={() => deleteUser(u.id)} disabled={u.username === "HR_manager"}>حذف</button></td></tr>))}</tbody></table></div></div></section>
        </div>}
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("hr-app-root"));
root.render(<HrApp />);