Users-Wrench/src/components/FamilyAcc/FamilyTable.jsx

import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import { useNavigate } from "react-router-dom";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";

import familyImage from '../../assets/images/no-family-side.png'

export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
  const navigate = useNavigate();

  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);

  const handlePagination = (e) => {
    handlePagingFunc(e, setCurrentPage);
  };

  return (
    <div
      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
        className || ""
      }`}
    >
      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
        {loader ? (
          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
            <LoadingSpinner size="16" color="sky-blue" />
          </div>
        ) 
        :
        familyList?.length > 0 ?
          (
            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
              <thead className="sticky top-0">
                <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
                  <th className="py-4">Name</th>
                  <th className="py-4 text-center">Last Login</th>
                  <th className="py-4 text-center">No of Tasks</th>
                  <th className="py-4 text-right"></th>
                </tr>
              </thead>
              <tbody className="h-full">
                  {currentFamilyList?.map((props, idx) => {
                      let {
                        firstname,
                        lastname,
                        age,
                        added,
                        last_login,
                        task_count,
                        family_uid,
                      } = props;
                      let addedDate = added?.split(" ")[0];
                      let LoginDate = last_login?.split(" ")[0];
                      return (
                        <tr
                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
                          key={family_uid}
                        >
                          <td className=" py-4">
                            <div className="flex space-x-2 items-center w-full">
                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
                                <img
                                  src={dataImage1}
                                  alt="data"
                                  className="w-full h-full"
                                />
                              </div>
                              <div className="flex flex-col flex-[0.9]">
                                <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                                  {`${firstname} ${lastname} (${age})`}
                                </h1>
                                <span className="text-sm text-thin-light-gray">
                                  Added:{" "}
                                  <span className="text-purple ml-1">
                                    {addedDate}
                                  </span>
                                </span>
                              </div>
                            </div>
                          </td>
                          <td className="text-center py-4 px-2">
                            <div className="flex space-x-1 items-center justify-center">
                              <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
                                {LoginDate}
                              </span>
                            </div>
                          </td>
                          <td className="text-center py-4 px-2">
                            <div className="flex space-x-1 items-center justify-center">
                              <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
                                {task_count}
                              </span>
                            </div>
                          </td>
                          <td className="text-right py-4 px-2 flex items-center justify-center">
                            <button
                              onClick={() => {
                                navigate("/manage-family", {
                                  state: { ...props },
                                });
                              }}
                              type="button"
                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                              Manage
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  }
              </tbody>
            </table>
          )
          : 
          (
          <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
            <div className="p-2 w-full md:w-1/2">
              <p className="mb-4 p-3 md:p-16">Add your family, assign tasks, and get the whole team engaged.</p>
              <button
                onClick={popUpHandler}
                type="button"
                className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
              >
                Add Family
              </button>
            </div>
            <div className="p-2 w-full md:w-1/2">
              <img className='w-full' src={familyImage} alt="Add Family" />
            </div>
          </div>
          )
        }
      </div>
        {/* PAGINATION BUTTON */}
        <PaginatedList
        onClick={handlePagination}
        prev={currentPage == 0 ? true : false}
        next={
          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
          familyList?.length
            ? true
            : false
        }
        data={familyList}
        start={indexOfFirstItem}
        stop={indexOfLastItem}
      />
      {/* END OF PAGINATION BUTTON */}
    </div>
  );
}