btn style customized

.env

@@ -82,4 +82,12 @@ REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
 #Family
-REACT_APP_MAX_FAMILY_MEMBERS=8
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.development

@@ -50,4 +50,12 @@ REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
-REACT_APP_MAX_FAMILY_MEMBERS=8
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

.env.production

@@ -56,4 +56,12 @@ REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
-REACT_APP_MAX_FAMILY_MEMBERS=8
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

package.json

@@ -21,6 +21,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.0.2",

src/components/AuthPages/ForgotPassword/index.jsx

@@ -7,6 +7,8 @@ import AuthLayout from "../AuthLayout";
 import EmailValidator from "../../../lib/EmailValidator";
 import ForgetPwdResponse from "../ForgetPwdResponse";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
   const [resetLoading, setResetLoading] = useState(false);
@@ -22,9 +24,18 @@ export default function ForgotPassword() {
     setMail(e?.target.value);
   };
 
-  const humanChecker = () => {
-    setValue(!checked);
-  };
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
 
   const resetHandler = async () => {
     if (email == "") {
@@ -113,10 +124,16 @@ export default function ForgotPassword() {
                     />
                   </div>
                   {/* hCaptha clone for the time being */}
-                  <div className="mb-10">
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
                     <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
                       <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                        {/* Checkbox */}
+                        
                         <div className="h-full relative inline-block">
                           <div className="relative table top-0 h-full">
                             <div className="table-cell align-middle">
@@ -148,18 +165,25 @@ export default function ForgotPassword() {
                         <div className="h-full relative inline-block w-16"></div>
                       </div>
                     </div>
-                  </div>
+                  </div> */}
                   {msgError && (
                     <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
                       {msgError}
                     </div>
                   )}
                   <div className="signin-area mb-3.5">
-                    <div className="flex justify-center items-center gap-2">
+                    <div className="flex justify-center items-center gap-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
                       <button
                         type="button"
                         onClick={resetHandler}
-                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                        className={`rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                       >
                         {resetLoading ? (
                           <div className="signup btn-loader"></div>
@@ -167,13 +191,6 @@ export default function ForgotPassword() {
                           <span>Send Code</span>
                         )}
                       </button>
-                      <button
-                        type="button"
-                        onClick={() => navigate("/login")}
-                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
-                      >
-                        Cancel
-                      </button>
                     </div>
                   </div>
                 </div>

src/components/AuthPages/Login/index.jsx

@@ -320,7 +320,7 @@ export default function Login() {
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
-                          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
@@ -433,7 +433,7 @@ export default function Login() {
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
-                          className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>

src/components/AuthPages/SignUp/index.jsx

@@ -325,7 +325,7 @@ export default function SignUp() {
                       disabled={countries.loading}
                       type="button"
                       onClick={handleSignUp}
-                      className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                      className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                     >
                       {signUpLoading ? (
                         <div className="signup btn-loader"></div>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -1,12 +1,10 @@
 import React, {
   Suspense,
   lazy,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  useTransition,
 } from "react";
 import { useReactToPrint } from "react-to-print";
 import profile from "../../assets/images/profile-info-profile.png";
@@ -29,27 +27,62 @@ export default function FamilyManageTabs({
   listReload,
   loader,
 }) {
+  // Initial state for family details
+  const initialDetailState = {
+    loading: false,
+    data: null,
+  };
+
+  // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
-    familyDetails: { loading: false, data: null },
-    familyTasks: { loading: false, data: null },
-    familyWaitList: { loading: false, data: null },
-    familyPending: { loading: false, data: null },
+    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 task data
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+
+  // 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 [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+
+  // State for profile image
   const [profileImg, setProfileImg] = useState(profile);
+
+  // Ref for profile image input
   const profileImgInput = useRef(null);
-  const [isPending, startTransition] = useTransition();
+
+  // 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);
   };
 
+  // Function to trigger a click on the hidden profile image input
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
 
+  // Function to handle changes in the profile image input
   const profileImgChangeHandler = (e) => {
     if (e.target.value !== "") {
       const imgReader = new FileReader();
@@ -60,82 +93,30 @@ export default function FamilyManageTabs({
     }
   };
 
-  const manageFamily = useCallback(async () => {
-    try {
-      setDetails((prevDetails) => ({
-        ...prevDetails,
-        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;
-
-      if (
-        familyData?.internal_return < 0 ||
-        tasksData?.internal_return < 0 ||
-        familyWaitData?.internal_return < 0 ||
-        familyPendingData?.internal_return < 0
-      ) {
-        return;
-      }
-
-      startTransition(() => {
-        setDetails({
-          familyDetails: { loading: false, data: familyData },
-          familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: familyWaitData },
-          familyPending: { loading: false, data: familyPendingData },
-        });
-      });
-    } catch (error) {
-      setDetails((prevDetails) => ({
-        ...prevDetails,
-        familyDetails: { loading: false },
-        familyTasks: { loading: false },
-        familyWaitList: { loading: false },
-        familyPending: { loading: false },
-      }));
-      setErrMsg("An error occurred");
-      throw new Error(error);
-    }
-  }, [apiCall, accountDetails]);
-
+  // Ref for the account section
   const accountRef = useRef();
 
+  // React-to-Print hook for handling printing
   const useHandlePrint = useReactToPrint({
     content: () => accountRef.current,
   });
 
+  // Array of tab names
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
     { id: 3, name: "Pending" },
   ];
 
+  // State for the currently selected tab
   const [tab, setTab] = useState(tabs[0].name);
 
+  // Function to handle tab changes
   const tabHandler = (value) => {
-    startTransition(() => {
-      setTab(value);
-    });
+    setTab(value);
   };
 
+  // Object that maps tab names to their corresponding components
   const tabComponents = {
     Tasks: (
       <FamilyTasks
@@ -156,7 +137,7 @@ export default function FamilyManageTabs({
       <FamilyPending
         familyData={details.familyPending.data}
         accountDetails={accountDetails}
-        loader={details.familyWaitList.loading}
+        loader={details.familyPending.loading}
       />
     ),
     Account: (
@@ -170,6 +151,7 @@ export default function FamilyManageTabs({
     Profile: <FamilyProfile />,
   };
 
+  // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
@@ -179,17 +161,101 @@ 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
   useEffect(() => {
-    let __manageFamily = true;
-    if (__manageFamily) {
-      manageFamily();
-    }
-    return () => {
-      __manageFamily = false;
+    const manageFamily = async () => {
+      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;
+        }
+
+        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);
+      }
     };
-  }, [tab, manageFamily]);
+
+    // Invoke the manageFamily function when the component mounts
+    manageFamily();
+  }, []);
+
+  // Effect to manage family tasks
+  useEffect(() => {
+    let checkFamilyTask = true;
+    const reqData = {
+      limit: 30,
+      offset: 0,
+      job_type: "FAMILY",
+      action: 13005,
+    };
+
+    if (checkFamilyTask) {
+      setFamilyTask({ loading: true });
+      apiCall
+        .getMyJobList(reqData)
+        .then((res) => {
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          if (res?.data?.result_list?.length) {
+            setActiveTask((prev) => ({
+              ...prev,
+              data: res?.data?.result_list[0],
+            }));
+          }
+        })
+        .catch((err) => {
+          setFamilyTask({ loading: false, data: [] });
+          console.log("Error", err);
+        });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
+  }, []);
 
   return (
     <div
@@ -265,7 +331,7 @@ export default function FamilyManageTabs({
                     Add task
                   </button>
                 </div>
-                
+
                 <div className="flex-[0.9] h-full">
                   <div className="h-full relative overflow-y-auto">
                     <Suspense
@@ -285,7 +351,11 @@ export default function FamilyManageTabs({
         <AssignTaskPopout
           action={familyPopUpHandler}
           situation={familyTaskPopout}
-          familyDetails={details.familyDetails.data}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
+          setActiveTask={setActiveTask}
+          activeTask={activeTask}
+          familyDetailsData={details.familyDetails.data}
         />
       )}
     </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,441 +1,418 @@
-import React, { useState, useEffect, useTransition } from "react";
-import ModalCom from "../../Helpers/ModalCom";
-import Detail from "../../jobPopout/popoutcomponent/Detail";
+import React, { useState } from "react";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
 
-const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetails }) => {
-  const apiCall = new usersService();
+const AssignTaskPopout = React.memo(
+  ({
+    action,
+    details,
+    situation,
+    familyDetailsData,
+    familyTask,
+    activeTask,
+    setActiveTask,
+  }) => {
+    const apiCall = new usersService();
 
-  let [requestStatus, setRequestStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // HOLDS RESPONSE FOR SENDING API REQUEST
+    let [requestStatus, setRequestStatus] = useState({
+      loading: false,
+      status: false,
+      message: "",
+    }); // HOLDS RESPONSE FOR SENDING API REQUEST
 
-  let [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+    let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
-  let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
+    const switchTaskType = ({ target: { value } }) => {
+      // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+      setTaskType(value);
+    };
 
-  let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
+    const handleActiveTask = (id = 0, data = {}) => {
+      // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+      setActiveTask({ id, data });
+    };
 
-  const switchTaskType = ({ target: { value } }) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    setTaskType(value);
-  };
+    // New Task
+    const [formState, setFormState] = useState({
+      // Initialize form state with desired fields
+      banner: details?.banner || "default.jpg",
+      country: details?.country || "",
+      price: details?.price || "",
+      title: details?.title || "",
+      description: details?.description || "",
+      job_detail: details?.job_detail || "",
+      timeline_days: details?.timeline_days || "",
+      category: details?.category || "",
+    });
 
-  const handleActiveTask = (id = 0, data = {}) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    setActiveTask({ id, data });
-  };
-
-  // New Task
-  const [formState, setFormState] = useState({
-    // Initialize form state with desired fields
-    banner: details?.banner || "default.jpg",
-    country: details?.country || "",
-    price: details?.price || "",
-    title: details?.title || "",
-    description: details?.description || "",
-    job_detail: details?.job_detail || "",
-    timeline_days: details?.timeline_days || "",
-    category: details?.category || "",
-  });
-
-  const assignFamilyTask = () => {
-    setRequestStatus({ loading: true, status: false, message: "" });
-    let reqData = {};
-    if (taskType == "select") {
-      // RUNS HERE IF TASK TYPE IS SELECT
-      if (!Object.keys(activeTask.data).length) {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "No Task is seleted",
-        });
-        return setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000);
-      }
-      reqData = {
-        // API PAYLOADS
-        job_id: activeTask.data?.job_id,
-        job_uid: activeTask.data?.job_uid,
-        family_uid: familyDetails?.uid || details?.family_uid,
-        job_description: activeTask.data?.description,
-        assign_mode: 110011,
-      };
-    }
-
-    if (taskType === "new") {
-      const {
-        banner,
-        category,
-        country,
-        description,
-        job_detail,
-        price,
-        timeline_days,
-        title,
-      } = formState;
-
-      const requiredFields = {
-        banner,
-        // category,
-        country,
-        description,
-        job_detail,
-        price,
-        timeline_days,
-        title,
-      };
-
-      for (let field in requiredFields) {
-        if (requiredFields[field] == "") {
-          // let currencyErrMsg = field == "country" && "currency"
+    const assignFamilyTask = () => {
+      setRequestStatus({ loading: true, status: false, message: "" });
+      let reqData = {};
+      if (taskType == "select") {
+        // RUNS HERE IF TASK TYPE IS SELECT
+        if (!Object.keys(activeTask.data).length) {
           setRequestStatus({
             loading: false,
             status: false,
-            message: `${field} is empty`,
+            message: "No Task is seleted",
           });
           return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 3000);
         }
+        reqData = {
+          // API PAYLOADS
+          job_id: activeTask.data?.job_id,
+          job_uid: activeTask.data?.job_uid,
+          family_uid: familyDetailsData?.uid || details?.family_uid,
+          job_description: activeTask.data?.description,
+          assign_mode: 110011,
+        };
       }
 
-      reqData = {
-        banner,
-        category,
-        country,
-        description,
-        job_detail,
-        price: price * 100,
-        timeline_days,
-        title,
-        assign_mode: 110055,
-        family_uid: details?.family_uid || familyDetails?.uid,
-      };
-    }
+      if (taskType === "new") {
+        const {
+          banner,
+          category,
+          country,
+          description,
+          job_detail,
+          price,
+          timeline_days,
+          title,
+        } = formState;
 
-    apiCall
-      .assignFamilyTask(reqData)
-      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        const requiredFields = {
+          banner,
+          // category,
+          country,
+          description,
+          job_detail,
+          price,
+          timeline_days,
+          title,
+        };
+
+        for (let field in requiredFields) {
+          if (requiredFields[field] == "") {
+            // let currencyErrMsg = field == "country" && "currency"
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: `${field} is empty`,
+            });
+            return setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 3000);
+          }
+        }
+
+        reqData = {
+          banner,
+          category,
+          country,
+          description,
+          job_detail,
+          price: price * 100,
+          timeline_days,
+          title,
+          assign_mode: 110055,
+          family_uid: details?.family_uid || familyDetailsData?.uid,
+        };
+      }
+
+      apiCall
+        .assignFamilyTask(reqData)
+        .then((res) => {
+          if (res.status != 200 || res.data.internal_return < 0) {
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: "failed to assign task",
+            });
+            return setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          }
+          setRequestStatus({
+            loading: false,
+            status: true,
+            message: "action successful",
+          });
+          setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+            action(); // FUNCTION THAT CLOSES THE MODAL BOX
+          }, 5000);
+        })
+        .catch((err) => {
           setRequestStatus({
             loading: false,
             status: false,
-            message: "failed to assign task",
+            message: "An Error occured, try again",
           });
-          return setTimeout(() => {
+          setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
-        }
-        setRequestStatus({
-          loading: false,
-          status: true,
-          message: "action successful",
         });
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-          action(); // FUNCTION THAT CLOSES THE MODAL BOX
-        }, 5000);
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "An Error occured, try again",
-        });
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
-      });
-  };
-
-  useEffect(() => {
-    let checkFamilyTask = true;
-    const reqData = {
-      limit: 30,
-      offset: 0,
-      job_type: "FAMILY",
-      action: 13005,
     };
 
-    apiCall
-      .getMyJobList(reqData)
-      .then((res) => {
-        if (checkFamilyTask) {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
-          if (res?.data?.result_list?.length) {
-            setActiveTask((prev) => ({
-              ...prev,
-              data: res?.data?.result_list[0],
-            }));
-          }
-        }
-      })
-      .catch((err) => {
-        setFamilyTask({ loading: false, data: [] });
-        console.log("Error", err);
-      });
-
-    return () => {
-      checkFamilyTask = false;
-    };
-  }, []);
-
-  return (
-    <>
-      <ModalCom
-        action={action}
-        situation={situation}
-        className="assign-task-popup"
-      >
-        <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-          <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              Assign task to {familyDetails?.firstname || details?.firstName}
-            </h1>
-            <button
-              type="button"
-              className="text-[#374557] dark:text-red-500"
-              onClick={action}
-            >
-              <svg
-                width="36"
-                height="36"
-                viewBox="0 0 36 36"
-                fill="none"
-                className="fill-current"
-                xmlns="http://www.w3.org/2000/svg"
+    return (
+      <>
+        <ModalCom
+          action={action}
+          situation={situation}
+          className="assign-task-popup"
+        >
+          <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+            <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+              <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                Assign task to{" "}
+                {familyDetailsData?.firstname || details?.firstName}
+              </h1>
+              <button
+                type="button"
+                className="text-[#374557] dark:text-red-500"
+                onClick={action}
               >
-                <path
-                  d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
-                  fill=""
-                  fillOpacity="0.6"
-                />
-                <path
-                  d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
-                  fill="#"
-                  fillOpacity="0.6"
-                />
-              </svg>
-            </button>
-          </div>
-          {familyTask.loading ? (
-            <div className="h-[100px] w-full flex justify-center items-center">
-              <LoadingSpinner color="sky-blue" size="16" />
+                <svg
+                  width="36"
+                  height="36"
+                  viewBox="0 0 36 36"
+                  fill="none"
+                  className="fill-current"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                    fill=""
+                    fillOpacity="0.6"
+                  />
+                  <path
+                    d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                    fill="#"
+                    fillOpacity="0.6"
+                  />
+                </svg>
+              </button>
             </div>
-          ) : (
-            <>
-              <div
-                className={`job-action-modal-body w-full md:grid ${
-                  taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
-                }`}
-              >
-                <div className="p-4">
-                  <div className="mb-2 w-full flex items-center gap-4">
-                    <div className="flex items-center gap-2 text-sky-blue text-base">
-                      <input
-                        type="radio"
-                        name="task-type"
-                        value="select"
-                        className="w-[20px] h-[20px] cursor-pointer"
-                        checked={taskType == "select"}
-                        onChange={switchTaskType}
-                      />
-                      <span>Select Task</span>
+            {familyTask.loading ? (
+              <div className="h-[100px] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
+            ) : (
+              <>
+                <div
+                  className={`job-action-modal-body w-full md:grid ${
+                    taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+                  }`}
+                >
+                  <div className="p-4">
+                    <div className="mb-2 w-full flex items-center gap-4">
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="select"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "select"}
+                          onChange={switchTaskType}
+                        />
+                        <span>Select Task</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="new"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "new"}
+                          onChange={switchTaskType}
+                        />
+                        <span>New Task</span>
+                      </div>
                     </div>
-                    <div className="flex items-center gap-2 text-sky-blue text-base">
-                      <input
-                        type="radio"
-                        name="task-type"
-                        value="new"
-                        className="w-[20px] h-[20px] cursor-pointer"
-                        checked={taskType == "new"}
-                        onChange={switchTaskType}
-                      />
-                      <span>New Task</span>
-                    </div>
-                  </div>
-                  {/* 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) => (
-                          <div
-                            key={item.job_uid}
-                            className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                            onClick={() => handleActiveTask(item.job_uid, item)}
-                          >
-                            <input
-                              type="radio"
-                              name="task-list"
-                              checked={
-                                activeTask.id == item.job_uid ||
-                                (activeTask.id == index && true)
-                              }
-                              onChange={() =>
+                    {/* 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) => (
+                            <div
+                              key={item.job_uid}
+                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                              onClick={() =>
                                 handleActiveTask(item.job_uid, item)
                               }
-                              className="w-[15px] h-[15px] cursor-pointer"
-                            />
-                            <p className="w-full text-dark-gray dark:text-white tracking-wide">
-                              {item?.title}
+                            >
+                              <input
+                                type="radio"
+                                name="task-list"
+                                checked={
+                                  activeTask.id == item.job_uid ||
+                                  (activeTask.id == index && true)
+                                }
+                                onChange={() =>
+                                  handleActiveTask(item.job_uid, item)
+                                }
+                                className="w-[15px] h-[15px] cursor-pointer"
+                              />
+                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
+                                {item?.title}
+                              </p>
+                            </div>
+                          ))
+                        ) : (
+                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
+                            No Task found!
+                          </p>
+                        )}
+                      </div>
+                    )}
+                    {taskType == "new" && (
+                      <div className="p-4 w-full h-[400px]">
+                        <NewTasks
+                          formState={formState}
+                          setFormState={setFormState}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/*Right Hand Side for details && Task Type === select */}
+                  {taskType == "select" && (
+                    <>
+                      {familyTask?.data?.length > 0 ? (
+                        <div className="p-4">
+                          <div className="w-full">
+                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                              {activeTask?.data?.title}
                             </p>
+                            <div className="my-3">
+                              <Detail
+                                label="Description"
+                                value={activeTask?.data?.description}
+                              />
+                            </div>
+                            <div className="flex items-center">
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                                  Price
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                  {PriceFormatter(
+                                    activeTask?.data?.price * 0.01,
+                                    activeTask?.data?.currency,
+                                    activeTask?.data?.curreny_code
+                                  )}
+                                </p>
+                              </div>
+
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                                  Timeline
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              </div>
+                            </div>
+
+                            <div className="my-3 sm:flex items-center">
+                              <Detail
+                                label="Created"
+                                value={`Dummy, no value found for created!`}
+                              />
+                            </div>
+
+                            <div className="my-3">
+                              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                                Delivery Detail
+                              </label>
+                              <textarea
+                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                                rows="5"
+                                style={{ resize: "none" }}
+                                value={activeTask?.data?.job_detail}
+                                readOnly
+                                // onChange={handleInputChange}
+                              />
+                            </div>
                           </div>
-                        ))
+                        </div>
                       ) : (
-                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                          No Task found!
-                        </p>
+                        <></>
                       )}
-                    </div>
-                  )}
-                  {taskType == "new" && (
-                    <div className="p-4 w-full h-[400px]">
-                      <NewTasks
-                        formState={formState}
-                        setFormState={setFormState}
-                      />
-                    </div>
+                    </>
                   )}
                 </div>
 
-                {/*Right Hand Side for details && Task Type === select */}
-                {taskType == "select" && (
-                  <>
-                    {familyTask?.data?.length > 0 ? (
-                      <div className="p-4">
-                        <div className="w-full">
-                          <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
-                            {activeTask?.data?.title}
-                          </p>
-                          <div className="my-3">
-                            <Detail
-                              label="Description"
-                              value={activeTask?.data?.description}
-                            />
-                          </div>
-                          <div className="flex items-center">
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                                Price
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                {PriceFormatter(
-                                  activeTask?.data?.price * 0.01,
-                                  activeTask?.data?.currency,
-                                  activeTask?.data?.curreny_code
-                                )}
-                              </p>
-                            </div>
-
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                                Timeline
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
-                            </div>
-                          </div>
-
-                          <div className="my-3 sm:flex items-center">
-                            <Detail
-                              label="Created"
-                              value={`Dummy, no value found for created!`}
-                            />
-                          </div>
-
-                          <div className="my-3">
-                            <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
-                              Delivery Detail
-                            </label>
-                            <textarea
-                              className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                              rows="5"
-                              style={{ resize: "none" }}
-                              value={activeTask?.data?.job_detail}
-                              readOnly
-                              // onChange={handleInputChange}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    ) : (
-                      <></>
-                    )}
-                  </>
-                )}
-              </div>
-
-              {/* BTN */}
-              <div className="py-2 px-4 border-t-2 flex justify-between items-center">
-                {/* error or success display */}
-                <div className="w-auto h-auto flex items-center">
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
+                {/* BTN */}
+                <div className="py-2 px-4 border-t-2 flex justify-between items-center">
+                  {/* error or success display */}
+                  <div className="w-auto h-auto flex items-center">
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
                         <div
-                          className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
                         >
                           {requestStatus.message}
                         </div>
-                      )
-                    ))}
-                </div>
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-2 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>
+                        )
+                      ))}
+                  </div>
 
-                {/* End of error or success display */}
-                <div className="w-auto h-auto flex items-center gap-3">
-                  <button
-                    disabled={requestStatus.loading}
-                    onClick={action}
-                    type="button"
-                    className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
-                  >
-                    <span className="text-gradient">Close</span>
-                  </button>
-                  <div className="">
-                    {requestStatus.loading ? (
-                      <LoadingSpinner color="sky-blue" size="8" />
-                    ) : taskType == "select" ? (
-                      <button
-                        type="button"
-                        disabled={requestStatus.loading}
-                        onClick={assignFamilyTask}
-                        className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-                      >
-                        Assign
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        disabled={requestStatus.loading}
-                        onClick={assignFamilyTask}
-                        className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-                      >
-                        {`Assign to ${
-                          familyDetails?.firstname || details?.firstName
-                        }`}
-                      </button>
-                    )}
+                  {/* End of error or success display */}
+                  <div className="w-auto h-auto flex items-center gap-3">
+                    <button
+                      disabled={requestStatus.loading}
+                      onClick={action}
+                      type="button"
+                      className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
+                    >
+                      <span className="text-gradient">Close</span>
+                    </button>
+                    <div className="">
+                      {requestStatus.loading ? (
+                        <LoadingSpinner color="sky-blue" size="8" />
+                      ) : taskType == "select" ? (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        >
+                          Assign
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        >
+                          {`Assign to ${
+                            familyDetailsData?.firstname || details?.firstName
+                          }`}
+                        </button>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            </>
-          )}
-        </div>
-      </ModalCom>
-    </>
-  );
-})
+              </>
+            )}
+          </div>
+        </ModalCom>
+      </>
+    );
+  }
+);
 
-export default AssignTaskPopout;
+export default AssignTaskPopout;

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -90,7 +90,7 @@ export default function FamilyTasks({
                                     <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                       {value.title}
                                     </h1>
-                                    <div className="flex gap-4 items-center">
+                                    <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                       <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                         Price:{" "}
                                         <span className="text-purple">

src/components/FamilyAcc/index.jsx

@@ -14,7 +14,9 @@ import FamilyTable from "./FamilyTable";
 
 export default function FamilyAcc() {
   const [selectTab, setValue] = useState("today");
-  const [selectedAge, setSelectedAge] = useState(undefined);
+  // State to store the selected year and month
+  const [selectedYear, setSelectedYear] = useState("");
+  const [selectedMonth, setSelectedMonth] = useState("");
   const [familyList, setFamilyList] = useState([]);
   const [loader, setLoader] = useState(false);
   const [popUp, setPopUp] = useState(false);
@@ -35,17 +37,14 @@ export default function FamilyAcc() {
     setValue(value);
   };
 
-  const ageRange = useMemo(() => {
-    const startAge = 5;
-    const endAge = 16;
-    return Array.from(
-      { length: endAge - startAge + 1 },
-      (_, index) => startAge + index
-    );
-  }, []);
+  // Handle year selection
+  const handleYearChange = (e) => {
+    setSelectedYear(e.target.value);
+  };
 
-  const handleAgeSelect = (event) => {
-    setSelectedAge(parseInt(event.target.value));
+  // Handle month selection
+  const handleMonthChange = (e) => {
+    setSelectedMonth(e.target.value);
   };
 
   const handleInputChange = (event) => {
@@ -53,6 +52,13 @@ export default function FamilyAcc() {
     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
   };
 
+  // use the useEffect hook to clear the selected month if the year changes (to ensure consistency)
+  useEffect(() => {
+    if (selectedYear === "" && selectedMonth !== "") {
+      setSelectedMonth("");
+    }
+  }, [selectedYear]);
+
   const addMember = async () => {
     const { first_name, last_name } = formData;
     setLoader(true);
@@ -61,7 +67,8 @@ export default function FamilyAcc() {
         const reqData = {
           firstname: first_name,
           lastname: last_name,
-          age: selectedAge,
+          year: +selectedYear,
+          month: +selectedMonth,
         };
 
         const res = await apiCall.addFamily(reqData);
@@ -91,7 +98,8 @@ export default function FamilyAcc() {
         first_name: "",
         last_name: "",
       });
-      setSelectedAge("");
+      setSelectedMonth("");
+      setSelectedYear("");
     }
   };
 
@@ -129,8 +137,6 @@ export default function FamilyAcc() {
     };
   }, [listReload, memberList]);
 
-  console.log("Family List ====>", familyList.length);
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -145,16 +151,16 @@ export default function FamilyAcc() {
                 >
                   Family Accounts
                 </span>
-                {(familyList.length <
-                  process.env.REACT_APP_MAX_FAMILY_MEMBERS && !loader) && (
-                  <button
-                    onClick={popUpHandler}
-                    type="button"
-                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                  >
-                    Add
-                  </button>
-                )}
+                {familyList.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
+                  !loader && (
+                    <button
+                      onClick={popUpHandler}
+                      type="button"
+                      className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                    >
+                      Add
+                    </button>
+                  )}
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
@@ -178,9 +184,10 @@ export default function FamilyAcc() {
           <FamilyForm
             popUpHandler={popUpHandler}
             value={formData}
-            ageHandler={handleAgeSelect}
-            ageRange={ageRange}
-            ageValue={selectedAge}
+            selectedYear={selectedYear}
+            selectedMonth={selectedMonth}
+            monthHandler={handleMonthChange}
+            yearHandler={handleYearChange}
             inputHandler={handleInputChange}
             msgErr={msgErr}
             onClick={addMember}
@@ -196,8 +203,10 @@ const FamilyForm = ({
   value: { first_name, last_name },
   ageValue,
   inputHandler,
-  ageHandler,
-  ageRange,
+  selectedMonth,
+  selectedYear,
+  monthHandler,
+  yearHandler,
   msgErr,
   loader,
   onClick,
@@ -242,33 +251,22 @@ const FamilyForm = ({
           value={last_name}
           inputHandler={inputHandler}
         />
-        <div className="input-com mb-7 flex gap-1 items-center w-full justify-between">
+        <div className="input-com mb-7 flex flex-col gap-1 w-full">
           {/* Age dropdown */}
-          <div className="flex items-center justify-between flex-[0.3]">
+          <div className="">
             <label
               className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
               htmlFor="age-selection"
             >
-              Select your age:
+              Birthday: (Year/Month)
             </label>
           </div>
-          <div className=" flex-[0.7] max-w-[150px]">
-            <select
-              name="age-selection"
-              id="age-selection"
-              className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[35px] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
-              onChange={ageHandler}
-              value={ageValue}
-            >
-              <option value={""}>Select age</option>
-              {ageRange?.length > 0 &&
-                ageRange?.map((age) => (
-                  <option value={age} key={age}>
-                    {age}
-                  </option>
-                ))}
-            </select>
-          </div>
+          <YearMonthDropdowns
+            handleMonthChange={monthHandler}
+            handleYearChange={yearHandler}
+            selectedMonth={selectedMonth}
+            selectedYear={selectedYear}
+          />
         </div>
         {msgErr && (
           <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-xs font-light leading-[19.5px]">
@@ -317,3 +315,66 @@ const CloseIcon = () => (
     />
   </svg>
 );
+
+function YearMonthDropdowns({
+  selectedMonth,
+  selectedYear,
+  handleMonthChange,
+  handleYearChange,
+}) {
+  // Get the current year
+  const currentYear = new Date().getFullYear();
+
+  // Generate an array of years from the current year to (currentYear - 19)
+  const years = Array.from({ length: 17 }, (_, index) => currentYear - index);
+
+  // Array of month names
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  return (
+    <div className="flex max-w-[330px] w-full self-end gap-4">
+      <select
+        id="yearDropdown"
+        value={selectedYear}
+        onChange={handleYearChange}
+        className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
+        // size="5"
+      >
+        <option value="">Select a Year</option>
+        {years.map((year) => (
+          <option key={year} value={year}>
+            {year}
+          </option>
+        ))}
+      </select>
+
+      <select
+        id="monthDropdown"
+        value={selectedMonth}
+        onChange={handleMonthChange}
+        className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
+        // size="5"
+      >
+        <option value="">Select a Month</option>
+        {months.map((month, index) => (
+          <option key={month} value={index + 1}>
+            {month}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

src/components/Home/FullAccountDash.jsx

@@ -1,20 +1,17 @@
-import React from "react";
-import datas from "../../data/product_data.json";
-import Hero from "./Hero";
-// import HomeTaskDisplay from "./HomeTaskDisplay";
-import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
-// import SellHistoryMarketVisitorAnalytic from './SellHistoryMarketVisitorAnalytic';
-// import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-//import UpdateTable from "./UpdateTable";
+import MyJobTable from "../MyTasks/MyJobTable";
+import MyOffersTable from "../MyTasks/MyOffersTable";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Hero from "./Hero";
 import HomeActivities from "./HomeActivities";
 
 export default function FullAccountDash(props) {
-  console.log("PROPS IN HOME->", props);
+  // console.log("PROPS IN HOME->", props);
+
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   return (
-    <div>
+    <>
       <div className="home-page-wrapper">
         <Hero
           className="mb-10"
@@ -22,7 +19,31 @@ export default function FullAccountDash(props) {
           bannerList={props.bannerList}
           nextDueTask={props.nextDueTask}
         />
-        <HomeActivities className="mb-10" />
+        {props.offersList?.data?.result_list?.length ? (
+          <MyOffersTable
+            MyActiveOffersList={props.offersList?.data}
+            className="mb-10"
+          />
+        ) : props.MyActiveJobList?.data?.length ? (
+          <>
+            <div className="w-full mb-5 flex justify-between items-center gap-1">
+              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                <span>My Tasks</span>
+              </h1>
+            </div>
+            <MyJobTable
+              ActiveJobList={props.MyActiveJobList}
+              Account={userDetails}
+            />
+          </>
+        ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
+          <HomeActivities className="mb-10" />
+        ) : (
+          <div className="w-full h-[220px] flex items-center justify-center">
+            <LoadingSpinner size="16" color="sky-blue" />
+          </div>
+        )}
+
         {/*<UpdateTable className="mb-10"/>*/}
         {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
@@ -33,24 +54,6 @@ export default function FullAccountDash(props) {
         {/*    bannerList={props.bannerList}*/}
         {/*/>*/}
       </div>
-    </div>
+    </>
   );
 }
-// /*
-//      <Layout>
-//             <div className="home-page-wrapper">
-//                 <Hero className="mb-10" data={userDetails} />
-//                 {/* <CreateNft />
-//         <TrendingSection trending={trending} className="mb-10" />*/}
-// <HomeTaskDisplay
-//     jobData={jobData}
-//     className="mb-10"
-//     bannerList={props.bannerList}
-// />
-{
-  /*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
-                <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/
-}
-// </div>
-// </Layout>

src/components/Home/index.jsx

@@ -12,23 +12,25 @@ export default function Home(props) {
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
   let [nextDueTask, setNextDueTask] = useState({});
-  const [MyOffersList, setMyOffersList] = useState([]);
+  const [MyOffersList, setMyOffersList] = useState({loading: true, data: []});
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  // const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
 
   const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
     try {
       const res = await userApi.getMyActiveTaskList();
-      setMyActiveJobList(res?.data?.result_list);
+      setMyActiveJobList({loading:false, data:res?.data?.result_list});
+      // setMyActiveJobList(res?.data?.result_list);
     } catch (error) {
-      setMyActiveJobList([]);
+      setMyActiveJobList({loading:false, data:[]});
+      // setMyActiveJobList([]);
       console.log("Error getting tasks");
     }
   };
 
-
   // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
   const getHomeDate = () => {
     userApi
@@ -47,8 +49,9 @@ export default function Home(props) {
   const getMyOffersList = async () => {
     try {
       const res = await userApi.getOffersList();
-      setMyOffersList(res.data?.result_list);
+      setMyOffersList({loading:false, data:res.data});
     } catch (error) {
+      setMyOffersList({loading:false, data:[]});
       console.log("Error getting offers", error);
     }
   };
@@ -72,13 +75,15 @@ export default function Home(props) {
           <FamilyDash
             account={userDetails}
             commonHeadData={props.bannerList}
-            familyOffers={MyOffersList}
-            MyActiveJobList={MyActiveJobList}
+            familyOffers={MyOffersList?.data?.result_list}
+            MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (
           <FullAccountDash
             nextDueTask={nextDueTask}
             bannerList={props.bannerList}
+            offersList={MyOffersList}
+            MyActiveJobList={MyActiveJobList}
           />
         ) : (
           <div>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -10,24 +10,25 @@ import ActiveJobMessage from "./ActiveJobMessage";
 import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 function ActiveJobs(props) {
   const ApiCall = new usersService();
-  let navigate = useNavigate();
+  const navigate = useNavigate();
 
-  let { userDetails } = useSelector((state) => state.userDetails);
+  const { userDetails } = useSelector((state) => state.userDetails);
 
-  let [passDue, setPassDue] = useState(
+  const [passDue, setPassDue] = useState(
     new Date() > new Date(props.details?.delivery_date)
   ); // STATE TO KNOW IF TASK IS PASSED DUE TIME
 
-  let [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
+  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
 
-  let [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
+  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  let [tab, setTab] = useState("message");
+  const [tab, setTab] = useState("message");
 
-  let [requestStatus, setRequestStatus] = useState({
+  const [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
     message: "",
@@ -248,7 +249,11 @@ function ActiveJobs(props) {
     }
   }, [passDue]);
 
-  console.log("AC JOBS >>", props);
+  let thePrice = PriceFormatter(
+    props.details?.price * 0.01,
+    props.details?.currency_code,
+    props.details?.currency
+  );
 
   return (
     <Layout>
@@ -311,10 +316,11 @@ function ActiveJobs(props) {
                 <span className="font-semibold">Due: </span>
                 {props?.details && props.details.delivery_date.split(" ")[0]}
               </p>
-              <p className="py-2 text-base text-slate-700">
-                {props?.delivery_date &&
-                  props.details.delivery_date.split(" ")[1]}
-              </p>
+              {props?.delivery_date && (
+                <p className="py-2 text-base text-slate-700">
+                  {props.details.delivery_date.split(" ")[1]}
+                </p>
+              )}
             </div>
           ) : (
             <div className="my-1 flex items-start gap-3">
@@ -334,6 +340,13 @@ function ActiveJobs(props) {
             </div>
           )}
 
+          <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+            <span className="font-semibold text-black dark:text-white">
+              Price:{" "}
+            </span>
+            <span className="">{thePrice}</span>
+          </div>
+
           <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
             <span className="font-semibold text-black dark:text-white">
               Duration:{" "}
@@ -405,6 +418,7 @@ function ActiveJobs(props) {
                   name="message"
                   onChange={handleMessageChange}
                   value={messageToSend}
+                  autoFocus
                 />
               ) : (
                 <div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
   const navigate = useNavigate();
@@ -25,7 +24,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-3 sm:p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
         className || ""
       }`}
     >
@@ -33,11 +32,6 @@ export default function MyActiveJobTable({ MyJobList, className }) {
         <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>
-              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-              {/*    <td className="py-4">All Product</td>*/}
-              {/*    <td className="py-4 text-right">.</td>*/}
-              {/*</tr>*/}
-
               {
                 <>
                   {MyJobList &&
@@ -59,7 +53,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                             <div className="flex space-x-2 items-center w-full">
                               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
+                                  src={localImgLoad(
+                                    `images/taskbanners/${value.banner}`
+                                  )}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />
@@ -75,7 +71,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                     {thePrice}
                                   </span>
                                 </span>
-                                <div className="flex gap-4 items-center">
+                                <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                   <span className="text-sm text-thin-light-gray">
                                     Duration:{" "}
                                     <span className="text-purple">
@@ -113,9 +109,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                     state: { ...value, pathname },
                                   });
                                 }}
-                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                               >
-                                View
+                                {value.owner_status == "OWNER"
+                                  ? "Manage"
+                                  : "Send Updates"}
                               </button>
                             </div>
                           </td>

src/components/MyActiveJobs/MyReviewDueJobs.jsx

@@ -1,42 +1,39 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MyActiveJobTable from "./MyActiveJobTable";
 
 export default function MyReviewDueJobs(props) {
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
-    return (
-        <Layout>
-            <CommonHead
-                commonHeadData={props.commonHeadData}
-            />
-            <div className="notification-page w-full mb-10">
-                <div className="notification-wrapper w-full">
-                    {/* heading */}
-                    <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+  const [selectTab, setValue] = useState("today");
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+  return (
+    <Layout>
+      <CommonHead commonHeadData={props.commonHeadData} />
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          {/* heading */}
+          <div className="sm:flex justify-between items-center mb-6">
+            <div className="mb-5 sm:mb-0">
+              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
                 <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
-                 Review Due Job(s)
+                  Review Due Job(s)
                 </span>
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div
-                                onClick={() => filterHandler("today")}
-                                className="relative"
-                            ></div>
-                        </div>
-                    </div>
-                    <MyActiveJobTable MyJobList={props.MyJobList} />
-                </div>
+              </h1>
             </div>
-        </Layout>
-    );
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <MyActiveJobTable MyJobList={props.myJobList} />
+        </div>
+      </div>
+    </Layout>
+  );
 }

src/components/MyPendingJobs/DeleteTaskModal.jsx

@@ -6,7 +6,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useDispatch } from "react-redux";
 
 
-function DeleteTaskModal({ details, onClose, situation }) {
+function DeleteTaskModal({ details, onClose, situation, setReloadList }) {
   let dispatch = useDispatch();
   const navigate = useNavigate();
   const ApiCall = new usersService();
@@ -19,10 +19,33 @@ function DeleteTaskModal({ details, onClose, situation }) {
 
   // FUNCTION TO DELETE TASK
   const deleteTask = () => {
-    setRequestStatus(prev => ({...prev, loading:true, message: 'No API Yet'}))
-    setTimeout(()=>{
-        setRequestStatus(prev => ({...prev, loading:false, message: ''}))
-    },3000)
+    setRequestStatus({loading:true, status:false, message: ''})
+
+    let reqData = { // REQUEST PAYLOAD
+      suggest_uid: details.uid,
+      suggest_action: 555,
+      offset: 0
+    }
+    ApiCall.suggestStatus(reqData).then((response)=>{ // API CALL TO DELETE SUGGESTED TASK
+      let {data} = response
+      if(data.internal_return < 0){
+        setRequestStatus({loading:false, status:false, message: 'Unable to delete, Try again'})
+        return setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, message: ''})
+        },3000)
+      }
+      setRequestStatus({loading:false, status:true, message: 'Family Suggest Deleted'})
+      setReloadList(prev => !prev) // RELOADS THE FAMILY SUGGEST LIST TABLE
+      setTimeout(()=>{
+          setRequestStatus({loading:false, status:false, message: ''})
+          onClose()
+      },3000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message: 'Unable to delete, Try again'})
+      setTimeout(()=>{
+          setRequestStatus({loading:false, status:false, message: ''})
+      },3000)
+    })
   }
 
   return (
@@ -91,7 +114,7 @@ function DeleteTaskModal({ details, onClose, situation }) {
             >
               <span className="text-gradient">Cancel</span>
             </button>
-            {requestStatus.laoding ? (
+            {requestStatus.loading ? (
               <LoadingSpinner size="8" color="sky-blue" />
             ) : (
               <button

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -18,7 +18,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
     indexOfFirstItem,
     indexOfLastItem
   );
-
+  
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -103,9 +103,9 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                               onClick={() => {
                                 setJobPopout({ show: true, data: value });
                               }}
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
-                              View
+                              {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
                             </button>
                           </td>
                         </tr>

src/components/MyPendingJobs/ParentWaitingTable.jsx

@@ -36,6 +36,8 @@ export default function ParentWaitingTable() {
 
     const apiCall = new usersService()
 
+    let [reloadList, setReloadList] = useState(false) // STATE TO DETERMINE WHEN TO RELOAD THE FAMILY SUGGEST LIST
+
     let [deleteTaskPopout, setDeleteTaskPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF DELETE TASK POPOUT
     let [sendReminderPopout, setSendReminderPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF SEND REMINDER POPOUT
 
@@ -58,7 +60,7 @@ export default function ParentWaitingTable() {
             setFamilySuggestList({loading: false, data:[]})
             console.log('ERROR==>Familysuggestlist', err)
         })
-    },[])
+    },[reloadList])
 
     return (
         <div className="rounded-2xl bg-white dark:bg-dark-white flex flex-col justify-between">
@@ -112,7 +114,7 @@ export default function ParentWaitingTable() {
                                             </p>
                                         </div>
                                     </div>
-                                    <div className="min-w-[100px] flex justify-start items-end px-2 gap-1">
+                                    <div className="min-w-[120px] flex justify-start items-end px-2 gap-1">
                                         <button
                                             type="button"
                                             className="p-1 border-2 border-red-400 rounded-md"
@@ -159,6 +161,7 @@ export default function ParentWaitingTable() {
                         setDeleteTaskPopout({ show: false, data: {} });
                     }}
                     situation={deleteTaskPopout.show}
+                    setReloadList={setReloadList}
                     />
                 )}
                 {/* END of Delete Task Popout */}
@@ -171,6 +174,7 @@ export default function ParentWaitingTable() {
                         setSendReminderPopout({ show: false, data: {} });
                     }}
                     situation={sendReminderPopout.show}
+                    setReloadList={setReloadList}
                     />
                 )}
                 {/* END of Send Reminder Popout */}

