Family pending task start popout style changed

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -14,7 +14,6 @@ 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"));
@@ -30,32 +29,43 @@ 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: [],
+    data: null,
   };
-
+// console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
-  let [familyDetails, setFamilyDetails] = useState({loading: false, data: {}})
+  const [details, setDetails] = useState({
-  let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
+    familyDetails: { ...initialDetailState },
-  let [familyWaitList, setFamilyWaitList] = useState({...initialDetailState})
+    familyTasks: { ...initialDetailState },
-  let [familyPending, setFamilyPending] = useState({...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 },
+    });
+  };
 
   const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
 
-  // State for list of created jobs by FULL USER
+  // State for family task data
-  const [jobList, setJobList] = useState({ loading: false, data: [] });
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
 
-  // State for active/selected job
+  // State for active task
   const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
+  // State for error messages
+  const [errMsg, setErrMsg] = useState("");
+
   // State for family task popout
-  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
+  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
 
   let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
 
@@ -69,8 +79,8 @@ export default function FamilyManageTabs({
   const apiCall = useMemo(() => new usersService(), []);
 
   // Function to handle toggling the family task popout
-  const familyAssignPopUpHandler = () => {
+  const familyPopUpHandler = () => {
-    setAssignTaskPopout((prev) => !prev);
+    setFamilyTaskPopout((prev) => !prev);
   };
 
   // Function to trigger a click on the hidden profile image input
@@ -167,40 +177,45 @@ export default function FamilyManageTabs({
     Tasks: (
       <FamilyTasks
         className={className}
-        familyData={familyTasks}
+        loader={details.familyTasks.loading}
+        familyData={details.familyTasks.data}
         accountDetails={accountDetails}
       />
     ),
     Waiting: (
       <FamilyWaitlist
-        familyData={familyWaitList}
+        familyData={details.familyWaitList.data}
         accountDetails={accountDetails}
+        loader={details.familyWaitList.loading}
         setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
       <FamilyPending
-        familyData={familyPending}
+        familyData={details.familyPending.data}
         accountDetails={accountDetails}
+        loader={details.familyPending.loading}
         setUpdatePage={setUpdatePage}
       />
     ),
     Account: (
       <FamilyAccount
-        familyData={familyDetails}
+        familyData={details.familyDetails.data}
         myRef={accountRef}
+        loader={details.familyDetails.loading}
         handlePrint={useHandlePrint}
       />
     ),
-    Profile: <FamilyProfile familyData={familyDetails.data} />,
+    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-    wallet: <FamilyWallet familyData={familyDetails.data} />,
+    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
   };
 
   // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
-      familyData={familyTasks}
+      loader={details.familyTasks.loading}
+      familyData={details.familyTasks.data}
       accountDetails={accountDetails}
     />
   );
@@ -208,90 +223,67 @@ export default function FamilyManageTabs({
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-  // Effect to manage family details
+  // Effect to manage family details and related data
   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 response = await apiCall.ManageFamily(reqData)
+        const [familyRes, tasksRes, familyWaitRes, familyPending] =
-        if(response.status != 200 || !response?.data){
+          await Promise.all([
-          return setFamilyDetails({loading:false, data: {}})
+            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;
         }
-        setFamilyDetails({loading:false, data: response?.data})
+
+        setDetails({
+          familyDetails: { loading: false, data: familyData },
+          familyTasks: { loading: false, data: tasksData },
+          familyWaitList: { loading: false, data: familyWaitData },
+          familyPending: { loading: false, data: familyPendingData },
+        });
       } 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 pending task details
+  // Effect to manage family tasks
-    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,
@@ -299,11 +291,12 @@ export default function FamilyManageTabs({
       action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
-      setJobList({ loading: true });
+    if (checkFamilyTask) {
+      setFamilyTask({ loading: true });
       apiCall
         .getMyJobList(reqData)
         .then((res) => {
-          setJobList({ loading: false, data: res?.data?.result_list });
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
           if (res?.data?.result_list?.length) {
             setActiveTask((prev) => ({
               ...prev,
@@ -312,9 +305,15 @@ export default function FamilyManageTabs({
           }
         })
         .catch((err) => {
-          setJobList({ loading: false, data: [] });
+          setFamilyTask({ loading: false, data: [] });
           console.log("Error", err);
         });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
   }, []);
 
   return (
@@ -397,7 +396,7 @@ export default function FamilyManageTabs({
                   </ul>
                   <button
                     type="button"
-                    onClick={familyAssignPopUpHandler}
+                    onClick={familyPopUpHandler}
                     className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   >
                     Add task
@@ -419,14 +418,15 @@ export default function FamilyManageTabs({
         </Suspense>
       </div>
 
-      {assignTaskPopout && (
+      {familyTaskPopout && (
         <AssignTaskPopout
-          action={familyAssignPopUpHandler}
+          action={familyPopUpHandler}
-          situation={assignTaskPopout}
+          situation={familyTaskPopout}
-          jobList={jobList}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
-          familyDetailsData={familyDetails.data}
+          familyDetailsData={details.familyDetails.data}
           setUpdatePage={setUpdatePage}
         />
       )}

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -5,7 +5,7 @@ import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
 
 export default function AssignPrevNewTask({
-    jobList,
+    familyTask,
     requestStatus,
     assignFamilyTask,
     taskType,
@@ -25,7 +25,7 @@ export default function AssignPrevNewTask({
 
   return (
     <>
-         {jobList?.loading ? (
+         {familyTask?.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">
-                        {jobList?.data?.length ? (
+                        {familyTask?.data?.length ? (
-                          jobList?.data?.map((item, index) => (
+                          familyTask?.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" && (
                     <>
-                      {jobList?.data?.length > 0 ? (
+                      {familyTask?.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">

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -19,10 +19,12 @@ const AssignTaskPopout = ({
   details,
   situation,
   familyDetailsData,
-  jobList,
+  familyTask,
   activeTask,
   setActiveTask,
-  setUpdatePage,  
+  setUpdatePage,
+  // assignTaskChecker,
+  
 }) => {
   const {parentAssignJobToKid} = SocketValues()
 
@@ -377,7 +379,7 @@ const AssignTaskPopout = ({
             <div className="">
               {assignType == 'task' ?
                 <AssignPrevNewTask 
-                  jobList={jobList}
+                  familyTask={familyTask}
                   requestStatus={requestStatus}
                   assignFamilyTask={assignFamilyTask}
                   taskType={taskType}

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -13,42 +13,59 @@ const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
 export default function FamilyTableNew() {
 
-  const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
+  const { parentFamilyTaskList } = useSelector((state) => state.tableReload);
-
+  console.log('parentFamilyTaskList', parentFamilyTaskList)
 
   let { pathname } = useLocation();
 
   // Initial state for family details
   const initialDetailState = {
-    loading: false,
+    loading: true,
-    data: [],
+    data: null,
+    link: "",
   };
 
+  const [assignTaskChecker, setAssignTaskChecker] = useState(false);
+
+  // console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
-  let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
+  const [details, setDetails] = useState({
+    familyDetails: { ...initialDetailState },
+    familyTasks: { ...initialDetailState },
+    familyWaitList: { ...initialDetailState },
+    familyPending: { ...initialDetailState },
+  });
 
-  let [familyPending, setFamilyPending] = useState({...initialDetailState})
+  // Function to reset family details, tasks, waitlist, and pending
-
+  const resetDetails = () => {
-  let [familyWaitList, setFamilyWaitList] = useState({...initialDetailState})
+    setDetails({
+      familyDetails: { ...initialDetailState },
+      familyTasks: { ...initialDetailState },
+      familyWaitList: { ...initialDetailState },
+      familyPending: { ...initialDetailState },
+    });
+  };
 
   const [updatePage, setUpdatePage] = useState(false); // State to determine when to update the page
 
-  // State for list of created jobs by FULL USER
+  // State for family task data
-  const [jobList, setJobList] = useState({ loading: false, data: [] });
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
 
-  // State for active/selected job
+  // State for active task
   const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-  // State for family task popout
+  // State for error messages
-  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
 
+  // State for family task popout
+  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
 
   // Create an instance of the usersService class
   const apiCall = useMemo(() => new usersService(), []);
 
   // Function to handle toggling the family task popout
-  const familyAssignPopUpHandler = () => {
+  const familyPopUpHandler = () => {
-    setAssignTaskPopout((prev) => !prev);
+    setFamilyTaskPopout((prev) => !prev);
   };
 
   // Array of tab names
@@ -70,19 +87,26 @@ export default function FamilyTableNew() {
   const tabComponents = {
     Tasks: (
       <FamilyTasks
-        familyData={familyTasks}
+        image_link={details.familyTasks.link}
-        action={familyAssignPopUpHandler}
+        loader={details.familyTasks.loading}
+        familyData={details.familyTasks.data}
+        action={familyPopUpHandler}
+        setAssignTaskChecker={setAssignTaskChecker}
       />
     ),
     Waiting: (
       <FamilyWaitlist
-        familyData={familyWaitList}
+        image_link={details.familyWaitList.link}
+        familyData={details.familyWaitList.data}
+        loader={details.familyWaitList.loading}
         setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
       <FamilyPending
-        familyData={familyPending}
+        image_link={details.familyPending.link}
+        familyData={details.familyPending.data}
+        loader={details.familyPending.loading}
       />
     ),
   };
@@ -92,66 +116,83 @@ 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 manageTasks = async () => {
+    const manageFamily = async () => {
-      setFamilyTasks({loading:true, data: []})
       try {
-        const response = await apiCall.getMyActiveJobList()
+        // resetDetails();
-        if(response.status != 200 || !response?.data){
+
-          return setFamilyTasks({loading:false, data: []})
+        // 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;
         }
-        setFamilyTasks({loading:false, data: response?.data})
+
+        setDetails({
+          familyTasks: {
+            loading: false,
+            data: tasksData,
+            link: imageServerLink,
+          },
+          familyWaitList: {
+            loading: false,
+            data: _familyWaitData,
+            link: imageServerLink,
+          },
+          familyPending: {
+            loading: false,
+            data: familyPendingData,
+            link: imageServerLink,
+          },
+        });
       } 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
-    manageTasks();
+    manageFamily();
   }, [updatePage, parentFamilyTaskList]);
 
-  // Effect to manage family wait task details
+  // Effect to manage family tasks
-  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,
@@ -159,11 +200,12 @@ export default function FamilyTableNew() {
       action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
-      setJobList({ loading: true });
+    if (checkFamilyTask) {
+      setFamilyTask({ loading: true });
       apiCall
         .getMyJobList(reqData)
         .then((res) => {
-          setJobList({ loading: false, data: res?.data?.result_list });
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
           if (res?.data?.result_list?.length) {
             setActiveTask((prev) => ({
               ...prev,
@@ -172,9 +214,15 @@ export default function FamilyTableNew() {
           }
         })
         .catch((err) => {
-          setJobList({ loading: false, data: [] });
+          setFamilyTask({ loading: false, data: [] });
           console.log("Error", err);
         });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
   }, []);
 
   // console.log(updatePage);
@@ -212,7 +260,7 @@ export default function FamilyTableNew() {
                   </ul>
                   <button
                     type="button"
-                    onClick={familyAssignPopUpHandler}
+                    onClick={familyPopUpHandler}
                     className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   >
                     Add task
@@ -234,18 +282,20 @@ export default function FamilyTableNew() {
         </Suspense>
       </div>
 
-      {assignTaskPopout && (
+      {familyTaskPopout && (
         <AssignTaskPopout
-          action={familyAssignPopUpHandler}
+          action={familyPopUpHandler}
-          situation={assignTaskPopout}
+          situation={familyTaskPopout}
-          jobList={jobList}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
-          familyDetailsData={''}
           setUpdatePage={setUpdatePage}
+          // updateFamilyPendingTable={updateFamilyPendingTable}
+          pathname={pathname}
+          assignTaskChecker={assignTaskChecker}
         />
       )}
-
     </div>
   );
 }

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}, ref) => {
+const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
   const { userDetails } = useSelector((state) => state.userDetails);
   return (
     <div
@@ -16,13 +16,13 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
             <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?.data?.username ? familyData?.data?.username : "please wait..."}
+                {familyData?.username ? familyData?.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?.data?.pin ? familyData?.data?.pin : "please wait..."}
+                {familyData?.pin ? familyData?.pin : "please wait..."}
               </span>
             </h2>
           </div>
@@ -35,7 +35,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
             <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>
-            {familyData.loading ?
+            {loader ?
             <div className="w-full">
               <LoadingSpinner size='8' color='sky-blue' />
             </div>
@@ -44,7 +44,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
               size={256}
               style={{ height: "auto", maxWidth: "100%", width: "100%" }}
               // value={`https://www.google.com`}
-              value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
+              value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
               viewBox={`0 0 256 256`}
             />
             }

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -2,14 +2,13 @@ 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 }) {
+export default function FamilyPending({ familyData, image_link, 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?.data?.result_list?.filter((data) => data.family_uid !== ""),
+    () => familyData?.filter((data) => data.family_uid !== ""),
-    [familyData?.data?.result_list]
+    [familyData]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -26,18 +25,13 @@ export default function FamilyPending({ familyData }) {
     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.loading ? 
+      {familyData && (
-      (<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>
@@ -51,7 +45,7 @@ export default function FamilyPending({ familyData }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${familyData?.data?.session_image_server}${localStorage.getItem(
+                      let image = `${image_link}${localStorage.getItem(
                         "session_token"
                       )}/job/${value.job_uid}`;
                       return (
@@ -143,8 +137,7 @@ export default function FamilyPending({ familyData }) {
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
-      </>
+
-      }
       {/* Active Job Popout */}
       {jobPopout.show && (
         <PendingJobsPopout

src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx

@@ -9,15 +9,17 @@ 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?.data?.result_list?.filter((data) => data.family_uid !== ""),
+    () => familyData?.filter((data) => data.family_uid !== ""),
-    [familyData?.data?.result_list]
+    [familyData]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -34,22 +36,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?.data?.result_list?.length <= 0 && "flex items-center justify-center"
+        familyData?.length <= 0 && "flex items-center justify-center"
       }`}
     >
-      {familyData.loading ? (
+      {loader ? (
-        <div className="w-full h-full flex justify-center items-center">
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+          <LoadingSpinner size={16} color="sky-blue" />
         </div>
       ) : (
         <>
-          {familyData?.data?.result_list && (
+          {familyData && (
             <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?.data?.result_list?.length <= 0 ? (
+                      {familyData?.length <= 0 ? (
                         <tr>
                           <td
                             colSpan="2"
@@ -74,7 +76,7 @@ export default function FamilyNewTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${familyData?.data?.result_list}${localStorage.getItem(
+                          let image = `${image_link}${localStorage.getItem(
                             "session_token"
                           )}/job/${value.job_uid}`;
                           return (

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -8,6 +8,8 @@ import Icons from "../../Helpers/Icons";
 const FamilyNewWaitlist = ({
   familyData,
   className,
+  accountDetails,
+  loader,
   setUpdatePage
 }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
@@ -20,7 +22,7 @@ const FamilyNewWaitlist = ({
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
   const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = familyData?.data?.result_list?.slice(
+  const currentTask = familyData?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -51,13 +53,13 @@ const FamilyNewWaitlist = ({
         className || ""
       }`}
     >
-      {familyData.loading ? (
+      {loader ? (
-        <div className="w-full h-full flex justify-center items-center">
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+          <LoadingSpinner size={16} color="sky-blue" />
         </div>
       ) : (
         <>
-          {familyData?.data?.result_list && (
+          {familyData && (
             <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>
@@ -67,7 +69,7 @@ const FamilyNewWaitlist = ({
                       value?.banner || "default.jpg"
                     }`);
                     // console.log("VALUE", value);
-                    // let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                    // 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"
@@ -119,8 +121,8 @@ const FamilyNewWaitlist = ({
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= familyData?.data?.result_list?.length}
+                next={currentPage + itemsPerPage >= familyData?.length}
-                data={familyData?.data?.result_list}
+                data={familyData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -3,7 +3,6 @@ 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,
@@ -16,10 +15,10 @@ export default function FamilyPending({
 
   let filteredFamilyData = useMemo(
     () =>
-      familyData?.data?.result_list?.filter(
+      familyData?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [accountDetails?.family_uid, familyData?.data?.result_list]
+    [accountDetails?.family_uid, familyData?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -42,12 +41,6 @@ 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">
@@ -62,7 +55,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -152,8 +145,6 @@ export default function FamilyPending({
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
-      </>
-      }
 
       {/* Active Job Popout */}
       {jobPopout.show && (

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -10,6 +10,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyTasks({
   familyData,
   className,
+  loader,
   accountDetails,
 }) {
   let navigate = useNavigate();
@@ -18,17 +19,17 @@ export default function FamilyTasks({
   // ...
   const filteredFamilyData = useMemo(
     () =>
-      familyData?.data?.result_list?.filter(
+      familyData?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [familyData?.data, accountDetails]
+    [familyData, 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?.data?.result_list?.slice(
+  const currentTask = familyData?.result_list.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -42,21 +43,21 @@ export default function FamilyTasks({
         className || ""
       }`}
     >
-      {familyData.loading ? (
+      {loader ? (
-        <div className="w-full h-full flex justify-center items-center">
+        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+          <LoadingSpinner size={16} color="sky-blue" />
         </div>
       ) : (
         <>
-          {familyData?.data && familyData?.data?.result_list && (
+          {familyData && familyData?.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?.data &&
+                      {familyData &&
-                      familyData?.data?.result_list &&
+                      familyData?.result_list &&
-                      familyData?.data.result_list.length > 0 ? (
+                      familyData.result_list.length > 0 ? (
                         currentTask.map((value, index) => {
                           // find due date
                           const dueDate = value?.delivery_date.split(" ")[0];
@@ -66,7 +67,7 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                           return (
                             <tr
                               key={index}
@@ -148,11 +149,11 @@ export default function FamilyTasks({
                 prev={currentPage == 0 ? true : false}
                 next={
                   currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  familyData?.data?.result_list.length
+                  familyData?.result_list.length
                     ? true
                     : false
                 }
-                data={familyData?.data?.result_list}
+                data={familyData?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

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, setUpdatePage }) => {
+  ({ familyData, className, accountDetails, loader, 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?.data?.result_list?.filter(
+        familyData?.result_list?.filter(
           (data) => data?.family_uid === accountDetails?.family_uid
         ),
-      [familyData.data, accountDetails]
+      [familyData, accountDetails]
     );
 
     const [currentPage, setCurrentPage] = useState(0);
@@ -52,9 +52,9 @@ const FamilyWaitlist = memo(
           className || ""
         }`}
       >
-        {familyData.loading ? (
+        {loader ? (
-          <div className="w-full h-full flex justify-center items-center">
+          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-            <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+            <LoadingSpinner size={16} color="sky-blue" />
           </div>
         ) : (
           <>
@@ -67,7 +67,8 @@ const FamilyWaitlist = memo(
                       const selectedImage = require(`../../../assets/images/family/${
                         value?.banner || "default.jpg"
                       }`);
-                      // let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      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"

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -17,6 +17,8 @@ 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: []})
     })

src/components/FamilyPopup/SuggestTask.jsx

@@ -80,6 +80,8 @@ 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">

src/components/ImageCon/ImageElement.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function ImageElement({className, src, alt}) {
+  return (
+    <div className='w-full h-full flex justify-center items-center'>
+        <img src={src} alt={alt} className={`object-cover w-auto h-full ${className && className}`} />
+    </div>
+  )
+}

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Suspense, lazy, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import { useNavigate } from "react-router-dom";
@@ -12,6 +12,9 @@ import { useDispatch } from "react-redux";
 
 import { SocketValues } from "../Contexts/SocketIOContext";
 
+const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
+const ImageElement = lazy(() => import("../ImageCon/ImageElement"));
+
 function FamilyOfferJobPopout({ details, onClose, situation }) {
 
   const {parentAssignJobToKid} = SocketValues()
@@ -118,8 +121,6 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
       });
   };
 
-  console.log(details)
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -153,12 +154,9 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg">
+        <div className="md:flex bg-white rounded-lg h-[450px] overflow-y-auto">
-          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+          <div className="p-4 w-full md:w-3/5 md:border-r-2">
             <div className="flex gap-2">
-                <div className="image-wrapper w-32">
-                    <img className="w-full h-auto" src={details?.image} alt='banner' />
-                </div>
                 <div className="details-wrapper">
                     <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
                     {details.title}
@@ -208,7 +206,22 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-1/4 h-full">
+          <div className="p-4 w-full md:w-2/5 h-full flex flex-col justify-between">
+            { details.job_type == 'TASK' ?
+              <div className="image-wrapper w-full h-40 flex justify-center items-center">
+                <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
+                  <ImageElement src={details?.image} alt='banner' className='w-auto h-full' />
+                </Suspense>
+              </div>
+              :
+              <div className="w-full flex justify-center">
+                <div className="w-full max-w-xs">
+                  <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
+                    <VideoElement videoId={details.media_uid} />
+                  </Suspense>
+                </div>
+              </div>
+            }
             <div className="my-3 md:flex md:justify-center">
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
@@ -238,30 +251,19 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                 </button>
               )}
             </div> */}
-
-            {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-            {requestStatus.message != "" &&
-              (!requestStatus.status ? (
-                <div
-                  className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                >
-                  {requestStatus.message}
-                </div>
-              ) : (
-                requestStatus.status && (
-                  <div
-                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                  >
-                    {requestStatus.message}
-                  </div>
-                )
-              ))}
-            {/* End of error or success display */}
           </div>
         </div>
 
         {/* close button */}
-        <div className="modal-footer-wrapper flex justify-end">
+        <div className="modal-footer-wrapper flex justify-between">
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          <div
+            className={`relative text-md font-light leading-[19.5px] text-[13px] ${requestStatus.status ? 'text-green-700' : 'text-[#912741]'}`}
+          >
+            {requestStatus.message}
+          </div>
+          {/* End of error or success display */}
+
           <button
             onClick={onClose}
             disabled={requestStatus.loading}