Merge master into socket-context

.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

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,19 +2,22 @@ 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} />
+          {pathname.startsWith("/@") ? (
-        ) : (
+            <Navigate to="/app" replace={true} />
-          <Routers />
+          ) : (
-        )}
+            <Routers />
-        <Toaster />
+          )}
-      </>
+          <Toaster />
+        </>
+      </SocketIOContextProvider>
     </Default>
   );
 }

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}) {
+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}
-            {breadcrumb.map((value, index) => (
+      </h3>
-                <p key={index}>
+      <nav
-                    <Link className={`${value.active ? 'opacity-60' : ''}`} to={value.link}>{value.title}</Link>
+        aria-label="breadcrumb"
-                    {index != breadcrumb.length - 1 ?
+        className="text-base text-dark-gray dark:text-white flex items-center"
-                    <span className='px-1'>/</span>
+      >
-                    :
+        {breadcrumb.map((value, index) => (
-                    null
+          <React.Fragment key={index}>
-                    }
+            <Link className={value.active ? "opacity-60" : ""} to={value.link}>
-                </p>
+              {value.title}
-            ))}
+            </Link>
-        </nav>
+            {index !== breadcrumb.length - 1 && <span className="px-1">\</span>}
+          </React.Fragment>
+        ))}
+      </nav>
     </div>
-  )
+  );
 }

src/components/Contexts/SocketIOContext.js

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
+
+import io from "socket.io-client";
+
+let SocketIOContext = createContext({})
+
+export default function SocketIOContextProvider({children}) {
+    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 });
+        }
+    };
+
+    useEffect(() => {
+        socket.on("receive_message", (data) => {
+            // setSocketMsgReceived(data.message);
+            dispatch(tableReload({type:'CHATMESSAGELIST'}))
+        });
+    }, [socket]);
+
+    let values = {
+        socket,
+        sendMessage,
+        joinRoom,
+        setSocketMsgReceived,
+        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/FamilyPopout/AssignTaskPopout.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
+import { useDispatch } 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 { useDispatch } from "react-redux";
 
 const AssignTaskPopout = React.memo(
   ({
@@ -17,11 +18,27 @@ const AssignTaskPopout = React.memo(
     familyTask,
     activeTask,
     setActiveTask,
-    setUpdatePage
+    setUpdatePage,
+    assignTaskChecker,
   }) => {
     const apiCall = new usersService();
+    let { pathname, state } = useLocation();
 
-    const dispatch = useDispatch()
+    const [selectedFamilyUid, setSelectedFamilyUid] = useState(null);
+
+    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,
@@ -73,7 +90,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,
         };
@@ -94,11 +113,11 @@ const AssignTaskPopout = React.memo(
         const requiredFields = {
           banner,
           // category,
-          currency:country,
+          currency: country,
           description,
-          'job detail':job_detail,
+          "job detail": job_detail,
           price,
-          timeline:timeline_days,
+          timeline: timeline_days,
           title,
         };
 
@@ -108,7 +127,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: "" });
@@ -148,7 +169,7 @@ const AssignTaskPopout = React.memo(
             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
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
@@ -167,17 +188,35 @@ const AssignTaskPopout = React.memo(
         });
     };
 
+    console.log(details);
+
     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">
-              <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{" "}
+                <>
-                {familyDetailsData?.firstname || details?.firstName}
+                  Assign task to{" "}
+                  {pathname === "/acc-family/activities" ? (
+                    <div className="w-[270px] h-[40px] ml-2">
+                      <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"
+                        onChange={handleFamChange}
+                        value={selectedFamilyUid}
+                      >
+                        <option value="" disabled selected>
+                          Select a member
+                        </option>
+                        {familyList}
+                      </select>
+                    </div>
+                  ) : (
+                    <>{familyDetailsData?.firstname || details?.firstName}</>
+                  )}
+                </>
               </h1>
               <button
                 type="button"

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,24 @@ 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}
       />
     ),
     Pending: (
       <FamilyPending
+        image_link={details.familyPending.link}
         familyData={details.familyPending.data}
-        accountDetails={accountDetails}
         loader={details.familyPending.loading}
       />
     ),
@@ -122,45 +125,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.ManageFamilyNewWaitlist(),
+            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();
@@ -210,9 +215,7 @@ export default function FamilyTableNew({
 
   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 +276,9 @@ export default function FamilyTableNew({
           setFamilyTask={setFamilyTask}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
-          //   familyDetailsData={details.familyDetails.data}
           setUpdatePage={setUpdatePage}
+          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,6 +3,7 @@ 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,
@@ -43,7 +44,7 @@ const FamilyNewWaitlist = ({
     setContinueTaskPopup({ show: false, data: {} });
   };
 
-  console.log("Check this >>",currentTask)
+  console.log("Check this >>",continueTaskPopup)
 
   return (
     <div
@@ -57,7 +58,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 +67,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 +98,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 +121,7 @@ const FamilyNewWaitlist = ({
                 onClick={handlePagination}
                 prev={currentPage === 0}
                 next={currentPage + itemsPerPage >= familyData?.length}
-                data={currentTask}
+                data={familyData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

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-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] 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">
-            {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,10 +122,11 @@ 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) => {
@@ -252,12 +276,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" />
+                              Continue <Icons name="chevron-right" />
-                          </>
+                            </>
+                          ) : (
+                            "Complete"
+                          )}
                         </>
                       ) : (
                         <>
@@ -283,7 +310,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

@@ -20,8 +20,13 @@ export default function FamilyWalletBox({ wallet, payment }) {
   
   const [selectedWallet, setSelectedWallet] = useState(data[0])
 
+  const [activeWalletBtn, setActiveWalletBtn] = useState(data[0].code)
+  
   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 = data?.filter((item) => item.code == name);
+    setSelectedWallet(currentWalletSelected[0])
+    setActiveWalletBtn(name)
+    // console.log(name, currentWalletSelected)
   }
 
   const image = selectedWallet?.code
@@ -43,7 +48,14 @@ export default function FamilyWalletBox({ wallet, payment }) {
                   <div className="w-full mb-4 sm:mb-0">
                     <div className="wal-selection text-black dark:text-white flex items-center gap-2">
                       {data.length > 1 && data.map(item =>(
-                        <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>
+                        <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]"

src/middleware/AuthRoute.jsx

@@ -229,7 +229,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));

src/store/TableReloads.js

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

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