feat: add user from, show deparments, users in pages

2026-08-17 21:25:54 +02:00 · 2024-06-28 12:48:50 +05:30
parent 70a3adebd7
commit 7b2b71fea5
7 changed files with 520 additions and 58 deletions
@@ -0,0 +1,370 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import axios from "axios";
+import Title from "./Title";
+import Alert from "../primitives/Alert";
+import Loader from "../primitives/Loader";
+
+const AddDepartment = (props) => {
+  const [formdata, setFormdata] = useState({
+    name: "",
+    phone: "",
+    email: "",
+    department: "",
+    role: ""
+  });
+  const [isLoader, setIsLoader] = useState(false);
+  const [isUserExist, setIsUserExist] = useState(false);
+  const [departmentList, setDepartmentList] = useState([]);
+  const role = ["OrgAdmin", "Manager", "User", "Guest"];
+  const parseBaseUrl = localStorage.getItem("baseUrl");
+  const parseAppId = localStorage.getItem("parseAppId");
+
+  useEffect(() => {
+    getDepartmentList();
+  }, []);
+
+  const getDepartmentList = async () => {
+    const extUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+    console.log("extUser ", extUser);
+    const department = new Parse.Query("contracts_Departments");
+    department.equalTo("OrganizationId", {
+      __type: "Pointer",
+      className: "contracts_Organizations",
+      objectId: extUser.OrganizationId.objectId
+    });
+    department.doesNotExist("DepartmentParentId");
+    department.doesNotExist("Ancestors");
+    const departmentRes = await department.find();
+    if (departmentRes.length > 0) {
+      const _departmentRes = JSON.parse(JSON.stringify(departmentRes));
+      setDepartmentList(_departmentRes);
+    }
+  };
+  const checkUserExist = async () => {
+    const user = Parse.User.current();
+    try {
+      const res = await Parse.Cloud.run("getUserDetails", {
+        email: user.get("email"),
+        userId: user.id
+      });
+      if (res) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (err) {
+      console.log("err", err);
+    }
+  };
+  console.log("formdata", formdata);
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+
+    setIsLoader(true);
+    const res = await checkUserExist();
+    if (res) {
+      setIsUserExist(true);
+      setIsLoader(false);
+      setTimeout(() => {
+        setIsUserExist(false);
+      }, 1000);
+    } else {
+      try {
+        const extUser = new Parse.Object("contracts_Users");
+        extUser.set("Name", formdata.name);
+        if (formdata.phone) {
+          extUser.set("Phone", formdata.phone);
+        }
+        extUser.set("Email", formdata.email);
+        extUser.set("UserRole", `contracts_${formdata.role}`);
+        extUser.set("DepartmentIds", [
+          {
+            __type: "Pointer",
+            className: "contracts_Departments",
+            objectId: formdata.department
+          }
+        ]);
+        if (localUser && localUser.OrganizationId) {
+          extUser.set("OrganizationId", {
+            __type: "Pointer",
+            className: "contracts_Organizations",
+            objectId: localUser.OrganizationId.objectId
+          });
+        }
+
+        if (localStorage.getItem("TenantId")) {
+          extUser.set("TenantId", {
+            __type: "Pointer",
+            className: "partners_Tenant",
+            objectId: localStorage.getItem("TenantId")
+          });
+        }
+
+        try {
+          const _users = Parse.Object.extend("User");
+          const _user = new _users();
+          _user.set("name", formdata.name);
+          _user.set("username", formdata.email);
+          _user.set("email", formdata.email);
+          _user.set("password", formdata.email);
+          if (formdata.phone) {
+            _user.set("phone", formdata.phone);
+          }
+
+          const user = await _user.save();
+          if (user) {
+            const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+            const headers = {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": parseAppId,
+              sessionToken: localStorage.getItem("accesstoken")
+            };
+            const body = {
+              appName: "contracts",
+              roleName: "contracts_" + formdata.role,
+              userId: user.id
+            };
+            await axios.post(roleurl, body, { headers: headers });
+            const currentUser = Parse.User.current();
+            extUser.set(
+              "CreatedBy",
+              Parse.User.createWithoutData(currentUser.id)
+            );
+
+            extUser.set("UserId", user);
+            const acl = new Parse.ACL();
+            acl.setPublicReadAccess(true);
+            acl.setPublicWriteAccess(true);
+            acl.setReadAccess(currentUser.id, true);
+            acl.setWriteAccess(currentUser.id, true);
+
+            extUser.setACL(acl);
+
+            const res = await extUser.save();
+
+            const parseData = JSON.parse(JSON.stringify(res));
+
+            if (props.closePopup) {
+              props.closePopup();
+            }
+            if (props.handleUserData) {
+              props.handleUserData(parseData);
+            }
+
+            setIsLoader(false);
+            setFormdata({
+              name: "",
+              email: "",
+              phone: "",
+              department: "",
+              role: ""
+            });
+          }
+        } catch (err) {
+          console.log("err ", err);
+          if (err.code === 202) {
+            const user = Parse.User.current();
+            const params = { email: user.get("email") };
+            const userRes = await Parse.Cloud.run("getUserId", params);
+            const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+            const headers = {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": parseAppId,
+              sessionToken: localStorage.getItem("accesstoken")
+            };
+            const body = {
+              appName: "contracts",
+              roleName: "contracts_" + formdata.role,
+              userId: userRes.id
+            };
+            await axios.post(roleurl, body, { headers: headers });
+            const currentUser = Parse.User.current();
+            extUser.set(
+              "CreatedBy",
+              Parse.User.createWithoutData(currentUser.id)
+            );
+
+            extUser.set("UserId", {
+              __type: "Pointer",
+              className: "_User",
+              objectId: userRes.id
+            });
+            const acl = new Parse.ACL();
+            acl.setPublicReadAccess(true);
+            acl.setPublicWriteAccess(true);
+            acl.setReadAccess(currentUser.id, true);
+            acl.setWriteAccess(currentUser.id, true);
+
+            extUser.setACL(acl);
+            const res = await extUser.save();
+
+            const parseData = JSON.parse(JSON.stringify(res));
+            if (props.closePopup) {
+              props.closePopup();
+            }
+            if (props.handleUserData) {
+              props.handleUserData(parseData);
+            }
+            setIsLoader(false);
+            setFormdata({
+              name: "",
+              email: "",
+              phone: "",
+              department: "",
+              role: ""
+            });
+          }
+        }
+      } catch (err) {
+        console.log("err", err);
+        setIsLoader(false);
+        alert("something went wrong!");
+      }
+    }
+  };
+
+  // Define a function to handle the "add yourself" checkbox
+  const handleReset = () => {
+    setFormdata({
+      name: "",
+      email: "",
+      phone: "",
+      department: "",
+      role: ""
+    });
+  };
+  const handleChange = (e) => {
+    setFormdata((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  return (
+    <div className="shadow-md rounded-box my-[1px] p-3 bg-[#ffffff]">
+      <Title title={"Add User"} />
+      {isUserExist && <Alert type="danger">User already exists!</Alert>}
+      {isLoader && (
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50 rounded-box">
+          <Loader />
+        </div>
+      )}
+      <div className="w-full mx-auto">
+        <form onSubmit={handleSubmit}>
+          {/* <h1 className="text-[20px] font-semibold mb-4">Add User</h1> */}
+          <div className="mb-3">
+            <label
+              htmlFor="name"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Name
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="text"
+              name="name"
+              value={formdata.name}
+              onChange={(e) => handleChange(e)}
+              required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="email"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Email
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="email"
+              name="email"
+              value={formdata.email}
+              onChange={(e) => handleChange(e)}
+              required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="phone"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Phone
+              {/* <span className="text-[red] text-[13px]"> *</span> */}
+            </label>
+            <input
+              type="text"
+              name="phone"
+              value={formdata.phone}
+              onChange={(e) => handleChange(e)}
+              // required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="phone"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Department
+              {/* <span className="text-[red] text-[13px]"> *</span> */}
+            </label>
+            <select
+              value={formdata.department}
+              onChange={(e) => handleChange(e)}
+              name="department"
+              className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+            >
+              <option disabled>select</option>
+              {departmentList.length > 0 &&
+                departmentList.map((x) => (
+                  <option key={x.objectId} value={x.objectId}>
+                    {x.Name}
+                  </option>
+                ))}
+            </select>
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="phone"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Role
+              {/* <span className="text-[red] text-[13px]"> *</span> */}
+            </label>
+            <select
+              value={formdata.role}
+              onChange={(e) => handleChange(e)}
+              name="role"
+              className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+            >
+              {role.length > 0 &&
+                role.map((x) => (
+                  <option key={x} value={x}>
+                    {x}
+                  </option>
+                ))}
+            </select>
+          </div>
+          <div className="flex items-center mt-3 gap-2 text-white">
+            <button type="submit" className="op-btn op-btn-primary">
+              Submit
+            </button>
+            <div
+              type="button"
+              onClick={() => handleReset()}
+              className="op-btn op-btn-secondary"
+            >
+              Reset
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddDepartment;
@@ -16,6 +16,7 @@ const AddUser = (props) => {
  const [isLoader, setIsLoader] = useState(false);
  const [isUserExist, setIsUserExist] = useState(false);
  const [departmentList, setDepartmentList] = useState([]);
+  const role = ["OrgAdmin", "Manager", "User", "Guest"];
  const parseBaseUrl = localStorage.getItem("baseUrl");
  const parseAppId = localStorage.getItem("parseAppId");

@@ -54,10 +55,13 @@ const AddUser = (props) => {
      console.log("err", err);
    }
  };
+  console.log("formdata", formdata);
  // Define a function to handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
+    const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+
    setIsLoader(true);
    const res = await checkUserExist();
    if (res) {
@@ -74,7 +78,21 @@ const AddUser = (props) => {
          extUser.set("Phone", formdata.phone);
        }
        extUser.set("Email", formdata.email);
-        extUser.set("UserRole", "contracts_User");
+        extUser.set("UserRole", `contracts_${formdata.role}`);
+        extUser.set("DepartmentIds", [
+          {
+            __type: "Pointer",
+            className: "contracts_Departments",
+            objectId: formdata.department
+          }
+        ]);
+        if (localUser && localUser.OrganizationId) {
+          extUser.set("OrganizationId", {
+            __type: "Pointer",
+            className: "contracts_Organizations",
+            objectId: localUser.OrganizationId.objectId
+          });
+        }

        if (localStorage.getItem("TenantId")) {
          extUser.set("TenantId", {
@@ -104,8 +122,8 @@ const AddUser = (props) => {
              sessionToken: localStorage.getItem("accesstoken")
            };
            const body = {
-              appName: localStorage.getItem("_appName"),
-              roleName: "contracts_User",
+              appName: "contracts",
+              roleName: "contracts_" + formdata.role,
              userId: user.id
            };
            await axios.post(roleurl, body, { headers: headers });
@@ -157,8 +175,8 @@ const AddUser = (props) => {
              sessionToken: localStorage.getItem("accesstoken")
            };
            const body = {
-              appName: localStorage.getItem("_appName"),
-              roleName: "contracts_User",
+              appName: "contracts",
+              roleName: "contracts_" + formdata.role,
              userId: userRes.id
            };
            await axios.post(roleurl, body, { headers: headers });
@@ -200,7 +218,7 @@ const AddUser = (props) => {
          }
        }
      } catch (err) {
-        // console.log("err", err);
+        console.log("err", err);
        setIsLoader(false);
        alert("something went wrong!");
      }
@@ -226,7 +244,7 @@ const AddUser = (props) => {
      <Title title={"Add User"} />
      {isUserExist && <Alert type="danger">User already exists!</Alert>}
      {isLoader && (
-        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50 rounded-box">
          <Loader />
        </div>
      )}
@@ -243,7 +261,7 @@ const AddUser = (props) => {
            </label>
            <input
              type="text"
-              id="name"
+              name="name"
              value={formdata.name}
              onChange={(e) => handleChange(e)}
              required
@@ -260,7 +278,7 @@ const AddUser = (props) => {
            </label>
            <input
              type="email"
-              id="email"
+              name="email"
              value={formdata.email}
              onChange={(e) => handleChange(e)}
              required
@@ -277,7 +295,7 @@ const AddUser = (props) => {
            </label>
            <input
              type="text"
-              id="phone"
+              name="phone"
              value={formdata.phone}
              onChange={(e) => handleChange(e)}
              // required
@@ -295,10 +313,10 @@ const AddUser = (props) => {
            <select
              value={formdata.department}
              onChange={(e) => handleChange(e)}
-              id="department"
+              name="department"
              className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
            >
-              <option>select</option>
+              <option disabled>select</option>
              {departmentList.length > 0 &&
                departmentList.map((x) => (
                  <option key={x.objectId} value={x.objectId}>
@@ -307,6 +325,28 @@ const AddUser = (props) => {
                ))}
            </select>
          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="phone"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Role
+              {/* <span className="text-[red] text-[13px]"> *</span> */}
+            </label>
+            <select
+              value={formdata.role}
+              onChange={(e) => handleChange(e)}
+              name="role"
+              className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+            >
+              {role.length > 0 &&
+                role.map((x) => (
+                  <option key={x} value={x}>
+                    {x}
+                  </option>
+                ))}
+            </select>
+          </div>
          <div className="flex items-center mt-3 gap-2 text-white">
            <button type="submit" className="op-btn op-btn-primary">
              Submit
@@ -2,20 +2,36 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import Tooltip from "../primitives/Tooltip";
 import ModalUi from "../primitives/ModalUi";
 import pad from "../assets/images/pad.svg";

-const heading = ["Sr.No", "Name"];
-const actions = [];
+const heading = ["Sr.No", "Name", "Actions"];
+const actions = [
+  {
+    btnId: "1231",
+    hoverLabel: "Edit",
+    btnColor: "op-btn-primary",
+    btnIcon: "fa-light fa-pen",
+    redirectUrl: "draftDocument",
+    action: "redirect"
+  },
+  {
+    btnId: "2142",
+    hoverLabel: "Delete",
+    btnColor: "op-btn-secondary",
+    btnIcon: "fa-light fa-trash",
+    redirectUrl: "",
+    action: "delete"
+  }
+];

 const DepartmentList = () => {
  const recordperPage = 10;
  const [departmentList, setDepartmentList] = useState([]);
  const [isLoader, setIsLoader] = useState(false);
  const [isModal, setIsModal] = useState(false);
-  const navigate = useNavigate();
  const location = useLocation();
  const isDashboard =
    location?.pathname === "/dashboard/35KBoSgoAK" ? true : false;
@@ -27,7 +43,7 @@ const DepartmentList = () => {
  const getPaginationRange = () => {
    const totalPageNumbers = 7; // Adjust this value to show more/less page numbers
    const pages = [];
-    const totalPages = Math.ceil(departmentList / recordperPage);
+    const totalPages = Math.ceil(departmentList.length / recordperPage);
    if (totalPages <= totalPageNumbers) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
@@ -82,15 +98,25 @@ const DepartmentList = () => {
  async function fetchDepartmentList() {
    try {
      setIsLoader(true);
-      const organization = JSON.parse(localStorage.getItem("Extand_Class"));
+      const extUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
      const department = new Parse.Query("contracts_Departments");
-      department.equalTo("OrganizationId", organization[0].objectId);
+      department.equalTo("OrganizationId", {
+        __type: "Pointer",
+        className: "contracts_Organizations",
+        objectId: extUser.OrganizationId.objectId
+      });
      const departmentRes = await department.find();
-      const _departmentRes = JSON.parse(JSON.stringify(departmentRes));
-      setDepartmentList(_departmentRes);
+      if (departmentRes.length > 0) {
+        const _departmentRes = JSON.parse(JSON.stringify(departmentRes));
+        setDepartmentList(_departmentRes);
+      }
    } catch (err) {
-      console.log("Err ", err);
+      console.log("Err in fetch departmentlist", err);
+      setIsAlert({ type: "danger", msg: "Something went wrong." });
    } finally {
+      setTimeout(() => {
+        setIsAlert({ type: "success", msg: "" });
+      }, 1500);
      setIsLoader(false);
    }
  }
@@ -102,17 +128,22 @@ const DepartmentList = () => {
  const indexOfFirstDoc = indexOfLastDoc - recordperPage;
  const currentList = departmentList?.slice(indexOfFirstDoc, indexOfLastDoc);
  const handleDelete = () => {};
-  const handleClose = () => {};
+  const handleClose = () => {
+    setIsDeleteModal({});
+  };

  // Change page
  const paginateFront = () => setCurrentPage(currentPage + 1);
  const paginateBack = () => setCurrentPage(currentPage - 1);
-  const handleActionBtn = () => {};
-
+  const handleActionBtn = (act, item) => {
+    if (act.action === "delete") {
+      setIsDeleteModal({ [item.objectId]: true });
+    }
+  };
  return (
    <div className="relative">
      {isLoader && (
-        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
+        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30 rounded-box">
          <Loader />
        </div>
      )}
@@ -156,9 +187,7 @@ const DepartmentList = () => {
                        <th className="px-4 py-2">{startIndex + index + 1}</th>
                      )}
                      <td className="px-4 py-2 font-semibold">{item?.Name} </td>
-                      <td className="px-4 py-2 ">{item?.Email || "-"}</td>
-                      <td className="px-4 py-2">{item?.Phone || "-"}</td>
-                      <td className="px-3 py-2 text-white grid grid-cols-2">
+                      <td className="px-3 py-2 text-white flex flex-wrap gap-1">
                        {actions?.length > 0 &&
                          actions.map((act, index) => (
                            <button
@@ -167,7 +196,7 @@ const DepartmentList = () => {
                              title={act.hoverLabel}
                              className={`${
                                act?.btnColor ? act.btnColor : ""
-                              } op-btn op-btn-sm`}
+                              } op-btn op-btn-sm w-[50px]`}
                            >
                              <i className={act.btnIcon}></i>
                            </button>
@@ -175,12 +204,12 @@ const DepartmentList = () => {
                        {isDeleteModal[item.objectId] && (
                          <ModalUi
                            isOpen
-                            title={"Delete Contact"}
+                            title={"Delete Department"}
                            handleClose={handleClose}
                          >
                            <div className="m-[20px]">
                              <div className="text-lg font-normal text-black">
-                                Are you sure you want to delete this contact?
+                                Are you sure you want to delete this department?
                              </div>
                              <hr className="bg-[#ccc] mt-4 " />
                              <div className="flex items-center mt-3 gap-2 text-white">
@@ -2,19 +2,17 @@ import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import ModalUi from "../primitives/ModalUi";
 import pad from "../assets/images/pad.svg";
 import Tooltip from "../primitives/Tooltip";
-import AddSigner from "../components/AddSigner";
 import AddUser from "../components/AddUser";
-const heading = ["Sr.No", "Name", "Email", "Phone", "Departments"];
+const heading = ["Sr.No", "Name", "Email", "Phone", "Role", "Departments"];
 const actions = [];
 const UserList = () => {
  const [userList, setUserList] = useState([]);
  const [isLoader, setIsLoader] = useState(false);
  const [isModal, setIsModal] = useState(false);
-  const navigate = useNavigate();
  const location = useLocation();
  const isDashboard =
    location?.pathname === "/dashboard/35KBoSgoAK" ? true : false;
@@ -82,17 +80,19 @@ const UserList = () => {
  async function fetchUserList() {
    try {
      setIsLoader(true);
-      const organization = JSON.parse(localStorage.getItem("Extand_Class"));
-      const res = await Parse.Cloud.run("getuserlist", {
-        organizationId: organization[0].objectId
+      const extUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+      const res = await Parse.Cloud.run("getuserlistbyorg", {
+        organizationId: extUser.OrganizationId.objectId
      });
-
-      console.log("res ", res);
      const _userRes = JSON.parse(JSON.stringify(res));
      setUserList(_userRes);
    } catch (err) {
-      console.log("Err ", err);
+      console.log("Err in fetch userlist", err);
+      setIsAlert({ type: "danger", msg: "Something went wrong." });
    } finally {
+      setTimeout(() => {
+        setIsAlert({ type: "success", msg: "" });
+      }, 1500);
      setIsLoader(false);
    }
  }
@@ -101,20 +101,39 @@ const UserList = () => {
  };

  const handleDelete = () => {};
-  const handleClose = () => {};
+  const handleClose = () => {
+    setIsDeleteModal({});
+  };

  // Change page
  const paginateFront = () => setCurrentPage(currentPage + 1);
  const paginateBack = () => setCurrentPage(currentPage - 1);
-  const handleActionBtn = () => {};
-
+  const handleActionBtn = (act, item) => {
+    if (act.action === "delete") {
+      setIsDeleteModal({ [item.objectId]: true });
+    }
+  };
  const handleUserData = (userData) => {
    console.log("userData", userData);
  };
+  // `formatRow` is used to show data in poper manner like
+  // if data is of array type then it will join array items with ","
+  // if data is of object type then it Name values will be show in row
+  // if no data available it will show hyphen "-"
+  const formatRow = (row) => {
+    if (Array.isArray(row)) {
+      let updateArr = row.map((x) => x.Name);
+      return updateArr.join(", ");
+    } else if (typeof row === "object" && row !== null) {
+      return row?.Name || "-";
+    } else {
+      return "-";
+    }
+  };
  return (
    <div className="relative">
      {isLoader && (
-        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
+        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30 rounded-box">
          <Loader />
        </div>
      )}
@@ -160,6 +179,12 @@ const UserList = () => {
                      <td className="px-4 py-2 font-semibold">{item?.Name} </td>
                      <td className="px-4 py-2 ">{item?.Email || "-"}</td>
                      <td className="px-4 py-2">{item?.Phone || "-"}</td>
+                      <td className="px-4 py-2">
+                        {item?.UserRole?.split("_").pop() || "-"}
+                      </td>
+                      <td className="px-4 py-2">
+                        {formatRow(item.DepartmentIds)}
+                      </td>
                      <td className="px-3 py-2 text-white grid grid-cols-2">
                        {actions?.length > 0 &&
                          actions.map((act, index) => (
@@ -177,12 +202,12 @@ const UserList = () => {
                        {isDeleteModal[item.objectId] && (
                          <ModalUi
                            isOpen
-                            title={"Delete Contact"}
+                            title={"Delete User"}
                            handleClose={handleClose}
                          >
                            <div className="m-[20px]">
                              <div className="text-lg font-normal text-black">
-                                Are you sure you want to delete this contact?
+                                Are you sure you want to delete this user?
                              </div>
                              <hr className="bg-[#ccc] mt-4 " />
                              <div className="flex items-center mt-3 gap-2 text-white">
@@ -261,10 +286,6 @@ const UserList = () => {
          isOpen={isModal}
          handleClose={handleFormModal}
        >
-          {/* <AddSigner
-            handleUserData={handleUserData}
-            closePopup={handleFormModal}
-          /> */}
          <AddUser
            handleUserData={handleUserData}
            closePopup={handleFormModal}
@@ -44,8 +44,8 @@ import GetPublicUserName from './parsefunction/GetPublicUserName.js';
 import GetPublicTemplate from './parsefunction/GetPublicTemplate.js';
 import ssoSignin from './parsefunction/ssoSignin.js';
 import isextenduser from './parsefunction/isextenduser.js';
-import getUserByOrgId from './parsefunction/getuserbyOrgId.js';
-import getUserList from './parsefunction/getUserList.js';
+import getUserByOrg from './parsefunction/getUserByOrg.js';
+import getUserListByOrg from './parsefunction/getUserListByOrg.js';

 // This afterSave function triggers after an object is added or updated in the specified class, allowing for post-processing logic.
 Parse.Cloud.afterSave('contracts_Document', DocumentAftersave);
@@ -100,5 +100,5 @@ Parse.Cloud.define('getpublicusername', GetPublicUserName);
 Parse.Cloud.define('getpublictemplate', GetPublicTemplate);
 Parse.Cloud.define('ssosign', ssoSignin);
 Parse.Cloud.define('isextenduser', isextenduser);
-Parse.Cloud.define('getuserbyorgid', getUserByOrgId);
-Parse.Cloud.define('getuserlist', getUserList);
+Parse.Cloud.define('getuserbyorg', getUserByOrg);
+Parse.Cloud.define('getuserlistbyorg', getUserListByOrg);
@@ -1,4 +1,4 @@
-export default async function getUserByOrgId(req) {
+export default async function getUserByOrg(req) {
  const OrganizationId = req.params.organizationId;
  const orgPtr = {
    __type: 'Pointer',
@@ -10,6 +10,7 @@ export default async function getUserByOrgId(req) {
  } else {
    try {
      const extUser = new Parse.Query('contracts_Users');
+      extUser.include('DepartmentIds');
      extUser.equalTo('OrganizationId', orgPtr);
      const userRes = await extUser.first({ useMasterKey: true });
      if (userRes.length > 0) {
@@ -1,4 +1,4 @@
-export default async function getUserList(req) {
+export default async function getUserListByOrg(req) {
  const OrganizationId = req.params.organizationId;
  const orgPtr = {
    __type: 'Pointer',
@@ -11,6 +11,7 @@ export default async function getUserList(req) {
    try {
      const extUser = new Parse.Query('contracts_Users');
      extUser.equalTo('OrganizationId', orgPtr);
+      extUser.include('DepartmentIds');
      const userRes = await extUser.find({ useMasterKey: true });
      if (userRes.length > 0) {
        const _userRes = JSON.parse(JSON.stringify(userRes));