fixed relative list

src/assets/images/icons/job_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 28" viewBox="0 0 32 28" id="List"><circle cx="2" cy="2" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M8 0h24v4H8z" class="color4e4e50 svgShape"></path><circle cx="10" cy="10" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 8h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="10" cy="26" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 24h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="18" cy="18" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M24 16h8v4h-8z" class="color4e4e50 svgShape"></path></svg>

src/assets/images/icons/job_group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Group" x="0" y="0" version="1.1" viewBox="0 0 52 52" xml:space="preserve"><path d="M26.003 13.05c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43zM11.293 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.43 1.99-4.43 4.44 0 2.44 1.98 4.43 4.43 4.43z" fill="#4687ba" class="color000000 svgShape"></path><path d="M49.493 41.93a10.091 10.091 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.58 6.392 6.392 0 0 1-4.371-1.737.975.975 0 0 0-.158-.258l-9.184-9.903V22.1h4.344c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.09 10.09 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.579 6.43 6.43 0 0 1-5.144-2.58 10.085 10.085 0 0 0-3.645 3.74c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h4.346v6.624c-.01.022-.016.044-.025.066l-9.22 9.941a.978.978 0 0 0-.22.42 6.378 6.378 0 0 1-4.242 1.62 6.417 6.417 0 0 1-5.14-2.584 10.086 10.086 0 0 0-3.65 3.743c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.03 10.03 0 0 0-2.134-2.612l8.01-8.636 8.055 8.685c-.815.73-1.53 1.58-2.08 2.563-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95z" fill="#4687ba" class="color000000 svgShape"></path><path d="M40.713 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/job_list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" id="List"><switch><g fill="#767fad" class="color000000 svgShape"><g fill="#4687ba" class="color0ac5ab svgShape"><path d="M20 0H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM56 0H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM20 36H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8zM56 36H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8z" fill="#767fad" class="color000000 svgShape"></path></g></g></switch></svg>

src/assets/images/icons/job_past_due.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" id="List"><path d="M0 0v3h3V0H0zm4 0v1h4V0H4zm0 2v1h3V2H4zM0 4v3h3V4H0zm4 0v1h4V4H4zm0 2v1h3V6H4z" fill="#b22b7d" class="color000000 svgShape"></path></svg>

src/assets/images/icons/job_pending.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="List"><path d="M9 3a6 6 0 1 0 6 6A6 6 0 0 0 9 3zM9 13a4 4 0 1 1 4-4A4 4 0 0 1 9 13zM17 9H28a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM17 13h6a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM9 17a6 6 0 1 0 6 6A6 6 0 0 0 9 17zM9 27a4 4 0 1 1 4-4A4 4 0 0 1 9 27zM28 21H17a1 1 0 0 0 0 2H28a1 1 0 0 0 0-2zM23 25H17a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/remove_grp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 64 64" id="delete"><path d="M44.41 19.59a2 2 0 0 0-2.83 0L32 29.18l-9.59-9.59a2 2 0 0 0-2.83 2.83L29.17 32l-9.59 9.59a2 2 0 1 0 2.83 2.83L32 34.83l9.59 9.59a2 2 0 0 0 2.83-2.83L34.83 32l9.59-9.59a2 2 0 0 0-.01-2.82Z" fill="#b22b7d" class="color000000 svgShape"></path><path d="M32 3a29 29 0 1 0 29 29A29 29 0 0 0 32 3Zm0 54a25 25 0 1 1 25-25 25 25 0 0 1-25 25Z" fill="#b22b7d" class="color000000 svgShape"></path></svg>

