assign job rounded select tag

.env

@@ -15,6 +15,9 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
+
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000

.env.development

@@ -15,6 +15,9 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"
+
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000

.env.production

@@ -15,6 +15,9 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
 
+#SOCKETS ENDS
+REACT_APP_PRIMARY_SOCKET="https://socket.wrenchboard.com"
+
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000

docker-compose.yml

@@ -21,9 +21,10 @@ services:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
       - apigate.lotus.g1.wrenchboard.com:10.10.33.15
+      - apigate.nebula.g1.wrenchboard.com:10.10.33.15
       - apigate.orion.g1.wrenchboard.com:10.10.33.15
-      # #- backend.wrenchboard.api.live:172.31.4.27
+      - socket-dev.wrenchboard.com:10.10.33.15
-      # #- backend.wrenchboard.api.test:10.20.30.27
+      - socket.wrenchboard.com:10.10.33.15
       - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:

package.json

@@ -30,6 +30,7 @@
     "react-to-print": "^2.14.12",
     "react-toastify": "^9.0.1",
     "redux": "^4.2.0",
+    "socket.io-client": "^4.4.1",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^1.0.1",
     "yup": "^1.1.1"

src/App.jsx

@@ -2,11 +2,13 @@ import { Navigate, useLocation } from "react-router-dom";
 import Routers from "./Routers";
 import Toaster from "./components/Helpers/Toaster";
 import Default from "./components/Partials/Default";
