From 36d8c70fd9760c60da34c7b9a6d189e2ff98176b Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 27 Mar 2024 23:17:58 +0100
Subject: [PATCH] refactored some components and seperated their API calls

---
 src/components/FamilyAcc/FamilyManageTabs.jsx | 202 ++++++++---------
 .../FamilyPopout/AssignPrevNewTask.jsx        |  10 +-
 .../FamilyPopout/AssignTaskPopout.jsx         |   8 +-
 src/components/FamilyAcc/FamilyTableNew.jsx   | 206 +++++++-----------
 .../FamilyAcc/Tabs/FamilyAccount.jsx          |  10 +-
 .../FamilyAcc/Tabs/FamilyNewPending.jsx       |  21 +-
 .../FamilyAcc/Tabs/FamilyNewTasks.jsx         |  20 +-
 .../FamilyAcc/Tabs/FamilyNewWaitlist.jsx      |  18 +-
 .../FamilyAcc/Tabs/FamilyPending.jsx          |  15 +-
 src/components/FamilyAcc/Tabs/FamilyTasks.jsx |  27 ++-
 .../FamilyAcc/Tabs/FamilyWaitlist.jsx         |  15 +-
 .../FamilyAcc/Tabs/FamilyWallet.jsx           |   2 -
 src/components/FamilyPopup/SuggestTask.jsx    |   2 -
 13 files changed, 255 insertions(+), 301 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index ebb1099..2ea8e27 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -14,6 +14,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
 import FamilyWallet from "./Tabs/FamilyWallet";
 import { apiConst } from "../../lib/apiConst";
