Users-Wrench/src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

import { useMemo, useState } from "react";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import { PaginatedList, handlePagingFunc } from "../../Pagination";
import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
import LoadingSpinner from "../../Spinners/LoadingSpinner";

export default function FamilyPending({ familyData }) {
  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW

  let filteredFamilyData = useMemo(
    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
    [familyData?.data?.result_list]
  );

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

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


  return (
    <div
      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px]`}
    >
      {familyData.loading ? 
      (<div className="w-full h-full flex justify-center items-center">
        <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
      </div>
      ):
      <>
      {familyData?.data?.result_list && (
        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <tbody>
              {
                <>
                  {currentPendingTasks.length > 0 ? (
                    currentPendingTasks.map((value, index) => {
                      let deliveryDate = value?.expire?.split(" ")[0];
                      let thePrice = PriceFormatter(
                        value?.price * 0.01,
                        value?.currency_code,
                        value?.currency
                      );
                      let image = `${familyData?.data?.session_image_server}${localStorage.getItem(
                        "session_token"
                      )}/job/${value.job_uid}`;
                      return (
                        <tr
                          key={index}
                          className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
                        >
                          <td className=" py-4">
                            <div className="flex space-x-2 items-center w-full">
                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                <img
                                  src={image}
                                  alt="data"
                                  className="w-full h-full rounded-full"
                                />
                              </div>
                              <div className="flex flex-col flex-[0.9]">
                                <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                  {value.title}
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
                                </span>
                                <div className="flex items-center gap-4">
                                  <span className="text-sm text-thin-light-gray">
                                    Duration:{" "}
                                    <span className="text-purple">
                                      {" "}
                                      {value.timeline_days} day(s)
                                    </span>
                                  </span>
                                  <span className="text-sm text-thin-light-gray">
                                    Expire:{" "}
                                    <span className="text-purple">
                                      {" "}
                                      {deliveryDate}
                                    </span>
                                  </span>
                                  <span className="text-sm text-thin-light-gray">
                                    Sent to:{" "}
                                    <span className="text-purple">
                                      {" "}
                                      {value.job_to}
                                    </span>
                                  </span>
                                </div>
                              </div>
                            </div>
                          </td>

                          <td className="text-right py-4 px-2 flex justify-end items-center">
                            <button
                              type="button"
                              onClick={() => {
                                setJobPopout({ show: true, data: value });
                              }}
                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                              View
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  ) : (
                    <tr>
                      <td className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap text-center py-4 px-2">
                        No Pending Task!
                      </td>
                    </tr>
                  )}
                </>
              }
            </tbody>
          </table>
          {/* PAGINATION BUTTON */}
          <PaginatedList
            onClick={handlePagination}
            prev={currentPage == 0}
            next={currentPage + itemsPerPage >= filteredFamilyData.length}
            data={filteredFamilyData}
            start={indexOfFirstItem}
            stop={indexOfLastItem}
          />
          {/* END OF PAGINATION BUTTON */}
        </div>
      )}
      </>
      }
      {/* Active Job Popout */}
      {jobPopout.show && (
        <PendingJobsPopout
          details={jobPopout.data}
          onClose={() => {
            setJobPopout({ show: false, data: {} });
          }}
          situation={jobPopout.show}
        />
      )}
      {/* End of Active Job Popout */}
    </div>
  );
}