ccms admin table

import { useTranslation } from "next-i18next";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Card, Form, InputGroup, Modal } from "react-bootstrap";
import DataTable from "react-data-table-component";
import { useDebounce } from "use-debounce";

import noData from "../../../../public/assets/img/svgs/no_data.svg";
import { useAppSelector } from "../../../../store";
import { useGetAdminsListQuery } from "../../../../store/services/admin/admin";

import { AdminTableColumns } from "./constants";
const AdminTable = () => {
  const { t } = useTranslation(["admin", "common"]);
  const loggedInOrg = useAppSelector((state) => state.auth.org);
  const [searchText, setSearchText] = useState("");
  const [debouncedSearchText] = useDebounce(searchText, 500);
  const [adminsModal, setAdminsModal] = useState(false);
  const [totalRows, setTotalRows] = useState(0);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(10);
  const { data, isLoading } = useGetAdminsListQuery({
    orgId: loggedInOrg?.id ?? "",
    params: { page, perPage, type: "SUB", name: debouncedSearchText },
  });
  const admins = useMemo(() => data?.userDetails || [], [data]);
  const openModal = (orgId) => {
    console.log(orgId);
  };
  const columns = AdminTableColumns(openModal, page, t);
  useEffect(() => {
    if (data) {
      setTotalRows(data.totalRecords);
    }
  }, [data]);
  const handlePageChange = (page) => {
    setPage(page);
  };
  const handlePerRowsChange = (newPerPage) => {
    setPerPage(newPerPage);
  };
  const customStyles = {
    table: {
      style: {
        height: "50vh",
        overflowY: "auto",
      },
    },
  };
  const noDataComponent = useCallback(
    () => (
      <div className="d-flex flex-column h-100 justify-content-start align-items-center">
        <img className="h-25" src={noData.src}></img>
        <div className="fs-3">No Data Found</div>
      </div>
    ),
    []
  );

  return (
    <div>
      <Card className="custom-card table-container rounded-5">
        <Card.Body className="h-100 rounded-5 d-flex flex-column justify-content-between">
          <div className="d-flex justify-content-end">
            <InputGroup className="w-25">
              <Form.Control
                className="rounded-0"
                onChange={(ele) => {
                  setSearchText(ele.target.value);
                }}
                placeholder={t("search-placeholder")}
                type="search"
                value={searchText}
              />
              <InputGroup.Text className="btn search-btn">
                <i className="fe fe-search"></i>
              </InputGroup.Text>
            </InputGroup>
          </div>

          <DataTable
            columns={columns}
            customStyles={customStyles}
            data={admins ?? []}
            highlightOnHover
            noDataComponent={noDataComponent()}
            onChangePage={handlePageChange}
            onChangeRowsPerPage={handlePerRowsChange}
            pagination
            paginationServer
            paginationTotalRows={totalRows}
            progressPending={isLoading}
            striped
            title={t("table-title")}
          />
        </Card.Body>
      </Card>

      <Modal
        dialogClassName="modal-100w"
        onHide={() => setAdminsModal(false)}
        show={adminsModal}
      >
        <Modal.Header closeButton>
          <Modal.Title>{t("modal-title")}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{t("modal-body")}</Modal.Body>
      </Modal>
    </div>
  );
};

export default AdminTable;