+import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 
 function App() {
   const { pathname } = useLocation();
   return (
     <Default>
+      <SocketIOContextProvider>
         <>
           {pathname.startsWith("/@") ? (
             <Navigate to="/app" replace={true} />
@@ -15,6 +17,7 @@ function App() {
           )}
           <Toaster />
         </>
+      </SocketIOContextProvider>
     </Default>
   );
 }

src/components/AuthPages/Login/index2.jsx

@@ -145,8 +145,9 @@ export default function Login() {
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
-        if (name === "family") {
+        if (res.data?.account_type == "FAMILY") {
           sessionStorage.setItem("family_uid", res.data?.family_uid);
+          sessionStorage.setItem("parent_uid", res.data?.parent_uid);
         }
         // localStorage.setItem("session", `${res.data.session}`);
         dispatch(updateUserDetails({ ...res.data }));

src/components/Breadcrumb/CustomBreadcrumb.jsx

@@ -1,22 +1,25 @@
-import React from 'react'
+import React from "react";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
 
 export default function CustomBreadcrumb({ title, breadcrumb }) {
   return (
     <div className="">
-        <h3 className="text-26 font-bold text-dark-gray dark:text-white">{title}</h3>
+      <h3 className="text-26 font-bold text-dark-gray dark:text-white">
-        <nav aria-label="breadcrumb" className='text-base text-dark-gray dark:text-white flex items-center'>
+        {title}
+      </h3>
+      <nav
+        aria-label="breadcrumb"
+        className="text-base text-dark-gray dark:text-white flex items-center"
+      >
         {breadcrumb.map((value, index) => (
-                <p key={index}>
+          <React.Fragment key={index}>
-                    <Link className={`${value.active ? 'opacity-60' : ''}`} to={value.link}>{value.title}</Link>
+            <Link className={value.active ? "opacity-60" : ""} to={value.link}>
-                    {index != breadcrumb.length - 1 ?
+              {value.title}
-                    <span className='px-1'>/</span>
+            </Link>
-                    :
+            {index !== breadcrumb.length - 1 && <span className="px-1">\</span>}
-                    null
+          </React.Fragment>
-                    }
-                </p>
         ))}
       </nav>
     </div>
-  )
+  );
 }

src/components/Contexts/SocketIOContext.js

@@ -0,0 +1,90 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch, useSelector } from "react-redux";
+
+import io from "socket.io-client";
+
+let SocketIOContext = createContext({})
+
+export default function SocketIOContextProvider({children}) {
+    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER UID, to determine if user is active
+
+    const dispatch = useDispatch()
+
+    const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
+
+    // //Room State
+    // const [room, setRoom] = useState("");
+
+    // // Messages States
+    // const [message, setMessage] = useState("");
+    const [socketMsgReceived, setSocketMsgReceived] = useState("");
+
+    const joinRoom = (room) => {
+        if (room !== "") {
+        socket.emit("join_room", room);
+        }
+    };
+
+    const sendMessage = (message, room) => {
+        if(message && room){
+            socket.emit("send_message", { message, room });
+        }
+    };
+
+    const marketUpdate = (message, room) => {
+        if(message && room){
+            socket.emit("marketjob_addded", { message, room });
+        }
+    };
+
+    const parentAssignJobToKid = (message, room) => {
+        if(message && room){
+            socket.emit("family", { message:{...message}, room });
+        }
+    };
+
+    useEffect(() => {
+        socket.on("receive_message", (data) => {
+            // setSocketMsgReceived(data.message);
+            dispatch(tableReload({type:'CHATMESSAGELIST'}))
+        });
+        socket.on("received_refreshmarket_jobs", (data) => {
+            // setSocketMsgReceived(data.message);
+            dispatch(tableReload({type:'MARKETTABLELIST'}))
+        });
+        socket.on("family_actions", (data) => {
+            // setSocketMsgReceived(data.message);
+            let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid')
+            let {message} = data
+            if(message.action == "REFRESH_OFFER" && message.family_uid == user_uid && message.audience == "MEMBER"){
+                dispatch(tableReload({type:'FAMILYOFFERLIST'}))
+            }
+        });
+    }, [socket]);
+
+    let values = {
+        socket,
+        sendMessage,
+        joinRoom,
+        setSocketMsgReceived,
+        marketUpdate,
+        parentAssignJobToKid,
+        socketMsgReceived,
+        // room,
+        // setRoom,
+        // message,
+        // setMessage,
+    }
+
+  return (
+    <SocketIOContext.Provider value={values}>
+        {children}
+    </SocketIOContext.Provider>
+  )
+}
+
+
+export const SocketValues = () => {
+    return useContext(SocketIOContext)
+}

src/components/FamilyAcc/FamilyActivities.jsx

@@ -1,16 +1,11 @@
-import React, { Suspense, useMemo, useState } from "react";
+import React, { Suspense } from "react";
 import { Link } from "react-router-dom";
-import usersService from "../../services/UsersService";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyTableNew from "./FamilyTableNew";
 
 export default function FamilyActivities() {
-  const [familyList, setFamilyList] = useState({});
-  const [loader, setLoader] = useState(false);
-
-  const apiCall = useMemo(() => new usersService(), []);
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -19,11 +14,26 @@ export default function FamilyActivities() {
           {/* heading */}
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
-              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+              <CustomBreadcrumb
-                <span className={``}>Tasks & Chores</span>
+                title={"Tasks & Chores"}
-              </h1>
+                breadcrumb={[
+                  { link: "/", title: "Home" },
+                  {
+                    link: "/acc-family",
+                    title: "Family Account",
+                  },
+                  {
+                    link: "/acc-family/activities",
+                    title: "Tasks & Chores",
+                    active: true,
+                  },
+                ]}
+              />
             </div>
-            <Link className="item-content relative text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]" to="/acc-family">
+            <Link
+              className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+              to="/acc-family"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -43,11 +53,7 @@ export default function FamilyActivities() {
             </Link>
           </div>
           <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
-            <FamilyTableNew
+            <FamilyTableNew />
-              familyList={familyList?.result_list}
-              loader={loader}
-              imageServer={familyList?.session_image_server}
-            />
           </Suspense>
         </div>
       </div>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -187,6 +187,7 @@ export default function FamilyManageTabs({
         familyData={details.familyWaitList.data}
         accountDetails={accountDetails}
         loader={details.familyWaitList.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (

src/components/FamilyAcc/FamilyPendingOffer.jsx

@@ -4,26 +4,27 @@ import MyOffersFamilyTable from '../MyTasks/MyOffersFamilyTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 import usersService from '../../services/UsersService';
 import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb';
+import { useSelector } from 'react-redux';
 
 export default function FamilyPendingOffer() {
     const userApi = new usersService();
 
+    const {familyOfferList} = useSelector((state) => state.tableReload)
+
     const [myOffersList, setMyOffersList] = useState({loading: true, data: []});
 
     const getMyOffersList = async () => {
         try {
             const res = await userApi.getOffersList();
             setMyOffersList({loading:false, data:res.data});
-            console.log('SAME', res.data)
         } catch (error) {
             setMyOffersList({loading:false, data:[]});
-            console.log("Error getting offers", error);
         }
     };
 
     useEffect(()=>{
         getMyOffersList()
-    },[])
+    },[familyOfferList])
     return (
         <Layout>
             {myOffersList.loading ?

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,15 +1,16 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
 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";
-import { tableReload } from "../../../store/TableReloads";
+import { SocketValues } from "../../Contexts/SocketIOContext";
-import { useDispatch } from "react-redux";
 
-const AssignTaskPopout = React.memo(
+const AssignTaskPopout = ({
-  ({
   action,
   details,
   situation,
@@ -17,11 +18,32 @@ const AssignTaskPopout = React.memo(
   familyTask,
   activeTask,
   setActiveTask,
-    setUpdatePage
+  setUpdatePage,
-  }) => {
+  assignTaskChecker,
-    const apiCall = new usersService();
   
-    const dispatch = useDispatch()
+}) => {
+  const {parentAssignJobToKid} = SocketValues()
+  const apiCall = new usersService();
+  let { pathname, state } = useLocation();
+
+  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+  const [selectedFamilyUid, setSelectedFamilyUid] = useState('');
+
+  const handleFamChange = (event) => {
+    setSelectedFamilyUid(event.target.value);
+  };
+
+
+  const dispatch = useDispatch();
+
+  const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
+
+  const familyList = getFamilySession?.map((member) => (
+    <option key={member?.family_uid} value={member?.family_uid}>
+      {member?.firstname} {member?.lastname}
+    </option>
+  ));
 
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -56,6 +78,14 @@ const AssignTaskPopout = React.memo(
 
   const assignFamilyTask = () => {
     setRequestStatus({ loading: true, status: false, message: "" });
+
+    if(!selectedFamilyUid){ // If no family found, throw error
+      setRequestStatus({ loading: false, status: false, message: "Please Select Family Member" });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
+    }
+
     let reqData = {};
     if (taskType == "select") {
       // RUNS HERE IF TASK TYPE IS SELECT
@@ -73,7 +103,9 @@ const AssignTaskPopout = React.memo(
         // API PAYLOADS
         job_id: activeTask.data?.job_id,
         job_uid: activeTask.data?.job_uid,
-          family_uid: familyDetailsData?.uid || details?.family_uid,
+        family_uid: selectedFamilyUid
+          ? selectedFamilyUid
+          : familyDetailsData?.uid || details?.family_uid,
         job_description: activeTask.data?.description,
         assign_mode: 110011,
       };
@@ -96,7 +128,7 @@ const AssignTaskPopout = React.memo(
         // category,
         currency: country,
         description,
-          'job detail':job_detail,
+        "job detail": job_detail,
         price,
         timeline: timeline_days,
         title,
@@ -108,7 +140,9 @@ const AssignTaskPopout = React.memo(
           setRequestStatus({
             loading: false,
             status: false,
-              message: `${field[0].toUpperCase()+field.slice(1).toLowerCase()} is empty`,
+            message: `${
+              field[0].toUpperCase() + field.slice(1).toLowerCase()
+            } is empty`,
           });
           return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
@@ -126,7 +160,9 @@ const AssignTaskPopout = React.memo(
         timeline_days,
         title,
         assign_mode: 110055,
-          family_uid: details?.family_uid || familyDetailsData?.uid,
+        family_uid: selectedFamilyUid
+        ? selectedFamilyUid
+        : familyDetailsData?.uid || details?.family_uid,
       };
     }
 
@@ -139,21 +175,38 @@ const AssignTaskPopout = React.memo(
             status: false,
             message: "failed to assign task",
           });
+
           return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
         }
+        if (res.status === 200) {
+
           setRequestStatus({
             loading: false,
             status: true,
             message: "action successful",
           });
-          setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
+
+          setUpdatePage(prev => !prev); // Updates family task page by calling the useeffect hook
+
           dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
+
+          //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+          // message, room
+          let socketMsg = {
+            "audience": "MEMBER",
+            "action": "REFRESH_OFFER",
+            "family_uid": reqData.family_uid,
+          }
+          let socketRoom = `FAMILY-${userDetails.uid}`
+          parentAssignJobToKid(socketMsg, socketRoom) //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX
           }, 5000);
+        }
       })
       .catch((err) => {
         setRequestStatus({
@@ -161,27 +214,56 @@ const AssignTaskPopout = React.memo(
           status: false,
           message: "An Error occured, try again",
         });
+
         setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
       });
   };
 
+  useEffect(()=>{ // effect to update family UID when components mounts
+    if(familyDetailsData?.uid){
+      setSelectedFamilyUid(familyDetailsData?.uid)
+    }else if(details?.family_uid){
+      setSelectedFamilyUid(details?.family_uid)
+    }else{
+      setSelectedFamilyUid('')
+    }
+  },[])
+
   return (
     <>
-        <ModalCom
+      <ModalCom action={action} situation={situation}>
-          action={action}
-          situation={situation}
-        >
         <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-            <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">
+          <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29]  border-light-purple">
-              <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
-                Assign task to{" "}
+              {details ? (
-                {familyDetailsData?.firstname || details?.firstName}
+                ` Assign ${details?.firstname}'s Task`
+              ) : familyDetailsData ? (
+                ` Assign ${familyDetailsData.firstname}'s Task`
+              ) : (
+                <div className="flex items-center gap-2">
+                  <span className="text-black">Assign task to{" "}</span>
+                  <div className="w-[270px] h-[40px] flex items-center relative after:absolute after:content-['▼'] active:after:rotate-180 after:transition-all after:duration-300 after:z-20 after:right-2 after:top-1/2 after:-translate-y-1/2 after:text-white after:text-lg">
+                    <select
+                      name=""
+                      id=""
+                      className="relative z-10 appearance-none text-lg text-white px-2 tracking-wide font-semibold transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-full w-full h-full"
+                      onChange={handleFamChange}
+                      value={selectedFamilyUid}
+                    >
+                      <option value="" className="">
+                        Select a kid
+                      </option>
+                      {familyList}
+                    </select>
+                  </div>
+                </div>
+              )}
             </h1>
             <button
               type="button"
-                className="text-[#374557] dark:text-red-500"
+              className="text-[#000] dark:text-red-500"
               onClick={action}
             >
               <svg
@@ -249,9 +331,7 @@ const AssignTaskPopout = React.memo(
                           <div
                             key={item.job_uid}
                             className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                              onClick={() =>
+                            onClick={() => handleActiveTask(item.job_uid, item)}
-                                handleActiveTask(item.job_uid, item)
-                              }
                           >
                             <input
                               type="radio"
@@ -304,7 +384,7 @@ const AssignTaskPopout = React.memo(
                           </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">
+                              <label className="job-label">
                                 Price
                               </label>
                               <p className="p-1 text-sm text-slate-900 dark:text-white">
@@ -317,22 +397,23 @@ const AssignTaskPopout = React.memo(
                             </div>
 
                             <div className="my-3 w-full flex items-center gap-1">
-                                <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                              <label className="job-label">
                                 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">
+                          {/* Dummy, no value found for created! thus commented*/}
+                          {/* <div className="my-3 sm:flex items-center">
                             <Detail
                               label="Created"
                               value={`Dummy, no value found for created!`}
                             />
-                            </div>
+                          </div> */}
 
                           <div className="my-3">
-                              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                            <label className="w-full job-label">
                               Delivery Detail
                             </label>
                             <textarea
@@ -376,7 +457,7 @@ const AssignTaskPopout = React.memo(
                 </div>
 
                 {/* End of error or success display */}
-                  <div className="w-auto h-auto flex items-center gap-3">
+                <div className="w-auto h-auto flex items-center gap-20">
                   <button
                     disabled={requestStatus.loading}
                     onClick={action}
@@ -388,7 +469,7 @@ const AssignTaskPopout = React.memo(
                   <div className="">
                     {requestStatus.loading ? (
                       <LoadingSpinner color="sky-blue" size="8" />
-                      ) : taskType == "select" ? (
+                    ) : (
                       <button
                         type="button"
                         disabled={requestStatus.loading}
@@ -397,18 +478,22 @@ const AssignTaskPopout = React.memo(
                       >
                         Assign
                       </button>
-                      ) : (
+                    ) 
-                        <button
+                    // : (
-                          type="button"
+                    //   <button
-                          disabled={requestStatus.loading}
+                    //     type="button"
-                          onClick={assignFamilyTask}
+                    //     disabled={requestStatus.loading}
-                          className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                    //     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
+                    //     {details
-                          }`}
+                    //       ? `Assign task to ${details?.firstname}`
-                        </button>
+                    //       : familyDetailsData
-                      )}
+                    //       ? `Assign task to ${familyDetailsData.firstname}`
+                    //       : "Assign"}
+                    //   </button>
+                    // )
+                    }
                   </div>
                 </div>
               </div>
@@ -418,7 +503,6 @@ const AssignTaskPopout = React.memo(
       </ModalCom>
     </>
   );
-  }
+};
-);
 
 export default AssignTaskPopout;

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -56,7 +56,7 @@ export default function NewTasks({ formState, setFormState }) {
           <div className="field w-full mb-6 xl:mb-0">
             <label
               htmlFor="country"
-              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+              className="job-label"
             >
               Currency
               {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
@@ -98,10 +98,11 @@ export default function NewTasks({ formState, setFormState }) {
 
           {/* Price */}
           <div className="field w-full">
+            <label htmlFor="price" className="job-label">Price</label>
             <InputCom
               fieldClass="px-6 text-right"
-              label="Price"
+              // label="Price"
-              labelClass="tracking-wide"
+              // labelClass="tracking-wide"
               inputBg="bg-slate-100"
               type="number"
               name="price"
@@ -117,7 +118,7 @@ export default function NewTasks({ formState, setFormState }) {
           <div className="field w-full mb-6 xl:mb-0">
             <label
               htmlFor="timeline_days"
-              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+              className="job-label"
             >
               Timeline
               {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
@@ -151,10 +152,11 @@ export default function NewTasks({ formState, setFormState }) {
 
         {/* Title  */}
         <div className="field w-full mb-[5px]">
+          <label htmlFor="title" className="job-label">Title</label>
           <InputCom
             fieldClass="px-6"
-            label="Title"
+            // label="Title"
-            labelClass="tracking-wide"
+            // labelClass="tracking-wide"
             inputBg="bg-slate-100"
             type="text"
             name="title"
@@ -167,10 +169,11 @@ export default function NewTasks({ formState, setFormState }) {
 
         {/* Description  */}
         <div className="field w-full mb-[5px]">
+          <label htmlFor="description" className="job-label">Description</label>
           <InputCom
             fieldClass="px-6"
-            label="Description"
+            // label="Description"
-            labelClass="tracking-wide"
+            // labelClass="tracking-wide"
             inputBg="bg-slate-100"
             type="text"
             name="description"
@@ -186,7 +189,7 @@ export default function NewTasks({ formState, setFormState }) {
           <div className="w-full">
             <label
               htmlFor="Job Delivery Details"
-              className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+              className='job-label'
             >
               Job Delivery Details
               {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
+import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
 import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
-  let {state} = useLocation()
+  let { state } = useLocation();
   const tabs = [
     {
       id: 1,
@@ -58,15 +59,42 @@ const FamilySettings = () => {
           {/* heading */}
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
-              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+              <CustomBreadcrumb
-                <span className={``}>Family Settings</span>
+                title={"Family Settings"}
-              </h1>
+                breadcrumb={[
+                  { link: "/", title: "Home" },
+                  {
+                    link: "/acc-family",
+                    title: "Family Account",
+                  },
+                  {
+                    link: "/familysettings",
+                    title: "Family Settings",
+                    active: true,
+                  },
+                ]}
+              />
             </div>
-            <Link to="/acc-family" className="flex gap-2 items-center text-dark-gray dark:text-white">
+            <Link
-              <svg className="w-5 h-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+              className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
+              to="/acc-family"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-4 h-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+                />
               </svg>
-              Family
+
+              <span>Family</span>
             </Link>
           </div>
 

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -1,4 +1,5 @@
 import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { apiConst } from "../../lib/apiConst";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -9,17 +10,18 @@ const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
 const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
 const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
-export default function FamilyTableNew({
+export default function FamilyTableNew() {
-  className,
+  let { pathname } = useLocation();
-  accountDetails,
+
-  listReload,
-  loader,
-}) {
   // Initial state for family details
   const initialDetailState = {
     loading: false,
     data: null,
+    link: "",
   };
+
+  const [assignTaskChecker, setAssignTaskChecker] = useState(false);
+
   // console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
@@ -80,23 +82,25 @@ export default function FamilyTableNew({
   const tabComponents = {
     Tasks: (
       <FamilyTasks
-        className={className}
+        image_link={details.familyTasks.link}
-        loader={details.familyTasks.loading || false}
+        loader={details.familyTasks.loading}
         familyData={details.familyTasks.data}
-        accountDetails={accountDetails}
+        action={familyPopUpHandler}
+        setAssignTaskChecker={setAssignTaskChecker}
       />
     ),
     Waiting: (
       <FamilyWaitlist
+        image_link={details.familyWaitList.link}
         familyData={details.familyWaitList.data}
-        accountDetails={accountDetails}
         loader={details.familyWaitList.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
       <FamilyPending
+        image_link={details.familyPending.link}
         familyData={details.familyPending.data}
-        accountDetails={accountDetails}
         loader={details.familyPending.loading}
       />
     ),
@@ -122,45 +126,47 @@ export default function FamilyTableNew({
         //   const { family_uid } = accountDetails;
         //   const reqData = { family_uid };
 
-        const [familyTasksData, restOfFamilyData] = await Promise.all([
+        const [familyTasksData, familyWaitingRes, familyPendingRes] =
-          apiCall.getMyActiveTaskList(),
+          await Promise.all([
+            apiCall.getMyActiveJobList(),
             apiCall.ManageFamilyNewWaitlist(),
+            apiCall.ManageFamilyPending(),
           ]);
 
         let tasksData = familyTasksData?.data?.result_list;
-        let familyData = restOfFamilyData?.data?.result_list;
+        let _familyWaitData = familyWaitingRes?.data?.result_list;
+        let familyPendingData = familyPendingRes?.data?.result_list;
 
-        //   const familyData = familyRes.data;
+        // Getting the image server link
-        //   const tasksData = tasksRes.data;
+        let imageServerLink = familyWaitingRes.data?.session_image_server;
-
-        let familyWaitingData = familyData?.filter(
-          (item) => item.status_text === "Waiting"
-        );
-        let familyPendingData = familyData?.filter(
-          (item) => item.status_text !== "Waiting"
-        );
-
-        console.log({
-          Waitings: familyWaitingData,
-          Pending: familyPendingData,
-          Tasks: tasksData,
-        });
 
         // Function to check for errors in data
         const checkDataError = (data) => data?.internal_return < 0;
 
         if (
           checkDataError(tasksData) ||
-          checkDataError(familyWaitingData) ||
+          checkDataError(_familyWaitData) ||
           checkDataError(familyPendingData)
         ) {
           return;
         }
 
         setDetails({
-          familyTasks: { loading: false, data: tasksData },
+          familyTasks: {
-          familyWaitList: { loading: false, data: familyWaitingData },
+            loading: false,
-          familyPending: { loading: false, data: familyPendingData },
+            data: tasksData,
+            link: imageServerLink,
+          },
+          familyWaitList: {
+            loading: false,
+            data: _familyWaitData,
+            link: imageServerLink,
+          },
+          familyPending: {
+            loading: false,
+            data: familyPendingData,
+            link: imageServerLink,
+          },
         });
       } catch (error) {
         resetDetails();
@@ -208,11 +214,11 @@ export default function FamilyTableNew({
     };
   }, []);
 
+  // console.log(updatePage);
+
   return (
     <div
-      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full`}
-        className || ""
-      }`}
     >
       <div className="relative w-full sm:rounded-lg overflow-x-auto">
         <Suspense
@@ -273,8 +279,10 @@ export default function FamilyTableNew({
           setFamilyTask={setFamilyTask}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
-          //   familyDetailsData={details.familyDetails.data}
           setUpdatePage={setUpdatePage}
+          // updateFamilyPendingTable={updateFamilyPendingTable}
+          pathname={pathname}
+          assignTaskChecker={assignTaskChecker}
         />
       )}
     </div>

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -3,20 +3,12 @@ import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
 
-export default function FamilyPending({
+export default function FamilyPending({ familyData, image_link, loader }) {
-  familyData,
-  className,
-  accountDetails,
-  loader,
-}) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   let filteredFamilyData = useMemo(
-    () =>
+    () => familyData?.filter((data) => data.family_uid !== ""),
-      familyData?.filter(
+    [familyData]
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [accountDetails?.family_uid, familyData]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -24,7 +16,7 @@ export default function FamilyPending({
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentPendingTasks = familyData?.slice(
+  const currentPendingTasks = filteredFamilyData?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -33,12 +25,11 @@ export default function FamilyPending({
     handlePagingFunc(e, setCurrentPage);
   };
 
-  console.log(familyData);
+  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] ${
+      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px]`}
-        className || ""
-      }`}
     >
       {familyData && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
@@ -54,11 +45,9 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${
+                      let image = `${image_link}${localStorage.getItem(
-                        familyData.session_image_server
+                        "session_token"
-                      }${localStorage.getItem("session_token")}/job/${
+                      )}/job/${value.job_uid}`;
-                        value.job_uid
-                      }`;
                       return (
                         <tr
                           key={index}
@@ -111,7 +100,7 @@ export default function FamilyPending({
                             </div>
                           </td>
 
-                          <td className="text-right py-4 px-2">
+                          <td className="text-right py-4 px-2 flex justify-end items-center">
                             <button
                               type="button"
                               onClick={() => {
@@ -140,8 +129,8 @@ export default function FamilyPending({
           <PaginatedList
             onClick={handlePagination}
             prev={currentPage == 0}
-            next={currentPage + itemsPerPage >= familyData.length}
+            next={currentPage + itemsPerPage >= filteredFamilyData.length}
-            data={familyData}
+            data={filteredFamilyData}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />

src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx

@@ -10,34 +10,33 @@ export default function FamilyNewTasks({
   familyData,
   className,
   loader,
-  accountDetails,
+  action,
+  image_link,
 }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
   // ...
-  const filteredFamilyData = useMemo(
+  let filteredFamilyData = useMemo(
-    () =>
+    () => familyData?.filter((data) => data.family_uid !== ""),
-      familyData?.result_list?.filter(
+    [familyData]
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [familyData, accountDetails]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem);
+  const currentTasks = filteredFamilyData?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
   const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  console.log(familyData)
-  console.log(typeof familyData)
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
-        className || "" 
+        familyData?.length <= 0 && "flex items-center justify-center"
       }`}
     >
       {loader ? (
@@ -46,13 +45,28 @@ export default function FamilyNewTasks({
         </div>
       ) : (
         <>
-          {familyData?.length && (
+          {familyData && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
                   {
                     <>
-                      {familyData?.length > 0 ? (
+                      {familyData?.length <= 0 ? (
+                        <tr>
+                          <td
+                            colSpan="2"
+                            className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap flex items-center justify-center gap-1"
+                          >
+                            You currently have no active tasks{" "}
+                            <span
+                              className="text-blue-400 cursor-pointer hover:underline transition duration-150"
+                              onClick={action}
+                            >
+                              add new
+                            </span>
+                          </td>
+                        </tr>
+                      ) : (
                         currentTasks.map((value, index) => {
                           // find due date
                           const dueDate = value?.delivery_date.split(" ")[0];
@@ -62,11 +76,9 @@ export default function FamilyNewTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${
+                          let image = `${image_link}${localStorage.getItem(
-                            familyData.session_image_server
+                            "session_token"
-                          }${localStorage.getItem("session_token")}/job/${
+                          )}/job/${value.job_uid}`;
-                            value.job_uid
-                          }`;
                           return (
                             <tr
                               key={index}
@@ -119,7 +131,6 @@ export default function FamilyNewTasks({
                                       state: {
                                         ...value,
                                         pathname,
-                                        accountDetails,
                                       },
                                     });
                                   }}
@@ -131,15 +142,6 @@ export default function FamilyNewTasks({
                             </tr>
                           );
                         })
-                      ) : (
-                        <tr>
-                          <td
-                            colSpan="2"
-                            className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"
-                          >
-                            No Family Task
-                          </td>
-                        </tr>
                       )}
                     </>
                   }
@@ -151,11 +153,11 @@ export default function FamilyNewTasks({
                 prev={currentPage == 0 ? true : false}
                 next={
                   currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  familyData?.result_list?.length
+                  filteredFamilyData?.length
                     ? true
                     : false
                 }
-                data={familyData?.result_list}
+                data={filteredFamilyData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -3,12 +3,14 @@ import SuggestTask from "../../FamilyPopup/SuggestTask";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
+import Icons from "../../Helpers/Icons";
 
 const FamilyNewWaitlist = ({
   familyData,
   className,
   accountDetails,
   loader,
+  setUpdatePage
 }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
   const [continueTaskPopup, setContinueTaskPopup] = useState({
@@ -43,7 +45,7 @@ const FamilyNewWaitlist = ({
     setContinueTaskPopup({ show: false, data: {} });
   };
 
-  console.log("Check this >>",currentTask)
+  console.log("Check this >>",continueTaskPopup)
 
   return (
     <div
@@ -57,7 +59,7 @@ const FamilyNewWaitlist = ({
         </div>
       ) : (
         <>
-          {currentTask && (
+          {familyData && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
@@ -66,7 +68,7 @@ const FamilyNewWaitlist = ({
                     const selectedImage = require(`../../../assets/images/family/${
                       value?.banner || "default.jpg"
                     }`);
-                    console.log("VALUE", value);
+                    // console.log("VALUE", value);
                     // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                     return (
                       <tr
@@ -97,17 +99,18 @@ const FamilyNewWaitlist = ({
                                 {addedDate}
                               </p>
                               <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
-                                {value.status_text}
+                                {value.firstname}
                               </p>
                             </div>
                           </div>
                         </td>
-                        <td className="text-right py-4 px-2">
+                        <td className="text-right py-4 px-2 flex justify-end">
                           <button
                             onClick={() => openPopUp(value)}
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
-                            View
+                            {/* View */}
+                            <Icons name="right-arrow" />
                           </button>
                         </td>
                       </tr>
@@ -119,7 +122,7 @@ const FamilyNewWaitlist = ({
                 onClick={handlePagination}
                 prev={currentPage === 0}
                 next={currentPage + itemsPerPage >= familyData?.length}
-                data={currentTask}
+                data={familyData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />
@@ -141,6 +144,7 @@ const FamilyNewWaitlist = ({
           details={continueTaskPopup.data}
           action={closeContinueTaskPopup}
           situation={continueTaskPopup.show}
+          setUpdatePage={setUpdatePage}
         />
       )}
     </div>

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 }) => {
+  ({ familyData, className, accountDetails, loader, setUpdatePage }) => {
     const [popUp, setPopUp] = useState({ show: false, data: {} });
     const [continueTaskPopup, setContinueTaskPopup] = useState({
       show: false,
@@ -144,6 +144,7 @@ const FamilyWaitlist = memo(
             details={continueTaskPopup.data}
             action={closeContinueTaskPopup}
             situation={continueTaskPopup.show}
+            setUpdatePage={setUpdatePage}
           />
         )}
       </div>

src/components/FamilyAcc/index.jsx

@@ -109,6 +109,7 @@ export default function FamilyAcc() {
       if (data?.internal_return >= 0 && data?.status === "OK") {
         const { result_list, session_image_server } = data;
         setFamilyList({ result_list, session_image_server });
+        sessionStorage.setItem("family_list", JSON.stringify(result_list))
         setLoader(false);
       } else {
         return;
@@ -145,7 +146,7 @@ export default function FamilyAcc() {
                     breadcrumb={
                       [
                         { link: "/", title: "Home" },
-                        { link: "/acc-family", title: "Family-acc", active: true},
+                        { link: "/acc-family", title: "Family Account", active: true},
                       ]
                     }
                     />
@@ -165,12 +166,12 @@ export default function FamilyAcc() {
             </div>
 
             <div className="flex gap-4 items-center">
-              <Link to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]`}>
+              <Link state={familyList} to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white px-2 gap-2`}>
                 <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
                   <Icons name="pending-job" />
                 </span>
                 <span
-                  className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium dark:text-white h-12 px-2 flex items-center`}
+                  className={`item-content relative text-[18px] transition-all duration-300 ease-in-out font-medium dark:text-white h-12 flex items-center`}
                 >
                   Activities
                 </span>
@@ -178,7 +179,7 @@ export default function FamilyAcc() {
               <Link
                 to={`/familysettings`}
                 state={{ imageServer: familyList?.session_image_server }}
-                className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+                className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

src/components/FamilyPopup/SuggestTask.jsx

@@ -2,7 +2,6 @@ import { Form, Formik } from "formik";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import usersService from "../../services/UsersService";
-import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 
@@ -52,22 +51,46 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
 
   const handleParentSuggestion = (values) => {
     if (suggestedNextStep === "Send Task") {
-      let firstName = state?.firstname;
+      let firstname = state?.firstname || details?.firstname;
-      let family_uid = state?.family_uid;
+      let family_uid = state?.family_uid || details?.family_uid;
-      continuePopupData({ ...details, firstName, family_uid });
+      continuePopupData({
+        ...details,
+        firstname,
+        family_uid,
+      });
     }
     onClose();
   };
 
+  const isActivitiesPage = pathname === "/acc-family/activities";
+  const isManageFamilyPage = pathname === "/manage-family";
+
+  const getButtonText = () => {
+    if (isActivitiesPage) {
+      return suggestedNextStep === "Send Task" ? "Continue" : "Complete";
+    } else {
+      if (!isManageFamilyPage) {
+        if (submitTask.loading) return "Submitting Task";
+        if (submitTask.state === "success") return "Task Submitted";
+        if (submitTask.state === "bad") return "An Error Occurred";
+        return "Send to Parents";
+      } else {
+        return suggestedNextStep === "Send Task" ? "Continue" : "Complete";
+      }
+    }
+  };
+
+  console.log(details);
+
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper lw-[90%] md:w-[48rem] h-full lg:h-[627px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[1.875rem] py-[1.4375rem] border-b dark:border-[#5356fb29]  border-light-purple">
-          <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            {pathname === "/manage-family"
+            {isManageFamilyPage
               ? `${state?.firstname}'s Suggested Task`
-              : pathname === "/acc-family/activities"
+              : isActivitiesPage
-              ? "Suggested Task"
+              ? `${details?.firstname}'s Suggested Task`
               : "Suggest to Parent"}
           </h1>
           <button
@@ -99,20 +122,21 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
         <Formik
           initialValues={initialValues}
           onSubmit={
-            pathname !== "/manage-family" ||
+            isActivitiesPage
-            pathname !== "/acc-family/activities"
+              ? handleParentSuggestion
-              ? handleSuggestedTask
+              : isManageFamilyPage
-              : handleParentSuggestion
+              ? handleParentSuggestion
+              : handleSuggestedTask
           }
         >
           {(props) => {
             return (
-              <Form>
+              <Form className="h-[33.875rem] flex flex-col">
-                <div className="p-5 w-full bg-white rounded-md flex justify-between">
+                <div className="px-5 w-full bg-white rounded-md flex justify-between items-center h-full">
                   {/* Image Section */}
-                  <div className="p-4 w-full md:w-2/4 md:border-r-2">
+                  <div className="p-4 w-full md:w-2/4 md:border-r-2 h-full flex items-center">
                     <div
-                      className="w-full h-[236px] p-6 bg-gray-400 rounded-xl overflow-hidden"
+                      className="w-full h-[14.75rem] p-6 bg-gray-400 rounded-xl overflow-hidden"
                       style={{
                         background: `url(${selectedImage}) center / contain no-repeat`,
                       }}
@@ -120,9 +144,9 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                   </div>
 
                   {/* ACTION SECTION */}
-                  <div className="p-4 w-full md:w-2/4 h-full">
+                  <div className="p-4 w-full md:w-2/4 h-full flex flex-col justify-between">
                     {/* Title */}
-                    <div className="field w-full mb-[15px]">
+                    <div className="field w-full mb-[.9375rem]">
                       <InputCom
                         fieldClass={
                           pathname === "/manage-family" ||
@@ -131,6 +155,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                             : "px-6"
                         }
                         label="Title"
+                        labalClass="text-[1.125rem]"
                         labelClass="tracking-wide"
                         inputBg={
                           pathname === "/manage-family" ||
@@ -154,15 +179,15 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     </div>
 
                     {/* Description */}
-                    <div className="field w-full mb-[5px]">
+                    <div className="field w-full mb-[.3125rem]">
                       <label
                         htmlFor="description"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+                        className='input-label text-[#181c32] dark:text-white text-[1.125rem] leading-[1.3102rem] font-semibold flex items-center gap-1'
                       >
                         Description
                         {props.errors.description &&
                           props.touched.description && (
-                            <span className="text-[12px] text-red-500">
+                            <span className="text-[.75rem] text-red-500">
                               {props.errors.description}
                             </span>
                           )}
@@ -173,8 +198,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                         className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${
                           pathname === "/manage-family" ||
                           pathname === "/acc-family/activities"
-                            ? "px-2 h-[110px]"
+                            ? "px-2 h-[6.875rem]"
-                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]"
+                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[.625rem] h-[8.125rem]"
                         }`}
                         style={{ resize: "none" }}
                         name="description"
@@ -187,7 +212,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     {/* Radio buttons for family */}
                     {pathname === "/manage-family" ||
                     pathname === "/acc-family/activities" ? (
-                      <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
+                      <div className="h-[3.75rem] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
                         <div id="my-radio-group" className="sr-only">
                           Parent suggested next step
                         </div>
@@ -205,7 +230,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                               role="group"
                               key={idx}
                               htmlFor={`parent-suggested-${idx}`}
-                              className={`transition duration-150 ease-in-out parent-suggest group cursor-pointer`}
+                              className={`transition duration-150 ease-in-out parent-suggest group cursor-pointer flex items-center`}
                               onClick={() => setSuggestedNextStep(title)}
                             >
                               <input
@@ -214,7 +239,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                                 value={title}
                                 checked={suggestedNextStep === title}
                                 onChange={switchNextStep}
-                                className={`transition duration-150 ease-in-out parent-suggest pointer-events-none`}
+                                className={`transition duration-150 ease-in-out parent-suggest pointer-events-none w-[1.125rem] h-[1.125rem]`}
                               />
                               <span
                                 onClick={() => setSuggestedNextStep(title)}
@@ -226,7 +251,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                                     : title === "Duplicate"
                                     ? "text-purple"
                                     : "text-black"
-                                } font-semibold`}
+                                } font-semibold text-[1.125rem]`}
                               >
                                 {title}
                               </span>
@@ -238,7 +263,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                   </div>
                 </div>
 
-                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                <div className="w-full h-[4.375rem] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
                     <button
                       type="button"
@@ -252,12 +277,15 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                       disabled={props.isSubmitting}
                       className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
                     >
-                      {pathname === "/acc-family/activities" ? (
+                      {/* {pathname === "/acc-family/activities" ? (
                         <>
-                          {" "}
+                          {suggestedNextStep === "Send Task" ? (
                             <>
                               Continue <Icons name="chevron-right" />
                             </>
+                          ) : (
+                            "Complete"
+                          )}
                         </>
                       ) : (
                         <>
@@ -283,7 +311,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                             </>
                           )}
                         </>
-                      )}
+                      )} */}
+                      {getButtonText()}
                     </button>
                   </div>
                 </div>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -11,8 +11,11 @@ import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import { SocketValues } from "../Contexts/SocketIOContext";
 
 function ActiveJobs(props) {
+  let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+  
   const ApiCall = new usersService();
   const navigate = useNavigate();
 
@@ -139,6 +142,9 @@ function ActiveJobs(props) {
           status: true,
           message: "Message Sent Successfully",
         });
+        // function to trigger socket to emit 'send_message'
+        sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
+        
         props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
         setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
       })
@@ -255,6 +261,12 @@ function ActiveJobs(props) {
     props.details?.currency
   );
 
+
+  useEffect(()=>{
+    // calls function to add user to a room
+    joinRoom(`${props.details.contract}-${props.details.contract_uid}`)
+  },[props.details.contract, props.details.contract_uid])
+
   return (
     <Layout>
       <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,7 +2,7 @@ import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 import WalletItemCardFamily from "./WalletItemCardFamily";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import SearchCom from "../Helpers/SearchCom";
 import { localImgLoad } from "../../lib";
@@ -13,46 +13,64 @@ import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
  */
 export default function FamilyWalletBox({ wallet, payment }) {
-  const { loading, data } = wallet;
+  // const { loading, data } = wallet;
   
-  const { userDetails } = useSelector((state) => state.userDetails);
+  // const { userDetails } = useSelector((state) => state.userDetails);
-  const accountType = userDetails?.account_type === "FAMILY";
+  // const accountType = userDetails?.account_type === "FAMILY";
   
-  const [selectedWallet, setSelectedWallet] = useState(data[0])
+  const [selectedWallet, setSelectedWallet] = useState('')
+
+  const [activeWalletBtn, setActiveWalletBtn] = useState('')
   
   const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
-    const currentWalletSelected = data?.filter((item) => item.code === name);
+    const currentWalletSelected = wallet?.data?.filter((item) => item.code == name);
+    setSelectedWallet(currentWalletSelected[0])
+    setActiveWalletBtn(name)
+    // console.log(name, currentWalletSelected)
   }
 
   const image = selectedWallet?.code
   ? `${selectedWallet?.code.toLowerCase()}.svg`
   : "default.png";
 
+  useEffect(()=>{
+    setSelectedWallet(wallet.data[0])
+    setActiveWalletBtn(wallet?.data[0]?.code)
+  },[wallet])
 
   return (
     <div className="w-full">
-      <div className="my-wallet-wrapper w-full mb-10">
+      <div className="my-wallet-wrapper w-full">
-        <div className="main-wrapper w-full">
+        <div className="main-wrapper w-full mb-10">
-            {loading ? 
-              <div className="w-full h-full flex items-center justify-center bg-white">
-                <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
-              </div>
-
-            : data.length > 0 ?
           <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
-                  <div className="w-full mb-4 sm:mb-0">
+            <div className="w-full mb-4 sm:mb-0 rounded-2xl bg-white dark:bg-dark-white overflow-hidden">
-                    <div className="wal-selection text-black dark:text-white flex items-center gap-2">
+              {wallet?.loading ? 
-                      {data.length > 1 && data.map(item =>(
+                <div className="w-full h-full flex items-center justify-center bg-white">
-                        <button className="py-0.5 px-1 mb-1 rounded-lg border border-orange-500" key={item.wallet_uid} name={item.code}>{item.code}</button>
+                  <LoadingSpinner size="16" color="sky-blue" height='min-h-[240px]' />
+                </div>
+                : wallet?.data.length > 0 ?
+                <>
+                {wallet?.data?.length > 1 && 
+                  <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
+                    {wallet?.data?.map(item =>(
+                      <button 
+                        className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
+                        key={item?.wallet_uid} 
+                        name={item?.code}
+                        onClick={handleChangeWallet}
+                      >
+                        {item?.description}
+                      </button>
                     ))}
                   </div>
-                    <div className="p-5 rounded-2xl bg-white-opacity min-h-[240px]"
+                  }
+                  <div className="p-5 bg-white-opacity min-h-[240px]"
                       style={{
                         background: `url(${background}) 0% 0% / cover no-repeat`,
                       }}
                     >
                     {/* image */}
-                      <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[120px] max-h-min md:max-h-[120px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                    <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
                       <img
                         src={localImgLoad(`images/currency/${image}`)}
                         className="w-full h-full"
@@ -64,22 +82,23 @@ export default function FamilyWalletBox({ wallet, payment }) {
                       {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
                     </p>
                   </div>
+                </>
+                :
+                <div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">
+                  <p>No Wallet Record Found</p>
+                </div>
+              }
             </div>
               <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
                 <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
               </div>
           </div>
-            :
-            <div className="w-full h-32 flex justify-center items-center rounded-2xl bg-white">
-              <p>No Wallet Record Found</p>
-            </div>
-            }
-        </div>
         </div>
         <div className="w-full">
           <FamilyWalletRedeemOptions />
         </div>
       </div>
+    </div>
   );
 }
 

src/components/MyWallet/FamilyWalletCon.jsx

@@ -6,9 +6,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
 
-const FamilyWallet = () => {
+const FamilyWalletCon = () => {
   const apiCall = new usersService();
-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+  // const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
 
   const [paymentHistory, setPaymentHistory] = useState({
@@ -16,6 +16,20 @@ const FamilyWallet = () => {
     data: [],
   });
 
+  const [familyWalletBal, setFamilyWalletBal] = useState({
+    loading: true,
+    data: []
+  });
+
+  const getFamilyWalletBal = () => {
+    setFamilyWalletBal({loading:true, data: []})
+    apiCall.getFamilyWallet({family_uid: localStorage.getItem("uid")}).then(res => {
+      setFamilyWalletBal({loading:false, data: res?.data?.result_list})
+    }).catch(error => {
+      setFamilyWalletBal({loading:false, data: []})
+    })
+  };
+
   const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
@@ -24,6 +38,7 @@ const FamilyWallet = () => {
           setPaymentHistory({ loading: false, data: [] });
         } else {
           setPaymentHistory({ loading: false, data: res.data?.result_list });
+          // console.log('Hist', res.data?.result_list)
         }
       })
       .catch(() => {
@@ -33,6 +48,7 @@ const FamilyWallet = () => {
 
   useEffect(() => {
     getPaymentHistory();
+    getFamilyWalletBal()
   }, [walletTable]);
 
   return (
@@ -48,9 +64,13 @@ const FamilyWallet = () => {
             }
         />
       </div>
-      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
+      <Suspense fallback={
+        <div className="bg-white rounded-2xl">
+          <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
+        </div>
+      }>
         <FamilyWalletBox
-          wallet={walletDetails}
+          wallet={familyWalletBal}
           payment={paymentHistory}
         />
       </Suspense>
@@ -58,4 +78,4 @@ const FamilyWallet = () => {
   );
 };
 
-export default FamilyWallet;
+export default FamilyWalletCon;

src/components/MyWallet/FamilyWalletRedeemOptions.jsx

@@ -45,7 +45,7 @@ export default function FamilyWalletRedeemOptions() {
             <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
                 <LoadingSpinner size='10' color='sky-blue' height='h-[30rem]' />
             </div>
-            : Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
+            : familyWalletRedeemOptList?.data && Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
                 Object.keys(filteredRedeemData?.data)?.length ?
                     <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
                         { Object.keys(filteredRedeemData?.data)?.map((item)=>{

src/components/Partials/Layout.jsx

@@ -20,10 +20,7 @@ export default function Layout({ children }) {
   };
   const navigate = useNavigate();
   const logOut = () => {
-    localStorage.removeItem("session_token");
+    sessionStorage.clear();
-    localStorage.removeItem("member_id");
-    localStorage.removeItem("uid");
-    sessionStorage.removeItem("family_uid");
     localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,

src/components/jobPopout/JobListPopout.jsx

@@ -8,6 +8,7 @@ import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import { SocketValues } from "../Contexts/SocketIOContext";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -29,6 +30,9 @@ function JobListPopout({
   openWallet,
   setWalletItem,
 }) {
+
+  let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
   const [selectedTab, setSelectedTab] = useState("public");
   const tabs = ["public", "individual", "group"];
 
@@ -201,7 +205,9 @@ function JobListPopout({
           setRequestStatus({ message: "", status: false });
         }, 3000);
       }
-      dispatch(tableReload({ type: "JOBTABLE" }));
+      marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists
+      dispatch(tableReload({ type: "JOBTABLE" }));  // reloads my job page
+      dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page
       setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true });
       setTimeout(() => {
         setLoader({ jobFields: false });
@@ -224,6 +230,12 @@ function JobListPopout({
     members: [],
   });
 
+  const DetailsSection = ({ label, value }) => (
+    <div className="my-3 md:flex">
+      <Detail label={label} value={value} />
+    </div>
+  );
+
   // FUNCTION TO POPULATE USER GROUP LIST
   useEffect(() => {
     // setGroupList({loading: true, groups: [], members: []})
@@ -250,12 +262,6 @@ function JobListPopout({
       });
   }, []);
 
-  const DetailsSection = ({ label, value }) => (
-    <div className="my-3 md:flex">
-      <Detail label={label} value={value} />
-    </div>
-  );
-
   const DetailsComponent = () => {
     const detailsArray = [
       { label: "Description", value: details.description },

src/components/jobPopout/popoutcomponent/Detail.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 function Detail({label, value, bg,}) {
   return (
     <>
-        <label className='w-full md:w-1/4 text-slate-900 dark:text-white tracking-wide font-semibold'>{label}</label>
+        <label className='job-label w-full md:w-1/4'>{label}</label>
         <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white ${bg ? bg : null}`}>{value}</p>
     </>
   )

src/index.css

@@ -152,6 +152,12 @@
   --toastify-color-success: #f539f8;
 }
 
+@layer components{
+  .job-label{
+    @apply text-slate-900 dark:text-white tracking-wide font-semibold
+  }
+}
+
 /* =====================  EXTRA ===================== */
 .bottomMargin {
   margin-bottom: 15px;

src/middleware/AuthRoute.jsx

@@ -14,8 +14,12 @@ import { updateWalletDetails } from "../store/walletDetails";
 import { familyBannersList } from "../store/FamilyBannerList";
 import { familyResources } from "../store/FamilyResources";
 import {familyWalletRedeemOptList} from '../store/FamilyWalletRedeemOpt'
+import { SocketValues } from "../components/Contexts/SocketIOContext";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
+
+  let {joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
   const apiCall = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
@@ -23,12 +27,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable, familyBannersListTable } = useSelector(
+  const { jobListTable, marketTableList, walletTable, familyBannersListTable } = useSelector(
     (state) => state.tableReload
   );
 
   const {
-    userDetails: { username, uid, session, account_type },
+    userDetails: { username, uid, session, account_type, parent_uid },
   } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
   let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
@@ -36,10 +40,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
     const expireSession = () => {
-      localStorage.removeItem("uid");
+      sessionStorage.clear();
-      localStorage.removeItem("member_id");
-      localStorage.removeItem("session_token");
-      sessionStorage.removeItem("family_uid");
       localStorage.clear();
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
@@ -105,6 +106,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
           });
       };
       loadProfile();
+    }else{
+      setIsLogin({ loading: false, status: true });
     }
   }, []);
 
@@ -189,6 +192,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [jobListTable, isLogin.status]);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     const getMyWalletList = async () => {
       dispatch(updateWalletDetails({ loading: true, data: [] }));
       try {
@@ -203,7 +209,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMyWalletList();
-  }, [walletTable]);
+  }, [walletTable, isLogin.status]);
 
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
@@ -219,7 +225,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch, jobListTable, isLogin.status]);
+  }, [apiCall, dispatch, marketTableList, isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
@@ -229,7 +235,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       apiCall
         .getHeroJBanners()
         .then((res) => {
-          if (res.data.internal_return < 0) {
+          if (res.data?.internal_return < 0) {
             return;
           }
           dispatch(commonHeadBanner(res.data));
@@ -241,6 +247,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     apiCall
       .getRecentActivitiedData()
       .then((res) => {
@@ -253,7 +262,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       .catch((error) => {
         console.log("ERROR ", error);
       });
-  }, []);
+  }, [isLogin.status]);
 
 
   //FUNCTION TO GET FAMILY BANNERS
@@ -309,6 +318,16 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     familyWalletRedeemOptions()
   }, [isLogin.status]);
 
+  useEffect(()=>{ // sends an event to the socket to enable user join a room to be able to receive update when jobs enters the market
+      joinRoom('full-markets-jobs')
+  },[isLogin.status])
+
+  useEffect(()=>{ // sends an event to the socket to enable user join a room to be able to receive update for parent child job assign
+    if(loggedIn || isLogin.status){
+      joinRoom(`FAMILY-${account_type == 'FULL' ? uid : sessionStorage.getItem('parent_uid')}`)
+      console.log(`Room joined for parent child task assign as ${account_type} with ${account_type == 'FULL' ? uid : sessionStorage.getItem('parent_uid')}}`)
+    }
+  },[isLogin.status])
 
   // RENDER PAGE
   return isLogin.loading && !loggedIn ? (

src/store/TableReloads.js

@@ -9,6 +9,9 @@ const initialState = {
   walletTable: false,
   uploadsTable: false,
   familyBannersListTable: false,
+  chatMessageList: false,
+  marketTableList: false,
+  familyOfferList: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -41,6 +44,15 @@ export const tableReloadSlice = createSlice({
         case "FAMILYBANNERSLIST":
           state.familyBannersListTable = !state.familyBannersListTable;
           return;
+        case "CHATMESSAGELIST":
+          state.chatMessageList = !state.chatMessageList;
+          return;
+        case "MARKETTABLELIST":
+          state.marketTableList = !state.marketTableList;
+          return;
+        case "FAMILYOFFERLIST":
+          state.familyOfferList = !state.familyOfferList;
+          return;
         default:
           return state;
       }

src/views/FamilyWalletPage.jsx

@@ -1,5 +1,5 @@
-import FamilyWallet from "../components/MyWallet/FamilyWallet";
+import FamilyWalletCon from "../components/MyWallet/FamilyWalletCon";
 
 export default function FamilyWalletPage() {
-  return <FamilyWallet />;
+  return <FamilyWalletCon />;
 }

src/views/ManageActiveJobs.jsx

@@ -2,12 +2,17 @@ import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
 import usersService from "../services/UsersService";
+import { useSelector } from "react-redux";
 
 /**
  * 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 { chatMessageList } = useSelector(
+    (state) => state.tableReload
+  );
+
   const ApiCall = new usersService();
 
   const navigate = useNavigate();
@@ -54,7 +59,7 @@ function ManageActiveJobs() {
     }
     setDetails(state);
     getActiveJobMesList();
-  }, [activeJobMesListReload]);
+  }, [activeJobMesListReload, chatMessageList]);
 
   return (
     <ActiveJobs