Fixed bug of tasks and chores page

src/components/FamilyAcc/FamilyActivities.jsx

@@ -23,7 +23,7 @@ export default function FamilyActivities() {
                 <span className={``}>Tasks & Chores</span>
               </h1>
             </div>
-            <Link className="flex items-center gap-2" to="/acc-family">
+            <Link className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium dark:text-white h-12 px-2 flex items-center gap-2" to="/acc-family">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -1,289 +1,291 @@
-import React, {
+import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
-    Suspense,
+import { apiConst } from "../../lib/apiConst";
-    lazy,
+import usersService from "../../services/UsersService";
-    useEffect,
+import LoadingSpinner from "../Spinners/LoadingSpinner";
-    useMemo,
+import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-    useRef,
-    useState,
-  } from "react";
-  import usersService from "../../services/UsersService";
-  import LoadingSpinner from "../Spinners/LoadingSpinner";
-  import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-  import { apiConst } from "../../lib/apiConst";
 
-  // Lazy Imports for components
+// Lazy Imports for components
-  const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
+const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
-  const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
+const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
-  const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));
+const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
-  export default function FamilyTableNew({
+export default function FamilyTableNew({
-    className,
+  className,
-    accountDetails,
+  accountDetails,
-    listReload,
+  listReload,
-    loader,
+  loader,
-  }) {
+}) {
-    // Initial state for family details
+  // Initial state for family details
-    const initialDetailState = {
+  const initialDetailState = {
-      loading: false,
+    loading: false,
-      data: null,
+    data: null,
-    };
+  };
   // console.log('accountDetails',accountDetails)
-    // State for family details, tasks, waitlist, and pending
+  // State for family details, tasks, waitlist, and pending
-    const [details, setDetails] = useState({
+  const [details, setDetails] = useState({
+    familyDetails: { ...initialDetailState },
+    familyTasks: { ...initialDetailState },
+    familyWaitList: { ...initialDetailState },
+    familyPending: { ...initialDetailState },
+  });
+
+  // Function to reset family details, tasks, waitlist, and pending
+  const resetDetails = () => {
+    setDetails({
       familyDetails: { ...initialDetailState },
       familyTasks: { ...initialDetailState },
       familyWaitList: { ...initialDetailState },
       familyPending: { ...initialDetailState },
     });
+  };
 
-    // Function to reset family details, tasks, waitlist, and pending
+  const [updatePage, setUpdatePage] = useState(false); // State to determine when to update the page
-    const resetDetails = () => {
-      setDetails({
-        familyDetails: { ...initialDetailState },
-        familyTasks: { ...initialDetailState },
-        familyWaitList: { ...initialDetailState },
-        familyPending: { ...initialDetailState },
-      });
-    };
 
-    const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
+  // State for family task data
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
 
-    // State for family task data
+  // State for active task
-    const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-    // State for active task
+  // State for error messages
-    const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
+  const [errMsg, setErrMsg] = useState("");
 
-    // State for error messages
+  // State for family task popout
-    const [errMsg, setErrMsg] = useState("");
+  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
 
-    // State for family task popout
+  // Create an instance of the usersService class
-    const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const apiCall = useMemo(() => new usersService(), []);
 
-    // Create an instance of the usersService class
+  // Function to handle toggling the family task popout
-    const apiCall = useMemo(() => new usersService(), []);
+  const familyPopUpHandler = () => {
+    setFamilyTaskPopout((prev) => !prev);
+  };
 
-    // Function to handle toggling the family task popout
+  // Array of tab names
-    const familyPopUpHandler = () => {
+  const tabs = [
-      setFamilyTaskPopout((prev) => !prev);
+    { id: 1, name: "Tasks" },
-    };
+    { id: 2, name: "Waiting" },
+    { id: 3, name: "Pending" },
+  ];
 
-    // Array of tab names
+  // State for the currently selected tab
-    const tabs = [
+  const [tab, setTab] = useState(tabs[0].name);
-      { id: 1, name: "Tasks" },
-      { id: 2, name: "Waiting" },
-      { id: 3, name: "Pending" },
-    ];
 
-    // State for the currently selected tab
+  // Function to handle tab changes
-    const [tab, setTab] = useState(tabs[0].name);
+  const tabHandler = (value) => {
+    setTab(value);
+  };
 
-    // Function to handle tab changes
+  // Object that maps tab names to their corresponding components
-    const tabHandler = (value) => {
+  const tabComponents = {
-      setTab(value);
+    Tasks: (
-    };
+      <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: (
+      <FamilyWaitlist
+        familyData={details.familyWaitList.data}
+        accountDetails={accountDetails}
+        loader={details.familyWaitList.loading}
+      />
+    ),
+    Pending: (
+      <FamilyPending
+        familyData={details.familyPending.data}
+        accountDetails={accountDetails}
+        loader={details.familyPending.loading}
+      />
+    ),
+  };
 
-    // Object that maps tab names to their corresponding components
+  const defaultTabComponent = tabComponents.Tasks;
-    const tabComponents = {
-      Tasks: (
-        // <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: (
-        <FamilyWaitlist
-          familyData={details.familyWaitList.data}
-          accountDetails={accountDetails}
-          loader={details.familyWaitList.loading}
-        />
-      ),
-      Pending: (
-        <FamilyPending
-          familyData={details.familyPending.data}
-          accountDetails={accountDetails}
-          loader={details.familyPending.loading}
-        />
-      ),
-    };
 
-    const defaultTabComponent = tabComponents.Tasks;
+  // Selected tab component based on the current 'tab'
+  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-    // Selected tab component based on the current 'tab'
+  // Effect to manage family details and related data
-    const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
+  useEffect(() => {
+    const manageFamily = async () => {
+      try {
+        resetDetails();
 
-    // Effect to manage family details and related data
+        setDetails({
-    useEffect(() => {
+          familyTasks: { loading: true },
-      const manageFamily = async () => {
+          familyWaitList: { loading: true },
-        try {
+          familyPending: { loading: true },
-          resetDetails();
+        });
-  
-          setDetails({
-            familyDetails: { loading: true },
-            familyTasks: { loading: true },
-            familyWaitList: { loading: true },
-            familyPending: { loading: true },
-          });
 
         //   const { family_uid } = accountDetails;
         //   const reqData = { family_uid };
 
-          const [familyWaitRes, familyPending] =
+        const [familyTasksData, restOfFamilyData] = await Promise.all([
-            await Promise.all([
+          apiCall.getMyActiveTaskList(),
-            //   apiCall.ManageFamily(reqData),
+          apiCall.ManageFamilyNewWaitlist(),
-            //   apiCall.ManageTasks(reqData),
+        ]);
-              apiCall.ManageFamilyNewWaitlist(),
+
-              apiCall.ManageFamilyPending(),
+        console.log("Task me",familyTasksData)
-            ]);
+
+        let tasksData = familyTasksData?.data?.result_list;
+        let familyData = restOfFamilyData?.data?.result_list;
 
         //   const familyData = familyRes.data;
         //   const tasksData = tasksRes.data;
-          const familyWaitData = familyWaitRes.data;
-          const familyPendingData = familyPending.data;
 
-          // Function to check for errors in data
+        let familyWaitingData = familyData.filter(
-          const checkDataError = (data) => data?.internal_return < 0;
+          (item) => item.status_text === "Waiting"
+        );
+        let familyPendingData = familyData.filter(
+          (item) => item.status_text !== "Waiting"
+        );
 
-          if (
+        console.log({
-            // checkDataError(familyData) ||
+          Waitings: familyWaitingData,
-            // checkDataError(tasksData) ||
+          Pending: familyPendingData,
-            checkDataError(familyWaitData) ||
+          Tasks: tasksData
-            checkDataError(familyPendingData)
+        });
-          ) {
-            return;
-          }
 
-          setDetails({
+        // Function to check for errors in data
-            // familyDetails: { loading: false, data: familyData },
+        const checkDataError = (data) => data?.internal_return < 0;
-            // familyTasks: { loading: false, data: tasksData },
+
-            familyWaitList: { loading: false, data: familyWaitData },
+        if (
-            familyPending: { loading: false, data: familyPendingData },
+          checkDataError(tasksData) ||
-          });
+          checkDataError(familyWaitingData) ||
-        } catch (error) {
+          checkDataError(familyPendingData)
-          resetDetails();
+        ) {
-          setErrMsg("An error occurred");
+          return;
-          throw new Error(error);
         }
-      };
 
-      // Invoke the manageFamily function when the component mounts
+        setDetails({
-      manageFamily();
+          familyTasks: { loading: false, data: tasksData },
-    }, [updatePage]);
+          familyWaitList: { loading: false, data: familyWaitingData },
-  
+          familyPending: { loading: false, data: familyPendingData },
-    // Effect to manage family tasks
+        });
-    useEffect(() => {
+      } catch (error) {
-      let checkFamilyTask = true;
+        resetDetails();
-      const reqData = {
+        setErrMsg("An error occurred");
-        limit: 30,
+        throw new Error(error);
-        offset: 0,
-        job_type: "FAMILY",
-        action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
-      };
-  
-      if (checkFamilyTask) {
-        setFamilyTask({ loading: true });
-        apiCall
-          .getMyJobList(reqData)
-          .then((res) => {
-            setFamilyTask({ loading: false, data: res?.data?.result_list });
-            if (res?.data?.result_list?.length) {
-              setActiveTask((prev) => ({
-                ...prev,
-                data: res?.data?.result_list[0],
-              }));
-            }
-          })
-          .catch((err) => {
-            setFamilyTask({ loading: false, data: [] });
-            console.log("Error", err);
-          });
       }
+    };
 
-      // Cleanup function to prevent memory leaks
+    // Invoke the manageFamily function when the component mounts
-      return () => {
+    manageFamily();
-        checkFamilyTask = false;
+  }, [updatePage]);
-      };
-    }, []);
 
-    console.log("God please>> ", details.familyWaitList)
+  // Effect to manage family tasks
+  useEffect(() => {
+    let checkFamilyTask = true;
+    const reqData = {
+      limit: 30,
+      offset: 0,
+      job_type: "FAMILY",
+      action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
+    };
 
-    return (
+    if (checkFamilyTask) {
-      <div
+      setFamilyTask({ loading: true });
-        className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
+      apiCall
-          className || ""
+        .getMyJobList(reqData)
-        }`}
+        .then((res) => {
-      >
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
-        <div className="relative w-full sm:rounded-lg overflow-x-auto">
+          if (res?.data?.result_list?.length) {
-          <Suspense
+            setActiveTask((prev) => ({
-            fallback={
+              ...prev,
-              <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
+              data: res?.data?.result_list[0],
-                <LoadingSpinner size="16" color="sky-blue" />
+            }));
-              </div>
+          }
-            }
+        })
-          >
+        .catch((err) => {
-            <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-3 min-h-[575px]">
+          setFamilyTask({ loading: false, data: [] });
-              <div className="col-span-3 h-full w-full">
+          console.log("Error", err);
-                <div className="flex flex-col w-full">
+        });
-                  <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
+    }
-                    <ul className="flex gap-2 items-center w-full">
-                      {tabs.map(({ name, id }) => (
-                        <li
-                          onClick={() => tabHandler(name)}
-                          className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                            tab === name
-                              ? "text-purple border-r"
-                              : "text-thin-light-gray"
-                          }`}
-                          key={id}
-                        >
-                          <h1>{name}</h1>
-                        </li>
-                      ))}
-                    </ul>
-                    <button
-                      type="button"
-                      onClick={familyPopUpHandler}
-                      className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      Add task
-                    </button>
-                  </div>
 
-                  <div className="flex-[0.9] h-full">
+    // Cleanup function to prevent memory leaks
-                    <div className="h-full relative overflow-y-auto">
+    return () => {
-                      <Suspense
+      checkFamilyTask = false;
-                        fallback={<LoadingSpinner size="16" color="sky-blue" />}
+    };
+  }, []);
+
+  console.log("God please>> ", details.familyWaitList);
+
+  return (
+    <div
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
+        className || ""
+      }`}
+    >
+      <div className="relative w-full sm:rounded-lg overflow-x-auto">
+        <Suspense
+          fallback={
+            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          }
+        >
+          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-3 min-h-[575px]">
+            <div className="col-span-3 h-full w-full">
+              <div className="flex flex-col w-full">
+                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
+                  <ul className="flex gap-2 items-center w-full">
+                    {tabs.map(({ name, id }) => (
+                      <li
+                        onClick={() => tabHandler(name)}
+                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
+                          tab === name
+                            ? "text-purple border-r"
+                            : "text-thin-light-gray"
+                        }`}
+                        key={id}
                       >
-                        {selectedTabComponent}
+                        <h1>{name}</h1>
-                      </Suspense>
+                      </li>
-                    </div>
+                    ))}
+                  </ul>
+                  <button
+                    type="button"
+                    onClick={familyPopUpHandler}
+                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  >
+                    Add task
+                  </button>
+                </div>
+
+                <div className="flex-[0.9] h-full">
+                  <div className="h-full relative overflow-y-auto">
+                    <Suspense
+                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                    >
+                      {selectedTabComponent}
+                    </Suspense>
                   </div>
                 </div>
               </div>
             </div>