+import { useSelector } from "react-redux";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -29,43 +30,32 @@ export default function FamilyManageTabs({
   listReload,
   loader,
 }) {
+
+  const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
+
   // Initial state for family details
   const initialDetailState = {
     loading: false,
-    data: null,
+    data: [],
   };
-// console.log('accountDetails',accountDetails)
-  // State for family details, tasks, waitlist, and pending
-  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 },
-    });
-  };
+  // State for family details, tasks, waitlist, and pending
+  let [familyDetails, setFamilyDetails] = useState({loading: false, data: {}})
+  let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
+  let [familyWaitList, setFamilyWaitList] = useState({...initialDetailState})
+  let [familyPending, setFamilyPending] = useState({...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 list of created jobs by FULL USER
+  const [jobList, setJobList] = useState({ loading: false, data: [] });
 
-  // State for active task
+  // State for active/selected job
   const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-  // State for error messages
-  const [errMsg, setErrMsg] = useState("");
-
   // State for family task popout
-  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
 
   let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
 
@@ -79,8 +69,8 @@ export default function FamilyManageTabs({
   const apiCall = useMemo(() => new usersService(), []);
 
   // Function to handle toggling the family task popout
-  const familyPopUpHandler = () => {
-    setFamilyTaskPopout((prev) => !prev);
+  const familyAssignPopUpHandler = () => {
+    setAssignTaskPopout((prev) => !prev);
   };
 
   // Function to trigger a click on the hidden profile image input
@@ -177,45 +167,40 @@ export default function FamilyManageTabs({
     Tasks: (
       <FamilyTasks
         className={className}
-        loader={details.familyTasks.loading}
-        familyData={details.familyTasks.data}
+        familyData={familyTasks}
         accountDetails={accountDetails}
       />
     ),
     Waiting: (
       <FamilyWaitlist
-        familyData={details.familyWaitList.data}
+        familyData={familyWaitList}
         accountDetails={accountDetails}
-        loader={details.familyWaitList.loading}
         setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
       <FamilyPending
-        familyData={details.familyPending.data}
+        familyData={familyPending}
         accountDetails={accountDetails}
-        loader={details.familyPending.loading}
         setUpdatePage={setUpdatePage}
       />
     ),
     Account: (
       <FamilyAccount
-        familyData={details.familyDetails.data}
+        familyData={familyDetails}
         myRef={accountRef}
-        loader={details.familyDetails.loading}
         handlePrint={useHandlePrint}
       />
     ),
-    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
+    Profile: <FamilyProfile familyData={familyDetails.data} />,
+    wallet: <FamilyWallet familyData={familyDetails.data} />,
   };
 
   // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
-      loader={details.familyTasks.loading}
-      familyData={details.familyTasks.data}
+      familyData={familyTasks}
       accountDetails={accountDetails}
     />
   );
@@ -223,67 +208,90 @@ export default function FamilyManageTabs({
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-  // Effect to manage family details and related data
+  // Effect to manage family details
   useEffect(() => {
     const manageFamily = async () => {
+      setFamilyDetails({loading:true, data: {}})
       try {
-        resetDetails();
-
-        setDetails({
-          familyDetails: { loading: true },
-          familyTasks: { loading: true },
-          familyWaitList: { loading: true },
-          familyPending: { loading: true },
-        });
-
         const { family_uid } = accountDetails;
         const reqData = { family_uid };
 
-        const [familyRes, tasksRes, familyWaitRes, familyPending] =
-          await Promise.all([
-            apiCall.ManageFamily(reqData),
-            apiCall.ManageTasks(reqData),
-            apiCall.ManageFamilyWaitlist(),
-            apiCall.ManageFamilyPending(),
-          ]);
-
-        const familyData = familyRes.data;
-        const tasksData = tasksRes.data;
-        const familyWaitData = familyWaitRes.data;
-        const familyPendingData = familyPending.data;
-
-        // Function to check for errors in data
-        const checkDataError = (data) => data?.internal_return < 0;
-
-        if (
-          checkDataError(familyData) ||
-          checkDataError(tasksData) ||
-          checkDataError(familyWaitData) ||
-          checkDataError(familyPendingData)
-        ) {
-          return;
+        const response = await apiCall.ManageFamily(reqData)
+        if(response.status != 200 || !response?.data){
+          return setFamilyDetails({loading:false, data: {}})
         }
-
-        setDetails({
-          familyDetails: { loading: false, data: familyData },
-          familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: familyWaitData },
-          familyPending: { loading: false, data: familyPendingData },
-        });
+        setFamilyDetails({loading:false, data: response?.data})
       } catch (error) {
-        resetDetails();
-        setErrMsg("An error occurred");
         throw new Error(error);
+        setFamilyDetails({loading:false, data: {}})
       }
     };
-
     // Invoke the manageFamily function when the component mounts
     manageFamily();
+  }, []);
+
+    // Effect to manage active family task details
+    useEffect(() => {
+      const manageTasks = async () => {
+        setFamilyTasks({loading:true, data: []})
+        try {
+          const { family_uid } = accountDetails;
+          const reqData = { family_uid };
+  
+          const response = await apiCall.ManageTasks(reqData)
+          if(response.status != 200 || !response?.data){
+            return setFamilyTasks({loading:false, data: []})
+          }
+          setFamilyTasks({loading:false, data: response?.data})
+        } catch (error) {
+          throw new Error(error);
+          setFamilyTasks({loading:false, data: []})
+        }
+      };
+      // Invoke the manageFamily function when the component mounts
+      manageTasks();
+    }, [updatePage, parentFamilyTaskList]);
+
+  // Effect to manage family wait task details
+  useEffect(() => {
+    const manageFamilyWaitlist = async () => {
+      setFamilyWaitList({loading:true, data: []})
+      try {
+        const response = await apiCall.ManageFamilyWaitlist()
+        if(response.status != 200 || !response?.data){
+          return setFamilyWaitList({loading:false, data: []})
+        }
+        setFamilyWaitList({loading:false, data: response?.data})
+      } catch (error) {
+        throw new Error(error);
+        setFamilyWaitList({loading:false, data: []})
+      }
+    };
+    // Invoke the manageFamily function when the component mounts
+    manageFamilyWaitlist();
   }, [updatePage]);
 
-  // Effect to manage family tasks
+    // Effect to manage family pending task details
+    useEffect(() => {
+      const manageFamilyPending = async () => {
+        setFamilyPending({loading:true, data: []})
+        try {
+          const response = await apiCall.ManageFamilyPending()
+          if(response.status != 200 || !response?.data){
+            return setFamilyPending({loading:false, data: []})
+          }
+          setFamilyPending({loading:false, data: response?.data})
+        } catch (error) {
+          throw new Error(error);
+          setFamilyPending({loading:false, data: []})
+        }
+      };
+      // Invoke the manageFamily function when the component mounts
+      manageFamilyPending();
+    }, [updatePage, pendingListTable]);
+
+  // Effect to get all parent job list
   useEffect(() => {
-    let checkFamilyTask = true;
     const reqData = {
       limit: 30,
       offset: 0,
@@ -291,12 +299,11 @@ export default function FamilyManageTabs({
       action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
-    if (checkFamilyTask) {
-      setFamilyTask({ loading: true });
+      setJobList({ loading: true });
       apiCall
         .getMyJobList(reqData)
         .then((res) => {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          setJobList({ loading: false, data: res?.data?.result_list });
           if (res?.data?.result_list?.length) {
             setActiveTask((prev) => ({
               ...prev,
@@ -305,15 +312,9 @@ export default function FamilyManageTabs({
           }
         })
         .catch((err) => {
-          setFamilyTask({ loading: false, data: [] });
+          setJobList({ loading: false, data: [] });
           console.log("Error", err);
         });
-    }
-
-    // Cleanup function to prevent memory leaks
-    return () => {
-      checkFamilyTask = false;
-    };
   }, []);
 
   return (
@@ -396,7 +397,7 @@ export default function FamilyManageTabs({
                   </ul>
                   <button
                     type="button"
-                    onClick={familyPopUpHandler}
+                    onClick={familyAssignPopUpHandler}
                     className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   >
                     Add task
@@ -418,15 +419,14 @@ export default function FamilyManageTabs({
         </Suspense>
       </div>
 
-      {familyTaskPopout && (
+      {assignTaskPopout && (
         <AssignTaskPopout
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyTask={familyTask}
-          setFamilyTask={setFamilyTask}
+          action={familyAssignPopUpHandler}
+          situation={assignTaskPopout}
+          jobList={jobList}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
-          familyDetailsData={details.familyDetails.data}
+          familyDetailsData={familyDetails.data}
           setUpdatePage={setUpdatePage}
         />
       )}
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
index 14a7e8e..64ed777 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
@@ -5,7 +5,7 @@ import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
 
 export default function AssignPrevNewTask({
-    familyTask,
+    jobList,
     requestStatus,
     assignFamilyTask,
     taskType,
@@ -25,7 +25,7 @@ export default function AssignPrevNewTask({
 
   return (
     <>
-         {familyTask?.loading ? (
+         {jobList?.loading ? (
               <div className="h-[30rem] w-full flex justify-center items-center">
                 <LoadingSpinner color="sky-blue" size="16" />
               </div>
@@ -64,8 +64,8 @@ export default function AssignPrevNewTask({
                     {/* Task Type === select */}
                     {taskType == "select" && (
                       <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-                        {familyTask?.data?.length ? (
-                          familyTask?.data?.map((item, index) => (
+                        {jobList?.data?.length ? (
+                          jobList?.data?.map((item, index) => (
                             <div
                               key={item.job_uid}
                               className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
@@ -108,7 +108,7 @@ export default function AssignPrevNewTask({
                   {/*Right Hand Side for details && Task Type === select */}
                   {taskType == "select" && (
                     <>
-                      {familyTask?.data?.length > 0 ? (
+                      {jobList?.data?.length > 0 ? (
                         <div className="p-4 pt-0 h-full">
                           <div className="w-full">
                             <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index a888282..2718651 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -19,12 +19,10 @@ const AssignTaskPopout = ({
   details,
   situation,
   familyDetailsData,
-  familyTask,
+  jobList,
   activeTask,
   setActiveTask,
-  setUpdatePage,
-  // assignTaskChecker,
-  
+  setUpdatePage,  
 }) => {
   const {parentAssignJobToKid} = SocketValues()
 
@@ -379,7 +377,7 @@ const AssignTaskPopout = ({
             <div className="">
               {assignType == 'task' ?
                 <AssignPrevNewTask 
-                  familyTask={familyTask}
+                  jobList={jobList}
                   requestStatus={requestStatus}
                   assignFamilyTask={assignFamilyTask}
                   taskType={taskType}
diff --git a/src/components/FamilyAcc/FamilyTableNew.jsx b/src/components/FamilyAcc/FamilyTableNew.jsx
index ef9460c..5b3fa08 100644
--- a/src/components/FamilyAcc/FamilyTableNew.jsx
+++ b/src/components/FamilyAcc/FamilyTableNew.jsx
@@ -13,59 +13,42 @@ const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
 export default function FamilyTableNew() {
 
-  const { parentFamilyTaskList } = useSelector((state) => state.tableReload);
-  console.log('parentFamilyTaskList', parentFamilyTaskList)
+  const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
+
 
   let { pathname } = useLocation();
 
   // Initial state for family details
   const initialDetailState = {
-    loading: true,
-    data: null,
-    link: "",
+    loading: false,
+    data: [],
   };
 
-  const [assignTaskChecker, setAssignTaskChecker] = useState(false);
-
-  // console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
-  const [details, setDetails] = useState({
-    familyDetails: { ...initialDetailState },
-    familyTasks: { ...initialDetailState },
-    familyWaitList: { ...initialDetailState },
-    familyPending: { ...initialDetailState },
-  });
+  let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
 
-  // Function to reset family details, tasks, waitlist, and pending
-  const resetDetails = () => {
-    setDetails({
-      familyDetails: { ...initialDetailState },
-      familyTasks: { ...initialDetailState },
-      familyWaitList: { ...initialDetailState },
-      familyPending: { ...initialDetailState },
-    });
-  };
+  let [familyPending, setFamilyPending] = useState({...initialDetailState})
+
+  let [familyWaitList, setFamilyWaitList] = useState({...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 list of created jobs by FULL USER
+  const [jobList, setJobList] = useState({ loading: false, data: [] });
 
-  // State for active task
+  // State for active/selected job
   const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-  // State for error messages
-  const [errMsg, setErrMsg] = useState("");
-
   // State for family task popout
-  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
+
 
   // Create an instance of the usersService class
   const apiCall = useMemo(() => new usersService(), []);
 
   // Function to handle toggling the family task popout
-  const familyPopUpHandler = () => {
-    setFamilyTaskPopout((prev) => !prev);
+  const familyAssignPopUpHandler = () => {
+    setAssignTaskPopout((prev) => !prev);
   };
 
   // Array of tab names
@@ -87,26 +70,19 @@ export default function FamilyTableNew() {
   const tabComponents = {
     Tasks: (
       <FamilyTasks
-        image_link={details.familyTasks.link}
-        loader={details.familyTasks.loading}
-        familyData={details.familyTasks.data}
-        action={familyPopUpHandler}
-        setAssignTaskChecker={setAssignTaskChecker}
+        familyData={familyTasks}
+        action={familyAssignPopUpHandler}
       />
     ),
     Waiting: (
       <FamilyWaitlist
-        image_link={details.familyWaitList.link}
-        familyData={details.familyWaitList.data}
-        loader={details.familyWaitList.loading}
+        familyData={familyWaitList}
         setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
       <FamilyPending
-        image_link={details.familyPending.link}
-        familyData={details.familyPending.data}
-        loader={details.familyPending.loading}
+        familyData={familyPending}
       />
     ),
   };
@@ -116,83 +92,66 @@ export default function FamilyTableNew() {
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-  // Effect to manage family details and related data
+
+  // Effect to manage active family task details
   useEffect(() => {
-    const manageFamily = async () => {
+    const manageTasks = async () => {
+      setFamilyTasks({loading:true, data: []})
       try {
-        // resetDetails();
-
-        // setDetails({
-        //   familyTasks: { loading: true },
-        //   familyWaitList: { loading: true },
-        //   familyPending: { loading: true },
-        // });
-
-        //   const { family_uid } = accountDetails;
-        //   const reqData = { family_uid };
-
-        const [familyTasksData, familyWaitingRes, familyPendingRes] =
-          await Promise.all([
-            apiCall.getMyActiveJobList(),
-            apiCall.ManageFamilyNewWaitlist(),
-            apiCall.ManageFamilyPending(),
-          ]);
-
-        let tasksData = familyTasksData?.data?.result_list;
-        let _familyWaitData = familyWaitingRes?.data?.result_list;
-        let familyPendingData = familyPendingRes?.data?.result_list;
-
-        // Getting the image server link
-        let imageServerLink = familyWaitingRes.data?.session_image_server;
-
-        // Function to check for errors in data
-        const checkDataError = (data) => data?.internal_return < 0;
-
-        if (
-          checkDataError(tasksData) ||
-          checkDataError(_familyWaitData) ||
-          checkDataError(familyPendingData)
-        ) {
-          return;
+        const response = await apiCall.getMyActiveJobList()
+        if(response.status != 200 || !response?.data){
+          return setFamilyTasks({loading:false, data: []})
         }
-
-        setDetails({
-          familyTasks: {
-            loading: false,
-            data: tasksData,
-            link: imageServerLink,
-          },
-          familyWaitList: {
-            loading: false,
-            data: _familyWaitData,
-            link: imageServerLink,
-          },
-          familyPending: {
-            loading: false,
-            data: familyPendingData,
-            link: imageServerLink,
-          },
-        });
+        setFamilyTasks({loading:false, data: response?.data})
       } catch (error) {
-        // resetDetails();
-        setDetails({
-          familyDetails: { ...initialDetailState, loading: false, },
-          familyTasks: { ...initialDetailState, loading: false, },
-          familyWaitList: { ...initialDetailState, loading: false,},
-          familyPending: { ...initialDetailState, loading: false, },
-        })
-        setErrMsg("An error occurred");
         throw new Error(error);
+        setFamilyTasks({loading:false, data: []})
       }
     };
-
     // Invoke the manageFamily function when the component mounts
-    manageFamily();
+    manageTasks();
   }, [updatePage, parentFamilyTaskList]);
 
-  // Effect to manage family tasks
+  // Effect to manage family wait task details
+  useEffect(() => {
+    const manageFamilyWaitlist = async () => {
+      setFamilyWaitList({loading:true, data: []})
+      try {
+        const response = await apiCall.ManageFamilyWaitlist()
+        if(response.status != 200 || !response?.data){
+          return setFamilyWaitList({loading:false, data: []})
+        }
+        setFamilyWaitList({loading:false, data: response?.data})
+      } catch (error) {
+        throw new Error(error);
+        setFamilyWaitList({loading:false, data: []})
+      }
+    };
+    // Invoke the manageFamily function when the component mounts
+    manageFamilyWaitlist();
+  }, [updatePage]);
+
+  // Effect to manage family pending task details
+  useEffect(() => {
+    const manageFamilyPending = async () => {
+      setFamilyPending({loading:true, data: []})
+      try {
+        const response = await apiCall.ManageFamilyPending()
+        if(response.status != 200 || !response?.data){
+          return setFamilyPending({loading:false, data: []})
+        }
+        setFamilyPending({loading:false, data: response?.data})
+      } catch (error) {
+        throw new Error(error);
+        setFamilyPending({loading:false, data: []})
+      }
+    };
+    // Invoke the manageFamily function when the component mounts
+    manageFamilyPending();
+  }, [updatePage, pendingListTable]);
+
+  // Effect to get all parent job list
   useEffect(() => {
-    let checkFamilyTask = true;
     const reqData = {
       limit: 30,
       offset: 0,
@@ -200,12 +159,11 @@ export default function FamilyTableNew() {
       action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
-    if (checkFamilyTask) {
-      setFamilyTask({ loading: true });
+      setJobList({ loading: true });
       apiCall
         .getMyJobList(reqData)
         .then((res) => {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          setJobList({ loading: false, data: res?.data?.result_list });
           if (res?.data?.result_list?.length) {
             setActiveTask((prev) => ({
               ...prev,
@@ -214,15 +172,9 @@ export default function FamilyTableNew() {
           }
         })
         .catch((err) => {
-          setFamilyTask({ loading: false, data: [] });
+          setJobList({ loading: false, data: [] });
           console.log("Error", err);
         });
-    }
-
-    // Cleanup function to prevent memory leaks
-    return () => {
-      checkFamilyTask = false;
-    };
   }, []);
 
   // console.log(updatePage);
@@ -260,7 +212,7 @@ export default function FamilyTableNew() {
                   </ul>
                   <button
                     type="button"
-                    onClick={familyPopUpHandler}
+                    onClick={familyAssignPopUpHandler}
                     className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   >
                     Add task
@@ -282,20 +234,18 @@ export default function FamilyTableNew() {
         </Suspense>
       </div>
 
-      {familyTaskPopout && (
+      {assignTaskPopout && (
         <AssignTaskPopout
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyTask={familyTask}
-          setFamilyTask={setFamilyTask}
+          action={familyAssignPopUpHandler}
+          situation={assignTaskPopout}
+          jobList={jobList}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
+          familyDetailsData={''}
           setUpdatePage={setUpdatePage}
-          // updateFamilyPendingTable={updateFamilyPendingTable}
-          pathname={pathname}
-          assignTaskChecker={assignTaskChecker}
         />
       )}
+
     </div>
   );
 }
diff --git a/src/components/FamilyAcc/Tabs/FamilyAccount.jsx b/src/components/FamilyAcc/Tabs/FamilyAccount.jsx
index 6baeb89..fe6d305 100644
--- a/src/components/FamilyAcc/Tabs/FamilyAccount.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyAccount.jsx
@@ -3,7 +3,7 @@ import QRCode from "react-qr-code";
 import { useSelector } from "react-redux";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
+const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
   const { userDetails } = useSelector((state) => state.userDetails);
   return (
     <div
@@ -16,13 +16,13 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Username:{" "}
               <span className="ml-2 normal-case">
-                {familyData?.username ? familyData?.username : "please wait..."}
+                {familyData?.data?.username ? familyData?.data?.username : "please wait..."}
               </span>
             </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Pin:{" "}
               <span className="ml-2 normal-case">
-                {familyData?.pin ? familyData?.pin : "please wait..."}
+                {familyData?.data?.pin ? familyData?.data?.pin : "please wait..."}
               </span>
             </h2>
           </div>
@@ -35,7 +35,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
             <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
               Scan the code from mobile app
             </p>
-            {loader ?
+            {familyData.loading ?
             <div className="w-full">
               <LoadingSpinner size='8' color='sky-blue' />
             </div>
@@ -44,7 +44,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
               size={256}
               style={{ height: "auto", maxWidth: "100%", width: "100%" }}
               // value={`https://www.google.com`}
-              value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
+              value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
               viewBox={`0 0 256 256`}
             />
             }
diff --git a/src/components/FamilyAcc/Tabs/FamilyNewPending.jsx b/src/components/FamilyAcc/Tabs/FamilyNewPending.jsx
index a9b506b..0251004 100644
--- a/src/components/FamilyAcc/Tabs/FamilyNewPending.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyNewPending.jsx
@@ -2,13 +2,14 @@ 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, image_link, loader }) {
+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?.filter((data) => data.family_uid !== ""),
-    [familyData]
+    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
+    [familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -25,13 +26,18 @@ export default function FamilyPending({ familyData, image_link, loader }) {
     handlePagingFunc(e, setCurrentPage);
   };
 
-  console.log(image_link);
 
   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 && (
+      {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>
@@ -45,7 +51,7 @@ export default function FamilyPending({ familyData, image_link, loader }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${image_link}${localStorage.getItem(
+                      let image = `${familyData?.data?.session_image_server}${localStorage.getItem(
                         "session_token"
                       )}/job/${value.job_uid}`;
                       return (
@@ -137,7 +143,8 @@ export default function FamilyPending({ familyData, image_link, loader }) {
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
-
+      </>
+      }
       {/* Active Job Popout */}
       {jobPopout.show && (
         <PendingJobsPopout
diff --git a/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx b/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx
index 809c3c4..18bd917 100644
--- a/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx
@@ -9,17 +9,15 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyNewTasks({
   familyData,
   className,
-  loader,
   action,
-  image_link,
 }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
   // ...
   let filteredFamilyData = useMemo(
-    () => familyData?.filter((data) => data.family_uid !== ""),
-    [familyData]
+    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
+    [familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -36,22 +34,22 @@ export default function FamilyNewTasks({
   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 ${
-        familyData?.length <= 0 && "flex items-center justify-center"
+        familyData?.data?.result_list?.length <= 0 && "flex items-center justify-center"
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && (
+          {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>
                   {
                     <>
-                      {familyData?.length <= 0 ? (
+                      {familyData?.data?.result_list?.length <= 0 ? (
                         <tr>
                           <td
                             colSpan="2"
@@ -76,7 +74,7 @@ export default function FamilyNewTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${image_link}${localStorage.getItem(
+                          let image = `${familyData?.data?.result_list}${localStorage.getItem(
                             "session_token"
                           )}/job/${value.job_uid}`;
                           return (
diff --git a/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
index 2dc35f9..be1e3dd 100644
--- a/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
@@ -8,8 +8,6 @@ import Icons from "../../Helpers/Icons";
 const FamilyNewWaitlist = ({
   familyData,
   className,
-  accountDetails,
-  loader,
   setUpdatePage
 }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
@@ -22,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?.slice(
+  const currentTask = familyData?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -53,13 +51,13 @@ const FamilyNewWaitlist = ({
         className || ""
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && (
+          {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>
@@ -69,7 +67,7 @@ const FamilyNewWaitlist = ({
                       value?.banner || "default.jpg"
                     }`);
                     // console.log("VALUE", value);
-                    // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                    // let image = `${familyData?.data?.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"
@@ -121,8 +119,8 @@ const FamilyNewWaitlist = ({
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= familyData?.length}
-                data={familyData}
+                next={currentPage + itemsPerPage >= familyData?.data?.result_list?.length}
+                data={familyData?.data?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />
diff --git a/src/components/FamilyAcc/Tabs/FamilyPending.jsx b/src/components/FamilyAcc/Tabs/FamilyPending.jsx
index d635988..71955eb 100644
--- a/src/components/FamilyAcc/Tabs/FamilyPending.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyPending.jsx
@@ -3,6 +3,7 @@ import localImgLoad from "../../../lib/localImgLoad";
 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,
@@ -15,10 +16,10 @@ export default function FamilyPending({
 
   let filteredFamilyData = useMemo(
     () =>
-      familyData?.result_list?.filter(
+      familyData?.data?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [accountDetails?.family_uid, familyData?.result_list]
+    [accountDetails?.family_uid, familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -41,6 +42,12 @@ export default function FamilyPending({
         className || ""
       }`}
     >
+      {familyData.loading ? 
+      (<div className="w-full h-full flex justify-center items-center">
+        <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+      </div>
+      ):
+      <>
       {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">
@@ -55,7 +62,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -145,6 +152,8 @@ export default function FamilyPending({
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
+      </>
+      }
 
       {/* Active Job Popout */}
       {jobPopout.show && (
diff --git a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx
index 02a5ded..338f799 100644
--- a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx
@@ -10,7 +10,6 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyTasks({
   familyData,
   className,
-  loader,
   accountDetails,
 }) {
   let navigate = useNavigate();
@@ -19,17 +18,17 @@ export default function FamilyTasks({
   // ...
   const filteredFamilyData = useMemo(
     () =>
-      familyData?.result_list?.filter(
+      familyData?.data?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [familyData, accountDetails]
+    [familyData?.data, accountDetails]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
   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?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -43,21 +42,21 @@ export default function FamilyTasks({
         className || ""
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && familyData?.result_list && (
+          {familyData?.data && 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>
                   {
                     <>
-                      {familyData &&
-                      familyData?.result_list &&
-                      familyData.result_list.length > 0 ? (
+                      {familyData?.data &&
+                      familyData?.data?.result_list &&
+                      familyData?.data.result_list.length > 0 ? (
                         currentTask.map((value, index) => {
                           // find due date
                           const dueDate = value?.delivery_date.split(" ")[0];
@@ -67,7 +66,7 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                          let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                           return (
                             <tr
                               key={index}
@@ -149,11 +148,11 @@ export default function FamilyTasks({
                 prev={currentPage == 0 ? true : false}
                 next={
                   currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  familyData?.result_list.length
+                  familyData?.data?.result_list.length
                     ? true
                     : false
                 }
-                data={familyData?.result_list}
+                data={familyData?.data?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />
diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
index 85ee1b7..16478c4 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
@@ -5,7 +5,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
 const FamilyWaitlist = memo(
-  ({ familyData, className, accountDetails, loader, setUpdatePage }) => {
+  ({ familyData, className, accountDetails, setUpdatePage }) => {
     const [popUp, setPopUp] = useState({ show: false, data: {} });
     const [continueTaskPopup, setContinueTaskPopup] = useState({
       show: false,
@@ -13,10 +13,10 @@ const FamilyWaitlist = memo(
     });
     const filteredFamilyData = useMemo(
       () =>
-        familyData?.result_list?.filter(
+        familyData?.data?.result_list?.filter(
           (data) => data?.family_uid === accountDetails?.family_uid
         ),
-      [familyData, accountDetails]
+      [familyData.data, accountDetails]
     );
 
     const [currentPage, setCurrentPage] = useState(0);
@@ -52,9 +52,9 @@ const FamilyWaitlist = memo(
           className || ""
         }`}
       >
-        {loader ? (
-          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-            <LoadingSpinner size={16} color="sky-blue" />
+        {familyData.loading ? (
+          <div className="w-full h-full flex justify-center items-center">
+            <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
           </div>
         ) : (
           <>
@@ -67,8 +67,7 @@ const FamilyWaitlist = memo(
                       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}`
+                      // let image = `${familyData.data.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"
diff --git a/src/components/FamilyAcc/Tabs/FamilyWallet.jsx b/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
index 6899049..13c61f5 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWallet.jsx
@@ -17,8 +17,6 @@ function FamilyWallet({familyData}) {
     setFamilyWallet({loading:true, data: []})
     apiUrl.getKidWallets({family_uid:familyData?.uid}).then(res => {
       setFamilyWallet({loading:false, data: res?.data?.result_list || []})
-      console.log('familyData', familyData, res?.data?.result_list)
-
     }).catch(error => {
       setFamilyWallet({loading:false, data: []})
     })
diff --git a/src/components/FamilyPopup/SuggestTask.jsx b/src/components/FamilyPopup/SuggestTask.jsx
index c54966a..ca53fb4 100644
--- a/src/components/FamilyPopup/SuggestTask.jsx
+++ b/src/components/FamilyPopup/SuggestTask.jsx
@@ -80,8 +80,6 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     }
   };
 
-  console.log(details);
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper lw-[90%] md:w-[48rem] min-h-[500px] bg-white dark:bg-dark-white lg:rounded-2xl">