removed quick links on family login

.env

@@ -117,4 +117,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'

.env.development

@@ -85,4 +85,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'

.env.production

@@ -91,4 +91,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://media.wrenchboard.com '
+REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'

src/components/FamilyAcc/FamilyManageTabs.jsx

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

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -5,7 +5,7 @@ import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
 
 export default function AssignPrevNewTask({
-    familyTask,
+    jobList,
     requestStatus,
     assignFamilyTask,
     taskType,
@@ -25,7 +25,7 @@ export default function AssignPrevNewTask({
 
   return (
     <>
-         {familyTask?.loading ? (
+         {jobList?.loading ? (
               <div className="h-[30rem] w-full flex justify-center items-center">
                 <LoadingSpinner color="sky-blue" size="16" />
               </div>
@@ -64,8 +64,8 @@ export default function AssignPrevNewTask({
                     {/* Task Type === select */}
                     {taskType == "select" && (
                       <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-                        {familyTask?.data?.length ? (
+                        {jobList?.data?.length ? (
-                          familyTask?.data?.map((item, index) => (
+                          jobList?.data?.map((item, index) => (
                             <div
                               key={item.job_uid}
                               className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
@@ -108,7 +108,7 @@ export default function AssignPrevNewTask({
                   {/*Right Hand Side for details && Task Type === select */}
                   {taskType == "select" && (
                     <>
-                      {familyTask?.data?.length > 0 ? (
+                      {jobList?.data?.length > 0 ? (
                         <div className="p-4 pt-0 h-full">
                           <div className="w-full">
                             <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

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

src/components/FamilyAcc/FamilyTableNew.jsx

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

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

@@ -3,7 +3,7 @@ import QRCode from "react-qr-code";
 import { useSelector } from "react-redux";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
+const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
   const { userDetails } = useSelector((state) => state.userDetails);
   return (
     <div
@@ -16,13 +16,13 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Username:{" "}
               <span className="ml-2 normal-case">
-                {familyData?.username ? familyData?.username : "please wait..."}
+                {familyData?.data?.username ? familyData?.data?.username : "please wait..."}
               </span>
             </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Pin:{" "}
               <span className="ml-2 normal-case">
-                {familyData?.pin ? familyData?.pin : "please wait..."}
+                {familyData?.data?.pin ? familyData?.data?.pin : "please wait..."}
               </span>
             </h2>
           </div>
@@ -35,7 +35,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
             <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
               Scan the code from mobile app
             </p>
-            {loader ?
+            {familyData.loading ?
             <div className="w-full">
               <LoadingSpinner size='8' color='sky-blue' />
             </div>
@@ -44,7 +44,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
               size={256}
               style={{ height: "auto", maxWidth: "100%", width: "100%" }}
               // value={`https://www.google.com`}
-              value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
+              value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
               viewBox={`0 0 256 256`}
             />
             }

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -2,13 +2,14 @@ import { useMemo, useState } from "react";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-export default function FamilyPending({ familyData, image_link, loader }) {
+export default function FamilyPending({ familyData }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   let filteredFamilyData = useMemo(
-    () => familyData?.filter((data) => data.family_uid !== ""),
+    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
-    [familyData]
+    [familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -25,13 +26,18 @@ export default function FamilyPending({ familyData, image_link, loader }) {
     handlePagingFunc(e, setCurrentPage);
   };
 
-  console.log(image_link);
 
   return (
     <div
       className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px]`}
     >
-      {familyData && (
+      {familyData.loading ? 
+      (<div className="w-full h-full flex justify-center items-center">
+        <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+      </div>
+      ):
+      <>
+      {familyData?.data?.result_list && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
@@ -45,7 +51,7 @@ export default function FamilyPending({ familyData, image_link, loader }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${image_link}${localStorage.getItem(
+                      let image = `${familyData?.data?.session_image_server}${localStorage.getItem(
                         "session_token"
                       )}/job/${value.job_uid}`;
                       return (
@@ -137,7 +143,8 @@ export default function FamilyPending({ familyData, image_link, loader }) {
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
-
+      </>
+      }
       {/* Active Job Popout */}
       {jobPopout.show && (
         <PendingJobsPopout

src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx

@@ -9,17 +9,15 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyNewTasks({
   familyData,
   className,
-  loader,
   action,
-  image_link,
 }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
   // ...
   let filteredFamilyData = useMemo(
-    () => familyData?.filter((data) => data.family_uid !== ""),
+    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
-    [familyData]
+    [familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -36,22 +34,22 @@ export default function FamilyNewTasks({
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
-        familyData?.length <= 0 && "flex items-center justify-center"
+        familyData?.data?.result_list?.length <= 0 && "flex items-center justify-center"
       }`}
     >
-      {loader ? (
+      {familyData.loading ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+        <div className="w-full h-full flex justify-center items-center">
-          <LoadingSpinner size={16} color="sky-blue" />
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && (
+          {familyData?.data?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
                   {
                     <>
-                      {familyData?.length <= 0 ? (
+                      {familyData?.data?.result_list?.length <= 0 ? (
                         <tr>
                           <td
                             colSpan="2"
@@ -76,7 +74,7 @@ export default function FamilyNewTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${image_link}${localStorage.getItem(
+                          let image = `${familyData?.data?.result_list}${localStorage.getItem(
                             "session_token"
                           )}/job/${value.job_uid}`;
                           return (

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -8,8 +8,6 @@ import Icons from "../../Helpers/Icons";
 const FamilyNewWaitlist = ({
   familyData,
   className,
-  accountDetails,
-  loader,
   setUpdatePage
 }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
@@ -22,7 +20,7 @@ const FamilyNewWaitlist = ({
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
   const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = familyData?.slice(
+  const currentTask = familyData?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -53,13 +51,13 @@ const FamilyNewWaitlist = ({
         className || ""
       }`}
     >
-      {loader ? (
+      {familyData.loading ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+        <div className="w-full h-full flex justify-center items-center">
-          <LoadingSpinner size={16} color="sky-blue" />
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && (
+          {familyData?.data?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
@@ -69,7 +67,7 @@ const FamilyNewWaitlist = ({
                       value?.banner || "default.jpg"
                     }`);
                     // console.log("VALUE", value);
-                    // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                    // let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                     return (
                       <tr
                         className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
@@ -121,8 +119,8 @@ const FamilyNewWaitlist = ({
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= familyData?.length}
+                next={currentPage + itemsPerPage >= familyData?.data?.result_list?.length}
-                data={familyData}
+                data={familyData?.data?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -3,6 +3,7 @@ import localImgLoad from "../../../lib/localImgLoad";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 export default function FamilyPending({
   familyData,
@@ -15,10 +16,10 @@ export default function FamilyPending({
 
   let filteredFamilyData = useMemo(
     () =>
-      familyData?.result_list?.filter(
+      familyData?.data?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [accountDetails?.family_uid, familyData?.result_list]
+    [accountDetails?.family_uid, familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -41,6 +42,12 @@ export default function FamilyPending({
         className || ""
       }`}
     >
+      {familyData.loading ? 
+      (<div className="w-full h-full flex justify-center items-center">
+        <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+      </div>
+      ):
+      <>
       {filteredFamilyData && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -55,7 +62,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -145,6 +152,8 @@ export default function FamilyPending({
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
+      </>
+      }
 
       {/* Active Job Popout */}
       {jobPopout.show && (

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

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

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -5,7 +5,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
 const FamilyWaitlist = memo(
-  ({ familyData, className, accountDetails, loader, setUpdatePage }) => {
+  ({ familyData, className, accountDetails, setUpdatePage }) => {
     const [popUp, setPopUp] = useState({ show: false, data: {} });
     const [continueTaskPopup, setContinueTaskPopup] = useState({
       show: false,
@@ -13,10 +13,10 @@ const FamilyWaitlist = memo(
     });
     const filteredFamilyData = useMemo(
       () =>
-        familyData?.result_list?.filter(
+        familyData?.data?.result_list?.filter(
           (data) => data?.family_uid === accountDetails?.family_uid
         ),
-      [familyData, accountDetails]
+      [familyData.data, accountDetails]
     );
 
     const [currentPage, setCurrentPage] = useState(0);
@@ -52,9 +52,9 @@ const FamilyWaitlist = memo(
           className || ""
         }`}
       >
-        {loader ? (
+        {familyData.loading ? (
-          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+          <div className="w-full h-full flex justify-center items-center">
-            <LoadingSpinner size={16} color="sky-blue" />
+            <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
           </div>
         ) : (
           <>
@@ -67,8 +67,7 @@ const FamilyWaitlist = memo(
                       const selectedImage = require(`../../../assets/images/family/${
                         value?.banner || "default.jpg"
                       }`);
-                      console.log('VALUE', value)
+                      // let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
-                      // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -17,8 +17,6 @@ function FamilyWallet({familyData}) {
     setFamilyWallet({loading:true, data: []})
     apiUrl.getKidWallets({family_uid:familyData?.uid}).then(res => {
       setFamilyWallet({loading:false, data: res?.data?.result_list || []})
-      console.log('familyData', familyData, res?.data?.result_list)
-
     }).catch(error => {
       setFamilyWallet({loading:false, data: []})
     })

src/components/FamilyPopup/SuggestTask.jsx

@@ -80,8 +80,6 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     }
   };
 
-  console.log(details);
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper lw-[90%] md:w-[48rem] min-h-[500px] bg-white dark:bg-dark-white lg:rounded-2xl">

src/components/ImageCon/ImageElement.jsx

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

src/components/MyActiveJobs/ActiveJobMessageMedia.jsx

@@ -8,7 +8,7 @@ import SelectBox from "../Helpers/SelectBox";
 export default function ActiveJobMessageMedia({ activeJobMesList }) {
   return (
     <div className='flex flex-col justify-between'>
-        <div className="w-full h-full min-h-[200px] max-h-[200px] overflow-y-auto">
+        <div className="w-full h-full min-h-[250px] max-h-[250px] overflow-y-auto">
             <table className="wallet-activity w-full table-auto border-collapse text-left">
                 <thead className='border-b-2'>
                     <tr className='text-slate-600'>

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -312,21 +312,23 @@ function ActiveJobsMedia(props) {
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             
             <div className="mb-4 w-full h-auto">
-                <VideoElement videoId={''} />
+                <VideoElement videoId={props?.details?.media_uid} />
             </div>
 
             <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2">
-                <div className="w-full">
+                <div className="w-full flex flex-col justify-between">
-                    <p className="w-full text-base text-right text-sky-blue">
+                    <div className="w-full">
-                    {props?.details && props.details.job_to}
+                        <p className="w-full text-base text-right text-sky-blue">
-                    </p>
+                        {props?.details && props.details.job_to}
-                    <div className="text-base text-slate-700 dark:text-white tracking-wide">
+                        </p>
-                    <p className="font-semibold text-black dark:text-white">
+                        <div className="text-base text-slate-700 dark:text-white tracking-wide">
-                        Description:{" "}
+                            <p className="font-semibold text-black dark:text-white">
-                    </p>
+                                Description:{" "}
-                    <p className="p-2 border border-sky-blue">
+                            </p>
-                        {props?.details && props.details.description}
+                            <p className="p-2 border border-sky-blue">
-                    </p>
+                                {props?.details && props.details.description}
+                            </p>
+                        </div>
                     </div>
                     <div className="my-2">
                         <IndexJobActions details={props.details} />
@@ -395,15 +397,15 @@ function ActiveJobsMedia(props) {
             </div>
             </div>
 
-            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1">
+            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
                 {/* TEXTAREA SECTION */}
-                <div className="mb-5">
+                <div className="w-full mb-3">
                     <div className="w-full">
                         <div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3">
                             <button
                                 name="message"
                                 onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 py-1 rounded-t-2xl ${
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
                                 tab == "message"
                                     ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                                     : "bg-white text-[#000] border-t-[2px]"
@@ -414,7 +416,7 @@ function ActiveJobsMedia(props) {
                             <button
                                 name="files"
                                 onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 py-1 rounded-t-2xl ${
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
                                 tab == "files"
                                     ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                                     : "bg-white text-[#000] border-t-[2px]"
@@ -438,7 +440,7 @@ function ActiveJobsMedia(props) {
                             <div className="files">
                             <label
                                 htmlFor="file"
-                                className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
+                                className="custom-btn btn-gradient text-base text-white"
                             >
                                 Select Files to Upload
                             </label>
@@ -450,7 +452,7 @@ function ActiveJobsMedia(props) {
                                 onChange={handleFileChange}
                             />
                             </div>
-                            <div className="selected_file my-2">
+                            <div className="selected_file my-2 overflow-y-auto">
                             {filesToSend.length > 0 &&
                                 filesToSend.map((item, index) => (
                                 <p key={index} className="flex items-center space-x-2">
@@ -492,52 +494,52 @@ function ActiveJobsMedia(props) {
                     {/* End of error or success display */}
 
                     {/* Buttons Sections */}
-                    <div className="py-2 sm:flex sm:justify-end sm:items-center">
+                    <div className="py-1 sm:flex sm:justify-end sm:items-center">
-                        <div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
+                        <div className="w-full flex justify-center items-center gap-4">
-                        <button
-                            type="button"
-                            onClick={handleClearAll}
-                            className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
-                        >
-                            <span className="text-gradient">Clear</span>
-                        </button>
-                        {tab == "files" ? (
                             <button
-                            onClick={sendFile}
+                                type="button"
-                            type="button"
+                                onClick={handleClearAll}
-                            className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
+                                className="custom-btn border-gradient"
                             >
-                            {requestStatus.loading ? (
+                                <span className="text-gradient">Clear</span>
-                                <LoadingSpinner size="6" color="sky-blue" />
+                            </button>
-                            ) : (
+                            {tab == "files" ? (
-                                <>
+                                <button
-                                <svg
+                                onClick={sendFile}
-                                    xmlns="http://www.w3.org/2000/svg"
+                                type="button"
-                                    viewBox="0 0 24 24"
+                                className="custom-btn btn-gradient text-white"
-                                    width="24"
-                                    height="24"
-                                    fill="white"
                                 >
-                                    <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
+                                {requestStatus.loading ? (
-                                </svg>
+                                    <LoadingSpinner size="6" color="sky-blue" />
+                                ) : (
+                                    <>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 24 24"
+                                        width="20"
+                                        height="20"
+                                        fill="white"
+                                    >
+                                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
+                                    </svg>
 
-                                <span className="text-white">Upload Files</span>
+                                    <span className="text-white">Upload Files</span>
-                                </>
+                                    </>
-                            )}
+                                )}
-                            </button>
+                                </button>
-                        ) : (
-                            <button
-                            onClick={sendTaskMessage}
-                            type="button"
-                            className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
-                            >
-                            {requestStatus.loading ? (
-                                <LoadingSpinner size="6" color="sky-blue" />
                             ) : (
-                                <span className="text-white">Send</span>
+                                <button
+                                onClick={sendTaskMessage}
+                                type="button"
+                                className="custom-btn btn-gradient text-white"
+                                >
+                                {requestStatus.loading ? (
+                                    <LoadingSpinner size="6" color="sky-blue" />
+                                ) : (
+                                    <span className="text-white">Send</span>
+                                )}
+                                </button>
                             )}
-                            </button>
-                        )}
                         </div>
                     </div>
                     {/* end of Buttons Sections  */}
@@ -618,13 +620,13 @@ const PopModal = ({
         ref={myRef}
         className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
       >
-        <div className="message-modal-header 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">
+        <div className="modal-header-con">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+          <h1 className="modal-title">
             {details?.contract}
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={popUpHandler}
           >
             <svg
@@ -708,14 +710,14 @@ const PopModal = ({
               <button
                 onClick={handlePrint}
                 type="button"
-                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                className="custom-btn btn-gradient text-white"
               >
                 <span className="text-white">Print</span>
               </button>
               <button
                 onClick={popUpHandler}
                 type="button"
-                className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                className="custom-btn border-gradient text-white"
               >
                 <span className="text-gradient">Cancel</span>
               </button>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -60,20 +60,30 @@ function CurrentTaskAction({jobDetails}) {
     }
 
   return (
-    <div className='job-action  dark:bg-black'>
+    <div className='dark:bg-black'>
-
-          <div className="w-full text-sm text-left text-gray-500 active-worker ">
-            <div className="flex space-x-2 items-center w-full task_action_panel">
-                <div>
-                    I completed this task and ready for review and acceptance.
-                </div>
-            </div>
 
+          <div className="w-full text-sm text-left text-gray-500">
+            {jobDetails.job_type == 'MEDIA' ?
             <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
-                    Send for Review
+                    I have completed this task
                 </button>
             </div>
+            :
+            <div className='job-action active-worker'>
+                <div className="flex space-x-2 items-center w-full task_action_panel">
+                    <div>
+                        I completed this task and ready for review and acceptance.
+                    </div>
+                </div>
+
+                <div className="flex justify-center items-center">
+                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                        Send for Review
+                    </button>
+                </div>
+            </div>
+            }
           </div>
 
           {popUp && (

src/components/Partials/Layout.jsx

@@ -10,6 +10,8 @@ import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
 
 export default function Layout({ children }) {
+  const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS FOR USER Details
+
   const { drawer } = useSelector((state) => state.drawer);
   const { userJobList } = useSelector((state) => state.userJobList);
   const dispatch = useDispatch();
@@ -52,7 +54,7 @@ export default function Layout({ children }) {
 
   return (
     <>
-      <div className="nft-main-wrapper-layout">
+      <div className="nft-main-wrapper-layout w-full mx-auto">
         <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
           {/* sidebar */}
           <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
@@ -72,12 +74,14 @@ 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%] w-full">
+              <div className="flex-[80%] w-full">
                 {children && children}
               </div>
+              {userDetails.account_type == 'FULL' &&
               <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
                 <RightSideBar myJobList={userJobList} />
               </div>
+              }
             </div>
           </div>
         </div>

src/components/VideoCom/VideoElement.jsx

@@ -14,7 +14,7 @@ export default function VideoElement({videoId}) {
 
   return (
     <video ref={videoRef} className='w-full h-full' controls>
-      <source src={`https://dev-media.wrenchboard.com/videos/${videoId}`} type='video/mp4'></source>
+      <source src={`${process.env.REACT_APP_MEDIA_LINK}/videos/${videoId}`} type='video/mp4'></source>
       Your browser does not support the video tag.
   </video>
   )

src/components/jobPopout/FamilyOfferJobPopout.jsx

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

src/views/ManageActiveJobs.jsx

@@ -61,22 +61,24 @@ function ManageActiveJobs() {
     setDetails(state);
     getActiveJobMesList();
   }, [activeJobMesListReload, chatMessageList]);
-console.log('Opps', details)
+
   return (
     <>
-    {/* {details.job_type == 'TASK' ? */}
+    {details.job_type == 'MEDIA' ?
-    <ActiveJobs
-      details={state}
-      activeJobMesList={activeJobMesList}
-      reloadActiveJobList={setActiveJobMesListReload}
-    />
-    {/* :
     <ActiveJobsMedia
       details={state}
       activeJobMesList={activeJobMesList}
       reloadActiveJobList={setActiveJobMesListReload}
     />
-    } */}
+    : details.job_type == 'TASK' ?
+    <ActiveJobs 
+      details={state}
+      activeJobMesList={activeJobMesList}
+      reloadActiveJobList={setActiveJobMesListReload}
+    />
+    :
+    null
+    }
     </>
   );
 }