-          </Suspense>
+          </div>
-        </div>
+        </Suspense>
-  
-        {familyTaskPopout && (
-          <AssignTaskPopout
-            action={familyPopUpHandler}
-            situation={familyTaskPopout}
-            familyTask={familyTask}
-            setFamilyTask={setFamilyTask}
-            setActiveTask={setActiveTask}
-            activeTask={activeTask}
-            familyDetailsData={details.familyDetails.data}
-            setUpdatePage={setUpdatePage}
-          />
-        )}
       </div>
-    );
-  }
 
+      {familyTaskPopout && (
+        <AssignTaskPopout
+          action={familyPopUpHandler}
+          situation={familyTaskPopout}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
+          setActiveTask={setActiveTask}
+          activeTask={activeTask}
+          familyDetailsData={details.familyDetails.data}
+          setUpdatePage={setUpdatePage}
+        />
+      )}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx

@@ -0,0 +1,168 @@
+import React, { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import Icons from "../../Helpers/Icons";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { handlePagingFunc } from "../../Pagination/HandlePagination";
+import PaginatedList from "../../Pagination/PaginatedList";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+export default function FamilyNewTasks({
+  familyData = [],
+  className,
+  loader,
+  accountDetails,
+}) {
+  let navigate = useNavigate();
+  let { pathname } = useLocation();
+
+  // ...
+  const filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [familyData, accountDetails]
+  );
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+
+  console.log("This is bad", familyData);
+  return (
+    <div
+      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
+        className || "" 
+      }`}
+    >
+      {loader ? (
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+          <LoadingSpinner size={16} color="sky-blue" />
+        </div>
+      ) : (
+        <>
+          {familyData.length && (
+            <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>
+                  {
+                    <>
+                      {familyData.length > 0 ? (
+                        currentTasks.map((value, index) => {
+                          // find due date
+                          const dueDate = value?.delivery_date.split(" ")[0];
+                          // the price
+                          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 className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
+                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
+                                        Price:{" "}
+                                        <span className="text-purple">
+                                          {thePrice}
+                                        </span>
+                                      </span>
+                                      <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">
+                                        Due Date:{" "}
+                                        <span className="text-purple">
+                                          {" "}
+                                          {dueDate}
+                                        </span>
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+                              </td>
+
+                              <td className="text-right py-4 px-2">
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    navigate("/manage-active-job", {
+                                      state: {
+                                        ...value,
+                                        pathname,
+                                        accountDetails,
+                                      },
+                                    });
+                                  }}
+                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                >
+                                  <Icons name="right-arrow" />
+                                </button>
+                              </td>
+                            </tr>
+                          );
+                        })
+                      ) : (
+                        <tr>
+                          <td
+                            colSpan="2"
+                            className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"
+                          >
+                            No Family Task
+                          </td>
+                        </tr>
+                      )}
+                    </>
+                  }
+                </tbody>
+              </table>
+              {/* PAGINATION BUTTON */}
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                  familyData?.result_list.length
+                    ? true
+                    : false
+                }
+                data={familyData?.result_list}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+              {/* END OF PAGINATION BUTTON */}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -20,7 +20,7 @@ const FamilyNewWaitlist = ({
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
   const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = familyData?.result_list?.slice(
+  const currentTask = familyData?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -43,6 +43,8 @@ const FamilyNewWaitlist = ({
     setContinueTaskPopup({ show: false, data: {} });
   };
 
+  console.log("Check this >>",currentTask)
+
   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 ${
@@ -103,6 +105,7 @@ const FamilyNewWaitlist = ({
                         <td className="text-right py-4 px-2">
                           <button
                             onClick={() => openPopUp(value)}
+                            disabled
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
                             View
@@ -116,7 +119,7 @@ const FamilyNewWaitlist = ({
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= currentTask?.length}
+                next={currentPage + itemsPerPage >= familyData?.length}
                 data={currentTask}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -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
   );

src/components/FamilyAcc/index.jsx

@@ -164,13 +164,13 @@ export default function FamilyAcc() {
               </h1>
             </div>
 
-            <div className="flex gap-2 items-center">
+            <div className="flex gap-4 items-center">
-              <Link to="/acc-family/activities" className={`nav-item flex items-center `}>
+              <Link to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]`}>
                 <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
                   <Icons name="pending-job" />
                 </span>
                 <span