src/components/AuthPages/AuthLayout2.jsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { localImgLoad } from "../../lib";
 
 export default function LoginLayout({ slogan, children }) {
-  const bgImg = localImgLoad('images/left-myft.jpg')
+  const bgImg = localImgLoad('images/left-wrenchboard.jpg')
 
   return (
     <div className={`layout-wrapper login`}>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -59,7 +59,7 @@ export default function ForgotPassword() {
     }
 
     if (email !== "" && checked) {
-      const reqData = { email, action:11013 };
+      const reqData = { email };
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -59,7 +59,7 @@ export default function ForgotPassword() {
     }
 
     if (email !== "" && checked) {
-      const reqData = { email, action:11013 };
+      const reqData = { email };
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);

src/components/AuthPages/Login/index.jsx

@@ -98,7 +98,6 @@ export default function Login() {
         password: password,
         sessionid: "STARTING",
         login_mode: 1100,
-        action: 11025,
       };
     } else if (name == "family") {
       // Post Data Info for family Login
@@ -107,7 +106,6 @@ export default function Login() {
         pin: password,
         sessionid: "20067A92714",
         login_mode: 1105,
-        action: 11025,
       };
     } else {
       setLoginLoading(false);

src/components/AuthPages/Login/index2.jsx

@@ -97,8 +97,7 @@ export default function Login() {
         username: email,
         password: password,
         sessionid: "STARTING",
-        login_mode: 1100,
-        action: 11025,
+        login_mode: 1100
       };
     } else if (name == "family") {
       // Post Data Info for family Login
@@ -106,8 +105,7 @@ export default function Login() {
         username: email,
         pin: password,
         sessionid: "20067A92714",
-        login_mode: 1105,
-        action: 11025,
+        login_mode: 1105
       };
     } else {
       setLoginLoading(false);

src/components/AuthPages/VerifyLink/index.jsx

@@ -36,10 +36,7 @@ export default function VerifyLink() {
         var postData = {
           username: email,
           password: password,
-          login_mode: 100,
-          sessionid: "STARTER-NOTREAL",
           verify_link: token,
-          action: 11012,
         };
         const res = await userApi?.CompleteSignUp(postData);
 

src/components/AuthPages/VerifyLink/index2.jsx

@@ -36,10 +36,7 @@ export default function VerifyLink() {
         var postData = {
           username: email,
           password: password,
-          login_mode: 100,
-          sessionid: "STARTER-NOTREAL",
           verify_link: token,
-          action: 11012,
         };
         const res = await userApi?.CompleteSignUp(postData);
 

src/components/AuthPages/VerifyPassword/index.jsx

@@ -11,7 +11,11 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 const VerifyPassword = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
+  const [requestStatus, setRequestStatus] = useState({
+    loading: true,
+    status: false,
+    data: [],
+  });
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
   const [linkSuccess, setLinkSuccess] = useState(null);
@@ -35,60 +39,64 @@ const VerifyPassword = () => {
   };
 
   const completeReset = async () => {
-    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+    if (!password || !confirmPassword) {
+      // CHECKS IF PASSWORD IS EMPTY
       setMsgError("Please fill in fields");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+    if (password != confirmPassword) {
+      // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
       setMsgError("Passwords does not match");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+    if (password.length < 6) {
+      // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
       setMsgError("Password must be upto six characters");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
-      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+    if (!PasswordValidator(password)) {
+      // CHECKS IF PASSWORD IS VALID
+      setMsgError(
+        "Password must contain alphanumeric, uppercase and special character: eg: Password1@"
+      );
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
     try {
-          setLinkLoader(true);
-          var reqData = {
-            sessionid: "DUMMY-CANNOT_BE_EMPTY",
-            reset_link: token,
-            newpass: password,
-            m_uid: requestStatus.data?.m_uid || '',
-            reset_uid: requestStatus.data?.reset_uid || '',
-            step: 300,
-            action: 730,
-          };
-          const res = await userApi?.CompleteResetPassword(reqData);
+      setLinkLoader(true);
+      var reqData = {
+        reset_link: token,
+        newpass: password,
+        m_uid: requestStatus.data?.m_uid || "",
+        reset_uid: requestStatus.data?.reset_uid || "",
+        step: 300,
+      };
+      const res = await userApi?.CompleteResetPassword(reqData);
 
-          if (res.status == 200) {
-            const { data } = res;
-            if (data?.internal_return >= 0) {
-              // setTimeout(() => {
-              //   navigate("/login", { replace: true });
-              //   setLinkLoader(false);
-              // }, 2000);
-              setLinkSuccess(true);
-            } else {
-              setLinkLoader(false);
-              setMsgError("An error occurred");
-              setLinkSuccess(false);
-            }
-          } else {
-            setLinkLoader(false);
-            setLinkSuccess(false);
-          }
+      if (res.status == 200) {
+        const { data } = res;
+        if (data?.internal_return >= 0) {
+          // setTimeout(() => {
+          //   navigate("/login", { replace: true });
+          //   setLinkLoader(false);
+          // }, 2000);
+          setLinkSuccess(true);
+        } else {
+          setLinkLoader(false);
+          setMsgError("An error occurred");
+          setLinkSuccess(false);
+        }
+      } else {
+        setLinkLoader(false);
+        setLinkSuccess(false);
+      }
     } catch (error) {
       setLinkLoader(false);
       setLinkSuccess(false);
@@ -100,31 +108,33 @@ const VerifyPassword = () => {
     }
   };
 
-  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
-    setRequestStatus({loading: true, status:false, data: []})
+  const verifyResetPwd = () => {
+    // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({ loading: true, status: false, data: [] });
     var reqData = {
-      sessionid: "DUMMY-CANNOT_BE_EMPTY",
       reset_link: token,
       step: 200,
-      action: 730,
     };
-    userApi.CompleteResetPassword(reqData).then(res => {
-      if(res.status != 200 || res.data.internal_return < 0){
-        return setRequestStatus({loading: false, status:false, data: []})
-      }
-      setRequestStatus({loading: false, status:true, data: res.data})
-    }).catch(error => {
-      setRequestStatus({loading: false, status:false, data: []})
-    })
-  }
+    userApi
+      .CompleteResetPassword(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          return setRequestStatus({ loading: false, status: false, data: [] });
+        }
+        setRequestStatus({ loading: false, status: true, data: res.data });
+      })
+      .catch((error) => {
+        setRequestStatus({ loading: false, status: false, data: [] });
+      });
+  };
 
-  useEffect(()=>{
+  useEffect(() => {
     // little checker for the validity of the token
-  if (token==null || token?.length != 64) {
-    return setRequestStatus({loading: false, status:false, data: []});
-  }
-  verifyResetPwd()
-  },[])
+    if (token == null || token?.length != 64) {
+      return setRequestStatus({ loading: false, status: false, data: [] });
+    }
+    verifyResetPwd();
+  }, []);
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -139,59 +149,68 @@ const VerifyPassword = () => {
             </Link>
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
-            {requestStatus.loading ?
-            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
-            :
-            !requestStatus.loading && requestStatus.status ?
-            <div className="w-full">
-              {linkSuccess == null ?
-              <>
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                    Password Reset
-                  </h1>
-                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                      Enter a new password to reset
-                    </span>
-                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                      We'll send an email to confirm reset
-                    </span>
-                </div>
-                <div>
-                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
-                    Must include a special, numeric, uppercase and lowercase character
-                  </p>
-                </div>
-                  <SuccessfulComponent
-                    password={password}
-                    confirmPassword={confirmPassword}
-                    handlePassword={handlePassword}
-                    onSubmit={completeReset}
-                    msgErr={msgError}
-                    loader={linkLoader}
-                    showPassword={showPassword}
-                    onClick={togglePasswordVisibility}
-                    navigateHandler={() => navigate("/login")}
+            {requestStatus.loading ? (
+              <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
+            ) : !requestStatus.loading && requestStatus.status ? (
+              <div className="w-full">
+                {linkSuccess == null ? (
+                  <>
+                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                        Password Reset
+                      </h1>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        Enter a new password to reset
+                      </span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        We'll send an email to confirm reset
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                        Must include a special, numeric, uppercase and lowercase
+                        character
+                      </p>
+                    </div>
+                    <SuccessfulComponent
+                      password={password}
+                      confirmPassword={confirmPassword}
+                      handlePassword={handlePassword}
+                      onSubmit={completeReset}
+                      msgErr={msgError}
+                      loader={linkLoader}
+                      showPassword={showPassword}
+                      onClick={togglePasswordVisibility}
+                      navigateHandler={() => navigate("/login")}
+                    />
+                  </>
+                ) : (
+                  <ForgetPwdResponse
+                    title={
+                      linkSuccess
+                        ? "Password Reset Complete"
+                        : "Password Reset Error"
+                    }
+                    message={
+                      linkSuccess
+                        ? "Password Reset Complete. You can login now with your new credentials"
+                        : "Password Reset Error. Please get in touch with support for further support"
+                    }
+                    type={linkSuccess}
                   />
-                </>
-                :
-                <ForgetPwdResponse 
-                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
-                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
-                }
-                type={linkSuccess}
-              />
-              }
-            </div>
-            :
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <ForgetPwdResponse 
-                title={'Forget Password'}
-                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
-                type={requestStatus.status}
-              />
-            </div>
-            }
+                )}
+              </div>
+            ) : (
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <ForgetPwdResponse
+                  title={"Forget Password"}
+                  message={
+                    "We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
+                  }
+                  type={requestStatus.status}
+                />
+              </div>
+            )}
           </div>
         </div>
       </AuthLayout>

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -11,7 +11,11 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 const VerifyPassword = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
+  const [requestStatus, setRequestStatus] = useState({
+    loading: true,
+    status: false,
+    data: [],
+  });
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
   const [linkSuccess, setLinkSuccess] = useState(null);
@@ -35,60 +39,64 @@ const VerifyPassword = () => {
   };
 
   const completeReset = async () => {
-    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+    if (!password || !confirmPassword) {
+      // CHECKS IF PASSWORD IS EMPTY
       setMsgError("Please fill in fields");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+    if (password != confirmPassword) {
+      // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
       setMsgError("Passwords does not match");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+    if (password.length < 6) {
+      // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
       setMsgError("Password must be upto six characters");
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
-    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
-      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+    if (!PasswordValidator(password)) {
+      // CHECKS IF PASSWORD IS VALID
+      setMsgError(
+        "Password must contain alphanumeric, uppercase and special character: eg: Password1@"
+      );
       return setTimeout(() => {
         setMsgError(null);
       }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
     try {
-          setLinkLoader(true);
-          var reqData = {
-            sessionid: "DUMMY-CANNOT_BE_EMPTY",
-            reset_link: token,
-            newpass: password,
-            m_uid: requestStatus.data?.m_uid || '',
-            reset_uid: requestStatus.data?.reset_uid || '',
-            step: 300,
-            action: 730,
-          };
-          const res = await userApi?.CompleteResetPassword(reqData);
+      setLinkLoader(true);
+      var reqData = {
+        reset_link: token,
+        newpass: password,
+        m_uid: requestStatus.data?.m_uid || "",
+        reset_uid: requestStatus.data?.reset_uid || "",
+        step: 300,
+      };
+      const res = await userApi?.CompleteResetPassword(reqData);
 
-          if (res.status == 200) {
-            const { data } = res;
-            if (data?.internal_return >= 0) {
-              // setTimeout(() => {
-              //   navigate("/login", { replace: true });
-              //   setLinkLoader(false);
-              // }, 2000);
-              setLinkSuccess(true);
-            } else {
-              setLinkLoader(false);
-              setMsgError("An error occurred");
-              setLinkSuccess(false);
-            }
-          } else {
-            setLinkLoader(false);
-            setLinkSuccess(false);
-          }
+      if (res.status == 200) {
+        const { data } = res;
+        if (data?.internal_return >= 0) {
+          // setTimeout(() => {
+          //   navigate("/login", { replace: true });
+          //   setLinkLoader(false);
+          // }, 2000);
+          setLinkSuccess(true);
+        } else {
+          setLinkLoader(false);
+          setMsgError("An error occurred");
+          setLinkSuccess(false);
+        }
+      } else {
+        setLinkLoader(false);
+        setLinkSuccess(false);
+      }
     } catch (error) {
       setLinkLoader(false);
       setLinkSuccess(false);
@@ -100,31 +108,33 @@ const VerifyPassword = () => {
     }
   };
 
-  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
-    setRequestStatus({loading: true, status:false, data: []})
+  const verifyResetPwd = () => {
+    // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({ loading: true, status: false, data: [] });
     var reqData = {
-      sessionid: "DUMMY-CANNOT_BE_EMPTY",
       reset_link: token,
       step: 200,
-      action: 730,
     };
-    userApi.CompleteResetPassword(reqData).then(res => {
-      if(res.status != 200 || res.data.internal_return < 0){
-        return setRequestStatus({loading: false, status:false, data: []})
-      }
-      setRequestStatus({loading: false, status:true, data: res.data})
-    }).catch(error => {
-      setRequestStatus({loading: false, status:false, data: []})
-    })
-  }
+    userApi
+      .CompleteResetPassword(reqData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          return setRequestStatus({ loading: false, status: false, data: [] });
+        }
+        setRequestStatus({ loading: false, status: true, data: res.data });
+      })
+      .catch((error) => {
+        setRequestStatus({ loading: false, status: false, data: [] });
+      });
+  };
 
-  useEffect(()=>{
+  useEffect(() => {
     // little checker for the validity of the token
-  if (token==null || token?.length != 64) {
-    return setRequestStatus({loading: false, status:false, data: []});
-  }
-  verifyResetPwd()
-  },[])
+    if (token == null || token?.length != 64) {
+      return setRequestStatus({ loading: false, status: false, data: [] });
+    }
+    verifyResetPwd();
+  }, []);
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -139,59 +149,68 @@ const VerifyPassword = () => {
             </Link>
           </div>
           <div className="flex place-content-center">
-            {requestStatus.loading ?
-            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
-            :
-            !requestStatus.loading && requestStatus.status ?
-            <div className="w-11/12 sm:max-w-[500px]">
-              {linkSuccess == null ?
-              <>
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                    Password Reset
-                  </h1>
-                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                      Enter a new password to reset
-                    </span>
-                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                      We'll send an email to confirm reset
-                    </span>
-                </div>
-                <div>
-                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
-                    Must include a special, numeric, uppercase and lowercase character
-                  </p>
-                </div>
-                  <SuccessfulComponent
-                    password={password}
-                    confirmPassword={confirmPassword}
-                    handlePassword={handlePassword}
-                    onSubmit={completeReset}
-                    msgErr={msgError}
-                    loader={linkLoader}
-                    showPassword={showPassword}
-                    onClick={togglePasswordVisibility}
-                    navigateHandler={() => navigate("/login")}
+            {requestStatus.loading ? (
+              <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
+            ) : !requestStatus.loading && requestStatus.status ? (
+              <div className="w-11/12 sm:max-w-[500px]">
+                {linkSuccess == null ? (
+                  <>
+                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                        Password Reset
+                      </h1>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        Enter a new password to reset
+                      </span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                        We'll send an email to confirm reset
+                      </span>
+                    </div>
+                    <div>
+                      <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                        Must include a special, numeric, uppercase and lowercase
+                        character
+                      </p>
+                    </div>
+                    <SuccessfulComponent
+                      password={password}
+                      confirmPassword={confirmPassword}
+                      handlePassword={handlePassword}
+                      onSubmit={completeReset}
+                      msgErr={msgError}
+                      loader={linkLoader}
+                      showPassword={showPassword}
+                      onClick={togglePasswordVisibility}
+                      navigateHandler={() => navigate("/login")}
+                    />
+                  </>
+                ) : (
+                  <ForgetPwdResponse
+                    title={
+                      linkSuccess
+                        ? "Password Reset Complete"
+                        : "Password Reset Error"
+                    }
+                    message={
+                      linkSuccess
+                        ? "Password Reset Complete. You can login now with your new credentials"
+                        : "Password Reset Error. Please get in touch with support for further support"
+                    }
+                    type={linkSuccess}
                   />
-                </>
-                :
-                <ForgetPwdResponse 
-                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
-                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
-                }
-                type={linkSuccess}
-              />
-              }
-            </div>
-            :
-            <div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <ForgetPwdResponse 
-                title={'Forget Password'}
-                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
-                type={requestStatus.status}
-              />
-            </div>
-            }
+                )}
+              </div>
+            ) : (
+              <div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <ForgetPwdResponse
+                  title={"Forget Password"}
+                  message={
+                    "We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
+                  }
+                  type={requestStatus.status}
+                />
+              </div>
+            )}
           </div>
         </div>
       </AuthLayout>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -13,6 +13,7 @@ import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
 import FamilyWallet from "./Tabs/FamilyWallet";
+import { apiConst } from "../../lib/apiConst";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -127,7 +128,7 @@ export default function FamilyManageTabs({
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: 'FILE',
-          action: 11305
+          action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER
         }
         setUploadStatus({loading: true, status: false, message:'Loading...'})
         apiCall.sendFiles(reqData).then(res=>{
@@ -285,7 +286,7 @@ export default function FamilyManageTabs({
       limit: 30,
       offset: 0,
       job_type: "FAMILY",
-      action: 13005,
+      action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
     if (checkFamilyTask) {

src/components/FamilyAcc/FamilySettings/Tabs/FamilyBanner.jsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useRef, useState } from "react";
 import usersService from "../../../../services/UsersService";
+import { apiConst } from "../../../../lib/apiConst";
 
 const FamilyBanner = ({ imageServer }) => {
   const uploadedImage = `${imageServer}${localStorage.getItem(
@@ -65,7 +66,7 @@ const FamilyBanner = ({ imageServer }) => {
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: "FILE",
-          action: 11303,
+          action: apiConst.WRENCHBOARD_PICTURE_JOB,
         };
         setUploadStatus({
           loading: true,

src/components/FamilyAcc/FamilySettings/Tabs/InviteRelative.jsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react'
+import ModalCom from '../../../Helpers/ModalCom';
+import LoadingSpinner from '../../../Spinners/LoadingSpinner';
+import InputCom from '../../../Helpers/Inputs/InputCom/index';
+import { Formik, Form } from 'formik';
+import * as Yup from "yup";
+import usersService from '../../../../services/UsersService';
+
+const validationSchema = Yup.object().shape({
+    email: Yup.string()
+      .email("Wrong email format")
+      .matches(
+        /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
+        "Invalid email format"
+      )
+      .min(3, "Minimum 3 characters")
+      .max(50, "Maximum 50 characters")
+      .required("Email is required"),
+    firstname: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(25, "Maximum 25 characters")
+      .required("Firstname is required"),
+    lastname: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(25, "Maximum 25 characters")
+      .required("Lastname is required"),
+    family_type: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(25, "Maximum 25 characters")
+      .required("Family Type is required"),
+  });
+
+  const initialValues = {
+    firstname: '',
+    lastname: '',
+    family_type: '',
+    email: ''
+  };
+
+
+export default function InviteRelative({action, situation, setReloadRelList}) {
+
+    const api = new usersService()
+
+    let [requestStatus, setRequestStatus] = useState({
+        loading: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const handleInvite = (values) => {
+        setRequestStatus({loading: true, status: false, message: ""})
+        api.inviteFamilyRelative(values).then(response => {
+            let {status, data} = response
+            if(data?.internal_return < 0){
+                setRequestStatus({loading: false, status: false, message: "Unable to complete"})
+                return setTimeout(()=>{
+                    setRequestStatus({ loading: false, status: false, message: ""})
+                },3000)
+            }
+            setRequestStatus({loading: false, status: true, message: "Relative Added"})
+            //RELOAD RELATIVE LSIT TABLE
+            setReloadRelList(prev => !prev)
+            setTimeout(()=>{
+                action()
+            },3000)
+        }).catch(error => {
+            setRequestStatus({loading: false, status: false, message: "Something went wrong, try again!"})
+            setTimeout(()=>{
+                setRequestStatus({ loading: false, status: false, message: ""})
+            },3000)
+        })
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            Invite Parent/Relative
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+            <div className="personal-info-tab w-full flex flex-col justify-between">
+                <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema}
+                    onSubmit={handleInvite}
+                >
+                    {(props) => {
+                    return (
+                        <Form>
+                        <div className="w-full flex flex-col-reverse sm:flex-row">
+                            <div className="fields w-full">
+                                {/* inputs starts here */}
+                                {/* Email */}
+                                <div className="field w-full mb-6">
+                                    <InputCom
+                                        fieldClass="px-6"
+                                        label="Email"
+                                        type="text"
+                                        name="email"
+                                        placeholder="Email"
+                                        value={props.values.email}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
+                                        error={(props.errors.email && props.touched.email) ? props.errors.email : '' }
+                                    />
+                                </div>
+                                {/* first name and last name */}
+                                <div className="md:flex md:space-x-7 mb-6">
+                                    <div className="field w-full mb-6 md:mb-0">
+                                        <InputCom
+                                        fieldClass="px-6"
+                                        label="First Name"
+                                        type="text"
+                                        name="firstname"
+                                        placeholder="First Name"
+                                        value={props.values.firstname}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
+                                        error={(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : '' }
+                                        />
+                                    </div>
+                                    <div className="field w-full">
+                                        <InputCom
+                                        fieldClass="px-6"
+                                        label="Last Name"
+                                        type="text"
+                                        name="lastname"
+                                        placeholder="Last Name"
+                                        value={props.values.lastname}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
+                                        error={(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : '' }
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* Type */}
+                                <div className="md:flex md:space-x-7 items-end mb-6">
+                                    <div className="field w-full mb-6 md:mb-0">
+                                        <InputCom
+                                        fieldClass="px-6"
+                                        label="Type"
+                                        type="text"
+                                        name="family_type"
+                                        placeholder="Family Type"
+                                        value={props.values.family_type}
+                                        inputHandler={props.handleChange}
+                                        blurHandler={props.handleBlur}
+                                        error={(props.errors.family_type && props.touched.family_type) ? props.errors.family_type : '' }
+                                        />
+                                    </div>
+                                    <div className="field w-full flex justify-end">
+                                        <div className="flex">
+                                            {requestStatus.loading ? (
+                                            <LoadingSpinner size="8" color="sky-blue" />
+                                            ) : (
+                                            <button
+                                                type="submit"
+                                                className={`text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full ${(requestStatus.status || requestStatus.loading) && 'opacity-50'}`}
+                                                disabled={requestStatus.status || requestStatus.loading}
+                                            >
+                                                Send Message
+                                            </button>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        </Form>
+                    );
+                    }}
+                </Formik>
+            </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`w-full relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { handlePagingFunc } from '../../../Pagination/HandlePagination';
+import PaginatedList  from '../../../Pagination/PaginatedList';
+
+export default function RelativeTable({relativeList}) {
+  
+    // Handle Pagination
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+
+    const currentRelativeList = relativeList?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e, setCurrentPage);
+    };
+   
+    return (
+        <div className={`w-full overflow-hidden rounded-2xl`}>
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
+              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                <tbody>
+                  <>
+                    {relativeList && relativeList?.length > 0 ? (
+                        currentRelativeList.map((value, index) => (
+                        <tr key={value.uid || index} className="border-b dark:border-[#5356fb29] hover:bg-gray-50">
+                          <td className='p-2'>
+                            <div className="flex flex-col">
+                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                {value.firstname && value.firstname} {value.lastname && value.lastname}
+                              </h1>
+                              <span className="text-sm text-thin-light-gray">
+                                {value.email && value.email}
+                              </span>
+                            </div>
+                          </td>
+                          <td className='p-2'>
+                            {/* <span>Family Type</span> */}
+                            <span>{value.family_type && value.family_type.toUpperCase()}</span>
+                          </td>
+                          <td className='p-2 text-right'>
+                            {value.status && value.status}
+                          </td>
+                        </tr>
+                        ))
+                    ) : (
+                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                        <td className="p-2">No Members Found</td>
+                      </tr>
+                    )}
+                  </>
+                </tbody>
+              </table>
+    
+              {/* PAGINATION BUTTON */}
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                  relativeList?.length
+                    ? true
+                    : false
+                }
+                data={relativeList}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+              {/* END OF PAGINATION BUTTON */}
+            </div>
+        </div>
+      );
+    };

src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx

@@ -1,8 +1,67 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import RelativeTable from './RelativeTable'
+import InviteRelative from './InviteRelative'
+import usersService from '../../../../services/UsersService'
+import LoadingSpinner from '../../../Spinners/LoadingSpinner'
 
 const Relatives = () => {
+
+  const api = new usersService()
+
+  const [reloadRelList, setReloadRelList] = useState(false)
+
+  const [invitePopout, setInvitePopout] = useState(false)
+
+  const [relativeList, setRelativeList] = useState({loading: true, data:[]})
+
+  const showInviteMemberPopout = () => {
+      setInvitePopout(true)
+  }
+
+  const getRelativeList = () => {
+    setRelativeList(prev => ({...prev, loading: true}))
+    api.getFamilyRelativeList().then(response => {
+      let {data:{result_list}} = response
+      if(!result_list || result_list?.length <= 0){
+        setRelativeList({loading:false, data:[]})
+        return
+      }
+      setRelativeList({loading:false, data:result_list})
+    }).catch(error => {
+      setRelativeList({loading:false, data:[]})
+    })
+  }
+
+  useEffect(()=>{
+    getRelativeList()
+  },[reloadRelList])
+
   return (
-    <div>Relatives</div>
+    <>
+      <div className=''>
+        <div className='py-4'>
+          <button onClick={showInviteMemberPopout} className='text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full'>Invite</button>
+          <div className='my-4 border-b-2'></div>
+        </div>
+        <div className='min-h-[500px]'>
+          {relativeList.loading ?
+          <LoadingSpinner size='8' height='h-full' />
+          :
+          <RelativeTable relativeList={relativeList.data} />
+          }
+        </div>
+      </div>
+
+      {/* INVITE RELATIVE POPOUT */}
+        {invitePopout &&
+        <InviteRelative 
+            action={()=>setInvitePopout(false)}
+            situation={invitePopout}
+            setReloadRelList={setReloadRelList}
+        />
+        }
+      {/* END OF INVITE RELATIVE POPOUT */}
+    </>
   )
 }
 

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -62,10 +62,14 @@ const FamilySettings = () => {
                 <span className={``}>Family Settings</span>
               </h1>
             </div>
-            <Link to="/acc-family">Go Back</Link>
+            <Link to="/acc-family" className="flex gap-2 items-center text-dark-gray dark:text-white">
+              <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">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
+              </svg>
+              Family
+            </Link>
           </div>
-          {/* Something Here */}
-          {/* <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4"></form> */}
+
           <div className="w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ">
             <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] lg:flex lg:px-10 px-4 justify-between">
               <div className="content-tab-items lg:w-[230px] w-full mr-2">

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -55,7 +55,6 @@ export default function FamilyProfile({ familyData, className }) {
     year: familyData?.year,
     month: familyData?.month,
     enable_traking: familyData?.enable_traking,
-    action: 22020,
   };
 
   // const handleChange = ({ target: { name, value } }) => {

src/components/FamilyAcc/Tabs/wallet/FamilyAddFundPopout.jsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import ModalCom from '../../../Helpers/ModalCom'
-import InputCom from '../../../Helpers/Inputs/InputCom'
+import React, { useEffect, useState } from "react";
+import ModalCom from "../../../Helpers/ModalCom";
+import InputCom from "../../../Helpers/Inputs/InputCom";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
-import {AmountTo2DP} from '../../../Helpers/PriceFormatter'
-import usersService from '../../../../services/UsersService';
-import LoadingSpinner from '../../../Spinners/LoadingSpinner';
-import { PriceFormatter } from '../../../Helpers/PriceFormatter';
-import { tableReload } from '../../../../store/TableReloads';
-import { useDispatch } from 'react-redux';
+import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
+import usersService from "../../../../services/UsersService";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../../../Helpers/PriceFormatter";
+import { tableReload } from "../../../../store/TableReloads";
+import { useDispatch } from "react-redux";
+import { apiConst } from "../../../../lib/apiConst";
 
 const validationSchema = Yup.object().shape({
   // amount: Yup.string()
@@ -22,104 +23,149 @@ const validationSchema = Yup.object().shape({
   //     return true;
   //   })
   //   .required("Amount is required"),
-  amount: Yup.number('Please enter a number')
-  .min(1, "Price must be greater than 0")
-  .required("Amount is required"),
-  comment: Yup.string()
-  .required("Comment is required"),
+  amount: Yup.number("Please enter a number")
+    .min(1, "Price must be greater than 0")
+    .required("Amount is required"),
+  comment: Yup.string().required("Comment is required"),
 });
 
-function FamilyAddFundPopout({action, situation, wallet, familyData}) {
+function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
+  const dispatch = useDispatch();
 
-  const dispatch = useDispatch()
+  const apiUrl = new usersService();
 
-  const apiUrl = new usersService()
-
-  const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
-
-  const [requestStatus, setRequestStatus] = useState({loading:false, status:false, message:''})
+  const [startTransfer, setStartTransfer] = useState({
+    loading: true,
+    data: {},
+  });
 
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
 
   // initial values for formik
   let initialValues = {
-    amount: '',
-    from : AmountTo2DP(startTransfer?.data?.origing_current_balance*0.01),
+    amount: "",
+    from: AmountTo2DP(startTransfer?.data?.origing_current_balance * 0.01),
     to: `${familyData.firstname} ${familyData.lastname}`,
-    comment: ''
+    comment: "",
   };
   // FUNCTION TO PERFORM FAMILY TRANSFER
   const handleAddFund = (values) => {
-    setRequestStatus({loading:true, status:false, message:''})
+    setRequestStatus({ loading: true, status: false, message: "" });
 
-    let senderBal = startTransfer?.data?.origing_current_balance || '' // SENDER'S ACCOUNT BALANCE
-    let senderLimit = startTransfer?.data?.origing_transfer_limit || '' // SENDER'S TRANSFER LIMIT
+    let senderBal = startTransfer?.data?.origing_current_balance || ""; // SENDER'S ACCOUNT BALANCE
+    let senderLimit = startTransfer?.data?.origing_transfer_limit || ""; // SENDER'S TRANSFER LIMIT
 
-    let reqData = { // API REQUEST DATA
-      family_uid : familyData.uid,
-      wallet_uid : wallet.wallet_uid,
-      origing_wallet_uid : startTransfer?.data?.origing_wallet_uid,
-      currency : startTransfer?.data?.currency,
-      amount : values.amount*100,
-      description : values.comment,
-      family_transfer_mode : 100,
-      action : 22014
+    let reqData = {
+      // API REQUEST DATA
+      family_uid: familyData.uid,
+      wallet_uid: wallet.wallet_uid,
+      origing_wallet_uid: startTransfer?.data?.origing_wallet_uid,
+      currency: startTransfer?.data?.currency,
+      amount: values.amount * 100,
+      description: values.comment,
+      family_transfer_mode: 100,
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFER,
+    };
+
+    if (!senderBal || !senderLimit) {
+      // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Unauthorized, try again later",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(!senderBal || !senderLimit){ // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
-      setRequestStatus({loading:false, status:false, message:'Unauthorized, try again later'})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
+    if (values.amount > senderBal * 0.01) {
+      // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "You cannot send more than your balance",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(values.amount > senderBal*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
-      setRequestStatus({loading:false, status:false, message:'You cannot send more than your balance'})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
+    if (values.amount > senderLimit * 0.01) {
+      // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `You cannot exceed ${senderLimit * 0.01} ${
+          startTransfer?.data?.origing_currency.charAt(0).toUpperCase() +
+          startTransfer?.data?.origing_currency.slice(1).toLowerCase()
+        }`,
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
     }
 
-    if(values.amount > senderLimit*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
-      setRequestStatus({loading:false, status:false, message:`You cannot exceed ${senderLimit*0.01} ${startTransfer?.data?.origing_currency.charAt(0).toUpperCase() + startTransfer?.data?.origing_currency.slice(1).toLowerCase()}`})
-      return setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
-    }
-
-    apiUrl.familyTransfer(reqData).then(({data}) => {
-      if(data.internal_return < 0 || data.credit_confirm == '' || data.pay_confirm == ''){
-        setRequestStatus({loading:false, status:false, message:'Transfer Failed'})
-        return setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message:''})
-        }, 5000)
-      }
-      setRequestStatus({loading:false, status:true, message:'Transfer Successful'})
-      setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-        dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
-        action() // TO CLOSE THE MODAL
-      }, 5000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message:'Network Error, try again'})
-      setTimeout(()=>{
-        setRequestStatus({loading:false, status:false, message:''})
-      }, 5000)
-    })
-  }
+    apiUrl
+      .familyTransfer(reqData)
+      .then(({ data }) => {
+        if (
+          data.internal_return < 0 ||
+          data.credit_confirm == "" ||
+          data.pay_confirm == ""
+        ) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Transfer Failed",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 5000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Transfer Successful",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
+          action(); // TO CLOSE THE MODAL
+        }, 5000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Network Error, try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
 
   // LOAD FAMILY START TRANSFER
-  useEffect(()=>{
+  useEffect(() => {
     let reqData = {
       family_uid: familyData.uid,
       wallet_uid: wallet.wallet_uid,
-      action: 22013
-    }
-    apiUrl.familyTransferStart(reqData).then(response => {
-      setStartTransfer({loading:false, data:response?.data })
-    }).catch(err => {
-      setStartTransfer({loading:false, data: {}})
-    })
-  },[])
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFERSTART,
+    };
+    apiUrl
+      .familyTransferStart(reqData)
+      .then((response) => {
+        setStartTransfer({ loading: false, data: response?.data });
+      })
+      .catch((err) => {
+        setStartTransfer({ loading: false, data: {} });
+      });
+  }, []);
 
   return (
     <ModalCom action={action} situation={situation}>
@@ -155,116 +201,125 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
-          {startTransfer.loading && <LoadingSpinner size='16' color='sky-blue' height={'h-64'} />}
-          
-          { !startTransfer.loading &&
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleAddFund}
-          >
-            {(props) => (
-              <Form className="w-full">
-                <div className="flex flex-col-reverse sm:flex-row">
-                  <div className="fields w-full">
-                    {/* AMOUNT  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="0"
-                        label={`Amount (${startTransfer?.data?.currency})`}
-                        name="amount"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${props.errors.amount && props.touched.amount ? 'border border-red-500' : ''}`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.amount}
-                        inputHandler={props.handleChange}
-                      />
-                    </div>
+          {startTransfer.loading && (
+            <LoadingSpinner size="16" color="sky-blue" height={"h-64"} />
+          )}
 
-                    {/* FROM  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="From"
-                        label={`From (${startTransfer?.data?.origing_currency})`}
-                        name="from"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.from}
-                        disable={true}
-                      />
-                    </div>
-
-                     {/* TO  */}
-                     <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        placeholder="To"
-                        label="To:"
-                        name="to"
-                        type="text"
-                        parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2 text-right"
-                        value={props.values.to}
-                        disable={true}
-                      />
-                    </div>
-
-                    {/* COMMENT  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <div className="w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
-                      >
-                        Comment
-                        {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
-                      </label>
-                      <textarea
-                        // id="Job Delivery Details"
-                        rows="2"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${props.errors.comment && props.touched.comment ? 'border border-red-500' : ''}`}
-                        style={{ resize: "none" }}
-                        name="comment"
-                        value={props.values.comment}
-                        onChange={props.handleChange}
-                      />
+          {!startTransfer.loading && (
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleAddFund}
+            >
+              {(props) => (
+                <Form className="w-full">
+                  <div className="flex flex-col-reverse sm:flex-row">
+                    <div className="fields w-full">
+                      {/* AMOUNT  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="0"
+                          label={`Amount (${startTransfer?.data?.currency})`}
+                          name="amount"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${
+                            props.errors.amount && props.touched.amount
+                              ? "border border-red-500"
+                              : ""
+                          }`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.amount}
+                          inputHandler={props.handleChange}
+                        />
                       </div>
+
+                      {/* FROM  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="From"
+                          label={`From (${startTransfer?.data?.origing_currency})`}
+                          name="from"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.from}
+                          disable={true}
+                        />
+                      </div>
+
+                      {/* TO  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <InputCom
+                          placeholder="To"
+                          label="To:"
+                          name="to"
+                          type="text"
+                          parentClass="flex items-center gap-1 w-full"
+                          labelClass="flex-[0.3] mb-0"
+                          inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                          fieldClass="px-2 text-right"
+                          value={props.values.to}
+                          disable={true}
+                        />
+                      </div>
+
+                      {/* COMMENT  */}
+                      <div className="field w-full mb-[0.5rem]">
+                        <div className="w-full">
+                          <label
+                            htmlFor="Job Delivery Details"
+                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
+                          >
+                            Comment
+                            {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
+                          </label>
+                          <textarea
+                            // id="Job Delivery Details"
+                            rows="2"
+                            className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${
+                              props.errors.comment && props.touched.comment
+                                ? "border border-red-500"
+                                : ""
+                            }`}
+                            style={{ resize: "none" }}
+                            name="comment"
+                            value={props.values.comment}
+                            onChange={props.handleChange}
+                          />
+                        </div>
+                      </div>
+                      {/* inputs ends here */}
                     </div>
-                    {/* inputs ends here */}
                   </div>
-                </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer w-full">
-                  {/* error or success display */}
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                        // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="content-footer w-full">
+                    {/* error or success display */}
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
                         <div
-                          className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                         >
                           {requestStatus.message}
                         </div>
-                      )
-                    ))}
-                  {/* End of error or success display */}
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                            // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
+                          </div>
+                        )
+                      ))}
+                    {/* End of error or success display */}
 
-                  <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                    <div className="w-full flex justify-between gap-2 items-center">
+                    <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                      <div className="w-full flex justify-between gap-2 items-center">
                         <button
                           type="button"
                           onClick={action}
@@ -273,29 +328,31 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                           Cancel
                         </button>
                         <>
-                          {requestStatus.loading ?
-                          <LoadingSpinner size='6' color='sky-blue' />
-                          :
-                          <button
-                            type="submit"
-                            className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${requestStatus.status ? 'opacity-50' : ''}`}
-                            disabled={requestStatus.status}
-                          >
-                            Send
-                          </button>
-                          }
+                          {requestStatus.loading ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <button
+                              type="submit"
+                              className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${
+                                requestStatus.status ? "opacity-50" : ""
+                              }`}
+                              disabled={requestStatus.status}
+                            >
+                              Send
+                            </button>
+                          )}
                         </>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Form>
-            )}
-          </Formik>
-          }
+                </Form>
+              )}
+            </Formik>
+          )}
         </div>
       </div>
     </ModalCom>
-  )
+  );
 }
 
-export default FamilyAddFundPopout
+export default FamilyAddFundPopout;

src/components/FamilyAcc/index.jsx

@@ -102,13 +102,7 @@ export default function FamilyAcc() {
   const memberList = useCallback(async () => {
     setLoader(true);
     try {
-      const reqData = {
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      const res = await apiCall.familyListings(reqData);
+      const res = await apiCall.familyListings();
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status === "OK") {
         const { result_list, session_image_server } = data;

src/components/Helpers/Icons.jsx

@@ -560,6 +560,24 @@ export default function Icons({ name }) {
           src={localImgLoad("images/icons/family-pin.svg")}
           alt="family-pin"
         />
+      ) : name === "pending-job" ? (
+        <img
+          className="w-[19px] h-[19px]"
+          src={localImgLoad("images/icons/job_pending.svg")}
+          alt="Pending Job"
+        />
+      ) : name === "active-job" ? (
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/job_active.svg")}
+          alt="Active Job"
+        />
+      ) : name === "job-list" ? (
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/job_list.svg")}
+          alt="Job List"
+        />
       ) : (
         ""
       )}

src/components/JobGroups/AddGroup.jsx

@@ -1,69 +1,93 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import ModalCom from '../Helpers/ModalCom'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import InputCom from '../Helpers/Inputs/InputCom/index'
+import ModalCom from "../Helpers/ModalCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import InputCom from "../Helpers/Inputs/InputCom/index";
 
-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";
+import { apiConst } from "../../lib/apiConst";
 
-export default function AddGroup({action, situation , setUpdateList}) {
+export default function AddGroup({ action, situation, setUpdateList }) {
+  const api = new usersService();
 
-    const api = new usersService()
+  const [name, setName] = useState("");
 
-    const [name, setName] = useState('')
+  const handleChange = ({ target: { name, value } }) => {
+    setName(value);
+  };
 
-    const handleChange = ({target:{name, value}}) =>{
-        setName(value)
-    }
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
 
-    let [requestStatus, setRequestStatus] = useState({
+  const addGroup = () => {
+    setRequestStatus({ loading: true, status: false, message: "" });
+    if (name == "") {
+      setRequestStatus({
         loading: false,
         status: false,
-        message: "",
-      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
-
-    const addGroup = () => {
-        setRequestStatus({loading:true, status:false, message:''})
-        if(name == ''){
-            setRequestStatus({loading:false, status:false, message:'Please enter a group name'})
-            return setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-            },3000)
-        }
-        if(name.length < 6){
-            setRequestStatus({loading:false, status:false, message:'Group name must be up to six characters'})
-            return setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-            },3000)
-        }
-        api.jobGroupAdd({group_name:name, action:13025}).then(response => {
-            let {status, data} = response
-            if(status != 200 || data.internal_return < 0){
-                setRequestStatus({loading:false, status:false, message:'Unable to add Group'})
-                return 
-            }
-            setRequestStatus({loading:false, status:true, message:'Group Added'})
-            setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-                // close modal
-                action()
-                // reload group page
-                setUpdateList(prev => !prev)
-            },3000)
-        }).catch(error => {
-            setRequestStatus({loading:false, status:false, message:'Unable to add Group, try again later'})
-        }).finally(()=>{
-            setTimeout(()=>{
-                setRequestStatus({loading:false, status:false, message:''})
-            },3000)
-        })
+        message: "Please enter a group name",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
     }
+    if (name.length < 6) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Group name must be up to six characters",
+      });
+      return setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000);
+    }
+    api
+      .jobGroupAdd({
+        group_name: name,
+        action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
+      })
+      .then((response) => {
+        let { status, data } = response;
+        if (status != 200 || data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Unable to add Group",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Group Added",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          // close modal
+          action();
+          // reload group page
+          setUpdateList((prev) => !prev);
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to add Group, try again later",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+      });
+  };
 
   return (
-    <ModalCom   
-        action={action}
-        situation={situation}
-    >
+    <ModalCom action={action} situation={situation}>
       <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -98,7 +122,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
         <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
           <div className="mb-6 w-full">
             <div className="input-item">
-                <InputCom
+              <InputCom
                 labelClass="tracking-wider"
                 fieldClass="sm:px-6 px-2"
                 value={name}
@@ -108,7 +132,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
                 type="text"
                 inputHandler={handleChange}
                 // iconName="message"
-                />
+              />
             </div>
           </div>
           <div className="w-full flex justify-between items-center gap-4">
@@ -117,7 +141,9 @@ export default function AddGroup({action, situation , setUpdateList}) {
               type="button"
               className="text-base text-light-red tracking-wide "
             >
-              <span className="border-b dark:border-[#5356fb29]  border-light-red">Cancel</span>
+              <span className="border-b dark:border-[#5356fb29]  border-light-red">
+                Cancel
+              </span>
             </button>
             {requestStatus.loading ? (
               <LoadingSpinner size="8" color="sky-blue" />
@@ -153,5 +179,5 @@ export default function AddGroup({action, situation , setUpdateList}) {
         </div>
       </div>
     </ModalCom>
-  )
+  );
 }

src/components/JobGroups/DeleteGroup.jsx

@@ -73,7 +73,7 @@ export default function DeleteGroup({action, situation, details}) {
           </div>
           <div className="mb-6">
             <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
-              Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span>
+              Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
             </p>
           </div>
           <div className="flex space-x-2.5">

src/components/JobGroups/DeleteMember.jsx

@@ -23,7 +23,7 @@ export default function DeleteMember({action, situation, details}) {
       <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Delete Member
+            Remove Member
           </h1>
           <button
             type="button"
@@ -73,7 +73,7 @@ export default function DeleteMember({action, situation, details}) {
           </div>
           <div className="mb-6">
             <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
-              Are you sure, you want to delete <br /> <span>'{details?.firstname} {details.lastname}'</span>
+              Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
             </p>
           </div>
           <div className="flex space-x-2.5">
@@ -92,7 +92,7 @@ export default function DeleteMember({action, situation, details}) {
                 type="button"
                 className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
               >
-                Confirm Delete
+                Remove
               </button>
             )}
           </div>

src/components/JobGroups/GroupList.jsx

@@ -1,72 +1,104 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import InputCom from '../../components/Helpers/Inputs/InputCom/index'
-import DeleteGroup from './DeleteGroup'
-import AddGroup from './AddGroup'
+import AddGroup from "./AddGroup";
+import DeleteGroup from "./DeleteGroup";
+import { localImgLoad } from "../../lib";
 
-export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {
+export default function GroupList({
+  groupList,
+  selectedGroup,
+  changeSelectedGroup,
+  setUpdateList,
+}) {
+  const [deletePopout, setDeletePopout] = useState({
+    status: false,
+    data: {},
+  });
 
-    const [deletePopout, setDeletePopout] = useState({
-        status: false,
-        data: {}
-    })
+  const [addGroupPopout, setAddGroupPopout] = useState(false);
 
-    const [addGroupPopout, setAddGroupPopout] = useState(false)
-
-    const handleAddGroup = () => {
-        setAddGroupPopout(true)
-    }
-
-    const handleDeleteGroup = (item) => {
-        setDeletePopout({
-            status: true,
-            data: {...item}
-        })
-    }
+  const handleAddGroup = () => {
+    setAddGroupPopout(true);
+  };
 
+  const handleDeleteGroup = (item) => {
+    setDeletePopout({
+      status: true,
+      data: { ...item },
+    });
+  };
 
   return (
     <>
-        <div className='p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl'>
-            {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
-            <div className='flex justify-end items-center'>
-                <button onClick={handleAddGroup} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Group</button>
-            </div>
-
-            {groupList && groupList.length < 1 ?
-            <h1 className='my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100'>No Group Found!</h1>
-            :
-            <div className='my-4 max-h-[400px] overflow-y-auto'>
-                <div className='flex flex-col'>
-                    {groupList.map(item=> (
-                        <div key={item.group_uid} className='p-2 flex gap-2 items-center justify-between w-full'>
-                            <div className='flex gap-2 items-center'>
-                                <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
-                                <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
-                            </div>
-                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>X</button>
-                        </div>
-                    ))}
-                </div>
-            </div>
-            }
+      <div className="p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl">
+        {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
+        <div className="flex justify-end items-center">
+          <button
+            onClick={handleAddGroup}
+            className="py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold"
+          >
+            Add Group
+          </button>
         </div>
-        
-        {deletePopout.status &&
-            <DeleteGroup 
-                action={()=>setDeletePopout({status:false, data:{}})}
-                situation={deletePopout.status}
-                details={deletePopout.data}
-            />
-        }
 
-        {addGroupPopout &&
-            <AddGroup 
-                action={()=>setAddGroupPopout(false)}
-                situation={addGroupPopout}
-                setUpdateList={setUpdateList}
-            />
-        }
+        {groupList && groupList.length < 1 ? (
+          <h1 className="my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100">
+            No Group Found!
+          </h1>
+        ) : (
+          <div className="my-4 max-h-[400px] overflow-y-auto">
+            <div className="flex flex-col">
+              {groupList.map((item) => (
+                <div
+                  key={item.group_uid}
+                  className="p-2 flex gap-2 items-center justify-between w-full"
+                >
+                  <div className="flex gap-2 items-center">
+                    <input
+                      type="radio"
+                      name="grouplist"
+                      value={item.group_id}
+                      checked={selectedGroup?.id == item?.group_id}
+                      onChange={changeSelectedGroup}
+                      className="w-[20px] h-[20px] outline-none"
+                    />
+                    <p className="text-sm lg:text-base text-slate-900 dark:text-slate-100">
+                      {item.group_name}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => {
+                      handleDeleteGroup(item);
+                    }}
+                    className="flex relative items-center justify-center border-0 w-6 h-6"
+                  >
+                    <img
+                      src={localImgLoad("images/icons/remove_grp.svg")}
+                      alt="remove-icon"
+                    />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {deletePopout.status && (
+        <DeleteGroup
+          action={() => setDeletePopout({ status: false, data: {} })}
+          situation={deletePopout.status}
+          details={deletePopout.data}
+        />
+      )}
+
+      {addGroupPopout && (
+        <AddGroup
+          action={() => setAddGroupPopout(false)}
+          situation={addGroupPopout}
+          setUpdateList={setUpdateList}
+        />
+      )}
     </>
-  )
+  );
 }

src/components/JobGroups/GroupMemberTable.jsx

@@ -1,98 +1,118 @@
-import React, { useState } from 'react'
-import { handlePagingFunc } from '../Pagination/HandlePagination';
-import PaginatedList  from '../Pagination/PaginatedList';
-import DeleteMember from './DeleteMember';
+import React, { useState } from "react";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import DeleteMember from "./DeleteMember";
+import { localImgLoad } from "../../lib";
 
-export default function GroupMemberTable({selectedList}) {
-  
-    // Handle Pagination
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+export default function GroupMemberTable({ selectedList }) {
+  // Handle Pagination
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
 
-    const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
-  
-    const handlePagination = (e) => {
-      handlePagingFunc(e, setCurrentPage);
-    };
+  const currentSelectedList = selectedList?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
-    const [deletePopout, setDeletePopout] = useState({
-        status: false,
-        data: {}
-    })
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
 
-    const handleDeleteMember = (item) => {
-        setDeletePopout({
-            status: true,
-            data: {...item}
-        })
-    }
-   
-    return (
-        <div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  <>
-                    {selectedList && selectedList?.length > 0 ? (
-                        currentSelectedList.map((value, index) => (
-                        <tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
-                          {/* <td className="p-1">{value?.firstname}</td>
+  const [deletePopout, setDeletePopout] = useState({
+    status: false,
+    data: {},
+  });
+
+  const handleDeleteMember = (item) => {
+    setDeletePopout({
+      status: true,
+      data: { ...item },
+    });
+  };
+
+  return (
+    <div
+      className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}
+    >
+      <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <tbody>
+            <>
+              {selectedList && selectedList?.length > 0 ? (
+                currentSelectedList.map((value, index) => (
+                  <tr
+                    key={value.uid}
+                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                  >
+                    {/* <td className="p-1">{value?.firstname}</td>
                           <td className="p-1">{value?.lastname}</td>
                           <td className="p-1">{value?.email}</td>
                           <td className="p-1 text-right">
                             <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
                           </td> */}
-                          <td className='py-2'>
-                            <div className="flex flex-col">
-                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                {value.firstname && value.firstname} {value.lastname && value.lastname}
-                              </h1>
-                              <span className="text-sm text-thin-light-gray">
-                                {value.email && value.email}
-                              </span>
-                            </div>
-                          </td>
-                          <td className='py-2 text-right'>
-                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
-                          </td>
-                        </tr>
-                        ))
-                    ) : (
-                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                        <td className="p-2">No Members Found</td>
-                      </tr>
-                    )}
-                  </>
-                </tbody>
-              </table>
-    
-              {/* PAGINATION BUTTON */}
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage == 0 ? true : false}
-                next={
-                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  selectedList?.length
-                    ? true
-                    : false
-                }
-                data={selectedList}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-              {/* END OF PAGINATION BUTTON */}
-            </div>
-    
-          {/* DELETE MEMBER POPOUT */}
-          {deletePopout.status &&
-                <DeleteMember 
-                    action={()=>setDeletePopout({status:false, data:{}})}
-                    situation={deletePopout.status}
-                    details={deletePopout.data}
-                />
-            }
-          {/* END OF DELETE MEMBER POPOUT */}
-        </div>
-      );
-    };
+                    <td className="py-2">
+                      <div className="flex flex-col">
+                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                          {value.firstname && value.firstname}{" "}
+                          {value.lastname && value.lastname}
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          {value.email && value.email}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="py-2 text-right">
+                      <button
+                        onClick={() => {
+                          handleDeleteMember(value);
+                        }}
+                        className="flex relative items-center justify-center border-0 w-8 h-8"
+                      >
+                        <img
+                          src={localImgLoad("images/icons/remove_grp.svg")}
+                          alt="remove-icon"
+                        />
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                  <td className="p-2">No Members Found</td>
+                </tr>
+              )}
+            </>
+          </tbody>
+        </table>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+          onClick={handlePagination}
+          prev={currentPage == 0 ? true : false}
+          next={
+            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+            selectedList?.length
+              ? true
+              : false
+          }
+          data={selectedList}
+          start={indexOfFirstItem}
+          stop={indexOfLastItem}
+        />
+        {/* END OF PAGINATION BUTTON */}
+      </div>
+
+      {/* DELETE MEMBER POPOUT */}
+      {deletePopout.status && (
+        <DeleteMember
+          action={() => setDeletePopout({ status: false, data: {} })}
+          situation={deletePopout.status}
+          details={deletePopout.data}
+        />
+      )}
+      {/* END OF DELETE MEMBER POPOUT */}
+    </div>
+  );
+}

src/components/JobGroups/JobGroups.jsx

@@ -1,79 +1,119 @@
-import React, { useEffect, useState } from 'react'
-import Layout from '../Partials/Layout'
+import React, { useEffect, useState } from "react";
+import Layout from "../Partials/Layout";
 
-import GroupList from './GroupList'
-import MemberList from './MemberList'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
+import GroupList from "./GroupList";
+import MemberList from "./MemberList";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";
 
 export default function JobGroups() {
+  const userApi = new usersService();
 
-    const userApi = new usersService();
+  const [updateList, setUpdateList] = useState(false);
 
-    const [updateList, setUpdateList] = useState(false)
+  const [groupList, setGroupList] = useState({
+    loading: true,
+    groups: [],
+    members: [],
+  });
 
-    
-    const [groupList, setGroupList] = useState({
-        loading:true,
-        groups: [],
-        members: []
-    })
+  const [selectedGroup, setSelectedGroup] = useState({
+    id: "",
+    name: "",
+    data: [],
+  });
 
-    const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []})
+  const changeSelectedGroup = (e) => {
+    let groupID = e.target.value;
+    const activeMembers = groupList?.members?.filter(
+      (item) => item.group_id == groupID
+    );
+    const activeGroup = groupList?.groups?.filter(
+      (item) => item.group_id == groupID
+    );
+    setSelectedGroup({
+      id: groupID,
+      name: activeGroup[0]?.group_name,
+      data: activeMembers,
+    });
+  };
 
-    const changeSelectedGroup = (e) => {
-        let groupID = e.target.value
-        const activeMembers = groupList?.members?.filter(item => item.group_id == groupID)
-        const activeGroup = groupList?.groups?.filter(item => item.group_id == groupID)
-        setSelectedGroup({id: groupID, name:activeGroup[0]?.group_name, data:activeMembers})
-    }
-
-    useEffect(()=>{
-        setGroupList({loading: true, groups: [], members: []})
-        userApi.jobGroupList({}).then(res => {
-            const {status, data} = res
-            if(status != 200 || data?.internal_return < 0){
-                setGroupList({loading: false, groups: [], members: []})
-                return
-            }
-            if(data.result_list.length < 0){
-                setGroupList({loading: false, groups: [], members: []})
-                return
-            }
-            setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
-            if(selectedGroup.id == ''){
-                let activeGroupId = data.result_list[0].group_id
-                let activeGroup = data.result_list[0].group_name
-                let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId)
-                setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers})
-            }else{
-                let activeMembers = data.result_list_member?.filter(item => item.group_id == selectedGroup?.id)
-                setSelectedGroup({id: selectedGroup?.id, name:selectedGroup?.name, data:activeMembers})
-            }
-        }).catch(error => {
-            setGroupList({loading: false, groups: [], members: []})
-            console.log(error)
-        })
-    },[updateList])
+  useEffect(() => {
+    setGroupList({ loading: true, groups: [], members: [] });
+    userApi
+      .jobGroupList({})
+      .then((res) => {
+        const { status, data } = res;
+        if (status != 200 || data?.internal_return < 0) {
+          setGroupList({ loading: false, groups: [], members: [] });
+          return;
+        }
+        if (data.result_list.length < 0) {
+          setGroupList({ loading: false, groups: [], members: [] });
+          return;
+        }
+        setGroupList({
+          loading: false,
+          groups: data.result_list,
+          members: data.result_list_member,
+        });
+        if (selectedGroup.id == "") {
+          let activeGroupId = data.result_list[0].group_id;
+          let activeGroup = data.result_list[0].group_name;
+          let activeMembers = data.result_list_member?.filter(
+            (item) => item.group_id == activeGroupId
+          );
+          setSelectedGroup({
+            id: activeGroupId,
+            name: activeGroup,
+            data: activeMembers,
+          });
+        } else {
+          let activeMembers = data.result_list_member?.filter(
+            (item) => item.group_id == selectedGroup?.id
+          );
+          setSelectedGroup({
+            id: selectedGroup?.id,
+            name: selectedGroup?.name,
+            data: activeMembers,
+          });
+        }
+      })
+      .catch((error) => {
+        setGroupList({ loading: false, groups: [], members: [] });
+        console.log(error);
+      });
+  }, [updateList]);
 
   return (
     <Layout>
-        <div>
-            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1>
-        </div>
-        <div className='p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white'>
-            {groupList.loading ?
-                <div className='w-full h-[400px] flex justify-center items-center'>
-                    <LoadingSpinner size='16' />
-                </div>
-            :
-            <>
-                <GroupList groupList={groupList?.groups} selectedGroup={selectedGroup} changeSelectedGroup={changeSelectedGroup} setUpdateList={setUpdateList} />
-                <MemberList groupList={groupList?.groups} selectedGroup={selectedGroup} setUpdateList={setUpdateList} />
-            </>
-            }
-        </div>
+      <div>
+        <h1 className="mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100">
+          Jobs Groups
+        </h1>
+      </div>
+      <div className="p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white">
+        {groupList.loading ? (
+          <div className="w-full h-[400px] flex justify-center items-center">
+            <LoadingSpinner size="16" />
+          </div>
+        ) : (
+          <>
+            <GroupList
+              groupList={groupList?.groups}
+              selectedGroup={selectedGroup}
+              changeSelectedGroup={changeSelectedGroup}
+              setUpdateList={setUpdateList}
+            />
+            <MemberList
+              groupList={groupList?.groups}
+              selectedGroup={selectedGroup}
+              setUpdateList={setUpdateList}
+            />
+          </>
+        )}
+      </div>
     </Layout>
-  )
+  );
 }

src/components/JobGroups/MemberList.jsx

@@ -1,262 +1,295 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import InputCom from '../../components/Helpers/Inputs/InputCom/index'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import GroupMemberTable from './GroupMemberTable'
+import InputCom from "../../components/Helpers/Inputs/InputCom/index";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import GroupMemberTable from "./GroupMemberTable";
 
-import EmailValidator from '../../lib/EmailValidator'
+import EmailValidator from "../../lib/EmailValidator";
 
-import usersService from '../../services/UsersService'
+import { apiConst } from "../../lib/apiConst";
+import usersService from "../../services/UsersService";
 
-export default function MemberList({groupList, selectedGroup, setUpdateList}) {
+export default function MemberList({
+  groupList,
+  selectedGroup,
+  setUpdateList,
+}) {
+  const api = new usersService();
 
-    const api = new usersService()
+  const [fields, setFields] = useState({
+    firstname: "",
+    lastname: "",
+    email: "",
+  });
 
-    const [fields, setFields] = useState({
-        firstname: '',
-        lastname: '',
-        email: ''
-    })
+  const handleFieldsChange = ({ target: { name, value } }) => {
+    setFields((prev) => ({ ...prev, [name]: value }));
+    // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+    // if(error >= 0){
+    //   let oldErrorArr = requestState.errors
+    //   let newErrorArr = oldErrorArr.splice(error, 1)
+    //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
+    // }
 
-    const handleFieldsChange = ({target:{name, value}}) => {
-        setFields(prev => ({...prev, [name]:value}))
-        // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
-        // if(error >= 0){
-        //   let oldErrorArr = requestState.errors
-        //   let newErrorArr = oldErrorArr.splice(error, 1)
-        //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
-        // }
-
-        if(value == ''){
-            setRequestState({
-                loading: false,
-                status: false,
-                message: '',
-                data: [],
-                errors: [name]
-            })
-        }else{
-            let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
-            if(error >= 0){
-              let oldErrorArr = requestState.errors
-              let newErrorArr = oldErrorArr.splice(error, 1)
-              setRequestState(prev => ({...prev, errors:oldErrorArr}))
-            }
-        }
-
-        if(name == 'email'){
-             //checks if email is a valid email address
-            let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-            if (!EmailValidator(value)) {
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: ['email']
-                })
-            }
-        }
-    }
-
-    const [requestState, setRequestState] = useState({
+    if (value == "") {
+      setRequestState({
         loading: false,
         status: false,
-        message: '',
+        message: "",
         data: [],
-        errors: ['email', 'firstname', 'lastname']
-      })
-
-    const addMember = () => {
-        // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
-        //     if(typeof item == 'string' && fields[item] === ''){
-        //         return item
-        //     }
-        // })
-    
-        // if(errors.length){
-        // setRequestState({
-        //     loading: false,
-        //     status: false,
-        //     message: '',
-        //     data: [],
-        //     errors: [...errors]
-        // })
-        // return
-        // }
-
-        //checks if email is a valid email address
-        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-        if (!EmailValidator(fields.email)) {
-            setRequestState({
-                loading: false,
-                status: false,
-                message: 'Email is invalid',
-                data: [],
-                errors: []
-            })
-            return setTimeout(()=>{
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: []
-                })
-            },3000)
-        }
-              
-        setRequestState({
-        loading: true,
-        status: false,
-        message: '',
-        data: [],
-        errors: []
-        })
-         const requestData = {
-            firstname:fields.firstname,lastname:fields.lastname, email:fields.email, group_id: selectedGroup?.id, action:13015
-         }
-        
-         api.groupMemberAdd(requestData).then(response => {
-            let {status, data} = response
-            if(status != 200 || data?.internal_return < 0){
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: 'Unable to add member',
-                    data: [],
-                    errors: []
-                })
-                return
-            }
-            setRequestState({
-                loading: false,
-                status: true,
-                message: 'Member added',
-                data: [],
-                errors: []
-            })
-
-            setTimeout(()=>{
-                // trigger group page reload
-                setUpdateList(prev => !prev)
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: []
-                })
-            }, 3000)
-
-         }).catch(error=>{
-            setRequestState({
-                loading: false,
-                status: false,
-                message: 'Something went wrong, try again',
-                data: [],
-                errors: []
-            })
-         }).finally(()=>{
-            setTimeout(()=>{
-                setRequestState({
-                    loading: false,
-                    status: false,
-                    message: '',
-                    data: [],
-                    errors: []
-                })
-                setFields({
-                    firstname: '',
-                    lastname: '',
-                    email: ''
-                })
-            }, 3000)
-        })
+        errors: [name],
+      });
+    } else {
+      let error = requestState?.errors?.indexOf(name); //// checks if the input field was in error array and removes it when the input changes
+      if (error >= 0) {
+        let oldErrorArr = requestState.errors;
+        let newErrorArr = oldErrorArr.splice(error, 1);
+        setRequestState((prev) => ({ ...prev, errors: oldErrorArr }));
+      }
     }
 
+    if (name == "email") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (!EmailValidator(value)) {
+        setRequestState({
+          loading: false,
+          status: false,
+          message: "",
+          data: [],
+          errors: ["email"],
+        });
+      }
+    }
+  };
+
+  const [requestState, setRequestState] = useState({
+    loading: false,
+    status: false,
+    message: "",
+    data: [],
+    errors: ["email", "firstname", "lastname"],
+  });
+
+  const addMember = () => {
+    // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
+    //     if(typeof item == 'string' && fields[item] === ''){
+    //         return item
+    //     }
+    // })
+
+    // if(errors.length){
+    // setRequestState({
+    //     loading: false,
+    //     status: false,
+    //     message: '',
+    //     data: [],
+    //     errors: [...errors]
+    // })
+    // return
+    // }
+
+    //checks if email is a valid email address
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (!EmailValidator(fields.email)) {
+      setRequestState({
+        loading: false,
+        status: false,
+        message: "Email is invalid",
+        data: [],
+        errors: [],
+      });
+      return setTimeout(() => {
+        setRequestState({
+          loading: false,
+          status: false,
+          message: "",
+          data: [],
+          errors: [],
+        });
+      }, 3000);
+    }
+
+    setRequestState({
+      loading: true,
+      status: false,
+      message: "",
+      data: [],
+      errors: [],
+    });
+    const requestData = {
+      firstname: fields.firstname,
+      lastname: fields.lastname,
+      email: fields.email,
+      group_id: selectedGroup?.id,
+      action: apiConst.WRENCHBOARD_JOB_GROUP_MEMBER,
+    };
+
+    api
+      .groupMemberAdd(requestData)
+      .then((response) => {
+        let { status, data } = response;
+        if (status != 200 || data?.internal_return < 0) {
+          setRequestState({
+            loading: false,
+            status: false,
+            message: "Unable to add member",
+            data: [],
+            errors: [],
+          });
+          return;
+        }
+        setRequestState({
+          loading: false,
+          status: true,
+          message: "Member added",
+          data: [],
+          errors: [],
+        });
+
+        setTimeout(() => {
+          // trigger group page reload
+          setUpdateList((prev) => !prev);
+          setRequestState({
+            loading: false,
+            status: false,
+            message: "",
+            data: [],
+            errors: [],
+          });
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestState({
+          loading: false,
+          status: false,
+          message: "Something went wrong, try again",
+          data: [],
+          errors: [],
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestState({
+            loading: false,
+            status: false,
+            message: "",
+            data: [],
+            errors: [],
+          });
+          setFields({
+            firstname: "",
+            lastname: "",
+            email: "",
+          });
+        }, 3000);
+      });
+  };
+
   return (
     <>
-    <div className='p-5 w-full min-h-[600px] overflow-y-auto'>
-        {groupList && groupList.length < 1 ?
-        <>
-            <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
-        </>
-        :
-        <>
-            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>{selectedGroup?.name}</h1>
-            <div className='w-full flex flex-col-reverse lg:flex-col'>
-                <div className='py-3 w-full'>
-                    <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center'>
-                        <div className="input-item">
-                            <InputCom
-                                labelClass="tracking-wider"
-                                fieldClass="sm:px-6 px-2"
-                                value={fields.firstname}
-                                inputHandler={handleFieldsChange}
-                                placeholder="First Name"
-                                // label="Firstname"
-                                name="firstname"
-                                type="text"
-                                // iconName="message"
-                            />
-                        </div>
-                        <div className="input-item">
-                            <InputCom
-                                labelClass="tracking-wider"
-                                fieldClass="sm:px-6 px-2"
-                                value={fields.lastname}
-                                inputHandler={handleFieldsChange}
-                                placeholder="Last Name"
-                                // label="Lastname"
-                                name="lastname"
-                                type="text"
-                                // iconName="message"
-                            />
-                        </div>
-                        <div className="input-item w-full sm:w-[150%]">
-                            <InputCom
-                                labelClass="tracking-wider"
-                                fieldClass="sm:px-6 px-2"
-                                value={fields.email}
-                                inputHandler={handleFieldsChange}
-                                placeholder="Email"
-                                // label="Email"
-                                name="email"
-                                type="email"
-                                // iconName="message"
-                            />
-                        </div>
-                        <div className='flex justify-end items-end'>
-                            {requestState.loading ?
-                            <LoadingSpinner size='8' color='sky-blue' />
-                            :
-                            <button 
-                                onClick={addMember} 
-                                disabled={requestState.loading || requestState.status || requestState.errors.length} 
-                                className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${requestState.loading || requestState.status || requestState.errors.length ? 'bg-sky-blue/50' : 'bg-sky-blue hover:bg-sky-600'} `}
-                            >
-                                Add Member
-                            </button>
-                            }
-                        </div>
-
-                        {!requestState.loading && requestState.message &&
-                        <p className={`text-lg absolute -bottom-7 left-0 ${requestState.status ? 'text-green-500' : 'text-red-500'}`}>{requestState.message}</p>
+      <div className="p-5 w-full min-h-[600px] overflow-y-auto">
+        {groupList && groupList.length < 1 ? (
+          <>
+            <h1 className="my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100">
+              You Currently Do not have any Group, Please Add Group
+            </h1>
+          </>
+        ) : (
+          <>
+            <h1 className="mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100">
+              {selectedGroup?.name}
+            </h1>
+            <div className="w-full flex flex-col-reverse lg:flex-col">
+              <div className="py-3 w-full">
+                <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center">
+                  <div className="input-item">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={fields.firstname}
+                      inputHandler={handleFieldsChange}
+                      placeholder="First Name"
+                      // label="Firstname"
+                      name="firstname"
+                      type="text"
+                      // iconName="message"
+                    />
+                  </div>
+                  <div className="input-item">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={fields.lastname}
+                      inputHandler={handleFieldsChange}
+                      placeholder="Last Name"
+                      // label="Lastname"
+                      name="lastname"
+                      type="text"
+                      // iconName="message"
+                    />
+                  </div>
+                  <div className="input-item w-full sm:w-[150%]">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={fields.email}
+                      inputHandler={handleFieldsChange}
+                      placeholder="Email"
+                      // label="Email"
+                      name="email"
+                      type="email"
+                      // iconName="message"
+                    />
+                  </div>
+                  <div className="flex justify-end items-end">
+                    {requestState.loading ? (
+                      <LoadingSpinner size="8" color="sky-blue" />
+                    ) : (
+                      <button
+                        onClick={addMember}
+                        disabled={
+                          requestState.loading ||
+                          requestState.status ||
+                          requestState.errors.length
                         }
-                    </div>
-                </div>
-                <div className='my-2 flex flex-col min-h-[300px]'>
-                    {selectedGroup?.data?.length < 1 ?
-                    <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Member Found, Please Add</h1>
-                    :
-                    <GroupMemberTable selectedList={selectedGroup?.data} />
-                    }
+                        className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${
+                          requestState.loading ||
+                          requestState.status ||
+                          requestState.errors.length
+                            ? "bg-sky-blue/50"
+                            : "bg-sky-blue hover:bg-sky-600"
+                        } `}
+                      >
+                        Add Member
+                      </button>
+                    )}
+                  </div>
+
+                  {!requestState.loading && requestState.message && (
+                    <p
+                      className={`text-lg absolute -bottom-7 left-0 ${
+                        requestState.status ? "text-green-500" : "text-red-500"
+                      }`}
+                    >
+                      {requestState.message}
+                    </p>
+                  )}
                 </div>
+              </div>
+              <div className="my-2 flex flex-col min-h-[300px]">
+                {selectedGroup?.data?.length < 1 ? (
+                  <h1 className="my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100">
+                    No Member Found, Please Add
+                  </h1>
+                ) : (
+                  <GroupMemberTable selectedList={selectedGroup?.data} />
+                )}
+              </div>
             </div>
-        </>
-        }
-    </div>
+          </>
+        )}
+      </div>
     </>
-  )
+  );
 }

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import localImgLoad from "../../lib/localImgLoad";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
-
   const navigate = useNavigate();
   let { pathname } = useLocation();
 
@@ -45,7 +43,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${
+                        MyJobList.session_image_server
+                      }${localStorage.getItem("session_token")}/job/${
+                        value.job_uid
+                      }`;
                       return (
                         <tr
                           key={index}
@@ -112,7 +114,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                 className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                               >
                                 {value.owner_status == "OWNER"
-                                  ? "Manage"
+                                  ? "Review"
                                   : "Send Updates"}
                               </button>
                             </div>

src/components/MyPendingJobs/DeleteTaskModal.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useDispatch } from "react-redux";
-
+import { apiConst } from "../../lib/apiConst";
 
 function DeleteTaskModal({ details, onClose, situation, setReloadList }) {
   let dispatch = useDispatch();
@@ -19,34 +19,50 @@ function DeleteTaskModal({ details, onClose, situation, setReloadList }) {
 
   // FUNCTION TO DELETE TASK
   const deleteTask = () => {
-    setRequestStatus({loading:true, status:false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
 
-    let reqData = { // REQUEST PAYLOAD
+    let reqData = {
+      // REQUEST PAYLOAD
       suggest_uid: details.uid,
-      suggest_action: 555,
-      offset: 0
-    }
-    ApiCall.suggestStatus(reqData).then((response)=>{ // API CALL TO DELETE SUGGESTED TASK
-      let {data} = response
-      if(data.internal_return < 0){
-        setRequestStatus({loading:false, status:false, message: 'Unable to delete, Try again'})
-        return setTimeout(()=>{
-            setRequestStatus({loading:false, status:false, message: ''})
-        },3000)
-      }
-      setRequestStatus({loading:false, status:true, message: 'Family Suggest Deleted'})
-      setReloadList(prev => !prev) // RELOADS THE FAMILY SUGGEST LIST TABLE
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-          onClose()
-      },3000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message: 'Unable to delete, Try again'})
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-      },3000)
-    })
-  }
+      suggest_action: apiConst.WRENCHBOARD_COMPLETE_SENDMONEY_INTERSW,
+      offset: 0,
+    };
+    ApiCall.suggestStatus(reqData)
+      .then((response) => {
+        // API CALL TO DELETE SUGGESTED TASK
+        let { data } = response;
+        if (data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Unable to delete, Try again",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Family Suggest Deleted",
+        });
+        setReloadList((prev) => !prev); // RELOADS THE FAMILY SUGGEST LIST TABLE
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          onClose();
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to delete, Try again",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+      });
+  };
 
   return (
     <ModalCom action={onClose} situation={situation}>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -6,9 +6,7 @@ import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import localImgLoad from "../../lib/localImgLoad";
 
-
 export default function MyPendingJobTable({ MyJobList, className }) {
-
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -19,7 +17,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
     indexOfFirstItem,
     indexOfLastItem
   );
-  
+
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -46,7 +44,11 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${
+                        MyJobList.session_image_server
+                      }${localStorage.getItem("session_token")}/job/${
+                        value.job_uid
+                      }`;
                       return (
                         <tr
                           key={index}
@@ -107,7 +109,9 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                               }}
                               className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
-                              {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
+                              {value.owner_status == "OWNER"
+                                ? "Manage"
+                                : "View"}
                             </button>
                           </td>
                         </tr>

src/components/MyPendingJobs/SendReminderModal.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useDispatch } from "react-redux";
-
+import { apiConst } from "../../lib/apiConst";
 
 function SendReminderModal({ details, onClose, situation, setReloadList }) {
   let dispatch = useDispatch();
@@ -19,34 +19,50 @@ function SendReminderModal({ details, onClose, situation, setReloadList }) {
 
   // FUNCTION TO SEND REMINDER
   const sendReminder = () => {
-    setRequestStatus({loading:true, status:false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
 
-    let reqData = { // REQUEST PAYLOAD
+    let reqData = {
+      // REQUEST PAYLOAD
       suggest_uid: details.uid,
-      suggest_action: 222,
-      offset: 0
-    }
-    ApiCall.suggestStatus(reqData).then((response)=>{ // API CALL TO DELETE SUGGESTED TASK
-      let {data} = response
-      if(data.internal_return < 0){
-        setRequestStatus({loading:false, status:false, message: 'Unable to send reminder, Try again1111'})
-        return setTimeout(()=>{
-            setRequestStatus({loading:false, status:false, message: ''})
-        },3000)
-      }
-      setRequestStatus({loading:false, status:true, message: 'Reminder Sent'})
-      setReloadList(prev => !prev) // RELOADS THE FAMILY SUGGEST LIST TABLE
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-          onClose()
-      },3000)
-    }).catch(error => {
-      setRequestStatus({loading:false, status:false, message: 'Unable to send reminder, Try againNETWORK'})
-      setTimeout(()=>{
-          setRequestStatus({loading:false, status:false, message: ''})
-      },3000)
-    })
-  }
+      suggest_action: apiConst.OFFER_CANCEL,
+      offset: 0,
+    };
+    ApiCall.suggestStatus(reqData)
+      .then((response) => {
+        // API CALL TO DELETE SUGGESTED TASK
+        let { data } = response;
+        if (data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Unable to send reminder, Try again1111",
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Reminder Sent",
+        });
+        setReloadList((prev) => !prev); // RELOADS THE FAMILY SUGGEST LIST TABLE
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+          onClose();
+        }, 3000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to send reminder, Try againNETWORK",
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+      });
+  };
 
   return (
     <ModalCom action={onClose} situation={situation}>
@@ -82,27 +98,32 @@ function SendReminderModal({ details, onClose, situation, setReloadList }) {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center p-8">
-
-        <div className="mb-6 w-full flex gap-4 items-center">
+          <div className="mb-6 w-full flex gap-4 items-center">
             <div className="icon max-w-[150px] min-w-[150px] max-h-[150px] min-h-[150px] flex justify-center items-center">
-                <img src={require(`../../assets/images/family/${details.banner || "default.jpg"}`)} alt="" className="w-full h-full" />
+              <img
+                src={require(`../../assets/images/family/${
+                  details.banner || "default.jpg"
+                }`)}
+                alt=""
+                className="w-full h-full"
+              />
             </div>
             <div className="w-full">
-                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                    {details.title}
-                </p>
+              <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                {details.title}
+              </p>
 
-                <p className="text-sm mb-2 text-thin-light-gray font-medium">
-                    {details.description}
-                </p>
-                {
-                  details.remind && 
+              <p className="text-sm mb-2 text-thin-light-gray font-medium">
+                {details.description}
+              </p>
+              {details.remind && (
                 <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                    Last Remind: {new Date(details.remind).toLocaleString().split(',')[0]}
+                  Last Remind:{" "}
+                  {new Date(details.remind).toLocaleString().split(",")[0]}
                 </p>
-                }
+              )}
             </div>
-        </div>
+          </div>
 
           <div className="w-full flex justify-end">
             {/* <button

src/components/Partials/MobileSideBar.jsx

@@ -190,16 +190,16 @@ export default function MobileSidebar({
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
                     {[
-                      { name: "List", path: "/myjobs", iconName: "people-two" },
+                      { name: "List", path: "/myjobs", iconName: "job-list" },
                       {
                         name: "Pending",
                         path: "/my-pending-jobs",
-                        iconName: "people-two",
+                        iconName: "pending-job",
                       },
                       {
                         name: "Active",
                         path: "/my-active-jobs",
-                        iconName: "people-two",
+                        iconName: "active-job",
                       },
                     ].map(({ name, path, iconName }, idx) => (
                       <ListItem

src/components/Partials/RightSideBar.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 //import SideStatistics from "./SideStatistics";
+import { localImgLoad } from "../../lib";
 
 export default function RightSideBar({myJobList}) {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
@@ -169,24 +170,8 @@ export default function RightSideBar({myJobList}) {
           <div className="platform-list">
               <div className="px-8 item flex space-x-3 items-center mb-4">
                 {/* image */}
-                <div className="w-8 h-8 rounded-full">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    id="history"
-                  >
-                    <g data-name="14">
-                      <circle cx="9" cy="14" r="7" fill="#ffd54f"></circle>
-                      <path
-                        fill="#ef6c00"
-                        d="M21 9H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zM21 5H3A1 1 0 0 1 3 3H21a1 1 0 0 1 0 2zM21 13H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 17H19a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM21 21H17a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"
-                      ></path>
-                      <path
-                        fill="#ff8f00"
-                        d="M10,10a1,1,0,0,0-2,0v3.59L6.29,15.29a1,1,0,1,0,1.41,1.41l2-2A1,1,0,0,0,10,14Z"
-                      ></path>
-                    </g>
-                  </svg>
+                <div className="w-8 h-8 p-[4px] rounded-full">
+                  <img src={localImgLoad('images/icons/job_active.svg')} className="w-full h-full" alt='Active Task' />
                 </div>
                 {/* name */}
                 <div>
@@ -196,123 +181,48 @@ export default function RightSideBar({myJobList}) {
                 </div>
                 {/* action */}
               </div>
-              {/* {userDetails && userDetails?.account_type !== "FAMILY" && (
-                <>
-                </>
-              )} */}
-                <div className="px-8 item flex space-x-3 items-center mb-4">
-                  {/* image */}
-                  <div className="w-8 h-8 rounded-full">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      id="add-user"
-                    >
-                      <path
-                        fill="#9bcb5b"
-                        d="M12 13.4c-2 0-3.7-1.6-3.7-3.6s1.6-3.7 3.6-3.7 3.7 1.6 3.7 3.6-1.6 3.6-3.6 3.7zm0-6.2c-1.4 0-2.6 1.1-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6s2.6-1.1 2.6-2.6c-.1-1.5-1.2-2.6-2.6-2.6z"
-                      ></path>
-                      <path
-                        fill="#9bcb5b"
-                        d="M16.6 17.9c-.3 0-.5-.2-.6-.5 0-2.2-1.8-4-4-4s-4 1.8-4 4c0 .3-.3.5-.6.5-.2 0-.4-.2-.5-.5 0-2.8 2.3-5.1 5.1-5.1s5.1 2.3 5.1 5.1c0 .3-.2.5-.5.5z"
-                      ></path>
-                      <path
-                        fill="#0376bc"
-                        d="M12 23.7C5.5 23.7.3 18.4.3 12 .3 5.5 5.6.3 12 .3c2.6 0 5.1.9 7.2 2.5.2.2.2.6 0 .8-.2.2-.4.2-.7.1-1.9-1.4-4.1-2.2-6.5-2.2C6.2 1.4 1.4 6.2 1.4 12S6.2 22.6 12 22.6 22.6 17.8 22.6 12c0-2.4-.8-4.6-2.2-6.5-.2-.3-.1-.6.2-.8.2-.1.5-.1.7.1 1.6 2 2.5 4.6 2.4 7.2 0 6.4-5.3 11.7-11.7 11.7z"
-                      ></path>
-                      <circle cx="20.2" cy="20.3" r="2.4" fill="#fff"></circle>
-                      <path
-                        fill="#9bcb5b"
-                        d="M18 18.1c.6-.6 1.4-.9 2.2-.9.8 0 1.6.3 2.2.9s1 1.4.9 2.2c0 .8-.3 1.6-.9 2.2s-1.4 1-2.2.9c-.8 0-1.6-.3-2.2-.9s-1-1.4-.9-2.2c-.1-.8.3-1.7.9-2.2zm3.8 2.5V20h-1.3v-1.3h-.6V20h-1.3v.6h1.3v1.3h.6v-1.3h1.3z"
-                      ></path>
-                    </svg>
-                  </div>
-                  {/* name */}
-                  <div>
-                    <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/my-review-jobs">Review Pending</NavLink>
-                    </p>
-                  </div>
-                </div>
 
-                <div className="px-8 item flex space-x-3 items-center mb-4">
-                  {/* image */}
-                  <div className="w-8 h-8 rounded-full">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 48 48"
-                      id="InternationalUser"
-                    >
-                      <path
-                        fill="#e6e7f9"
-                        d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
-                        className="colorc1e5ff svgShape"
-                      ></path>
-                      <path
-                        fill="#ff6699"
-                        d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
-                        className="colorff99b0 svgShape"
-                      ></path>
-                      <path
-                        fill="#998da0"
-                        d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
-                        className="colorffd499 svgShape"
-                      ></path>
-                      <path
-                        fill="#e6e7f9"
-                        d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
-                        className="colorc1e5ff svgShape"
-                      ></path>
-                    </svg>
-                  </div>
-                  {/* name */}
-                  <div>
-                    <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/my-pastdue-jobs">Past Due</NavLink>
-                    </p>
-                  </div>
+              <div className="px-8 item flex space-x-3 items-center mb-4">
+                {/* image */}
+                <div className="w-8 h-8 p-[4px] rounded-full">
+                  <img src={localImgLoad('images/icons/job_pending.svg')} className="w-full h-full" alt='Review Task' />
                 </div>
-
-                {/* Line */}
-                <div className="my-4 mx-auto w-10/12 h-[2px] bg-slate-500 dark:bg-white rounded-full"></div>
-
-                <div className="px-8 item flex space-x-3 items-center mb-4">
-                  {/* image */}
-                  <div className="w-8 h-8 rounded-full">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 48 48"
-                      id="InternationalUser"
-                    >
-                      <path
-                        fill="#e6e7f9"
-                        d="M38.5 31.1c2.1-1.1 3.9-2.5 5.4-4.4h-3.2c-.6 1.6-1.3 3.1-2.2 4.4zm-5.8 1.4c2-.7 3.7-2.8 4.9-5.8h-4.9v5.8zm8.8-8.6h4.2c.9-1.8 1.5-3.7 1.7-5.8h-5.1c-.1 2-.4 4-.8 5.8zm2.4-17.3c-1.5-1.8-3.3-3.3-5.4-4.4.8 1.2 1.6 2.7 2.2 4.4h3.2zm-5.3 2.9h-5.9v5.8h6.7c-.1-2.1-.4-4.1-.8-5.8zm3.7 5.8h5.1c-.2-2.1-.8-4-1.7-5.8h-4.2c.4 1.8.7 3.7.8 5.8zM32.7.8v5.8h4.9c-1.2-2.9-2.9-5.1-4.9-5.8zm6.7 17.3h-6.7v5.8h5.9c.4-1.8.7-3.8.8-5.8zM25 6.6h4.9V.8c-2 .7-3.7 2.9-4.9 5.8zm-1.8 8.7h6.7V9.5H24c-.4 1.7-.7 3.7-.8 5.8zm6.7 17.2v-5.8H25c1.2 3 2.9 5.1 4.9 5.8zM24.1 2.3c-2.1 1.1-3.9 2.5-5.4 4.4H22c.5-1.7 1.3-3.2 2.1-4.4zM24 23.9h5.9v-5.8h-6.7c.1 2 .4 4 .8 5.8z"
-                        className="colorc1e5ff svgShape"
-                      ></path>
-                      <path
-                        fill="#ff6699"
-                        d="M3.7 44.7c0 1.6 1.2 2.8 2.8 2.8 1.3 0 2.4-.9 2.7-2.2.3 1.3 1.4 2.2 2.7 2.2 1.5 0 2.8-1.3 2.8-2.8V30.1h3.1V18.8c0-4.2-3.3-7.5-7.4-7.5H8c-4.1 0-7.4 3.4-7.4 7.5v11.3h3.1v14.6z"
-                        className="colorff99b0 svgShape"
-                      ></path>
-                      <path
-                        fill="#998da0"
-                        d="M9.2 10.3c2.4 0 4.4-2.2 4.4-4.9S11.6.5 9.2.5C6.8.5 4.8 2.7 4.8 5.4s2 4.9 4.4 4.9z"
-                        className="colorffd499 svgShape"
-                      ></path>
-                      <path
-                        fill="#e6e7f9"
-                        d="M16.9 9.5c-.3.6-.5 1.2-.8 1.8 1.3 1 2.3 2.4 2.9 4h1.3c.1-2 .3-4 .8-5.8h-4.2zm2.9 9.3v5.1h1.4c-.4-1.8-.7-3.8-.8-5.8h-.6c-.1.2 0 .4 0 .7zm2.2 7.9h-2.2v1.2c1.3 1.3 2.7 2.4 4.4 3.2-.9-1.3-1.7-2.8-2.2-4.4z"
-                        className="colorc1e5ff svgShape"
-                      ></path>
-                    </svg>
-                  </div>
-                  {/* name */}
-                  <div>
-                    <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/job-groups">Job Groups</NavLink>
-                    </p>
-                  </div>
+                {/* name */}
+                <div>
+                  <p className="text-thin-light-gray text-base font-medium">
+                    <NavLink to="/my-review-jobs">Review Pending</NavLink>
+                  </p>
                 </div>
+              </div>
+
+              <div className="px-8 item flex space-x-3 items-center mb-4">
+                {/* image */}
+                <div className="w-8 h-8 p-[4px] rounded-full">
+                  <img src={localImgLoad('images/icons/job_past_due.svg')} className="w-full h-full" alt='Past Due Task' />
+                </div>
+                {/* name */}
+                <div>
+                  <p className="text-thin-light-gray text-base font-medium">
+                    <NavLink to="/my-pastdue-jobs">Past Due</NavLink>
+                  </p>
+                </div>
+              </div>
+
+              {/* Line */}
+              <div className="my-4 mx-auto w-10/12 h-[2px] bg-slate-500 dark:bg-white rounded-full"></div>
+
+              <div className="px-8 item flex space-x-3 items-center mb-4">
+                {/* image */}
+                <div className="w-8 h-8 p-[4px] rounded-full">
+                  <img src={localImgLoad('images/icons/job_group.svg')} className="w-full h-full" alt='Job Groups' />
+                </div>
+                {/* name */}
+                <div>
+                  <p className="text-thin-light-gray text-base font-medium">
+                    <NavLink to="/job-groups">Job Groups</NavLink>
+                  </p>
+                </div>
+              </div>
           </div>
         </div>
         }

src/components/Partials/Sidebar.jsx

@@ -215,17 +215,17 @@ export default function Sidebar({
                       {
                         name: "List",
                         path: "/myjobs",
-                        iconName: "people-two",
+                        iconName: "job-list",
                       },
                       {
                         name: "Pending",
                         path: "/my-pending-jobs",
-                        iconName: "people-two",
+                        iconName: "pending-job",
                       },
                       {
                         name: "Active",
                         path: "/my-active-jobs",
-                        iconName: "people-two",
+                        iconName: "active-job",
                       },
                     ].map(({ name, path, iconName }, idx) => (
                       <ListItem

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -11,6 +11,7 @@ import profileImage from "../../../assets/images/profile.jpg";
 
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
+import { apiConst } from "../../../lib/apiConst";
 
 const validationSchema = Yup.object().shape({
   email: Yup.string()
@@ -147,7 +148,7 @@ export default function PersonalInfoTab({
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: "FILE",
-          action: 11300,
+          action: apiConst.WRENCHBOARD_PICTURE_PROFILE,
         };
 
         setUploadStatus({

src/components/UploadProduct/index.jsx

@@ -8,6 +8,7 @@ import ProductUploadField from "./ProductUploadField";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 import { useNavigate } from "react-router-dom";
+import { apiConst } from "../../lib/apiConst";
 
 export default function UploadProduct({uploadTypes}) {
   const apiCall = new usersService()
@@ -152,7 +153,7 @@ export default function UploadProduct({uploadTypes}) {
       title: itemName,
       description: description,
       msg_type: 'FILE',
-      action: 11307
+      action: apiConst.WRENCHBOARD_RESOURCE_MYFILES
     }
 
     if(!isValidFile(imgDetails, uploadTypes?.data)){ // FUNCTION TO CHECK IF FILE TYPE IS VALID

src/components/jobPopout/EditJobPopout.jsx

@@ -8,6 +8,7 @@ import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { apiConst } from "../../lib/apiConst";
 
 const validationSchema = Yup.object().shape({
   country: Yup.string()
@@ -162,7 +163,7 @@ const EditJobPopOut = ({
           file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
           file_data: base64Img,
           msg_type: "FILE",
-          action: 11303,
+          action: apiConst.WRENCHBOARD_PICTURE_JOB,
         };
         setUploadStatus({
           loading: true,

src/components/jobPopout/JobListPopout.jsx

@@ -1,13 +1,13 @@
 import { Field, Form, Formik } from "formik";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useDispatch } from "react-redux";
 import * as Yup from "yup";
 import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
-import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from "react-redux";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -23,13 +23,15 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+  const [selectedTab, setSelectedTab] = useState("public");
+  const tabs = ["public", "individual", "group"];
 
-  const [selectedTab, setSelectedTab] = useState('public')
-  const tabs = ['public', 'individual', 'group']
+  const dispatch = useDispatch();
 
-const dispatch = useDispatch()
-
-const [requestStatus, setRequestStatus] = useState({message:'', status:false})
+  const [requestStatus, setRequestStatus] = useState({
+    message: "",
+    status: false,
+  });
 
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
@@ -48,13 +50,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
   const memberList = useCallback(async () => {
     setLoader({ member: true, jobFields: false });
     try {
-      let reqData = {
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      let res = await apiCall.familyListings(reqData);
+      let res = await apiCall.familyListings();
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status == "OK") {
         let { result_list } = data;
@@ -130,7 +126,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       reqData = {
         ...jobReq,
         family_uid: values?.family,
-        action: 13025,
         assign_mode: 110011,
       };
       setLoader({ jobFields: { family: true } });
@@ -139,7 +134,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       reqData = {
         ...jobReq,
         duration: Number(values?.public),
-        action: 13025,
         assign_mode: 110022,
       };
       setLoader({ jobFields: { public: true } });
@@ -148,7 +142,6 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       reqData = {
         ...jobReq,
         email: values?.individual,
-        action: 13025,
         assign_mode: 110033,
       };
       setLoader({ jobFields: { individual: true } });
@@ -156,9 +149,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       // for group input
       reqData = {
         ...jobReq,
-        email: '',
+        email: "",
         group_id: values?.group,
-        action: 13025,
         assign_mode: 110044,
         duration: details?.timeline_days,
         // duration: 0,
@@ -171,50 +163,61 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
     try {
       const res = await apiCall.assignJobTask(reqData);
       let { status, data } = await res;
-      if(status != 200 || data.internal_return < 0){
-        setRequestStatus({message:'Unable to complete', status:false})
-        return setTimeout(()=>{
+      if (status != 200 || data.internal_return < 0) {
+        setRequestStatus({ message: "Unable to complete", status: false });
+        return setTimeout(() => {
           setLoader({ jobFields: false });
-          setRequestStatus({message:'', status:false})
-        },3000)
+          setRequestStatus({ message: "", status: false });
+        }, 3000);
       }
       dispatch(tableReload({ type: "JOBTABLE" }));
-      setRequestStatus({message:'Successful', status:true})
-      setTimeout(()=>{
+      setRequestStatus({ message: "Successful", status: true });
+      setTimeout(() => {
         setLoader({ jobFields: false });
         onClose();
         throw new Response(data);
-      },3000)
+      }, 3000);
     } catch (error) {
-      setRequestStatus({message:'Unable to complete', status:false})
-      setTimeout(()=>{
-        setRequestStatus({message:'', status:false})
+      setRequestStatus({ message: "Unable to complete", status: false });
+      setTimeout(() => {
+        setRequestStatus({ message: "", status: false });
         setLoader({ jobFields: false });
         throw new Error(error);
-      },3000)
+      }, 3000);
     }
   };
 
-  const [groupList, setGroupList] = useState({loading: true, groups: [], members: []})
+  const [groupList, setGroupList] = useState({
+    loading: true,
+    groups: [],
+    members: [],
+  });
 
   // FUNCTION TO POPULATE USER GROUP LIST
-  useEffect(()=>{
+  useEffect(() => {
     // setGroupList({loading: true, groups: [], members: []})
-    apiCall.jobGroupList({}).then(res => {
-        const {status, data} = res
-        if(status != 200 || data?.internal_return < 0){
-            setGroupList({loading: false, groups: [], members: []})
-            return
+    apiCall
+      .jobGroupList({})
+      .then((res) => {
+        const { status, data } = res;
+        if (status != 200 || data?.internal_return < 0) {
+          setGroupList({ loading: false, groups: [], members: [] });
+          return;
         }
-        if(data.result_list.length < 0){
-            setGroupList({loading: false, groups: [], members: []})
-            return
+        if (data.result_list.length < 0) {
+          setGroupList({ loading: false, groups: [], members: [] });
+          return;
         }
-        setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
-    }).catch(error => {
-        setGroupList({loading: false, groups: [], members: []})
-    })
-},[])
+        setGroupList({
+          loading: false,
+          groups: data.result_list,
+          members: data.result_list_member,
+        });
+      })
+      .catch((error) => {
+        setGroupList({ loading: false, groups: [], members: [] });
+      });
+  }, []);
 
   // console.log("Job List P >> ", details)
   return (
@@ -251,7 +254,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </button>
         </div>
         <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="p-4 pb-3 w-full md:border-r-2">
+          <div className="px-4 pb-3 w-full md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
             {/* INPUT SECTION */}
@@ -274,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
               <Detail
                 label="Created"
                 value={new Date(details?.created).toDateString()}
-                />
+              />
             </div>
 
             <div className="">
@@ -293,166 +296,185 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-ful flex flex-col justify-between">
-            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
+          <div className="px-4 pb-3 w-ful flex flex-col justify-between">
+            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
+              Send this Task to:
+            </h1>
             <div className="flex flex-col grow">
               <div className="grid grid-cols-3 mt-4">
-                {tabs.map(item => (
-                  <button 
+                {tabs.map((item) => (
+                  <button
                     // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
-                    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
-                    value={item} 
+                    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
+                      selectedTab == item
+                        ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
+                        : "bg-white text-[#000]"
+                    }`}
+                    value={item}
                     name={item}
-                    onClick={()=>setSelectedTab(item)}
+                    onClick={() => setSelectedTab(item)}
                   >
-                    <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
+                    <div
+                      className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
+                        selectedTab == item
+                          ? "border-white bg-emerald-500"
+                          : "border-red-50 dark:border-[#D85A5A] bg-white"
+                      }`}
+                    ></div>
                     {item[0].toUpperCase() + item.slice(1)}
                   </button>
                 ))}
               </div>
               <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
-                {selectedTab == 'family' &&
-                <Formik
-                  initialValues={initialValues}
-                  validationSchema={validationSchema.fields.family}
-                  onSubmit={jobFieldHandler}
-                >
-                  {(props) => {
-                    return (
-                      <Form className="hidden">
-                        {/* Assign to Family */}
-                        <JobFieldInput
-                          label="Assign to family"
-                          select={true}
-                          inputName="family"
-                          value={props?.values.family}
-                          data={familyList}
-                          btnText="Assign to family"
-                          optionText="Select Family"
-                          loader={loader?.jobFields?.family}
-                          errorHandler={errorHandler}
-                          parentClass='w-full flex flex-col gap-4'
-                        />
-                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                          {" "}
-                          {props?.values?.family === "" && (
-                            <span>{errMsg?.jobFields?.family}</span>
-                          )}
-                        </p>{" "}
-                      </Form>
-                    );
-                  }}
-                </Formik>
-                }
-                
-                {selectedTab == 'public' &&
-                <Formik
-                  initialValues={initialValues}
-                  validationSchema={validationSchema.fields.public}
-                  onSubmit={jobFieldHandler}
-                >
-                  {(props) => {
-                    return (
-                      <Form className="">
-                        {/* Offer this job to public input */}
-                        <JobFieldInput
-                          label="Offer this job to public"
-                          select={true}
-                          inputName="public"
-                          value={props?.values.public}
-                          data={publicArray}
-                          btnText="Show Task to Public"
-                          optionText="Select Duration"
-                          loader={loader?.jobFields?.public}
-                          errorHandler={errorHandler}
-                          parentClass='w-full flex flex-col gap-4'
-                        />
-                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                          {" "}
-                          {props?.values.public === "" && (
-                            <span>{errMsg?.jobFields?.public}</span>
-                          )}
-                        </p>{" "}
-                      </Form>
-                    );
-                  }}
-                </Formik>
-                }
+                {selectedTab == "family" && (
+                  <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema.fields.family}
+                    onSubmit={jobFieldHandler}
+                  >
+                    {(props) => {
+                      return (
+                        <Form className="hidden">
+                          {/* Assign to Family */}
+                          <JobFieldInput
+                            label="Assign to family"
+                            select={true}
+                            inputName="family"
+                            value={props?.values.family}
+                            data={familyList}
+                            btnText="Assign to family"
+                            optionText="Select Family"
+                            loader={loader?.jobFields?.family}
+                            errorHandler={errorHandler}
+                            parentClass="w-full flex flex-col gap-4"
+                          />
+                          <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                            {" "}
+                            {props?.values?.family === "" && (
+                              <span>{errMsg?.jobFields?.family}</span>
+                            )}
+                          </p>{" "}
+                        </Form>
+                      );
+                    }}
+                  </Formik>
+                )}
+
+                {selectedTab == "public" && (
+                  <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema.fields.public}
+                    onSubmit={jobFieldHandler}
+                  >
+                    {(props) => {
+                      return (
+                        <Form className="">
+                          {/* Offer this job to public input */}
+                          <JobFieldInput
+                            label="Offer this job to public"
+                            select={true}
+                            inputName="public"
+                            value={props?.values.public}
+                            data={publicArray}
+                            btnText="Show Task to Public"
+                            optionText="Select Duration"
+                            loader={loader?.jobFields?.public}
+                            errorHandler={errorHandler}
+                            parentClass="w-full flex flex-col gap-4"
+                          />
+                          <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                            {" "}
+                            {props?.values.public === "" && (
+                              <span>{errMsg?.jobFields?.public}</span>
+                            )}
+                          </p>{" "}
+                        </Form>
+                      );
+                    }}
+                  </Formik>
+                )}
+
+                {selectedTab == "individual" && (
+                  <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema.fields.individual}
+                    onSubmit={jobFieldHandler}
+                  >
+                    {(props) => {
+                      return (
+                        <Form className="">
+                          {/* Offer this job to individual input */}
+                          <JobFieldInput
+                            label="Offer this job to individual"
+                            input={true}
+                            inputName="individual"
+                            value={props?.values.individual}
+                            placeholder="Enter email of individual"
+                            inputHandler={props?.handleChange}
+                            btnText="Send Offer to Individual"
+                            loader={loader?.jobFields?.individual}
+                            errorHandler={errorHandler}
+                            parentClass="w-full flex flex-col gap-4"
+                          />
+                          <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                            {" "}
+                            {props?.values.individual === "" && (
+                              <span>{errMsg?.jobFields?.individual}</span>
+                            )}
+                          </p>{" "}
+                        </Form>
+                      );
+                    }}
+                  </Formik>
+                )}
 
-                {selectedTab == 'individual' &&
-                <Formik
-                  initialValues={initialValues}
-                  validationSchema={validationSchema.fields.individual}
-                  onSubmit={jobFieldHandler}
-                >
-                  {(props) => {
-                    return (
-                      <Form className="">
-                        {/* Offer this job to individual input */}
-                        <JobFieldInput
-                          label="Offer this job to individual"
-                          input={true}
-                          inputName="individual"
-                          value={props?.values.individual}
-                          placeholder="Enter email of individual"
-                          inputHandler={props?.handleChange}
-                          btnText="Send Offer to Individual"
-                          loader={loader?.jobFields?.individual}
-                          errorHandler={errorHandler}
-                          parentClass='w-full flex flex-col gap-4'
-                        />
-                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                          {" "}
-                          {props?.values.individual === "" && (
-                            <span>{errMsg?.jobFields?.individual}</span>
-                          )}
-                        </p>{" "}
-                      </Form>
-                    );
-                  }}
-                </Formik>
-                }
-                
                 {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
-                {selectedTab == 'group' &&
-                <Formik
-                  initialValues={initialValues}
-                  validationSchema={validationSchema.fields.group}
-                  onSubmit={jobFieldHandler}
+                {selectedTab == "group" && (
+                  <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema.fields.group}
+                    onSubmit={jobFieldHandler}
+                  >
+                    {(props) => {
+                      return (
+                        <Form className="">
+                          {/* Offer this job to your group input */}
+                          <JobFieldInput
+                            label="Offer this job to your Group"
+                            select={true}
+                            inputName="group"
+                            value={props?.values.group}
+                            btnText="Send Order to Group"
+                            optionText="Select Group"
+                            loader={loader?.jobFields?.group}
+                            errorHandler={errorHandler}
+                            data={groupList}
+                            parentClass="w-full flex flex-col gap-4"
+                          />
+                          <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                            {" "}
+                            {props?.values.group === "" && (
+                              <span>{errMsg?.jobFields?.group}</span>
+                            )}
+                          </p>
+                        </Form>
+                      );
+                    }}
+                  </Formik>
+                )}
+                <p
+                  className={`text-center w-full text-lg ${
+                    requestStatus.status ? "text-emerald-600" : "text-red-600"
+                  }`}
                 >
-                  {(props) => {
-                    return (
-                      <Form className="">
-                        {/* Offer this job to your group input */}
-                        <JobFieldInput
-                          label="Offer this job to your Group"
-                          select={true}
-                          inputName="group"
-                          value={props?.values.group}
-                          btnText="Send Order to Group"
-                          optionText="Select Group"
-                          loader={loader?.jobFields?.group}
-                          errorHandler={errorHandler}
-                          data={groupList}
-                          parentClass='w-full flex flex-col gap-4'
-                        />
-                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                          {" "}
-                          {props?.values.group === "" && (
-                            <span>{errMsg?.jobFields?.group}</span>
-                          )}
-                        </p>
-                      </Form>
-                    );
-                  }}
-                </Formik>
-                }
+                  {requestStatus.message && requestStatus.message}
+                </p>
               </div>
             </div>
-
+            {/* 
             {requestStatus.message &&
               <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
-            }
+            } */}
           </div>
           {/* END OF ACTION SECTION */}
         </div>
@@ -490,7 +512,7 @@ const JobFieldInput = ({
             >
               {label && (
                 <label
-                  className="input-label border-2 w-full border-sky-700 py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                  className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
                   htmlFor={inputName}
                 >
                   {label}
@@ -507,51 +529,50 @@ const JobFieldInput = ({
                 value={value}
               >
                 {/* <option value="">{optionText}</option> */}
-                {(inputName == 'family' || inputName == 'public') &&
-                  Array.isArray(data) &&
-                  <>
-                  <option value="">{optionText}</option>
-                   { data?.map((item, idx) => (
-                      <React.Fragment key={idx}>
-                        {inputName === "family" && item?.last_login !== "" && (
-                          <option value={item?.family_uid} key={idx}>
-                            {`${item?.firstname} ${item?.lastname}`}
-                          </option>
-                        )}
-                        {inputName === "public" && (
-                          <option value={item?.duration} key={idx}>
-                            {item?.name}
-                          </option>
-                        )}
-                        {/* {inputName === "group" && (
+                {(inputName == "family" || inputName == "public") &&
+                  Array.isArray(data) && (
+                    <>
+                      <option value="">{optionText}</option>
+                      {data?.map((item, idx) => (
+                        <React.Fragment key={idx}>
+                          {inputName === "family" &&
+                            item?.last_login !== "" && (
+                              <option value={item?.family_uid} key={idx}>
+                                {`${item?.firstname} ${item?.lastname}`}
+                              </option>
+                            )}
+                          {inputName === "public" && (
+                            <option value={item?.duration} key={idx}>
+                              {item?.name}
+                            </option>
+                          )}
+                          {/* {inputName === "group" && (
                           <option value={item?.group_id} key={idx}>
                             {item?.group_name}
                           </option>
                         )} */}
-                      </React.Fragment>
-                    ))}
-                  </>
-                }
-                {(inputName == 'group') && 
-                <>
-                  {data.loading ?
-                    <option value={''}>
-                      Loading...
-                    </option>
-                    : data?.groups?.length > 0 ?
-                    <>
-                      <option value="">{optionText}</option>
-                     { data?.groups?.map((item, index)=>(
-                        <option value={item?.group_id} key={index}>
-                          {item?.group_name}
-                        </option>
+                        </React.Fragment>
                       ))}
                     </>
-                    :
-                    <option value="">No Group Found</option>
-                  }
-                </>
-                }
+                  )}
+                {inputName == "group" && (
+                  <>
+                    {data.loading ? (
+                      <option value={""}>Loading...</option>
+                    ) : data?.groups?.length > 0 ? (
+                      <>
+                        <option value="">{optionText}</option>
+                        {data?.groups?.map((item, index) => (
+                          <option value={item?.group_id} key={index}>
+                            {item?.group_name}
+                          </option>
+                        ))}
+                      </>
+                    ) : (
+                      <option value="">No Group Found</option>
+                    )}
+                  </>
+                )}
               </Field>
             </div>
           </div>

src/index.css

@@ -180,7 +180,7 @@ html {
 
 .primary-home {
   /*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
-  background-image: url("./assets/images/left-myft.jpg");
+  background-image: url("./assets/images/left-wrenchboard.jpg");
   background-repeat: no-repeat;
   background-size: cover;
 }

src/lib/apiConst.js

@@ -0,0 +1,272 @@
+export const apiConst = {
+    LOGIN_MODE_GENERAL: 1100,
+    LOGIN_MODE_FAMILY:  1105,
+    ADD_JOB:    10010,
+    UPDATE_JOB: 10020,
+    PHP_API_OK: 0,
+    PHP_LOGIN_OK: 100,
+    PHP_CREATED_OK: 10,
+    PHP_API_BAD_PARAM: -1,
+    PHP_INVALID_SESSION: -9999,
+    SESSION_TIMEOUT_LOGOUT:6000,
+    MOBILE_LOGIN: 1101,
+    SUPPORT_PHONE:'+234 (818)-3866434',
+    UPLOAD_FILE_SIZE:1,
+    OFFER_ACCEPT:100,
+    OFFER_REJECT:333,
+    OFFER_CANCEL:222,
+    OFFER_EXPIRE:444,
+    JOB_INTEREST_ACCEPT:100,
+    JOB_INTEREST_REJECT:200,
+    JOB_INTEREST_CANCEL:300,
+    SMONEY_PROCC_MANUAL:100,
+    SMONEY_PROCC_AUTO:200,
+    SMONEY_PROCC_INTERSWITCH:300,
+    ACCOUNT_AGREE_JOBS:100,
+    ACCOUNT_AGREE_REFER:200,
+    WRENCHBOARD_SESSION_CHECK: 299,
+    WRENCHBOARD_USER_LOGIN: 300,
+    WRENCHBOARD_USER_LOGOUT: 301,
+    WRENCHBOARD_CREATE_ACCOUNT: 320,
+    CONTRACT_CANCEL_CONTRACT: 7,
+    CONTRACT_EXTEND_TIMELINE: 9,
+    CONTRACT_NOTIFY_COMPLETE: 4,
+    CONTRACT_REQUEST_CANCEL:  3,
+    CONTRACT_REQUEST_TIMELINE: 2,
+    CONTRACT_ACCEPT_COMPLETE: 5,
+    CONTRACT_REJECT_COMPLETE: 1,
+    WRENCHBOARD_SIGNUP_COUNTRY : 648,
+    WRENCHBOARD_GET_MEDIA: 650,
+    WRENCHBOARD_SAVE_MEDIA: 652,
+    WRENCH_FILE_PROFILE:     100,
+    WRENCH_FILE_MYFILE:     200,
+    WRENCH_FILE_CONTRACTS:   300,
+    WRENCH_FILE_FAMILY:     400,
+    WRENCH_FILE_FAMILYBANNER:    410,
+    WRENCH_FILE_JOB :    500,
+    WRENCHBOARD_BKO_START: 10000,
+    WRENCHBOARD_BKO_LOGIN: 10010,
+    WRENCHBOARD_BKO_CREATEUSER: 10015,
+    WRENCHBOARD_BKO_UPDATEUSER: 10020,
+    WRENCHBOARD_BKO_END: 10999,
+    WRENCHBOARD_ACCOUNT_START: 11000,
+    WRENCHBOARD_PROFILE_RESETPASS: 11005,
+    WRENCHBOARD_ACCOUNT_TESTEMAIL: 11001,
+    WRENCHBOARD_ACCOUNT_PENDING: 11010,
+    WRENCHBOARD_CREATE_MOBILEUSER:   11011,
+    WRENCHBOARD_COMPLETE_MOBILEUSER: 11012,
+    WRENCHBOARD_RESET_PASSWORD: 11013 ,
+    WRENCHBOARD_ACCOUNT_JOBLIST:11014 ,
+    WRENCHBOARD_VERIFY_PENDING_LINK: 11015,
+    WRENCHBOARD_ACCOUNT_RESETPASS: 11016,
+    WRENCHBOARD_ACCOUNT_SETPASSWD: 11017,
+    WRENCHBOARD_DELETE_PENDING_LINK: 11018,
+    WRENCHBOARD_RESEND_PENDING_LINK: 11019,
+    LOGIN_GOOGLE: 990010,
+    LOGIN_FACEBOOK: 990011,
+    LOGIN_APPLE: 990012,
+    WRENCHBOARD_ACCOUNT_DASHRECENT: 11206,
+    WRENCHBOARD_ACCOUNT_QRLOGIN:    11022,
+    WRENCHBOARD_ACCOUNT_CREATEACC:  11020,
+    WRENCHBOARD_ACCOUNT_AUXSTART:   11023,
+    WRENCHBOARD_ACCOUNT_AUXLOGIN:   11024,
+    WRENCHBOARD_ACCOUNT_LOGIN:      11025,
+    WRENCHBOARD_FACEBOOK_LOGIN:     11026,
+    WRENCHBOARD_GOOGLE_LOGIN:       11027,
+    WRENCHBOARD_APPLE_LOGIN:        11031,
+    WRENCHBOARD_START_JOBLIST:      11028,
+    WRENCHBOARD_ACCOUNT_DASHDATA:   11029,
+
+    WRENCHBOARD_SEND_CONTACTUS:      11030,
+    WRENCHBOARD_ACCOUNT_SENDREFER:   11032,
+    WRENCHBOARD_ACCOUNT_REFERLINK:   11033,
+    WRENCHBOARD_SESSION_VERIFY:      11034,
+    WRENCHBOARD_UPDATE_PROFILE:      11035,
+    WRENCHBOARD_ACCOUNT_TERMS:       11036,
+    WRENCHBOARD_ACCOUNT_MDESCRIPTION:11037,
+    WRENCHBOARD_ACCOUNT_SAVESKILL:   11038,
+    WRENCHBOARD_ACCOUNT_DELSKILL:    11039,
+    WRENCHBOARD_LOG_MEMBER:          11040,
+    WRENCHBOARD_DELETE_RECACC:       11041,
+    WRENCHBOARD_SAVE_GALLERY:        11042,
+    WRENCHBOARD_ACCOUNT_PENDJOB:     11043,
+    WRENCHBOARD_ACCT_NOTIFICATIONS:  11046,
+    WRENCHBOARD_ACCT_HELPITEMS:     11047,
+    WRECNH_CREDIT_HOOKS_FULUTTER:   11045,
+
+    WRENCHBOARD_USER_GETBANKLIST: 11050,
+    WRENCHBOARD_USER_SENDMONEY:   11051,
+    WRENCHBOARD_USER_SENDJOBINT:  11052,
+
+    WRENCHBOARD_USER_STARTCREDIT: 11053,
+    WRENCHBOARD_USER_ADNEWCC:     11054,
+    WRENCHBOARD_USER_CARDLIST:    11055,
+    WRENCHBOARD_USER_USESAVEDCC:  11056,
+    WRENCHBOARD_USER_CARDREMV:    11057,
+
+    WRENCHBOARD_USER_SETTINGS:    11058,
+    WRENCHBOARD_GETUSER_SETTINGS: 11059,
+
+    WRENCHBOARD_ACCOUNT_WALLETS: 11060,
+
+    WRENCHBOARD_ACCOUNT_TOPUP_RESULT:     11061,
+    WRENCHBOARD_ACCOUNT_PREPARE_TOPUP:    11062,
+    WRENCHBOARD_ACCOUNT_COMPLETE_TOPUP:   11063,
+    WRENCHBOARD_ACCOUNT_REFFERHX:         11064,
+
+    WRENCHBOARD_ACCOUNT_PREFERENCES:      11065,
+
+
+    WRENCHBOARD_ACCOUNT_MYPAGE:      11070,
+    WRENCHBOARD_ACCOUNT_PAGEINTRO:   11071,
+
+    WRENCHBOARD_ACCOUNT_PRICE_COMBO:      11171,
+    WRENCHBOARD_ACCOUNT_JOBPOST_DURATION: 11173,
+    WRENCHBOARD_ACCOUNT_USER_RECIPIENT:   11175,
+    WRENCHBOARD_ACCOUNT_ADD_RECIPIENT:    11176,
+    WRENCHBOARD_ACCOUNT_ACCOUNT_TYPES:    11177,
+    WRENCHBOARD_ACCOUNT_COUNTRY_COMBO:    11179,
+    WRENCHBOARD_ACCOUNT_JOB_COUNTRY:      11181,
+    WRENCHBOARD_ACCOUNT_COUNTRY_BANKS:    11183,
+
+
+    WRENCHBOARD_ACCOUNT_HOMEBANNERS:   11200,
+    WRENCHBOARD_ACCOUNT_PLAYGROUND:    11201,
+
+    WRENCHBOARD_ACCOUNT_RECENTS:       11202,
+    WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
+
+    WRENCHBOARD_PICTURE_PROFILE: 11300,
+    WRENCHBOARD_PICTURE_JOB: 11303,
+    WRENCHBOARD_PICTURE_FAMBANNER: 11304,
+    WRENCHBOARD_PICTURE_FAMMEMBER: 11305,
+    WRENCHBOARD_RESOURCE_MYFILES: 11307,
+    WRENCHBOARD_MYFILES_LIST: 11309,
+
+    WRENCHBOARD_RELATIVE_LIST: 22032,
+    WRENCHBOARD_RELATIVE_INVITE: 22031,
+
+    WRENCHBOARD_USER_DELETEACC: 11990,
+    WRENCHBOARD_ACCOUNT_END:    11999,
+    WRENCHBOARD_JOB_POSTAGREE:  13002,
+    WRENCHBOARD_JOB_LISTJOBS:   13005,
+    WRENCHBOARD_JOB_OFFERS:     13006,
+    WRENCHBOARD_JOB_ACTIVE:     13008,
+    WRENCHBOARD_JOB_USERACTIVE: 13009,
+
+    WRENCHBOARD_JOB_CREATEJOB:  13010 ,
+    WRENCHBOARD_JOB_DELETEJOB:  13011 ,
+
+    WRENCHBOARD_JOB_GROUP_MEMBER: 13015,
+    WRENCHBOARD_JOB_DELETE_GROUPMEMBER:13017,
+    WRENCHBOARD_JOB_CREATE_GROUP: 13020,
+    WRENCHBOARD_JOB_DELETE_GROUP:13023,
+
+    WRENCHBOARD_JOB_OFFER_INTLIST:   13024,
+    WRENCHBOARD_JOB_OFFER_SYSTEM:  13025,
+    WRENCHBOARD_JOB_OFFER_FAMILY:  13029,
+    WRENCHBOARD_JOB_OFFER_INDVI:13030,
+    WRENCHBOARD_JOB_OFFER_GROUP:13031,
+    WRENCHBOARD_JOB_OFFER_PUBLIC:13032,
+    WRENCHBOARD_JOB_SEND_INTEREST:13033,
+    WRENCHBOARD_JOB_PROC_INTEREST:13034,
+    WRENCHBOARD_JOB_OFFER_CONCLUDE:13035,
+    WRENCHBOARD_JOB_SEND_QUESTION:13036,
+    WRENCHBOARD_JOB_MRKTINT_QUEST:13037,
+    WRENCHBOARD_JOB_REPLY_QUESTION:13038,
+    WRENCHBOARD_JOB_INT_QUESTLST:  13039,
+    WRENCHBOARD_JOB_WAITING_INT:  13040,
+
+    WRENCHBOARD_JOB_EXTEND_EXPIRE: 13041,
+    WRENCHBOARD_JOB_RESEND_MESSAGE: 13042,
+    WRENCHBOARD_JOB_CANCEL_OFFER: 13043,
+
+    WRENCHBOARD_JOB_JOBGROUPS:    13045,
+    WRENCHBOARD_JOB_JOBGROUPADD:  13046,
+    WRENCHBOARD_JOB_REPORT:  13047,
+
+    WRENCHBOARD_GROUP_START: 12000,
+    WRENCHBOARD_GROUP_CREATEGROUP: 12010,
+    WRENCHBOARD_GROUP_INVITEGROUP: 12015,
+    WRENCHBOARD_GROUP_ACCEPTGROUP: 12020,
+    WRENCHBOARD_CONTRACT_MESSAGE: 14010,
+    WRENCHBOARD_CONTRACT_MSGLIST: 14011,
+    WRENCHBOARD_CONTRACT_STATUS:  14015,
+    WRENCHBOARD_MOBILE_OFFERSLIST: 15010,
+    WRENCHBOARD_MOBILE_OFFERSRESP:  15012,
+    WRENCHBOARD_MOBILE_ACTIVEJOB: 15020,
+    WRENCHBOARD_MOBILE_LOADPROFILE:  15030,
+    WRENCHBOARD_MOBILE_UPDATEPROFILE:15031,
+    WRENCHBOARD_MOBILE_ACCOUNT: 15040,
+    WRENCHBOARD_MOBILE_JOB_MESSAGE: 15044,
+    WRENCHBOARD_MOBILE_MESSAGE:  15045,
+    WRENCHBOARD_MOBILE_PAYMENTHX: 15046,
+    WRENCHBOARD_MOBILE_TASKMESSAGE: 15047,
+    WRENCHBOARD_MOBILE_SENDTASKMESSAGE: 15048,
+    WRENCHBOARD_MOBILE_PURCHASEHX:   15049,
+    WRENCHBOARD_FAMILY_LIST:           22010,
+    WRENCHBOARD_FAMILY_TRANSFERHX:     22011,
+    WRENCHBOARD_FAMILY_WALLET:         22012,
+    WRENCHBOARD_FAMILY_TRANSFERSTART:  22013,
+    WRENCHBOARD_FAMILY_TRANSFER:       22014,
+    WRENCHBOARD_FAMILY_ADD:            22015,
+    WRENCHBOARD_FAMILY_UPDATE:         22020,
+    WRENCHBOARD_FAMILY_MANAGE:         22025,
+    WRENCHBOARD_FAMILY_SGGESTSTATUS:   22026,
+    WRENCHBOARD_FAMILY_SAMPLETASKS:    22027,
+    WRENCHBOARD_FAMILY_SGGESTTASKS:    22028,
+    WRENCHBOARD_FAMILY_SGGESTLIST:     22029,
+    WRENCHBOARD_FAMILY_SGGESTWAITING:  22030,
+    WRENCHBOARD_FAMILY_RELINVITE:      22031,
+    WRENCHBOARD_SMONEY_ADDRECIPIENT: 33010,
+    WRENCHBOARD_SMONEY_MEMBER: 33020,
+    WRENCHBOARD_SMONEY_PROCFEE:  33025,
+    WRENCHBOARD_SMONEY_BKOPROC:  33030 ,
+    WRENCHBOARD_LOGIN_SHOP: 50501,
+    WRENCHBOARD_LOGIN_ADMIN: 50502,
+    WRENCHBOARD_LOGIN_MANAGER: 50503,
+    WRENCHBOARD_SURVEY_DATA: 55000,
+    WRENCHBOARD_ADD_SURVEY: 55050,
+    WRENCHBOARD_LOAD_SURVEY: 55055,
+    WRENCHBOARD_COMPLETE_SENDMONEY_INTERSW: 555,
+    WRENCHBOARD_GETBILLER_INTERSW: 556,
+    WRENCHBOARD_BILL_PAYMENT_ADVICE_INTERSW: 557,
+    WRENCHBOARD_INTERSW_GETBILLER: 556,
+    WRENCHBOARD_INTERSW_BILL_PAYMENT_ADVICE: 557,
+    WRENCHBOARD_INTERSW_GETBILLERPAYMENTINTEMS: 558,
+    WRENCHBOARD_INTERSW_GETBILLERCATEGORIES: 559,
+    WRENCHBOARD_INTERSW_DO_TRANSFER: 560,
+    WRENCHBOARD_INTERSW_QUERY_TRANSACTION: 561,
+    WRENCHBOARD_ADD_MONEYRECIPIENT: 600,
+    WRENCHBOARD_CREATE_USER_ACCOUNT: 700,
+    WRENCHBOARD_USER_ACCOUNT_LOGIN: 710,
+    WRENCHBOARD_START_PASSWORDRESET: 720,
+    WRENCHBOARD_VERIFY_PASSWD_RESETLINK: 725,
+    WRENCHBOARD_COMPLETE_PASSWORDRESET: 730,
+    WRENCHBOARD_CARDS_GETCARDLIST: 40010,
+    WRENCHBOARD_CARDS_UPDATECARD:  40015 ,
+    WRENCHBOARD_COUPON_REDEEM:   85020,
+    WRENCHBOARD_COUPON_MEMLIST:  85025,
+    WRENCHBOARD_COUPON_PENDLIST: 85030,
+    WRENCHBOARD_ADD_MOBILE_TOPUPNUM: 900,
+    WRENCHBOARD_PROMO_CALL: 990,
+    WRENCHBOARD_STOREFACE_GET_ACCOUNT_BALANCE: 891,
+    WRENCHBOARD_LOG_ENTRY: 900000,
+    WRENCHBOARD_CREDIT_TOPUP: 900010,
+    WRENCHBOARD_TOPUP_ORDER: 900020,
+    WRENCHBOARD_TOPUP_ORDER_PURCHASE: 900030,
+    WRENCHBOARD_PAYPAL_IPNMSG: 900090,
+    WRENCHBOARD_BULKTOPUP_ORDER: 700010,
+    WRENCHBOARD_BULKTOPUP_ITEM: 700020,
+    WRENCHBOARD_BULKTOPUP_ITEMUPDATE: 700030,
+    WRENCHBOARD_BULKTOPUP_DELIVER: 700040,
+    WRENCHBOARD_BALANCE_TOPUP_ORDER: 800020,
+    WRENCHBOARD_BALANCE_TOPUP_PURCHASE: 800030,
+    WRENCHBOARD_BALANCE_TOPUP_PAYMENT: 800040,
+    VIRTUAL_AIRTOPUP: 70011,
+    PAY_MODE_BALANCE: 0,
+    PAY_MODE_CCARD: 1,
+    PAY_MODE_BONUS: 9,
+    APPROVED_BALANCE: 5,
+    DISAPROVE_BALANCE: 3
+};

src/services/SiteService.js

@@ -1,4 +1,5 @@
 import Axios from "axios";
+import { apiConst } from "../lib/apiConst";
 
 class SiteService {
   constructor() {
@@ -32,7 +33,7 @@ class SiteService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22015,
+      action: apiConst.WRENCHBOARD_FAMILY_ADD,
       ...reqData,
     };
     return this.postAuxEnd("/familyadd", postData);

src/services/UsersService.js

@@ -1,4 +1,5 @@
 import Axios from "axios";
+import { apiConst } from "../lib/apiConst";
 
 class usersService {
   constructor() {
@@ -10,7 +11,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/mypageintro", postData);
   }
@@ -20,7 +21,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11070
+      action: apiConst.WRENCHBOARD_ACCOUNT_MYPAGE,
     };
     return this.postAuxEnd("/mypageload", postData);
   }
@@ -34,8 +35,15 @@ class usersService {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authlogin", reqData);
   }
-  CompleteSignUp(reqData) {
+  CompleteSignUp(postData) {
     localStorage.setItem("session_token", ``);
+
+    var reqData = {
+      login_mode: 100,
+      sessionid: "STARTER-NOTREAL",
+      action: apiConst.WRENCHBOARD_COMPLETE_MOBILEUSER,
+      ...postData,
+    };
     return this.postAuxEnd("/completesignuplink", reqData);
   }
 
@@ -44,6 +52,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
       ...reqData,
     };
     return this.postAuxEnd("/assigntask", postData);
@@ -65,13 +74,18 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11202,
+      action: apiConst.WRENCHBOARD_ACCOUNT_RECENTS,
     };
     return this.postAuxEnd("/recentactivities", postData);
   }
 
-  logInUser(reqData) {
+  logInUser(postData) {
     localStorage.setItem("session_token", ``);
+
+    var reqData = {
+      action: apiConst.WRENCHBOARD_ACCOUNT_LOGIN,
+      ...postData,
+    };
     return this.postAuxEnd("/userlogin", reqData);
   }
 
@@ -133,7 +147,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 11309,
+      action: apiConst.WRENCHBOARD_MYFILES_LIST,
     };
     return this.postAuxEnd("/myfiles", postData);
   }
@@ -250,7 +264,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 11175,
+      action: apiConst.WRENCHBOARD_ACCOUNT_USER_RECIPIENT,
     };
     return this.postAuxEnd("/recipients", postData);
   }
@@ -273,7 +287,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       amount,
-      action: 33025,
+      action: apiConst.WRENCHBOARD_SMONEY_PROCFEE,
     };
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
@@ -284,7 +298,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11053,
+      action: apiConst.WRENCHBOARD_USER_STARTCREDIT,
       ...value,
     };
     return this.postAuxEnd("/startcredit", postData);
@@ -296,7 +310,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11056,
+      action: apiConst.WRENCHBOARD_USER_USESAVEDCC,
       ...value,
     };
     return this.postAuxEnd("/payprevcard", postData);
@@ -308,7 +322,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11054,
+      action: apiConst.WRENCHBOARD_USER_ADNEWCC,
       ...value,
     };
     return this.postAuxEnd("/paynewcard", postData);
@@ -321,7 +335,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 22027,
+      action: apiConst.WRENCHBOARD_FAMILY_SAMPLETASKS,
     };
     return this.postAuxEnd("/familysampletasks", postData);
   }
@@ -331,7 +345,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/familysuggesttasks", postData);
@@ -343,7 +357,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22025,
+      action: apiConst.WRENCHBOARD_FAMILY_MANAGE,
       ...reqData,
     };
     return this.postAuxEnd("/familymanage", postData);
@@ -358,7 +372,7 @@ class usersService {
       job_mode: "ACTIVE",
       limit: 30,
       offset: 0,
-      action: 13008,
+      action: apiConst.WRENCHBOARD_JOB_ACTIVE,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanageractive", postData);
@@ -370,7 +384,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       limit: 30,
       offset: 0,
     };
@@ -471,7 +485,7 @@ class usersService {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22010,
+      action: apiConst.WRENCHBOARD_FAMILY_LIST,
       ...reqData,
     };
     return this.postAuxEnd("/askresources", postData);
@@ -509,7 +523,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 85025,
+      action: apiConst.WRENCHBOARD_COUPON_MEMLIST,
     };
     return this.postAuxEnd("/couponhx", postData);
   }
@@ -521,7 +535,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 15049,
+      action: apiConst.WRENCHBOARD_MOBILE_PURCHASEHX,
     };
     return this.postAuxEnd("/purchasehx", postData);
   }
@@ -534,7 +548,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       offset: 1,
       limit: 20,
-      action: 22011,
+      action: apiConst.WRENCHBOARD_FAMILY_TRANSFERHX,
     };
     return this.postAuxEnd("/familyrewardhx", postData);
   }
@@ -547,7 +561,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 1,
       limit: 20,
-      action: 15046,
+      action: apiConst.WRENCHBOARD_MOBILE_PAYMENTHX,
     };
     return this.postAuxEnd("/paymenthx", postData);
   }
@@ -558,7 +572,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 33020,
+      action: apiConst.WRENCHBOARD_SMONEY_MEMBER,
       ...reqData,
     };
     return this.postAuxEnd("/sendmoney", postData);
@@ -572,7 +586,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       offset: 1,
       limit: 100,
-      action: 11064,
+      action: apiConst.WRENCHBOARD_ACCOUNT_REFFERHX,
     };
     return this.postAuxEnd("/refferhx", postData);
   }
@@ -583,7 +597,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 5031,
+      action: apiConst.WRENCHBOARD_MOBILE_UPDATEPROFILE,
       ...post,
     };
     return this.postAuxEnd("/updateprofile", postData);
@@ -628,6 +642,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       page: 0,
       limit: 100,
+      action: apiConst.WRENCHBOARD_FAMILY_UPDATE,
       ...reqdata,
     };
     return this.postAuxEnd("/familyupdate", postData);
@@ -663,10 +678,10 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: Number(localStorage.getItem("member_id")),
       sessionid: localStorage.getItem("session_token"),
-      action: 11061,
+      action: apiConst.WRENCHBOARD_ACCOUNT_TOPUP_RESULT,
       ...post,
     };
-    console.log("topupresult", postData);
+    // console.log("topupresult", postData);
     return this.postAuxEnd("/topupresult", postData);
   }
 
@@ -676,17 +691,26 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11032,
+      action: apiConst.WRENCHBOARD_ACCOUNT_SENDREFER,
       ...postData,
     };
     return this.postAuxEnd("/sendreferral", reqData);
   }
 
-  StartResetPassword(reqData) {
+  StartResetPassword(postData) {
+    var reqData = {
+      action: apiConst.WRENCHBOARD_RESET_PASSWORD,
+      ...postData,
+    };
     return this.postAuxEnd("/startresetpasword", reqData);
   }
 
-  CompleteResetPassword(reqData) {
+  CompleteResetPassword(postData) {
+    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
+      action: apiConst.WRENCHBOARD_COMPLETE_PASSWORDRESET,
+      ...postData,
+    };
     return this.postAuxEnd("/stepresetpass", reqData);
   }
 
@@ -695,7 +719,7 @@ class usersService {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 85020,
+      action: apiConst.WRENCHBOARD_COUPON_REDEEM,
       ...reqData,
     };
     return this.postAuxEnd("/couponredeem", postData);
@@ -712,7 +736,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11183,
+      action: apiConst.WRENCHBOARD_ACCOUNT_COUNTRY_BANKS,
       ...value,
     };
     return this.postAuxEnd("/countrybanks", postData);
@@ -724,7 +748,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11177,
+      action: apiConst.WRENCHBOARD_ACCOUNT_ACCOUNT_TYPES,
     };
     return this.postAuxEnd("/accounttypes", postData);
   }
@@ -736,7 +760,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       msg_type: "JOB",
-      action: 13033,
+      action: apiConst.WRENCHBOARD_JOB_SEND_INTEREST,
       ...reqData,
     };
     return this.postAuxEnd("/marketinterest", postData);
@@ -748,7 +772,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       msg_type: "JOB",
-      action: 13036,
+      action: apiConst.WRENCHBOARD_JOB_SEND_QUESTION,
       ...reqData,
     };
     return this.postAuxEnd("/marketmessage", postData);
@@ -760,7 +784,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13002,
+      action: apiConst.WRENCHBOARD_JOB_POSTAGREE,
     };
     return this.postAuxEnd("/jobmanageragree", postData);
   }
@@ -771,7 +795,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanagercreatejob", postData);
@@ -782,7 +806,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_CREATEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanagerupdatejob", postData);
@@ -794,7 +818,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       extend_days: 7,
-      action: 13041,
+      action: apiConst.WRENCHBOARD_JOB_EXTEND_EXPIRE,
       ...reqData,
     };
     return this.postAuxEnd("/pendingjobextend", postData);
@@ -806,7 +830,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       mode: 200,
-      action: 13042,
+      action: apiConst.WRENCHBOARD_JOB_RESEND_MESSAGE,
       ...reqData,
     };
     return this.postAuxEnd("/pendingjobsendtome", postData);
@@ -817,7 +841,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13043,
+      action: apiConst.WRENCHBOARD_JOB_CANCEL_OFFER,
       ...reqData,
     };
     return this.postAuxEnd("/pendingjobcancel", postData);
@@ -830,7 +854,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
-      action: 14011,
+      action: apiConst.WRENCHBOARD_CONTRACT_MSGLIST,
       offset: 0,
       ...reqData,
     };
@@ -843,7 +867,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14010,
+      action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
       ...reqData,
     };
     return this.postAuxEnd("/sendtaskmessage", postData);
@@ -855,10 +879,10 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14010,
+      action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
       ...reqData,
     };
-    
+
     const formData = new FormData();
     for (let data in postData) {
       formData.append(data, postData[data]);
@@ -873,7 +897,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13011,
+      action: apiConst.WRENCHBOARD_JOB_DELETEJOB,
       ...reqData,
     };
     return this.postAuxEnd("/jobmanagerdeletejob", postData);
@@ -882,7 +906,7 @@ class usersService {
   verifyEmail(code) {
     const reqData = {
       verify_link: code,
-      action: 11015,
+      action: apiConst.WRENCHBOARD_VERIFY_PENDING_LINK,
     };
     return this.postAuxEnd("/verifysignuplink", reqData);
   }
@@ -893,7 +917,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 15012,
+      action: apiConst.WRENCHBOARD_MOBILE_OFFERSRESP,
       ...reqData,
     };
     return this.postAuxEnd("/offersresponse", postData);
@@ -905,7 +929,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13024,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_INTLIST,
       limit: 30,
       offset: 0,
     };
@@ -918,7 +942,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13034,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_INTLIST,
       ...reqData,
     };
     return this.postAuxEnd("/offersinterestproc", postData);
@@ -930,7 +954,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14015,
+      action: apiConst.WRENCHBOARD_CONTRACT_STATUS,
       ...reqData,
     };
     return this.postAuxEnd("/activetaskstatus", postData);
@@ -942,7 +966,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 14015,
+      action: apiConst.WRENCHBOARD_CONTRACT_STATUS,
       ...reqData,
     };
     return this.postAuxEnd("/activejobstatus", postData);
@@ -963,7 +987,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 11205,
+      action: apiConst.WRENCHBOARD_ACCOUNT_NOTIFICATIONS,
     };
     return this.postAuxEnd("/mynotifications", postData);
   }
@@ -974,7 +998,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11055,
+      action: apiConst.WRENCHBOARD_USER_CARDLIST,
     };
     return this.postAuxEnd("/paylistcard", postData);
   }
@@ -985,7 +1009,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13037,
+      action: apiConst.WRENCHBOARD_JOB_MRKTINT_QUEST,
       ...reqData,
     };
     return this.postAuxEnd("/offerinterestmsg", postData);
@@ -997,7 +1021,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13037,
+      action: apiConst.WRENCHBOARD_JOB_MRKTINT_QUEST,
       ...reqData,
     };
     return this.postAuxEnd("/offerinterestlistmsg", postData);
@@ -1019,7 +1043,9 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      ...reqData,
+      limit: 20,
+      offset: 0,
+      action: apiConst.WRENCHBOARD_FAMILY_LIST,
     };
     return this.postAuxEnd("/familylist", postData);
   }
@@ -1030,7 +1056,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 13025,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
       ...reqData,
     };
     return this.postAuxEnd("/assigntask", postData);
@@ -1044,7 +1070,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 13010,
+      action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
     };
     return this.postAuxEnd("/familysuggestlist", postData);
   }
@@ -1055,7 +1081,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11005,
+      action: apiConst.WRENCHBOARD_PROFILE_RESETPASS,
       ...reqData,
     };
     return this.postAuxEnd("/profilepasschange", postData);
@@ -1067,7 +1093,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11059,
+      action: apiConst.WRENCHBOARD_GETUSER_SETTINGS,
     };
     return this.postAuxEnd("/getaccsettings", postData);
   }
@@ -1078,7 +1104,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11058,
+      action: apiConst.WRENCHBOARD_USER_SETTINGS,
       ...reqdata,
     };
     return this.postAuxEnd("/setaccsettings", postData);
@@ -1090,7 +1116,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 11057,
+      action: apiConst.WRENCHBOARD_USER_CARDREMV,
       ...reqData,
     };
     return this.postAuxEnd("/payremcard", postData);
@@ -1103,7 +1129,7 @@ class usersService {
       sessionid: localStorage.getItem("session_token"),
       limit: 30,
       offset: 0,
-      action: 11202,
+      action: apiConst.WRENCHBOARD_ACCOUNT_RECENTS,
     };
     return this.postAuxEnd("/recentactivities", postData);
   }
@@ -1125,7 +1151,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22026,
+      action: apiConst.WRENCHBOARD_FAMILY_SGGESTSTATUS,
       ...reqData,
     };
     return this.postAuxEnd("/suggeststatus", postData);
@@ -1137,7 +1163,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      action: 22012,
+      action: apiConst.WRENCHBOARD_FAMILY_WALLET,
       ...reqData,
     };
     return this.postAuxEnd("/familywallet", postData);
@@ -1165,41 +1191,64 @@ class usersService {
     return this.postAuxEnd("/familytransfer", postData);
   }
 
+  // FUNCTION GET JOB GROUP LIST
+  jobGroupList(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_JOB_JOBGROUPS,
+      ...reqData,
+    };
+    return this.postAuxEnd("/jobgrouplist", postData);
+  }
 
-    // FUNCTION GET JOB GROUP LIST
-    jobGroupList(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        action: 13045,
-        ...reqData,
-      };
-      return this.postAuxEnd("/jobgrouplist", postData);
-    }
+  // FUNCTION TO ADD JOB GROUP
+  jobGroupAdd(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/jobgroupadd", postData);
+  }
 
-    // FUNCTION TO ADD JOB GROUP
-    jobGroupAdd(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        ...reqData,
-      };
-      return this.postAuxEnd("/jobgroupadd", postData);
-    }
+  // FUNCTION TO ADD JOB GROUP MEMBER
+  groupMemberAdd(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/groupmemberadd", postData);
+  }
 
-    // FUNCTION TO ADD JOB GROUP MEMBER
-    groupMemberAdd(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        ...reqData,
-      };
-      return this.postAuxEnd("/groupmemberadd", postData);
-    }
+  // API FUNCTION TO GET FAMILY RELATIVE
+  getFamilyRelativeList() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      offset: 1,
+      limit: 20,
+      action: apiConst.WRENCHBOARD_RELATIVE_LIST,
+    };
+    return this.postAuxEnd("/familyrellist", postData);
+  }
 
+  // API FUNCTION TO ADD/INVITE FAMILY RELATIVE
+  inviteFamilyRelative(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_RELATIVE_INVITE,
+      ...reqData
+    };
+    return this.postAuxEnd("/familyrelinvite", postData);
+  }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)