marco.pms.web/src/components/Organization/OrganizationsList.jsx

import React, { useState } from "react";
import { useOrganizationModal, useOrganizationsList } from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import Avatar from "../common/Avatar";
import { useDebounce } from "../../utils/appUtils";
import Pagination from "../common/Pagination";

const OrganizationsList = ({searchText}) => {
   const [currentPage, setCurrentPage] = useState(1);
    const searchString = useDebounce(searchText,500)
  const {
    data = [],
    isLoading,
    isFetching,
    isError,
    error,
  } = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
    const {onClose, startStep, flowType, onOpen,orgData } = useOrganizationModal();

  const organizationsColumns = [
    {
      key: "name",
      label: "Organization Name",
      getValue: (org) => (
        <div className="d-flex gap-2 py-1 ">
          <i class="bx bx-buildings"></i>
          <span
            className="text-truncate d-inline-block "
            style={{ maxWidth: "150px" }}
          >
            {org?.name || "N/A"}
          </span>
        </div>
      ),
      align: "text-start",
    },
    {
      key: "contactPerson",
      label: "Contact Person",
      getValue: (org) => (
        (
        <div className="d-flex align-items-center ps-1">
          <Avatar
            size="xs"
            classAvatar="m-0"
            firstName={(org?.name || "").trim().split(" ")[0] || ""}
            lastName={(org?.name || "").trim().split(" ")[1] || ""}
          />
          <span
            className="text-truncate d-inline-block "
            style={{ maxWidth: "150px" }}
          >
            {org?.name || "N/A"}
          </span>
        </div>
      )
      ),
      align: "text-start",
    },
    {
      key: "contactNumber",
      label: "Phone Number",
      getValue: (org) => org.contactNumber || "N/A",
      align: "text-start",
    },
    {
      key: "email",
      label: "Email",
      getValue: (org) => (
         <span
          className="text-truncate d-inline-block"
          style={{ maxWidth: "200px" }}
        >
          {org?.email || "N/A"}
        </span>
      ),
      align: "text-start",
    },
    {
      key: "sprid",
      label: "SPRID Id",
      getValue: (org) => org.sprid || "N/A",
      align: "text-center",
    },
  ];

   const paginate = (page) => {
    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
      setCurrentPage(page);
    }
  };
  if (isFetching && !isFetching) return <div>Loading...</div>;
  if (isError) return <div>{error?.message || "Something went wrong"}</div>;

  return (
    <div className="card px-0 px-sm-4 pb-12 pt-5">
      <div className="card-datatable table-responsive" id="horizontal-example">
        <div className="dataTables_wrapper no-footer px-2">
          <table className="table border-top dataTable text-nowrap">
            <thead>
              <tr className="table_header_border">
                {organizationsColumns.map((col) => (
                  <th
                    key={col.key}
                    className="sorting d-table-cell"
                    aria-sort="descending"
                  >
                    <div className={`${col.align}`}>{col.label}</div>
                  </th>
                ))}
                <th className="sticky-action-column bg-white text-center">
                  Action
                </th>
              </tr>
            </thead>
            <tbody>
              {data?.data?.length > 0 ? (
                data?.data?.map((org) => (
                  <tr key={org.id}>
                    {organizationsColumns.map((col) => (
                      <td
                        key={col.key}
                        className={`d-table-cell ${col.align ?? ""}`}
                      >
                        {col.customRender
                          ? col.customRender(org)
                          : col.getValue(org)}
                      </td>
                    ))}
                    <td className="sticky-action-column ">
                      <div className="d-flex justify-content-center gap-2">
                        <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                        <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
                        <i className="bx bx-trash text-danger cursor-pointer"></i>
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td
                    colSpan={organizationsColumns.length + 1}
                    className="text-center"
                  >
                    <p className="fw-semibold">Not Found</p>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
          {data?.data?.length > 0 && (
              <Pagination
                currentPage={currentPage}
                totalPages={data.totalPages}
                onPageChange={paginate}
              />
            )}
        </div>
      </div>
    </div>
  );
};

export default OrganizationsList;