-                  className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium`}
+                  className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium dark:text-white h-12 px-2 flex items-center`}
                 >
                   Activities
                 </span>

src/components/FamilyPopup/SuggestTask.jsx

@@ -1,10 +1,10 @@
+import { Form, Formik } from "formik";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../Helpers/Inputs/InputCom";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
+import InputCom from "../Helpers/Inputs/InputCom";
+import ModalCom from "../Helpers/ModalCom";
 
 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
 const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
@@ -51,7 +51,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
   };
 
   const handleParentSuggestion = (values) => {
-    if (suggestedNextStep == "Send Task") {
+    if (suggestedNextStep === "Send Task") {
       let firstName = state?.firstname;
       let family_uid = state?.family_uid;
       continuePopupData({ ...details, firstName, family_uid });
@@ -59,6 +59,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     onClose();
   };
 
+  console.log(pathname)
+
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -122,12 +124,16 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     <div className="field w-full mb-[15px]">
                       <InputCom
                         fieldClass={
-                          pathname === "/manage-family" ? "px-2" : "px-6"
+                          pathname ===
+                          "/manage-family"
+                            ? "px-2"
+                            : "px-6"
                         }
                         label="Title"
                         labelClass="tracking-wide"
                         inputBg={
-                          pathname === "/manage-family"
+                          pathname ===
+                          "/manage-family"
                             ? "bg-white"
                             : "bg-slate-100"
                         }
@@ -164,7 +170,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                         id="description"
                         rows="5"
                         className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${
-                          pathname === "/manage-family"
+                          pathname ===
+                          "/manage-family"
                             ? "px-2 h-[110px]"
                             : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]"
                         }`}
@@ -177,7 +184,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     </div>
 
                     {/* Radio buttons for family */}
-                    {pathname === "/manage-family" ? (
+                    {pathname ===
+                    "/manage-family" ? (
                       <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
                         <div id="my-radio-group" className="sr-only">
                           Parent suggested next step
@@ -212,9 +220,9 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                                 id={`parent-suggested-${idx}`}
                                 name="parent-suggested"
                                 className={`ml-1 ${
-                                  title == "Not Now"
+                                  title === "Not Now"
                                     ? "text-red-500"
-                                    : title == "Duplicate"
+                                    : title === "Duplicate"
                                     ? "text-purple"
                                     : "text-black"
                                 } font-semibold`}
@@ -243,19 +251,20 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                       disabled={props.isSubmitting}
                       className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
                     >
-                      {pathname !== "/manage-family" ? (
+                      {pathname !==
+                      "/manage-family" ? (
                         <>
                           {submitTask.loading
                             ? "Submitting Task"
-                            : submitTask.state == "success"
+                            : submitTask.state === "success"
                             ? "Task Submitted"
-                            : submitTask.state == "bad"
+                            : submitTask.state === "bad"
                             ? "An Error Occurred"
                             : "Send to Parents"}
                         </>
                       ) : (
                         <>
-                          {suggestedNextStep == "Send Task" ? (
+                          {suggestedNextStep === "Send Task" ? (
                             <>
                               Continue <Icons name="chevron-right" />
                             </>