marco.pms.web/src/components/Activities/Regularization.jsx

import React, { useEffect, useState } from "react";
import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
import RegularizationActions from "./RegularizationActions";
import { useSelector } from "react-redux";
import { useRegularizationRequests } from "../../hooks/useAttendance";
import moment from "moment";
import usePagination from "../../hooks/usePagination";

const Regularization = ({ handleRequest }) => {
  var selectedProject = useSelector((store) => store.localVariables.projectId);
  const [regularizesList, setregularizedList] = useState([]);
  const { regularizes, loading, error, refetch } =
    useRegularizationRequests(selectedProject);

  useEffect(() => {
    setregularizedList(regularizes);
  }, [regularizes]);

  const sortByName = (a, b) => {
    const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
    const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
    return nameA.localeCompare(nameB);
  };
  const filteredData = [...regularizesList]?.sort(sortByName);


  const { currentPage, totalPages, currentItems, paginate } = usePagination(
    filteredData,
    10
  );

  return (
    <div className="table-responsive text-nowrap" style={{minHeight:"300px"}}>
      <table className="table mb-0">
        <thead>
          <tr>
            <th colSpan={2}>Name</th>
            <th>Date</th>
            <th>
              <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
            </th>
            <th>
              <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
            </th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {loading && <td colSpan={6} className="text-center py-5">Loading...</td>}

          {!loading &&
            (regularizes?.length > 0 ? (
              regularizes?.map((att, index) => (
                <tr key={index}>
                  <td colSpan={2}>
                    <div className="d-flex justify-content-start align-items-center">
                      <Avatar 
                        firstName={att.firstName}
                        lastName={att.lastName}
                      ></Avatar>
                      <div className="d-flex flex-column">
                        <a href="#" className="text-heading text-truncate">
                          <span className="fw-normal">
                            {att.firstName} {att.lastName}
                          </span>
                        </a>
                      </div>
                    </div>
                  </td>
                  <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
                  <td>{convertShortTime(att.checkInTime)}</td>
                  <td>
                    {att.checkOutTime
                      ? convertShortTime(att.checkOutTime)
                      : "--"}
                  </td>
                  <td className="text-center ">
                    {/* <div className='d-flex  justify-content-center align-items-center gap-3'> */}
                    <RegularizationActions
                      attendanceData={att}
                      handleRequest={handleRequest}
                      refresh={refetch}
                    />
                    {/* </div> */}
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={6}
                  className="text-center" style={{
                    height: "200px",
                    verticalAlign: "middle",
                    borderBottom: "none",
                  }}>No Record Found</td>
              </tr>
            ))}
        </tbody>
      </table>
      {!loading >10 && (
        <nav aria-label="Page ">
          <ul className="pagination pagination-sm justify-content-end py-1">
            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
              <button
                className="page-link btn-xs"
                onClick={() => paginate(currentPage - 1)}
              >
                &laquo;
              </button>
            </li>
            {[...Array(totalPages)].map((_, index) => (
              <li
                key={index}
                className={`page-item ${currentPage === index + 1 ? "active" : ""
                  }`}
              >
                <button
                  className="page-link "
                  onClick={() => paginate(index + 1)}
                >
                  {index + 1}
                </button>
              </li>
            ))}
            <li
              className={`page-item ${currentPage === totalPages ? "disabled" : ""
                }`}
            >
              <button
                className="page-link "
                onClick={() => paginate(currentPage + 1)}
              >
                &raquo;
              </button>
            </li>
          </ul>
        </nav>
      )}
    </div>
  );
};

export default Regularization;