assign job rounded select tag

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:

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/Contexts/SocketIOContext.js

@@ -1,12 +1,14 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from "react-redux";
+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); 
@@ -30,11 +32,35 @@ export default function SocketIOContextProvider({children}) {
         }
     };
 
+    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 = {
@@ -42,6 +68,8 @@ export default function SocketIOContextProvider({children}) {
         sendMessage,
         joinRoom,
         setSocketMsgReceived,
+        marketUpdate,
+        parentAssignJobToKid,
         socketMsgReceived,
         // room,
         // setRoom,

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,5 +1,5 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import { tableReload } from "../../../store/TableReloads";
@@ -8,9 +8,9 @@ import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
+import { SocketValues } from "../../Contexts/SocketIOContext";
 
-const AssignTaskPopout = React.memo(
+const AssignTaskPopout = ({
-  ({
   action,
   details,
   situation,
@@ -20,16 +20,21 @@ const AssignTaskPopout = React.memo(
   setActiveTask,
   setUpdatePage,
   assignTaskChecker,
+  
 }) => {
+  const {parentAssignJobToKid} = SocketValues()
   const apiCall = new usersService();
   let { pathname, state } = useLocation();
 
-    const [selectedFamilyUid, setSelectedFamilyUid] = useState(null);
+  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"));
@@ -73,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
@@ -147,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,
       };
     }
 
@@ -160,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({
@@ -182,45 +214,56 @@ const AssignTaskPopout = React.memo(
           status: false,
           message: "An Error occured, try again",
         });
+
         setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
         }, 5000);
       });
   };
 
-    console.log(details);
+  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 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 flex items-center">
-                <>
+              {details ? (
-                  Assign task to{" "}
+                ` Assign ${details?.firstname}'s Task`
-                  {pathname === "/acc-family/activities" ? (
+              ) : familyDetailsData ? (
-                    <div className="w-[270px] h-[40px] ml-2">
+                ` 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="text-black/70 bg-transparent px-2 transition-all cursor-pointer focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
+                      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="" disabled selected>
+                      <option value="" className="">
-                          Select a member
+                        Select a kid
                       </option>
                       {familyList}
                     </select>
                   </div>
-                  ) : (
+                </div>
-                    <>{familyDetailsData?.firstname || details?.firstName}</>
               )}
-                </>
             </h1>
             <button
               type="button"
-                className="text-[#374557] dark:text-red-500"
+              className="text-[#000] dark:text-red-500"
               onClick={action}
             >
               <svg
@@ -288,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"
@@ -343,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">
@@ -356,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
@@ -415,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}
@@ -427,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}
@@ -436,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>
@@ -457,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/FamilyTableNew.jsx

@@ -94,6 +94,7 @@ export default function FamilyTableNew() {
         image_link={details.familyWaitList.link}
         familyData={details.familyWaitList.data}
         loader={details.familyWaitList.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Pending: (
@@ -213,6 +214,8 @@ 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`}
@@ -277,6 +280,7 @@ export default function FamilyTableNew() {
           setActiveTask={setActiveTask}
           activeTask={activeTask}
           setUpdatePage={setUpdatePage}
+          // updateFamilyPendingTable={updateFamilyPendingTable}
           pathname={pathname}
           assignTaskChecker={assignTaskChecker}
         />

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -10,6 +10,7 @@ const FamilyNewWaitlist = ({
   className,
   accountDetails,
   loader,
+  setUpdatePage
 }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
   const [continueTaskPopup, setContinueTaskPopup] = useState({
@@ -143,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/FamilyPopup/SuggestTask.jsx

@@ -84,9 +84,9 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
 
   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">
             {isManageFamilyPage
               ? `${state?.firstname}'s Suggested Task`
               : isActivitiesPage
@@ -131,12 +131,12 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
         >
           {(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`,
                       }}
@@ -144,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" ||
@@ -155,6 +155,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                             : "px-6"
                         }
                         label="Title"
+                        labalClass="text-[1.125rem]"
                         labelClass="tracking-wide"
                         inputBg={
                           pathname === "/manage-family" ||
@@ -178,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>
                           )}
@@ -197,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"
@@ -211,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>
@@ -229,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
@@ -238,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)}
@@ -250,7 +251,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                                     : title === "Duplicate"
                                     ? "text-purple"
                                     : "text-black"
-                                } font-semibold`}
+                                } font-semibold text-[1.125rem]`}
                               >
                                 {title}
                               </span>
@@ -262,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"

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,17 +13,17 @@ 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(data[0].code)
+  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)
@@ -33,21 +33,26 @@ export default function FamilyWalletBox({ wallet, payment }) {
   ? `${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">
+                  <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} 
@@ -58,13 +63,14 @@ export default function FamilyWalletBox({ wallet, payment }) {
                       </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"
@@ -76,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(() => {
@@ -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

@@ -10,6 +10,8 @@ const initialState = {
   uploadsTable: false,
   familyBannersListTable: false,
   chatMessageList: false,
+  marketTableList: false,
+  familyOfferList: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -45,6 +47,12 @@ export const tableReloadSlice = createSlice({
         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 />;
 }