src/components/MyPendingJobs/SendReminderModal.jsx

@@ -6,8 +6,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useDispatch } from "react-redux";
 
 
-function SendReminderModal({ details, onClose, situation }) {
-  console.log('details',details)
+function SendReminderModal({ details, onClose, situation, setReloadList }) {
   let dispatch = useDispatch();
   const navigate = useNavigate();
   const ApiCall = new usersService();
@@ -20,10 +19,33 @@ function SendReminderModal({ details, onClose, situation }) {
 
   // FUNCTION TO SEND REMINDER
   const sendReminder = () => {
-    setRequestStatus(prev => ({...prev, loading:true, message: 'No API Yet'}))
-    setTimeout(()=>{
-        setRequestStatus(prev => ({...prev, loading:false, message: ''}))
-    },3000)
+    setRequestStatus({loading:true, status:false, message: ''})
+
+    let reqData = { // REQUEST PAYLOAD
+      suggest_uid: details.uid,
+      suggest_action: 222,
+      offset: 0
+    }
+    ApiCall.suggestStatus(reqData).then((response)=>{ // API CALL TO DELETE SUGGESTED TASK
+      let {data} = response
+      if(data.internal_return < 0){
+        setRequestStatus({loading:false, status:false, message: 'Unable to send reminder, Try again1111'})
+        return setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, message: ''})
+        },3000)
+      }
+      setRequestStatus({loading:false, status:true, message: 'Reminder Sent'})
+      setReloadList(prev => !prev) // RELOADS THE FAMILY SUGGEST LIST TABLE
+      setTimeout(()=>{
+          setRequestStatus({loading:false, status:false, message: ''})
+          onClose()
+      },3000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message: 'Unable to send reminder, Try againNETWORK'})
+      setTimeout(()=>{
+          setRequestStatus({loading:false, status:false, message: ''})
+      },3000)
+    })
   }
 
   return (
@@ -90,7 +112,7 @@ function SendReminderModal({ details, onClose, situation }) {
             >
               <span className="text-gradient">Cancel</span>
             </button> */}
-            {requestStatus.laoding ? (
+            {requestStatus.loading ? (
               <LoadingSpinner size="8" color="sky-blue" />
             ) : (
               <button

src/components/MyTasks/MyJobTable.jsx

@@ -55,15 +55,14 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
       {!ActiveJobList?.data.length && accountType && (
         <div className="absolute inset-0 bg-black opacity-30"></div>
       )}
-      {ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
+      {ActiveJobList.loading ? 
         <div className="w-full h-[520px] flex items-center justify-center">
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
-      )}
-
+      :
       <div className="relative w-full sm:rounded-lg">
         <div className="h-auto w-full">
-          {ActiveJobList?.data?.length > 0 &&
+          {ActiveJobList?.data?.length > 0 ?
             currentTask?.map((task, idx) => {
               // find due date
               const dueDate = task?.delivery_date.split(" ")[0];
@@ -97,7 +96,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                           Price:
                           <span className="text-purple ml-1">{thePrice}</span>
                         </span>
-                        <div className="flex gap-4 items-center">
+                        <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                           <span className="text-sm text-thin-light-gray">
                             Duration:
                             <span className="text-purple ml-1">
@@ -129,16 +128,15 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                           state: { ...task, pathname },
                         });
                       }}
-                      className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                     >
-                      Manage
+                      {task.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
                     </button>
                   </div>
                 </div>
               );
-            })}
-
-          {ActiveJobList?.data?.length <= 0 && (
+            })
+          :
             <div
               className={`flex flex-col ${
                 accountType ? "items-center" : "items-end"
@@ -175,12 +173,12 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                 </button>
               </div>
             </div>
-          )}
-          {ActiveJobList?.internal_return < 0 && (
+          }
+          {/* {ActiveJobList?.internal_return < 0 && (
             <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
               <p className="p-2">Error Occurred! Unable to display Tasks!</p>
             </div>
-          )}
+          )} */}
         </div>
 
         {/* PAGINATION BUTTON */}
@@ -199,6 +197,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
         />
         {/* END OF PAGINATION BUTTON */}
       </div>
+      }
     </div>
   );
 }

src/components/Partials/Layout.jsx

@@ -74,7 +74,7 @@ export default function Layout({ children }) {
             </div>
             {/* container */}
             <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
-              <div className="nft-main-container flex-[80%]">
+              <div className="nft-main-container flex-[80%] w-full">
                 {children && children}
               </div>
               <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
@@ -94,7 +94,7 @@ export default function Layout({ children }) {
               <button type="button" className="text-[#374557] dark:text-red-500" onClick={logoutModalHandler}>
                 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" className="fill-current" xmlns="http://www.w3.org/2000/svg">
                   <path d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z" fill="" fillOpacity="0.6" />
-                  <path d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z" fill="white" fillOpacity="0.6" />
+                  <path d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z" fill="#" fillOpacity="0.6" />
                 </svg>
               </button>
             </div>

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -68,7 +68,7 @@ export default function PersonalInfoTab({
     pref_email: 0,
     pref_phone: 0,
     accept_promo: false,
-    online_name: "",
+    online_name: userDetails?.online_name,
   };
 
   let [profile, setProfile] = useState({
@@ -158,7 +158,7 @@ export default function PersonalInfoTab({
                         fieldClass="px-6"
                         label="User Name"
                         type="text"
-                        name="online_name"
+                        name="username"
                         placeholder="Username"
                         value={userDetails?.username}
                         disable={true}
@@ -361,63 +361,65 @@ export default function PersonalInfoTab({
                     {/* inputs ends here */}
                   </div>
                 </div>
-                <div className="w-[232px] mb-10">
-                  <div className="update-profile w-full mb-9">
-                    <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white flex items-center mb-2">
-                      Update Profile
-                      <span className="ml-1">
-                        <Icons name="block-question" />
-                      </span>
-                    </h1>
-                    <p className="text-base text-thin-light-gray mb-5">
-                      Profile of at least Size
-                      <span className="ml-1   text-dark-gray dark:text-white">
-                        300x300
-                      </span>
-                      . Gifs work too.
-                      <span className="ml-1   text-dark-gray dark:text-white">
-                        Max 5mb
-                      </span>
-                      .
-                    </p>
-                    <div className="flex justify-center">
-                      <div className="w-full relative">
-                        <img
-                          src={profileImg}
-                          alt="profile"
-                          className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-contain object-center"
-                        />
-                        <input
-                          ref={profileImgInput}
-                          onChange={(e) => profileImgChangHandler(e)}
-                          type="file"
-                          className="hidden"
-                        />
-                        <div
-                          onClick={browseProfileImg}
-                          className="w-[32px] h-[32px] absolute bottom-7 sm:right-10 right-[105px]  hover:bg-pink bg-dark-gray rounded-full cursor-pointer"
-                        >
-                          <svg
-                            width="32"
-                            height="32"
-                            viewBox="0 0 32 32"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
+                {process.env.REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE != 0 &&
+                  <div className="w-[232px] mb-10">
+                    <div className="update-profile w-full mb-9">
+                      <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white flex items-center mb-2">
+                        Update Profile
+                        <span className="ml-1">
+                          <Icons name="block-question" />
+                        </span>
+                      </h1>
+                      <p className="text-base text-thin-light-gray mb-5">
+                        Profile of at least Size
+                        <span className="ml-1   text-dark-gray dark:text-white">
+                          300x300
+                        </span>
+                        . Gifs work too.
+                        <span className="ml-1   text-dark-gray dark:text-white">
+                          Max 5mb
+                        </span>
+                        .
+                      </p>
+                      <div className="flex justify-center">
+                        <div className="w-full relative">
+                          <img
+                            src={profileImg}
+                            alt="profile"
+                            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-contain object-center"
+                          />
+                          <input
+                            ref={profileImgInput}
+                            onChange={(e) => profileImgChangHandler(e)}
+                            type="file"
+                            className="hidden"
+                          />
+                          <div
+                            onClick={browseProfileImg}
+                            className="w-[32px] h-[32px] absolute bottom-7 sm:right-10 right-[105px]  hover:bg-pink bg-dark-gray rounded-full cursor-pointer"
                           >
-                            <path
-                              d="M16.5147 11.5C17.7284 12.7137 18.9234 13.9087 20.1296 15.115C19.9798 15.2611 19.8187 15.4109 19.6651 15.5683C17.4699 17.7635 15.271 19.9587 13.0758 22.1539C12.9334 22.2962 12.7948 22.4386 12.6524 22.5735C12.6187 22.6034 12.5663 22.6296 12.5213 22.6296C11.3788 22.6334 10.2362 22.6297 9.09365 22.6334C9.01498 22.6334 9 22.6034 9 22.536C9 21.4009 9 20.2621 9.00375 19.1271C9.00375 19.0746 9.02997 19.0109 9.06368 18.9772C10.4123 17.6249 11.7609 16.2763 13.1095 14.9277C14.2295 13.8076 15.3459 12.6913 16.466 11.5712C16.4884 11.5487 16.4997 11.5187 16.5147 11.5Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M20.9499 14.2904C19.7436 13.0842 18.5449 11.8854 17.3499 10.6904C17.5634 10.4694 17.7844 10.2446 18.0054 10.0199C18.2639 9.76139 18.5261 9.50291 18.7884 9.24443C19.118 8.91852 19.5713 8.91852 19.8972 9.24443C20.7251 10.0611 21.5492 10.8815 22.3771 11.6981C22.6993 12.0165 22.7105 12.4698 22.3996 12.792C21.9238 13.2865 21.4443 13.7772 20.9686 14.2717C20.9648 14.2792 20.9536 14.2867 20.9499 14.2904Z"
-                              fill="white"
-                            />
-                          </svg>
+                            <svg
+                              width="32"
+                              height="32"
+                              viewBox="0 0 32 32"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M16.5147 11.5C17.7284 12.7137 18.9234 13.9087 20.1296 15.115C19.9798 15.2611 19.8187 15.4109 19.6651 15.5683C17.4699 17.7635 15.271 19.9587 13.0758 22.1539C12.9334 22.2962 12.7948 22.4386 12.6524 22.5735C12.6187 22.6034 12.5663 22.6296 12.5213 22.6296C11.3788 22.6334 10.2362 22.6297 9.09365 22.6334C9.01498 22.6334 9 22.6034 9 22.536C9 21.4009 9 20.2621 9.00375 19.1271C9.00375 19.0746 9.02997 19.0109 9.06368 18.9772C10.4123 17.6249 11.7609 16.2763 13.1095 14.9277C14.2295 13.8076 15.3459 12.6913 16.466 11.5712C16.4884 11.5487 16.4997 11.5187 16.5147 11.5Z"
+                                fill="white"
+                              />
+                              <path
+                                d="M20.9499 14.2904C19.7436 13.0842 18.5449 11.8854 17.3499 10.6904C17.5634 10.4694 17.7844 10.2446 18.0054 10.0199C18.2639 9.76139 18.5261 9.50291 18.7884 9.24443C19.118 8.91852 19.5713 8.91852 19.8972 9.24443C20.7251 10.0611 21.5492 10.8815 22.3771 11.6981C22.6993 12.0165 22.7105 12.4698 22.3996 12.792C21.9238 13.2865 21.4443 13.7772 20.9686 14.2717C20.9648 14.2792 20.9536 14.2867 20.9499 14.2904Z"
+                                fill="white"
+                              />
+                            </svg>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
+                }
               </div>
 
               <div className="content-footer w-full">

src/components/jobPopout/JobListPopout.jsx

@@ -168,7 +168,6 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   // console.log("Job List P >> ", details)
-
   return (
     <ModalCom action={onClose} situation={situation} className="job-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -338,7 +337,8 @@ function JobListPopout({ details, onClose, situation }) {
                 );
               }}
             </Formik>
-
+            
+            { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.group}
@@ -368,6 +368,7 @@ function JobListPopout({ details, onClose, situation }) {
                 );
               }}
             </Formik>
+            }
           </div>
           {/* END OF ACTION SECTION */}
         </div>
@@ -468,10 +469,14 @@ const JobFieldInput = ({
           type="submit"
           name={inputName}
           onClick={errorHandler}
-          className={`px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md ${
-            !value && "disabled:grayscale-[65%] transition duration-300"
-          }`}
-          disabled={!value}
+          // className={`px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md ${
+          //   !value && "disabled:grayscale-[65%] transition duration-300"
+          // }`}
+          className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white ${
+            !value && ""
+          }
+          `}
+          // disabled={!value}
         >
           {loader ? <LoadingSpinner size={5} /> : btnText}
         </button>

src/index.css

@@ -3,7 +3,7 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Regular.ttf");
 }
-.nft-main-container{
+.nft-main-container {
   max-width: 1200px;
 }
 /* Bold Weight */
@@ -11,57 +11,59 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
-.SENDER{
+.SENDER {
   margin-left: 60px !important;
   background-color: azure;
 }
-.RECIPIENT{
+.RECIPIENT {
   margin-right: 60px !important;
   background-color: #add8e6 !important;
 }
-.wallet-box{
+.wallet-box {
   background-color: aliceblue;
   border-radius: 20px;
 }
-.bal-col1{
+.bal-col1 {
   width: 110px;
 }
-.bg-green{
+.bg-green {
   background-color: darkgreen;
 }
-.referral{
-  margin-bottom: 20px
+.referral {
+  margin-bottom: 20px;
 }
-.task_action_panel{
-  font-family: sans; color: white;
+.task_action_panel {
+  font-family: sans;
+  color: white;
   font-weight: bolder;
   font-size: 14px;
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
-  padding: 0px 10px 5px 10px
+  padding: 0px 10px 5px 10px;
 }
-.heroSilderTitle{
+.heroSilderTitle {
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-  font-family: sans; color: white;
+  font-family: sans;
+  color: white;
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
-.back-dark1{
-  background-color: #193F5F;
+.back-dark1 {
+  background-color: #193f5f;
   min-width: 280px !important;
 }
-.job-action{
+.job-action {
   background-color: #4687ba;
   height: 100px;
   border-radius: 15px;
   padding: 5px;
 }
 
-.msg_box{
+.msg_box {
   background-color: aliceblue;
   margin: 5px;
   padding: 5px;
   border-radius: 15px;
 }
-.msg_header{
+.msg_header {
   background-color: white;
   color: black;
   font-weight: bold;
@@ -69,7 +71,7 @@
   font-size: 14px;
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
-.siderCardDescription{
+.siderCardDescription {
   background-color: aliceblue;
   padding: 5px;
   border-radius: 5px;
@@ -78,7 +80,7 @@
   font-size: 1.125rem;
   line-height: 1.56;
 }
-.siderCardButton{
+.siderCardButton {
   margin-top: 10px;
   width: 100%;
   text-align: center;
@@ -91,33 +93,39 @@
   padding: 10px;
 }
 
-.short_style{
+.short_style {
   background-color: transparent;
   border-color: #a2d7f1;
   border-width: 3px;
 }
-.lr{
+.lr {
   background-color: #e1cace;
 }
-.lg{
+.lg {
   background-color: #a7dca7;
 }
-.lb{
+.lb {
   background-color: #b3ccd7;
 }
-.ly{
+.ly {
   background-color: #eeee67;
 }
-.offer-slide-item{
-  background: rgb(2,0,36);
-  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);
+.offer-slide-item {
+  background: rgb(2, 0, 36);
+  background: radial-gradient(
+    circle,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(3, 51, 2, 0.782125350140056) 0%,
+    rgba(0, 212, 255, 0.07904411764705888) 0%,
+    rgba(153, 182, 201, 1) 99%
+  );
   margin: 5px;
   border-radius: 15px;
   padding: 15px;
   height: 250px;
   border-color: beige;
 }
-.banner-630-340{
+.banner-630-340 {
   width: 630px;
   height: 340px;
   background-color: aliceblue;
@@ -133,6 +141,7 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Regular.ttf");
 }
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -144,9 +153,8 @@
   --toastify-color-success: #f539f8;
 }
 
-
 /* =====================  EXTRA ===================== */
-.bottomMargin{
+.bottomMargin {
   margin-bottom: 15px;
 }
 /* TODO: =================================default================================ */
@@ -159,8 +167,13 @@ html {
   font-family: "Product Sans";
 }
 .primary-gradient {
-  background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%);
- /* background-image: url("./assets/images/left-myft.jpg");
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #284f64 43.55%,
+    #1a3544 104.51%
+  );
+  /* background-image: url("./assets/images/left-myft.jpg");
   background-repeat: no-repeat;
   background-size: cover; */
 }
@@ -199,7 +212,12 @@ html {
   top: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #5356fb 0%,
+    #c342f9 43.55%,
+    #f539f8 104.51%
+  );
   opacity: 30%;
 }
 /* Chrome, Safari, Edge, Opera */
@@ -229,10 +247,20 @@ input[type="text"][dir="rtl"] {
   scrollbar-width: none; /* Firefox */
 }
 .btn-gradient {
-  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #c342f9 43.55%,
+    #5356fb 104.51%
+  );
 }
 .btn-gradient:hover {
-  background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #5356fb 0%,
+    #c342f9 43.55%,
+    #f539f8 104.51%
+  );
 }
 .text-26 {
   font-size: 26px;
@@ -246,7 +274,12 @@ input[type="text"][dir="rtl"] {
 }
 
 .text-gradient {
-  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #c342f9 43.55%,
+    #5356fb 104.51%
+  );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -305,6 +338,16 @@ input[type="text"][dir="rtl"] {
   transform: scale(1);
   width: 80%;
 }
+
+@media screen and (min-width: 25rem) {
+  .sidebar-logo.enter {
+    width: 65%;
+  }
+  .sidebar-logo.enter + span{
+    position: revert;
+  }
+}
+
 .sidebar-logo {
   transform: scale(0);
   width: 0;
@@ -437,7 +480,12 @@ input[type="text"][dir="rtl"] {
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {
   margin: 0;
 }
-.home-page-wrapper .hero-slider .slick-slider .slick-dots li.slick-active button {
+.home-page-wrapper
+  .hero-slider
+  .slick-slider
+  .slick-dots
+  li.slick-active
+  button {
   background: white;
 }
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li button {
@@ -460,7 +508,12 @@ input[type="text"][dir="rtl"] {
   top: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #5356fb 0%,
+    #c342f9 43.55%,
+    #f539f8 104.51%
+  );
   z-index: -1;
   opacity: 30%;
 }
@@ -476,8 +529,10 @@ input[type="text"][dir="rtl"] {
   margin: 0 16px;
 }
 
-.transfer-field, .transfer-field:focus, .transfer-field:focus-within{
-  background: #FFF !important;
+.transfer-field,
+.transfer-field:focus,
+.transfer-field:focus-within {
+  background: #fff !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
@@ -583,12 +638,12 @@ input[type="text"][dir="rtl"] {
   background-size: cover;
 }
 
-.content{
+.content {
   overflow: hidden;
 }
 
-.job-items{
-  .job-sub-menu{
+.job-items {
+  .job-sub-menu {
     background-color: yellow;
   }
 }
@@ -597,7 +652,7 @@ input[type="text"][dir="rtl"] {
   top: 0;
   right: -100%;
   opacity: 0;
-  transition: all .5s;
+  transition: all 0.5s;
   background-color: white;
 }
 
@@ -612,7 +667,12 @@ input[type="text"][dir="rtl"] {
 .notification-page .content-item .notifications {
   @apply flex space-x-4 items-center;
 }
-.notification-page .content-item .notifications .notification-page .content-item .notifications {
+.notification-page
+  .content-item
+  .notifications
+  .notification-page
+  .content-item
+  .notifications {
   @apply mb-0;
 }
 .notification-setting-tab .notification-settings-items li:last-child {
@@ -621,7 +681,11 @@ input[type="text"][dir="rtl"] {
 .faq-tab .accordion-items .accordion-item:first-child .accordion-title-bar {
   padding-top: 0;
 }
-.faq-tab .accordion-items .accordion-item:last-child .accordion-body .accordion-body-content {
+.faq-tab
+  .accordion-items
+  .accordion-item:last-child
+  .accordion-body
+  .accordion-body-content {
   padding-bottom: 20px;
 }
 .faq-tab .accordion-title-bar {
@@ -665,14 +729,15 @@ input[type="text"][dir="rtl"] {
 }
 
 @media print {
-  body .modal-com{
+  body .modal-com {
     height: 100%;
     overflow: hidden;
   }
-  .job-action-modal-body button, .message-modal-header button {
+  .job-action-modal-body button,
+  .message-modal-header button {
     display: none;
   }
-  .message-modal-wrapper .message-table{
+  .message-modal-wrapper .message-table {
     height: 100%;
     overflow-y: hidden;
   }
@@ -839,30 +904,40 @@ TODO: Responsive ===========================
   }
 }
 
-
 /* LoginPage */
-.main-wrapper.login-wrapper{
-  background-image: url('./assets/images/login-dots.jpg');
+.main-wrapper.login-wrapper {
+  background-image: url("./assets/images/login-dots.jpg");
   background-attachment: fixed;
   background-size: contain;
   background-position-y: bottom;
   background-repeat: no-repeat;
-
 }
 
-.layout-wrapper.login{
-  background: rgb(236,237,241);
-  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+.layout-wrapper.login {
+  background: rgb(236, 237, 241);
+  background: linear-gradient(
+    90deg,
+    rgba(236, 237, 241, 1) 0%,
+    rgba(252, 252, 252, 1) 31%,
+    rgba(255, 255, 255, 0.9416141456582633) 41%,
+    rgba(255, 255, 255, 0.9752275910364145) 61%,
+    rgba(252, 252, 252, 1) 71%,
+    rgba(236, 237, 241, 1) 100%
+  );
   font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
   font-weight: 400;
   font-size: 1.125rem;
   line-height: 1.56;
 }
 
-.content-wrapper.login{
-  --bg-color: 255,255,255;
-  background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
-
+.content-wrapper.login {
+  --bg-color: 255, 255, 255;
+  background: linear-gradient(
+    90deg,
+    rgba(236, 237, 240, 1) 0%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(236, 237, 240, 1) 100%
+  );
 }
 
 .content-wrapper select {
@@ -880,51 +955,68 @@ TODO: Responsive ===========================
 }
 
 /* Update table scrollbar */
-.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track,
+.update-table::-webkit-scrollbar-track,
+.update-table > *::-webkit-scrollbar-track,
 .market-pop::-webkit-scrollbar-track,
-.wallet.coupon::-webkit-scrollbar-track{
+.wallet.coupon::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
   background-color: transparent;
   border-radius: 10px;
 }
 
-.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar,
+.update-table::-webkit-scrollbar,
+.update-table > *::-webkit-scrollbar,
 .market-pop::-webkit-scrollbar,
 .wallet.coupon::-webkit-scrollbar {
   width: 10px;
   background-color: transparent;
 }
 
-.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb, .wallet.coupon::-webkit-scrollbar-thumb {
+.update-table::-webkit-scrollbar-thumb,
+.update-table > *::-webkit-scrollbar-thumb,
+.wallet.coupon::-webkit-scrollbar-thumb {
   border-radius: 10px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   background-color: #fff;
-  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+  background: linear-gradient(
+    134.38deg,
+    #f539f8 0%,
+    #c342f9 43.55%,
+    #5356fb 104.51%
+  );
 }
 
 .market-pop::-webkit-scrollbar-thumb {
   border-radius: 100px;
-  
+
   /* background-color: #fafafa; */
   /* background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); */
-  background: rgb(236,237,241);
-  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+  background: rgb(236, 237, 241);
+  background: linear-gradient(
+    90deg,
+    rgba(236, 237, 241, 1) 0%,
+    rgba(252, 252, 252, 1) 31%,
+    rgba(255, 255, 255, 0.9416141456582633) 41%,
+    rgba(255, 255, 255, 0.9752275910364145) 61%,
+    rgba(252, 252, 252, 1) 71%,
+    rgba(236, 237, 241, 1) 100%
+  );
 }
 
-.input-curve.lg{
+.input-curve.lg {
   border-radius: 35px !important;
 }
 
-.edit-popup{
+.edit-popup {
   top: 75px;
 }
 
-.job-popup{
+.job-popup {
   top: 55px;
 }
 
-.addJob-popup{
+.addJob-popup {
   top: 30px;
   height: 55rem !important;
 }
@@ -952,10 +1044,10 @@ TODO: Responsive ===========================
 }
 
 /* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */
-.slider-left .slick-slider .slick-track{
+.slider-left .slick-slider .slick-track {
   margin: 0;
 }
 
-.assign-task-popup{
+.assign-task-popup {
   top: 75px;
-}
+}

src/services/UsersService.js

@@ -1064,6 +1064,19 @@ class usersService {
     return this.postAuxEnd("/blogdata", postData);
   }
 
+
+    // FUNCTION TO CANCEL TASK OR SEND REMINDER BY FAMILY MEMBER
+    suggestStatus(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 22026,
+        ...reqData,
+      };
+      return this.postAuxEnd("/suggeststatus", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/ManageActiveJobs.jsx

@@ -1,31 +1,37 @@
-import React, { useState, useEffect } from "react";
-import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
+import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
 import usersService from "../services/UsersService";
 
+/**
+ * This code defines a React functional component called `ManageActiveJobs`.
+ * It fetches a list of active job messages and renders the `ActiveJobs` component with the necessary props.
+ */
 function ManageActiveJobs() {
   const ApiCall = new usersService();
 
-  let navigate = useNavigate();
-  let { state } = useLocation();
+  const navigate = useNavigate();
+  const { state } = useLocation();
 
-  let [details, setDetails] = useState({}); // to hold state values
+  const [details, setDetails] = useState({});
 
-  let [activeJobMesList, setActiveJobMesList] = useState({
+  const [activeJobMesList, setActiveJobMesList] = useState({
     loading: true,
     error: false,
     data: [],
   });
 
-  let [activeJobMesListReload, setActiveJobMesListReload] = useState(false); // state to determine when ACTIVE JOB MESSAGE LIST RELOADS/RE-RENDERS
+  const [activeJobMesListReload, setActiveJobMesListReload] = useState(false);
 
+  /**
+   * Fetches the active job message list.
+   */
   const getActiveJobMesList = () => {
-    // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
     setActiveJobMesList({ loading: true, error: false, data: [] });
-    let contract = { contract: state.contract };
+    const contract = { contract: state.contract };
     ApiCall.activeJobMesList(contract)
       .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        if (res.status !== 200 || res.data.internal_return < 0) {
           setActiveJobMesList({ loading: false, error: false, data: [] });
           return;
         }

src/views/MyReviewDueJobsPage.jsx

@@ -1,31 +1,36 @@
-import React, { useContext,useState, useEffect } from "react";
-import usersService from "../services/UsersService";
-import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs";
+import usersService from "../services/UsersService";
 
+/**
+ * React component that fetches a list of review due jobs and renders the `MyReviewDueJobs` component with the fetched data.
+ */
 export default function MyReviewDueJobsPage() {
-    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
-    const [MyJobList, setMyJobList] = useState([]);
-    const api = new usersService();
-    const getMyJobList = async () => {
-        try {
-            const res = await api.getMyReviewDueJobList();
-            setMyJobList(res.data);
-        } catch (error) {
-            console.log("Error getting mode");
-        }
-    };
-    useEffect(() => {
-        getMyJobList();
-    }, []);
+  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
+  const [myJobList, setMyJobList] = useState([]);
 
-    // debugger;
-    return (
-        <>
-            <MyReviewDueJobs
-                MyJobList={MyJobList}
-                commonHeadData={commonHeadBanner.result_list}
-            />
-        </>
-    );
+  useEffect(() => {
+    const api = new usersService();
+
+    const getMyJobList = async () => {
+      try {
+        const res = await api.getMyReviewDueJobList();
+        setMyJobList(res.data);
+      } catch (error) {
+        console.log("Error getting mode");
+      }
+    };
+
+    getMyJobList();
+  }, []);
+
+  return (
+    <>
+      <MyReviewDueJobs
+        myJobList={myJobList}
+        commonHeadData={commonHeadBanner.result_list}
+      />
+    </>
+  );
 }