Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master

2024-03-07 16:55:41 +00:00
parent 22314a61c5 251d5abf10
commit 225e3ae34c
5 changed files with 350 additions and 53 deletions
@@ -6,18 +6,13 @@ import React, {
    useRef,
    useState,
  } from "react";
-  import { useReactToPrint } from "react-to-print";
-  import localImgLoad from "../../lib/localImgLoad";
  import usersService from "../../services/UsersService";
  import LoadingSpinner from "../Spinners/LoadingSpinner";
  import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-  import FamilyWallet from "./Tabs/FamilyWallet";
  import { apiConst } from "../../lib/apiConst";
  
  // Lazy Imports for components
-  const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
-  const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount"));
-  const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile"));
+  const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
  const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
  const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));
  
@@ -73,15 +68,6 @@ import React, {
      setFamilyTaskPopout((prev) => !prev);
    };
  
-  
-    // Ref for the account section
-    const accountRef = useRef();
-  
-    // React-to-Print hook for handling printing
-    const useHandlePrint = useReactToPrint({
-      content: () => accountRef.current,
-    });
-  
    // Array of tab names
    const tabs = [
      { id: 1, name: "Tasks" },
@@ -100,11 +86,16 @@ import React, {
    // Object that maps tab names to their corresponding components
    const tabComponents = {
      Tasks: (
-        <FamilyTasks
-          className={className}
-          loader={details.familyTasks.loading}
-          familyData={details.familyTasks.data}
+        // <FamilyTasks
+        //   className={className}
+        //   loader={details.familyTasks.loading || false}
+        //   familyData={details.familyTasks.data || {}}
+        //   accountDetails={accountDetails || {}}
+        // />
+        <FamilyWaitlist
+          familyData={details.familyWaitList.data}
          accountDetails={accountDetails}
+          loader={details.familyWaitList.loading}
        />
      ),
      Waiting: (
@@ -121,27 +112,9 @@ import React, {
          loader={details.familyPending.loading}
        />
      ),
-      Account: (
-        <FamilyAccount
-          familyData={details.familyDetails.data}
-          myRef={accountRef}
-          loader={details.familyDetails.loading}
-          handlePrint={useHandlePrint}
-        />
-      ),
-      Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-      wallet: <FamilyWallet familyData={details.familyDetails.data} />,
    };
-  
-    // Default tab component
-    const defaultTabComponent = (
-      <FamilyTasks
-        className={className}
-        loader={details.familyTasks.loading}
-        familyData={details.familyTasks.data}
-        accountDetails={accountDetails}
-      />
-    );
+
+    const defaultTabComponent = tabComponents.Tasks;
  
    // Selected tab component based on the current 'tab'
    const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
@@ -159,19 +132,19 @@ import React, {
            familyPending: { loading: true },
          });
  
-          const { family_uid } = accountDetails;
-          const reqData = { family_uid };
+        //   const { family_uid } = accountDetails;
+        //   const reqData = { family_uid };
  
-          const [familyRes, tasksRes, familyWaitRes, familyPending] =
+          const [familyWaitRes, familyPending] =
            await Promise.all([
-              apiCall.ManageFamily(reqData),
-              apiCall.ManageTasks(reqData),
-              apiCall.ManageFamilyWaitlist(),
+            //   apiCall.ManageFamily(reqData),
+            //   apiCall.ManageTasks(reqData),
+              apiCall.ManageFamilyNewWaitlist(),
              apiCall.ManageFamilyPending(),
            ]);
  
-          const familyData = familyRes.data;
-          const tasksData = tasksRes.data;
+        //   const familyData = familyRes.data;
+        //   const tasksData = tasksRes.data;
          const familyWaitData = familyWaitRes.data;
          const familyPendingData = familyPending.data;
  
@@ -179,8 +152,8 @@ import React, {
          const checkDataError = (data) => data?.internal_return < 0;
  
          if (
-            checkDataError(familyData) ||
-            checkDataError(tasksData) ||
+            // checkDataError(familyData) ||
+            // checkDataError(tasksData) ||
            checkDataError(familyWaitData) ||
            checkDataError(familyPendingData)
          ) {
@@ -188,8 +161,8 @@ import React, {
          }
  
          setDetails({
-            familyDetails: { loading: false, data: familyData },
-            familyTasks: { loading: false, data: tasksData },
+            // familyDetails: { loading: false, data: familyData },
+            // familyTasks: { loading: false, data: tasksData },
            familyWaitList: { loading: false, data: familyWaitData },
            familyPending: { loading: false, data: familyPendingData },
          });
@@ -238,6 +211,8 @@ import React, {
        checkFamilyTask = false;
      };
    }, []);
+
+    console.log("God please>> ", details.familyWaitList)
  
    return (
      <div
@@ -0,0 +1,161 @@
+import { useMemo, useState } from "react";
+import localImgLoad from "../../../lib/localImgLoad";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+
+export default function FamilyPending({
+  familyData,
+  className,
+  accountDetails,
+  loader,
+}) {
+  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?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [accountDetails?.family_uid, familyData?.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] ${
+        className || ""
+      }`}
+    >
+      {filteredFamilyData && (
+        <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.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">
+                                  Price:{" "}
+                                  <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">
+                            <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>
+  );
+}
@@ -0,0 +1,148 @@
+import { useState } from "react";
+import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
+
+const FamilyNewWaitlist = ({
+  familyData,
+  className,
+  accountDetails,
+  loader,
+}) => {
+  const [popUp, setPopUp] = useState({ show: false, data: {} });
+  const [continueTaskPopup, setContinueTaskPopup] = useState({
+    show: false,
+    data: {},
+  });
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfFirstItem = currentPage;
+  const indexOfLastItem = currentPage + itemsPerPage;
+  const currentTask = familyData?.result_list?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+
+  const openPopUp = (value) => {
+    setPopUp({ show: true, data: { ...value } });
+  };
+
+  const closePopUp = () => {
+    setPopUp({ show: false, data: {} });
+  };
+
+  const openContinueTaskPopup = (value) => {
+    setContinueTaskPopup({ show: true, data: { ...value } });
+  };
+
+  const closeContinueTaskPopup = () => {
+    setContinueTaskPopup({ show: false, data: {} });
+  };
+
+  return (
+    <div
+      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] p-3 overflow-hidden rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      {loader ? (
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+          <LoadingSpinner size={16} color="sky-blue" />
+        </div>
+      ) : (
+        <>
+          {currentTask && (
+            <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>
+                  {currentTask.map((value) => {
+                    const addedDate = value?.added.split(" ")[0];
+                    const selectedImage = require(`../../../assets/images/family/${
+                      value?.banner || "default.jpg"
+                    }`);
+                    // console.log("VALUE", value);
+                    // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                    return (
+                      <tr
+                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                        key={value.uid}
+                      >
+                        <td className="py-4">
+                          <div className="w-full flex justify-between items-center">
+                            <div className="account-name flex space-x-4 items-center">
+                              <div className="icon w-14 h-14 flex justify-center items-center">
+                                <img
+                                  src={selectedImage}
+                                  alt="task_img"
+                                  className="w-full object-cover"
+                                />
+                              </div>
+                              <div className="">
+                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                  {value.title}
+                                </p>
+                                <p className="text-sm text-thin-light-gray font-medium">
+                                  {value.description}
+                                </p>
+                              </div>
+                            </div>
+                            <div className="px-2 flex flex-col items-center justify-center">
+                              <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                {addedDate}
+                              </p>
+                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                {value.status_text}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="text-right py-4 px-2">
+                          <button
+                            onClick={() => openPopUp(value)}
+                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            View
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage === 0}
+                next={currentPage + itemsPerPage >= currentTask?.length}
+                data={currentTask}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+            </div>
+          )}
+        </>
+      )}
+      {popUp.show && (
+        <SuggestTask
+          details={popUp.data}
+          onClose={closePopUp}
+          continuePopupData={openContinueTaskPopup}
+          situation={popUp.show}
+        />
+      )}
+
+      {continueTaskPopup.show && (
+        <AssignTaskPopout
+          details={continueTaskPopup.data}
+          action={closeContinueTaskPopup}
+          situation={continueTaskPopup.show}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FamilyNewWaitlist;
@@ -29,7 +29,7 @@ export default function FamilyTasks({
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentTask = familyData?.result_list.slice(
+  const currentTask = familyData?.result_list?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );
@@ -388,13 +388,26 @@ class usersService {
      uid: localStorage.getItem("uid"),
      member_id: localStorage.getItem("member_id"),
      sessionid: localStorage.getItem("session_token"),
-      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB || apiConst.WRENCHBOARD_FAMILY_LIST,
      limit: 30,
      offset: 0,
    };
    return this.postAuxEnd("/familywaitingtasks", postData);
  }

+  ManageFamilyNewWaitlist() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_FAMILY_LIST,
+      limit: 20,
+      page: 1,
+      offset: 0,
+    };
+    return this.postAuxEnd("/familywaitingtasks", postData);
+  }
+
  ManageFamilyPending() {
    var postData = {
      uuid: localStorage.getItem("uid"),