changed input type

.env

@@ -7,11 +7,11 @@ REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"
 #REACT_APP_APPSITE="http://localhost:7012"
 
 
-REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
-REACT_APP_USERS_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
-# REACT_APP_PASSWORD_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
+REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit"
+REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+# REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass"
 
-REACT_APP_SESSION_EXPIRE_MINUTES = 5
+REACT_APP_SESSION_EXPIRE_MINUTES=15
 
 REACT_APP_TRACKING="Tracking"
 REACT_APP_RESOURCES="Resources"

docker-compose.yml

@@ -1,6 +1,7 @@
 version: '3'
 services:
-  user-myfit:
+  users-myfit:
+    image: registry.myfit.ai/users-myfit:latest
     build:
       context: .
       dockerfile: docker/Dockerfile

src/Routers.jsx

@@ -3,6 +3,7 @@ import FourZeroFour from "./components/FourZeroFour";
 import ScrollToTop from "./components/Helpers/ScrollToTop";
 import MyCollection from "./components/MyCollection";
 import Notification from "./components/Notification";
+import ThankYou from "./components/AuthPages/ThankYou";
 import AuthRoute from "./middleware/AuthRoute";
 import AcitveBidsPage from "./views/AcitveBidsPage";
 import AuthProfilePage from "./views/AuthProfilePage";
@@ -22,6 +23,7 @@ import UpdatePasswordPages from "./views/UpdatePasswordPages";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
+import VerifySignupPage from "./views/VerifySignupPage";
 
 import RemindersPage from './views/RemindersPage';
 import RemindersAddPage from './views/RemindersAddPage';
@@ -30,6 +32,7 @@ import CalendarPage from "./views/CalendarPage";
 import ResourcePage from "./views/ResourcePage";
 import TrackActionPage from "./views/TrackActionPage";
 import SubscriptionPage from "./views/SubscriptionPage";
+import VerifySignupCompletePage from "./views/VerifySignupCompletePage";
 
 export default function Routers() {
   return (
@@ -48,7 +51,14 @@ export default function Routers() {
           path="/update-password"
           element={<UpdatePasswordPages />}
         />
+        <Route
+          exact
+          path="/confirm-reset"
+          element={<ThankYou />}
+        />
         <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route exact path="/verify-signup" element={<VerifySignupPage />} />
+        <Route exact path="/complete-signup" element={<VerifySignupCompletePage />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>

src/assets/images/shape/title_shape_3.svg

@@ -0,0 +1,10 @@
+<svg width="420" height="31" viewBox="0 0 420 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0,2 420,2" stroke="url(#paint0_linear_4_1797)" stroke-width="4" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_4_1797" x1="1" y1="1" x2="11.0515" y2="59.9411" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F539F8"/>
+<stop offset="0.416763" stop-color="#C342F9"/>
+<stop offset="1" stop-color="#5356FB"/>
+</linearGradient>
+</defs>
+</svg>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -3,34 +3,52 @@ import { Link, useNavigate } from 'react-router-dom';
 import titleShape from "../../../assets/images/shape/title-shape-two.svg";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import usersService from "../../../services/UsersService";
 
 export default function ForgotPassword() {
-
   const navigate = useNavigate();
   const [validation, setValidation] = useState("")
   const [buttonDisabled, setButtonDisabled] = useState(true)
+  const [loading, setLoading] = useState(false);
+  const user = new usersService()
 
-  // email
   const [email, setEmail] = useState("");
   const handleEmail = (e) => {
     setEmail(e.target.value);
   };
 
-
   function validationChecker(email) {
     const emailCheck = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
     if (email === "") {
-      setValidation("email is required");
-
+      setValidation("");
     } else if (!email.match(emailCheck)) {
       setValidation('Please input a valid email address');
-
     } else {
-      setValidation("");
       setButtonDisabled(false)
     }
   }
 
+  const handleSubmit = async() => {
+    const resetEmail = {
+      username: email,
+      stage: 100
+    }
+    const reset = await user.resetPassword(resetEmail);
+    setLoading(true)
+    
+    const {raw_data, uuid} = reset.data
+    localStorage.setItem('reset_uuid', uuid)
+    localStorage.setItem('reset_raw', JSON.stringify(raw_data))
+    if (reset.status == 200){
+      setTimeout(() => {
+        navigate("/verify-you", {replace : true});
+        setLoading(false)
+      }, 2000);
+    }else{
+      setValidation('An error occurred')
+    }
+  }
+  
   useEffect(() => {
     validationChecker(email)
   }, [email])
@@ -61,21 +79,21 @@ export default function ForgotPassword() {
                   inputHandler={handleEmail}
                   value={email}
                 />
-                {validation && <p className="my-5 font-bold  text-red-500">{validation}</p>}
+                {validation && <p className="my-5 text-center font-light italic subpixel-antialiased tracking-wide text-red-500">{validation}</p>}
               </div>
 
               <div className="signin-area mb-3.5">
 
                 <button
-                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  className="w-full rounded-[50px] h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                   disabled={buttonDisabled}
-                  onClick={() => navigate("/verify-you")}
+                  onClick={handleSubmit}
                 >
-                  Send Code
+                  {loading ? <div className="signup btn-loader"></div> : <span>Send Code</span>}
                 </button>
 
                 <Link to="/"
-                  className="my-40 font-bold flex justify-center text-red-500 items-center"
+                  className="mt-5 cursor-default font-bold flex justify-center subpixel-antialiased tracking-wide text-white items-center h-[58px] rounded-[50px] bg-[#1a3544a2]"
                 >
                   Back to Home
                 </Link>

src/components/AuthPages/SignUp/CompleteSignUp/index.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import AuthLayout from "../../AuthLayout";
+
+
+export default function CompleteSignUp({ className }) {
+  return (
+    <>
+    <AuthLayout
+      slogan="Welcome to myFit"
+    >
+
+    <div
+      className={`content-wrapper xl:bg-white dark:xl:bg-dark-white   sm:px-[70px] px-5 2xl:px-[100px] 2xl:h-[818px] xl:h-[650px] rounded-xl flex flex-col justify-center ${
+        className || ""
+      }`}
+    >
+      <div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center xl:mb-16 mb-10">
+          <h1 className="sm:text-5xl text-3xl font-bold sm:leading-[74px]   text-dark-gray dark:text-white">
+            SignUp Completed
+          </h1>
+        </div>
+        <div className="tick flex justify-center xl:mb-7 mb-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="208"
+            height="208"
+            viewBox="0 0 208 208"
+            fill="none"
+          >
+            <circle opacity="0.1" cx="104" cy="104" r="104" fill="#27AE60" />
+            <path
+              d="M119.582 71.9641C119.694 71.9081 119.737 71.822 119.711 71.6971C122.005 68.9066 123.459 65.427 126.643 63.3685C127.284 63.2566 127.851 62.9939 128.331 62.5503C131.152 61.7278 134.017 61.1464 136.959 60.9957C138.106 61.0474 139.253 61.0517 140.391 61.168C141.923 61.3273 143.381 61.689 144.004 63.3642C144.013 64.7853 143.45 65.9653 142.455 66.9558C140.984 68.4156 139.911 70.1597 138.876 71.9297C138.24 72.9374 137.604 73.9451 136.968 74.9571C135.544 76.671 134.411 78.5745 133.355 80.5296C129.673 86.1064 126.245 91.8296 123.173 97.7596C119.941 103.164 117.02 108.728 114.458 114.477C111.481 120.192 108.915 126.087 106.721 132.142C105.393 134.92 104.346 137.801 103.385 140.72C102.909 141.728 102.429 142.736 101.953 143.743C99.5858 145.815 96.639 145.819 93.7485 146C90.5074 145.918 87.2275 145.944 85.1158 142.83C84.8129 142.047 84.4321 141.31 83.8003 140.729C80.1958 134.562 75.9985 128.83 71.1694 123.555C70.1828 122.16 69.0794 120.859 67.7812 119.735C66.3489 118.133 64.921 116.536 63.4887 114.934C62.5627 112.104 62.9002 110.997 65.3883 109.305C67.9933 107.535 70.8838 106.682 74.0686 106.609C76.7731 106.549 78.9496 107.389 80.7194 109.43C82.1171 111.045 83.6143 112.582 85.0682 114.15C85.2716 114.417 85.4793 114.684 85.6827 114.955C87.6732 117.81 89.6636 120.665 91.6541 123.521C92.0176 124.343 92.2686 125.239 93.0691 125.923C94.4149 122.203 95.726 118.56 97.0414 114.912C98.2487 112.053 99.4517 109.197 100.659 106.338C101.459 105.24 101.94 103.991 102.347 102.712C103.169 101.058 103.991 99.4046 104.817 97.7552C106.297 94.8829 107.777 92.0062 109.257 89.1338C109.837 88.1046 110.417 87.0753 110.997 86.0418C112.044 84.2202 113.091 82.4029 114.142 80.5813C115.947 77.7175 117.764 74.8408 119.582 71.9641Z"
+              fill="#74CD3C"
+            />
+          </svg>
+        </div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+          <h1 className="sm:text-6xl text-4xl font-bold leading-[74px] text-dark-gray dark:text-white mb-5">
+            Thank you !
+          </h1>
+          <p className="text-lg font-bold text-lighter-gray">
+           Your account is verified
+          </p>
+        </div>
+        <a
+          href="/login"
+          className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
+        >
+          Login to continue
+        </a>
+      </div>
+    </div>
+    </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/SignUp/VerifySignup/Otp.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from "react";
+
+export default function Otp({handleChange, value}) {
+  useEffect(() => {
+    const otp = document.querySelector("#otp-inputs");
+    // eslint-disable-next-line no-restricted-syntax
+    for (const pin of otp.children) {
+      // eslint-disable-next-line no-loop-func
+      pin.onkeyup = () => {
+        if (pin.nextSibling) {
+          pin.nextSibling.children.otp.focus();
+        }
+      };
+    }
+  });
+  return (
+    <>
+      <div
+        className="otp-input-com flex sm:space-x-5 space-x-3 justify-center mb-8"
+        id="otp-inputs"
+      >
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base leading-14 text-center items-center text-2xl font-bold text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+            name='value_one'
+            value={value.value_one}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+            name='value_two'
+            value={value.value_two}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold  leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+            name='value_three'
+            value={value.value_three}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+            name='value_four'
+            value={value.value_four}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold leading-14 text-center  text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+            name='value_five'
+            value={value.value_five}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
+          <input
+            className="input-field placeholder:text-base text-2xl font-bold  leading-14 text-center text-dark-gray dark:text-white w-full h-full  bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-2 focus:outline-none"
+            type="text"
+            maxLength={1}
+            id="otp"
+            name='value_six'
+            value={value.value_six}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

src/components/AuthPages/SignUp/VerifySignup/index.jsx

@@ -0,0 +1,172 @@
+import React, {useState} from "react";
+import titleShape from "../../../../assets/images/shape/title_shape_3.svg";
+import AuthLayout from "../../AuthLayout";
+import Otp from "./Otp";
+import { useNavigate } from 'react-router-dom';
+import usersService from "../../../../services/UsersService";
+
+export default function VerifyYou() {
+
+  const navigate = useNavigate();
+
+  const verifyOTP = new usersService();
+
+  const [loading, setLoading] = useState(false) // For loading spinner
+
+  const [errorMessage, setErrorMessage] = useState({ // For Displaying success or error message
+    success: false,
+    message: ''
+  })
+
+
+  // state for user inputed values
+  const [verificationCode, setVerificationCode] = useState({
+    value_one: '',
+    value_two: '',
+    value_three: '',
+    value_four: '',
+    value_five: '',
+    value_six: '',
+  })
+
+  const handleVerificationInput = ({target:{name, value}}) => { // function that listens to input change
+    setVerificationCode(prev => {
+      return {...prev, [name]:value}
+    })
+  }
+
+  const handleUserOTPVerify = async () => { // handles input validation and submits to api call
+
+    setErrorMessage({ // resets the error message to empty string
+      success: false,
+      message: ''
+    }) 
+    
+    setLoading(true) // Sets loading spinner
+
+    let otpCode = '';
+    for(let values in verificationCode){
+      otpCode+=verificationCode[values]
+    }
+
+    if(!otpCode){ // checks if code is empty
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Please input the code sent to you'
+      })
+      return
+    }
+    if(otpCode.length < 6){ // checks if verifiedCode is empty
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Code must be 6 characters'
+      })
+      return
+    }
+
+    let apiInput = {
+      username: localStorage.getItem('username'),
+      pend_uid: localStorage.getItem('uuid'),
+      random_text: otpCode,
+      mode: 'VERIFY',
+    }
+
+    try {
+      const res = await verifyOTP.signupUser(apiInput)
+      if(res.status != 200){
+        setLoading(false)
+        setErrorMessage({
+          success: false,
+          message: 'Could not verify code'
+        })
+        return
+      }
+
+      if(res.status == 200){
+        if(res.data.status < 0) { // when resquest is successful but status is not 100
+          setLoading(false)
+          setErrorMessage({
+            success: false,
+            message: res.data.error_msg
+          })
+          return
+        }
+
+        // if request is successful and status is 100 proceed
+        setErrorMessage({
+          success: true,
+          message: 'verification successfully'
+        })
+
+        //clears the temporary uuid and email in tge local storage
+        localStorage.removeItem('uuid')
+        localStorage.removeItem('username')
+
+        setTimeout(()=>{
+          setLoading(false)
+          navigate('/complete-signup', { replace: true })
+        }, 1000)
+      }
+      
+    } catch (error) {
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Opps! something went wrong, Try agian later'
+      })
+    }
+  }
+
+  return (
+    <>
+      <AuthLayout
+        slogan="Welcome to myFit"
+      >
+        <div className="content-wrapper xl:bg-white dark:bg-dark-white   w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
+          <div>
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
+              <h1 className="mb-4 sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+               SignUp Verification 
+              </h1>
+              <div className="shape">
+                <img src={titleShape} alt="shape" />
+              </div>
+            </div>
+            <div className="input-area">
+              <Otp handleChange={handleVerificationInput} value={verificationCode}/>
+              {errorMessage.message != '' &&  <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
+              <div className="signin-area mb-3.5">
+                <button
+                  // href="/update-password"
+                  onClick={handleUserOTPVerify}
+                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
+                >
+                  {loading && (
+                  <div role="status" className="px-3">
+                      <svg aria-hidden="true" className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-purple" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+                          <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+                      </svg>
+                      <span className="sr-only">Loading...</span>
+                  </div>
+                  )}
+                  Continue
+                </button>
+              </div>
+              <div className="resend-code flex justify-center">
+                <p className="text-lg text-thin-light-gray font-normal">
+                  Dont’t have an aceount ?
+                  <a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
+                    Please resend
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/SignUp/index.jsx

@@ -4,12 +4,144 @@ import googleLogo from "../../../assets/images/google-logo.svg";
 import logo from "../../../assets/images/light-logo.png"; //logo-1.svg";
 import titleShape from "../../../assets/images/shape/title-shape-two.svg";
 import InputCom from "../../Helpers/Inputs/InputCom";
+import { Link, useNavigate } from 'react-router-dom';
+
+import usersService from "../../../services/UsersService"; // site api services
 
 export default function SignUp() {
+  const navigate = useNavigate();
+
+  const userSignup = new usersService();
+
+  const [loading, setLoading] = useState(false) // For loading spinner
+
+  const [errorMessage, setErrorMessage] = useState({ // For Displaying success or error message
+    success: false,
+    message: ''
+  })
+
   const [checked, setValue] = useState(false);
   const rememberMe = () => {
     setValue(!checked);
   };
+
+  // state for user inputed values
+  const [userDetails, setUserDetails] = useState({
+    // username: '',
+    email: '',
+    password: '',
+    confirm_password: '',
+    firstname: '',
+    lastname: ''
+  })
+
+  const handleInputChange = ({target:{name, value}}) => { // function that listens to input change
+    setUserDetails(prev => {
+      return {...prev, [name]:value}
+    })
+  }
+
+  const handleUserSignup = async () => { // handles input validation and submits to api call
+
+    setErrorMessage({ // resets the error message to empty string
+      success: false,
+      message: ''
+    }) 
+    
+    setLoading(true) // Sets loading spinner
+
+    let userInfo = {...userDetails} // assigns userDetails to be user information
+
+    let {email, password, confirm_password, firstname, lastname} = userInfo
+
+    if(!email || !password || !confirm_password || !firstname || !lastname){ // checks if any field is empty
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Please Fill all inputs'
+      })
+      return
+    }
+    //checks if email is a valid email address
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (regEx.test(email) == false) {
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Please Input a valid email; e.g: text@gmail.com'
+      })
+      return
+    }
+
+    if(password != confirm_password){ //checks if password matches confirm password
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Password do not match'
+      })
+      return
+    }
+
+    //checks if password is matches alphanumeric with at least one uppercase letter
+    // let PwdRegEx = /[A-Z]/;
+    if (/[A-Z]/.test(password) == false) {
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Password must contain at least one uppercase character; e.g: Text123'
+      })
+      return
+    }
+
+    userInfo.username = email // assigns email as username also
+    userInfo.mode = 'START' // assigns mode as START
+
+    delete userInfo.confirm_password // deletes confrim password before making API call
+
+    try {
+      const res = await userSignup.signupUser(userInfo);
+      if(res.status != 200){
+        setLoading(false)
+        setErrorMessage({
+          success: false,
+          message: 'Could not create account try again later'
+        })
+        return
+      }
+
+      if(res.status == 200){
+        if(res.data.status < 0) { // when resquest is successful but status is not 1
+          setLoading(false)
+          setErrorMessage({
+            success: false,
+            message: 'unable to create account'
+          })
+          return
+        }
+
+        // if request is successful and status is 1 proceed
+        setErrorMessage({
+          success: true,
+          message: 'Account created successfully'
+        })
+  
+        localStorage.setItem('uuid', res.data.uuid) // Stores the user UUID to localstorage
+        localStorage.setItem('username', email) // Stores the user UUID to localstorage
+  
+        setTimeout(()=>{
+          setLoading(false)
+          navigate("/verify-signup", { replace: true })
+        }, 1000)
+      }
+    } catch (error) {
+      setLoading(false)
+      setErrorMessage({
+        success: false,
+        message: 'Opps! something went wrong, Try agian later'
+      })
+    }
+  }
+
   return (
     <>
       <div className="layout-wrapper">
@@ -47,18 +179,22 @@ export default function SignUp() {
                         <InputCom
                           placeholder="Adam"
                           label="First Name"
-                          name="first_name"
+                          name="firstname"
                           type="text"
                           iconName="people"
+                          value={userDetails.first_name}
+                          inputHandler={handleInputChange}
                         />
                       </div>
                       <div className="input-item flex-1">
                         <InputCom
                           placeholder="Wathon"
                           label="Last Name"
-                          name="Last_name"
+                          name="lastname"
                           type="text"
                           iconName="people"
+                          value={userDetails.Last_name}
+                          inputHandler={handleInputChange}
                         />
                       </div>
                     </div>
@@ -69,6 +205,8 @@ export default function SignUp() {
                         name="email"
                         type="email"
                         iconName="message"
+                        value={userDetails.email}
+                        inputHandler={handleInputChange}
                       />
                     </div>
                     <div className="input-item mb-5">
@@ -78,15 +216,19 @@ export default function SignUp() {
                         name="password"
                         type="password"
                         iconName="password"
+                        value={userDetails.password}
+                        inputHandler={handleInputChange}
                       />
                     </div>
                     <div className="input-item mb-5">
                       <InputCom
                         placeholder="*********"
                         label="Re-enter Password"
-                        name="password"
+                        name="confirm_password"
                         type="password"
                         iconName="password"
+                        value={userDetails.confirm_password}
+                        inputHandler={handleInputChange}
                       />
                     </div>
                     <div className="forgot-password-area flex justify-between items-center mb-6">
@@ -127,14 +269,27 @@ export default function SignUp() {
                       </div>
                     </div>
                     <div className="signin-area mb-1">
-                      <a
-                        href="#"
-                        className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
-                      >
-                        Sign Up
-                      </a>
-                      <a
-                        href="#"
+
+                    {errorMessage.message != '' &&  <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
+
+                      <button
+                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  // onClick={() => navigate("/verify-signup")}
+                  onClick={handleUserSignup}
+                >
+                  {loading && (
+                  <div role="status" className="px-3">
+                      <svg aria-hidden="true" className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-purple" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
+                          <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
+                      </svg>
+                      <span className="sr-only">Loading...</span>
+                  </div>
+                  )}
+                  Sign Up
+                </button>
+                      {/* <a
+                        href="#" onClick={() => navigate("/verify-you")}
                         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
                       >
                         <img
@@ -145,7 +300,7 @@ export default function SignUp() {
                         <span className="text-lg text-thin-light-gray font-normal">
                           Sign Up with Google
                         </span>
-                      </a>
+                      </a> */}
                     </div>
                     <div className="signup-area flex justify-center">
                       <p className="text-lg text-thin-light-gray font-normal">

src/components/AuthPages/ThankYou/index.jsx

@@ -1,8 +1,11 @@
 import React from "react";
+import AuthLayout from "../../AuthPages/AuthLayout";
 
 export default function ThankYou({ className }) {
   return (
-    <div
+    <>
+      <AuthLayout slogan='Welcome to myFit'>
+      <div
       className={`content-wrapper xl:bg-white dark:xl:bg-dark-white   sm:px-[70px] px-5 2xl:px-[100px] 2xl:h-[818px] xl:h-[650px] rounded-xl flex flex-col justify-center ${
         className || ""
       }`}
@@ -44,5 +47,7 @@ export default function ThankYou({ className }) {
         </a>
       </div>
     </div>
+      </AuthLayout>
+    </>
   );
 }

src/components/AuthPages/UpdatePassword/index.jsx

@@ -1,17 +1,87 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import titleShape from "../../../assets/images/shape/title-shape-two.svg";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 import ThankYou from "../ThankYou";
+import usersService from "../../../services/UsersService";
 
 export default function UpdatePassword() {
-  const [updated, setValue] = useState(false);
+  const [values, setValues] = useState({
+    password: '',
+    confirmPassword: '',
+  })
   const [message, setMessage] = useState(false);
-  const updatePassword = () => {
-    setValue(!updated);
-    setTimeout(() => {
-      setMessage(!message);
-    }, 100);
+  const [validation, setValidation] = useState("");
+  const [loading, setLoading] = useState(false);
+  const updatePass = new usersService()
+  const navigate = useNavigate()
+  
+  const onChange = (e) => {
+    setValues((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const updatePassword = async (e) => {
+    const {username} = JSON.parse(localStorage.getItem('reset_raw'))
+    const otpCode = localStorage.getItem('otp')
+
+    setLoading(true)
+
+    if(!values.password || !values.confirmPassword){
+      setLoading(false)
+      setValidation("Please Fill empty inputs")
+      return
+    }
+
+    const regex = /^[A-Za-z]\w{7,14}$/
+    if(regex.test(values.password) == false) {
+      setLoading(false)
+      setValidation("it must be a least 7 alphanumeric characters")
+      return
+    }
+
+    if (values.password != values.confirmPassword){
+      setLoading(false)
+      setValidation("Password does not match")
+      return
+    }
+
+    const newPassword = {
+      username: username,
+      reset_uuid: localStorage.getItem('reset_uuid'),
+      random_text: otpCode,
+      member_uid: localStorage.getItem('member_uid'),
+      new_password: values.password,
+      stage: 300
+    }
+
+    delete values.confirmPassword
+
+    try {
+      const confirm = await updatePass.resetPassword(newPassword)
+      console.log(confirm)
+
+      if(confirm.status != 200){
+      setLoading(false)  
+      setValidation("Sorry, could not verify code")
+      return
+      }
+      
+      localStorage.removeItem('reset_uuid')
+      localStorage.removeItem('reset_raw')
+      localStorage.removeItem('otp')
+
+      if(confirm.status == 200){
+        setValidation("Password updated")
+        setTimeout(() => {
+          setLoading(false)
+          navigate("/confirm-reset", {replace : true});
+      }, 2000);
+      }
+    } catch (error) {
+      setLoading(false)
+      setValidation("An error occurred")
+    }
   };
 
   return (
@@ -19,7 +89,6 @@ export default function UpdatePassword() {
       <AuthLayout
         slogan="Welcome to  myFit"
       >
-        {updated === false ? (
           <div className="content-wrapper update-password-section xl:bg-white dark:bg-dark-white   w-full 2xl:h-[818px] xl:h-[600px] sm:w-auto sm:px-[70px] px-5 2xl:px-[100px] rounded-xl flex flex-col justify-center">
             <div>
               <div className="title-area relative flex flex-col justify-center items-center mb-7">
@@ -32,7 +101,7 @@ export default function UpdatePassword() {
                 </div>
               </div>
               <div className="input-area">
-                <div className="input-item mb-5">
+                {/* <div className="input-item mb-5">
                   <InputCom
                     placeholder="*********"
                     label="Old Password"
@@ -40,7 +109,7 @@ export default function UpdatePassword() {
                     type="password"
                     iconName="password"
                   />
-                </div>
+                </div> */}
                 <div className="input-item mb-5">
                   <InputCom
                     placeholder="*********"
@@ -48,32 +117,35 @@ export default function UpdatePassword() {
                     name="password"
                     type="password"
                     iconName="password"
+                    inputHandler={onChange}
                   />
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
                     placeholder="*********"
                     label="Re-enter Password"
-                    name="password"
+                    name="confirmPassword"
                     type="password"
                     iconName="password"
+                    inputHandler={onChange}
                   />
                 </div>
+                {validation && <p className={`my-5 text-center font-light italic text-sm subpixel-antialiased tracking-wide ${validation == 'Password updated' ? 'text-green-600' : 'text-red-500'} `}>{validation}</p>}
                 <div className="signin-area mb-3.5">
                   <button
                     onClick={updatePassword}
                     type="button"
                     className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
                   >
-                    Continue
+                    {loading ? <div className="signup btn-loader"></div> : <span>Continue</span>}
                   </button>
                 </div>
               </div>
             </div>
-          </div>
-        ) : (
-          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
-        )}
+          </div> 
+        {/* // : (
+        //   <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
+        // )} */}
       </AuthLayout>
     </>
   );

src/components/AuthPages/VerifyYou/Otp.jsx

@@ -1,18 +1,26 @@
 import React, { useEffect } from "react";
 
-export default function Otp() {
+export default function Otp({handleChange, value}) {
   useEffect(() => {
     const otp = document.querySelector("#otp-inputs");
     // eslint-disable-next-line no-restricted-syntax
     for (const pin of otp.children) {
       // eslint-disable-next-line no-loop-func
-      pin.onkeyup = () => {
-        if (pin.nextSibling) {
-          pin.nextSibling.children.otp.focus();
+      pin.onkeyup = (value) => {
+        if(pin.children){
+          if(value.key === '' || value.key === ' ' || value.key === 'ArrowRight' || value.key === 'ArrowLeft' || value.key === 'ArrowUp' || value.key === 'ArrowDown' || value.key === 'Tab') return;
+          if(value.key === 'Backspace'){
+            if(pin.previousSibling){
+              pin.previousSibling.children.otp.focus();
+            } else {return;}
+          } else {
+            pin.nextSibling.children.otp.focus();
+          }
         }
-      };
-    }
-  });
+      };  
+    }    
+  }, []);
+  
   return (
     <>
       <div
@@ -25,6 +33,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_one'
+            value={value.value_one}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
@@ -33,6 +44,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_two'
+            value={value.value_two}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
@@ -41,6 +55,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_three'
+            value={value.value_three}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
@@ -49,6 +66,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_four'
+            value={value.value_four}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px]  overflow-hidden relative ">
@@ -57,6 +77,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_five'
+            value={value.value_five}
+            onChange={handleChange}
           />
         </div>
         <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  sm:w-14 sm:h-14 w-12 h-12 rounded-[50px] overflow-hidden relative ">
@@ -65,6 +88,9 @@ export default function Otp() {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_six'
+            value={value.value_six}
+            onChange={handleChange}
           />
         </div>
       </div>

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,9 +1,90 @@
-import React from "react";
+import React,{useState} from "react";
+import {useNavigate} from "react-router-dom"
 import titleShape from "../../../assets/images/shape/text-shape-three.svg";
 import AuthLayout from "../AuthLayout";
 import Otp from "./Otp";
+import usersService from "../../../services/UsersService";
 
 export default function VerifyYou() {
+  const [loading, setLoading] = useState(false);
+  const [validation, setValidation] = useState("");
+  const verifyOTP = new usersService()
+  const navigate = useNavigate()
+
+  const [verificationCode, setVerificationCode] = useState({
+    value_one: '',
+    value_two: ''
+  })
+
+  const handleVerificationInput = ({target:{name, value}}) => { 
+    setVerificationCode(prev => {
+      return {...prev, [name]:value}
+    })
+  }
+
+  const handleSubmit = async() => {
+    setValidation("")
+    setLoading(true)
+    
+    let otpCode = '';
+    for(let values in verificationCode){
+      otpCode+=verificationCode[values]
+    }
+    
+    // Validating otp code
+    if(!otpCode) {
+      setLoading(false)
+      setValidation("Please enter your otp code")
+      return
+    }
+    if(otpCode.length < 6) {
+      setLoading(false)
+      setValidation("OTP code incomplete")
+      return
+    }
+    
+    const {username} = JSON.parse(localStorage.getItem('reset_raw'))
+    const verifyEmail = {
+      username: username,
+      stage: 200,
+      reset_uuid: localStorage.getItem('reset_uuid'),
+      random_text: otpCode
+    }
+
+    localStorage.setItem('otp', otpCode)
+
+    try {
+    const verify = await verifyOTP.resetPassword(verifyEmail);
+    console.log(verify)
+    localStorage.setItem('member_uid', verify.data.member_uid);
+    if (verify.status != 200){
+      setValidation("Sorry, could not verify code")
+      setLoading(false)
+      return
+    }
+      
+    if (verify.status == 200){
+
+      if(verify?.data.error_msg == "Unable to continue"){
+        setLoading(false)
+        setValidation("Incorrect otp code")
+        return
+      }
+
+      setValidation("verified successfully")
+
+      setTimeout(() => {
+        setLoading(false)
+        navigate("/update-password", {replace : true});
+    }, 2000);
+        return
+      }
+    } catch (error) {
+      setLoading(false)
+      setValidation('An error occurred')
+    }
+  }
+  
   return (
     <>
       <AuthLayout
@@ -20,20 +101,22 @@ export default function VerifyYou() {
               </div>
             </div>
             <div className="input-area">
-              <Otp />
+              <Otp handleChange={handleVerificationInput} value={verificationCode} />
+              {validation && <p className={`my-5 text-center font-light italic text-sm subpixel-antialiased tracking-wide ${validation == 'verified successfully' ? 'text-green-600' : 'text-red-500'} `}>{validation}</p>}
               <div className="signin-area mb-3.5">
                 <a
-                  href="/update-password"
+                  // href="/update-password"
                   className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  onClick={handleSubmit}
                 >
-                  Continue
+                  {loading ? <div className="signup btn-loader"></div> : <span>Continue</span>}
                 </a>
               </div>
               <div className="resend-code flex justify-center">
                 <p className="text-lg text-thin-light-gray font-normal">
                   Dont’t have an aceount ?
-                  <a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
-                    Please resend
+                  <a href="/signup" className="ml-2 text-dark-gray dark:text-white font-bold">
+                    Sign Up
                   </a>
                 </p>
               </div>

src/components/Calendar/CalendarTable.jsx

@@ -14,7 +14,7 @@ export default function CalendarTable({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[620px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[800px] ${
         className || ""
       }`}
     >
@@ -41,4 +41,4 @@ export default function CalendarTable({ className }) {
 
     </div>
   );
-}
+}

src/components/Cards/TrackItemCard.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 // import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
-import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
 
 export default function TrackItemCard({ datas, hidden = false }) {
@@ -18,17 +17,17 @@ export default function TrackItemCard({ datas, hidden = false }) {
     }
   };
   return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[200px] bg-white dark:bg-dark-white p-3 pb rounded-2xl cursor-pointer" onClick={()=>{navigate(`/track-action/${datas.widget}`, { replace: true })}}>
+    <div className="card-style-one flex flex-col justify-between w-full h-[190px] bg-white dark:bg-dark-white p-3 rounded-2xl cursor-pointer" onClick={()=>{navigate(`/track-action/${datas.widget}`, { replace: true })}}>
       <div className="content">
         {/* thumbnail */}
-        <div className="w-full h-40">
+        <div className="w-full h-32">
           {/* thumbnail image */}
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
               background: `url(${localImgLoad(
                 `images/${datas.thumbnil}`
-              )}) 0% 0% / cover no-repeat`,
+              )}) 0% 0% / 100% no-repeat`,
             }}
           >
             <div className="product-options flex justify-between relative">
@@ -77,12 +76,11 @@ export default function TrackItemCard({ datas, hidden = false }) {
           </div>
         </div>
         {/* user */}
-        <div className="user w-ful -mt-6 mb-2">
-
+        <div className="user w-full text-center mt-[14px]">
           <p className="text-sm text-thin-light-gray dark:text-white">
             <Link
             to={`/track-action/${datas.widget}`}
-            className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
+            className="text-xl font-bold text-dark-gray dark:text-white capitalize line-clamp-1"
             >
             {datas.title}
             </Link>

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -9,7 +9,8 @@ export default function InputCom({
   iconName,
   inputHandler,
   value,
-  maxLength
+  maxLength,
+  borderColor
 }) {
   return (
     <div className="input-com">
@@ -21,12 +22,12 @@ export default function InputCom({
           {label}
         </label>
       )}
-      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
+      <div className={`input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ${borderColor}`}>
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}

src/components/Partials/Layout.jsx

@@ -26,6 +26,8 @@ export default function Layout({ children }) {
     localStorage.removeItem('member_uuid');
     localStorage.removeItem('session_token');
     localStorage.removeItem('status');
+    localStorage.removeItem('layout');
+    localStorage.removeItem('measurement_units');
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,
     // });

src/components/Reminders/AddEditReminder.jsx

@@ -36,10 +36,10 @@ export default function AddEditReminder({ className }) {
     'member_id': localStorage.getItem('member_id'),
     description: location.state?.reminder.description || '',
     notes: location.state?.reminder.notes || '',
-    category: location.state?.reminder.code || '',
-    mode: location.state?.reminder.code || ''
+    category: location.state?.reminder.category || '',
+    mode: location.state?.reminder.mode || ''
   })
-  
+  // console.log(reminder)
   const onReminderInputChange = ({target:{name,value}}) => { //function to run when user changes any input on the add reminder page
     setReminder(prev=>(
       {...prev, [name]:value}
@@ -76,7 +76,7 @@ export default function AddEditReminder({ className }) {
     setMessage({status: true, message: ''})
     let {description, notes, category, mode} = infoDetail
     //CHECKING IF AN EMPTY FIELD WAS PASSED
-    if(!description || !notes || !category || !mode){
+    if(!description || !category || !mode){
       setSuccess(false)
       setMessage({status: false, message: 'All fields must be filled'})
       return
@@ -128,6 +128,7 @@ export default function AddEditReminder({ className }) {
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
                 maxLength={100}
+                borderColor='border border-pink'
               />
             </div>
 
@@ -229,7 +230,7 @@ export default function AddEditReminder({ className }) {
                     value={reminder.notes}
                     placeholder="Provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
+                    className="w-full h-full px-7 py-4  border border-pink dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />
@@ -266,7 +267,7 @@ export default function AddEditReminder({ className }) {
                 className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                 onClick={handleAddReminder}
               >
-                {location.state?.reminder ? 'Edit' : 'Add Reminder'}
+                {location.state?.reminder ? 'Update' : 'Add Reminder'}
               </button>
             }
           </div>

src/components/Reminders/ReminderTable.jsx

@@ -111,7 +111,8 @@ export default function ReminderTable({ className }) {
                           <span className="text-sm text-thin-light-gray">
                           
                             Added <span className="text-purple">
-                              {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
+                              {/* {new Date(reminder.added).toLocaleString().replace(/-/g, '/')} */}
+                              {reminder.added.split(' ')[0]}
                               </span>
                           </span>
                         </div>
@@ -121,14 +122,16 @@ export default function ReminderTable({ className }) {
                       <div className="flex space-x-1 items-center justify-center">
              
                         <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
+                        {/* {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')} */}
+                        {reminder.start_date.split(' ')[0]}
                         </span>
                       </div>
                     </td>
                     <td className="text-center py-4 px-2">
                       <div className="flex space-x-1 items-center justify-center">
                         <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
+                        {/* {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')} */}
+                        {reminder.end_date.split(' ')[0]}
                         </span>
                       </div>
                     </td>
@@ -205,7 +208,6 @@ export default function ReminderTable({ className }) {
                     })
                   )
                 }
-
           </tbody>
         </table>
       </div>

src/components/Reminders/index.jsx

@@ -15,7 +15,7 @@ export default function Reminders() {
               <div style={{ transform: 'translateY(-22px)' }}>
                 <Link
                   to="/add-reminder"
-                  className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+                  className="btn-gradient btn-shine lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
                 >
                   Add Reminder
                 </Link>

src/components/Settings/Tabs/LoginActivityTab.jsx

@@ -77,23 +77,20 @@ export default function LoginActivityTab() {
                   <td className="text-center py-4">
                     <div className="flex items-center justify-center">
                       <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap px-2">
-                        Desktop
-                        {/* {data.channel} */}
+                        {data.channel}
                       </span>
                     </div>
                   </td>
                   <td className="text-center py-4">
                     <div className="flex space-x-1 items-center justify-center">
                       <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap px-2">
-                        10-10-2035
-                        {/* {data.date} */}
+                        {data.added.split(' ')[0]}
                       </span>
                     </div>
                   </td>
                   <td className="text-center py-4">
                     <span className="text-base text-dark-gray dark:text-white whitespace-nowrap px-2">
-                      10.0.0.1000
-                      {/* {data.location} */}
+                      {data.loc}
                     </span>
                   </td>
                 </tr>

src/components/Subscriptions/PricingListTable.jsx

@@ -2,22 +2,30 @@ import React, { useState } from "react";
 import SellAnalysChart from "../Charts/SellAnalysChart";
 import SelectBox from "../Helpers/SelectBox";
 
-export default function PricingListTable() {
+export default function PricingListTable(props) {
+
+ // debugger;
  
   
   return (
     <div className="sell-analise w-full md:p-8 p-4 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow mb-11">
       <div className="flex flex-col justify-between h-full">
         <div className="content flex justify-between items-center mb-5">
+        <ul>
+                 {
+        props.priceDetail.features.map((item,index)=>(
           <div>
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-              Sell Analize
-            </h1>
-          </div>
-          
+            <li className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+               {item}
+            </li>
+           
+            </div>
+        ))
+       }
+       </ul>
         </div>
         <div>
-       uuuuu
+
         </div>
       </div>
     </div>

src/components/Subscriptions/SubScriptionTop.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function SubScriptionTop({ className }) {
+  return (
+    <div
+      className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-9 p-4 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
+        className || ""
+      }`}
+    >
+      <div className="lg:w-8/12 w-full mb-8 lg:mb-0">
+        <h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
+         Some how we will say the name of uout current Subscription 
+        </h1>
+        <p className="text-base text-thin-light-gray tracking-wide">
+          Last paymant date + nect pay day 
+        </p>
+      </div>
+      <div className="flex-1 flex lg:justify-end">
+        <div className="flex items-center space-x-5">
+          <Link
+            to="#"
+            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          >
+            Some actions
+          </Link>
+          <Link to="#" className="text-dark-gray dark:text-white text-base">
+            <span className=" border-b dark:border-[#5356fb29]  border-dark-gray font-medium">
+              terms and conditions 
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Subscriptions/index.jsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+
 import country1 from "../../assets/images/country-1.png";
 import country2 from "../../assets/images/country-2.png";
 import country3 from "../../assets/images/country-3.png";
@@ -8,100 +9,75 @@ import CurrentBalanceWidget from "../MyWallet/CurrentBalanceWidget";
 import Layout from "../Partials/Layout";
 //import SellAnaliseStatics from "./SellAnaliseStatics";
 import SellProductHistoryTable from "./SellProductHistoryTable";
+import SubScriptionTop from "./SubScriptionTop";
 
-
+import SiteService from "../../services/SiteService";
 import PricingListTable from "./PricingListTable";
 export default function Subscriptions() {
+  const site_api = new SiteService();
+  const [pricingData, setPricingData] = useState([]);
+  const getPricingData = async () => {
+    try {
+      const res = await site_api.priceData();
+      if (res.status == 200) {
+        //debugger;
+        console.log("PPPP",res.data.pricing);
+        setPricingData([{ data: res.data.pricing
+        }]);
+        return;
+      }
+    } catch (error) {
+      // setIsLoading(false)
+    }
+  };
+  
+  useEffect(() => {
+    getPricingData();
+  }, []);
+ // debugger;
+ console.log("FFFFF",pricingData);
+ console.log("AAAAA- ",pricingData[0]);
   return (
     <>
       <Layout>
+        <SubScriptionTop />
         <div className="sell-page-wrapper w-full mb-10">
           <div className="main-wrapper w-full">
             <div className="current_balance-bit-sell-widget w-full lg:h-[436px] mb-11">
               <div className="w-full h-full lg:flex lg:space-x-7">
                 {/* style={{ width: "calc(50% - 15px)" }} */}
+{
+
+pricingData &&
+pricingData[0]?.data?.length > 0 && pricingData[0].data.map((price,index)=>(
+  <>
+    <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
+      <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
+        {/* heading */}
+        <div className="w-full h-16 bg-gold flex pl-7 items-center">
+          <h1 className="text-xl font-medium tracking-wide text-white">
+            {price.title}
+          </h1>
+        </div>
+        <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
+          <div className="w-full px-5 pt-5">
+            <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+            {price.price}
+            </p>
+          </div>
+          <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
+            <PricingListTable
+            priceDetail={price}
+            setRGBColor="rgba(242, 153, 74)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </>
+  ))
+}
 
 
-                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
-                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
-                    {/* heading */}
-                    <div className="w-full h-16 bg-gold flex pl-7 items-center">
-                      <h1 className="text-xl font-medium tracking-wide text-white">
-                        Bits this Month
-                      </h1>
-                    </div>
-                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
-                      <div className="w-full px-5 pt-5">
-                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-                          769.44 ETH
-                        </p>
-                        <p className="text-thin-light-gray text-18 flex items-center">
-                          <span>($949374.94)</span>
-                          <span className="ml-2 text-sm text-light-red">
-                            -224.75 (11.5%)
-                          </span>
-                        </p>
-                      </div>
-                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
-                        <PricingListTable setRGBColor="rgba(242, 153, 74)" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
-                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
-                    {/* heading */}
-                    <div className="w-full h-16 bg-gold flex pl-7 items-center">
-                      <h1 className="text-xl font-medium tracking-wide text-white">
-                        Bits this Month
-                      </h1>
-                    </div>
-                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
-                      <div className="w-full px-5 pt-5">
-                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-                          769.44 ETH
-                        </p>
-                        <p className="text-thin-light-gray text-18 flex items-center">
-                          <span>($949374.94)</span>
-                          <span className="ml-2 text-sm text-light-red">
-                            -224.75 (11.5%)
-                          </span>
-                        </p>
-                      </div>
-                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
-                        <PricingListTable setRGBColor="rgba(242, 153, 74)" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
-                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
-                    {/* heading */}
-                    <div className="w-full h-16 bg-pink flex pl-7 items-center">
-                      <h1 className="text-xl font-medium tracking-wide text-white">
-                        Sell Earing this Month
-                      </h1>
-                    </div>
-                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
-                      <div className="w-full px-5 pt-5">
-                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-                          769.44 ETH
-                        </p>
-                        <p className="text-thin-light-gray text-18 flex items-center">
-                          <span>($949374.94)</span>
-                          <span className="ml-2 text-sm text-light-green">
-                            224.75 (11.5%)
-                          </span>
-                        </p>
-                      </div>
-                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
-                        <PricingListTable setRGBColor="rgba(245, 57, 248, 1)" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
 

src/components/Tracking/TrackAction/TrackEntryWidget.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import background from "../../../assets/images/shape/balance-bg.svg";
+import InputCom from "../../../components/Helpers/Inputs/InputCom";
+import dataImage2 from "../../../assets/images/data-table-user-2.png";
+
+
+export default function TrackEntryWidget(props) {
+  return (
+    <div
+      className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col justify-between  px-8 py-9"
+      style={{
+        background: `url(${background}) 0% 0% / cover no-repeat`,
+      }}
+    >
+      <div className="wallet flex justify-between">
+        <div className="w-[100px] h-[100px] rounded-full overflow-hidden flex justify-center items-center">
+          <img src={dataImage2} alt="data" className="w-full h-full" />
+        </div>
+        <div>
+          <p className="text-26 font-bold tracking-wide text-white text-right">
+            {props.selectedEntry?.title} Entry
+          </p>
+        </div>
+      </div>
+
+      <div className="balance">
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+          <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+            <InputCom placeholder="" label="" name="val1" type="text" />
+          </div>
+          <div className="input-item flex-1">
+            <InputCom
+              placeholder="Drop down Units"
+              label=""
+              name="unitofmeasure"
+              type="text"
+            />
+          </div>
+        </div>
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+          <div className="input-item  w-full mb-5 sm:mb-0">
+            <InputCom
+              placeholder="date time selection"
+              label=""
+              name="event_time"
+              type="text"
+            />
+          </div>
+        </div>
+
+        <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+          <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+            <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0"></div>
+            <div className="input-item flex-1">
+              <button
+                type="button"
+                className="btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center "
+              >
+                <span>Add</span>
+              </button>
+            </div>
+          </div>
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/Tracking/TrackAction/UserRecentTracking.jsx

@@ -1,7 +1,35 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import usersService from "../../../services/UsersService";
+import dataImage1 from "../../../assets/images/data-table-user-1.png";
+import dataImage2 from "../../../assets/images/data-table-user-2.png";
+import dataImage3 from "../../../assets/images/data-table-user-3.png";
+import dataImage4 from "../../../assets/images/data-table-user-4.png";
+import SelectBox from "../../Helpers/SelectBox";
 
 export default function UserRecentTracking() {
+  const api = new usersService();
+  const [isLoading, setIsLoading] = useState(true)
+  const [userTrackingHx, setUserTrackingHx] = useState([]);
+  const getUserTrackingHx = async () => {
+    try {
+      const res = await api.getUserTrackingHistory();
+      if(res.status == 200){
+        setUserTrackingHx([
+          {data: res.data.tracking_data},
+        ]);
+        setIsLoading(false)
+        return
+      }
+      setIsLoading(false)
+    }catch(error) {
+      setIsLoading(false)
+    }
+  };
   
+  useEffect(() => {
+    getUserTrackingHx();
+  }, []);
+
 
   return (
     <div className="currency-statics w-full mb-11">
@@ -10,19 +38,124 @@ export default function UserRecentTracking() {
           <div className="content sm:flex justify-between items-center mb-5">
             <div>
               <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-               Recent Records
+                Recent Records
               </h1>
             </div>
-           
           </div>
-          <div className="currency-statics-chart">
-           
-           SOME TABLE HERE 
-          </div>
-        </div>
-
-
+          
+          <div className="relative w-full overflow-x-auto sm:rounded-lg">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <tbody>
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+              <td className="py-4">All Tracking</td>
+              <td className="py-4 text-center">Value</td>
+              <td className="py-4 text-center">Bits</td>
+              <td className="py-4 text-center">Time</td>
+              <td className="py-4 text-right">Status</td>
+            </tr>
+            {userTrackingHx[0]?.data?.length > 0
+              ? userTrackingHx[0].data.map((track, index) => (
+                  <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                    <td className=" py-4">
+                      <div className="flex space-x-2 items-center">
+                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                          <img
+                            src={dataImage2}
+                            alt="data"
+                            className="w-full h-full"
+                          />
+                        </div>
+                        <div className="flex flex-col">
+                          <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                            {track.code}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                            Added{" "}
+                            <span className="text-purple"> {track.added}</span>
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="text-center py-4 px-2">
+                      <div className="flex space-x-1 items-center justify-center">
+                        <span>
+                          <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 18 18"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
+                              fill="#627EEA"
+                            />
+                            <path
+                              d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                            />
+                            <path
+                              d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
+                              fill="white"
+                            />
+                            <path
+                              d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                            />
+                            <path
+                              d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
+                              fill="white"
+                            />
+                            <path
+                              d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
+                              fill="white"
+                              fillOpacity="0.2"
+                            />
+                            <path
+                              d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                            />
+                          </svg>
+                        </span>
+                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                          {track.val1} {track.munit}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-right py-4 px-2">
+                      <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                        .
+                      </span>
+                    </td>
+                    <td className="text-right py-4 px-2">
+                      <span className="text-base text-thin-light-gray whitespace-nowrap">
+                        {track.event_time}
+                      </span>
+                    </td>
+                    <td className="text-right py-4 px-2">
+                      <button
+                        type="button"
+                        className="text-sm text-white bg-light-green px-2.5 py-1.5 rounded-full"
+                      >
+                        View
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              : null}
+          </tbody>
+        </table>
       </div>
+
+        </div>
+      </div>
+
+
+    
+
     </div>
   );
 }

src/components/Tracking/TrackAction/UserWeightWidget.jsx

@@ -13,8 +13,7 @@ export default function UserWeightWidget() {
         background: `url(${background}) 0% 0% / cover no-repeat`,
       }}
     >
-
-<div className="wallet flex justify-between">
+      <div className="wallet flex justify-between">
         <div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
           <div>
             <p className="text-26 font-bold text-white tracking-wide text-center">
@@ -27,76 +26,57 @@ export default function UserWeightWidget() {
         </div>
         <div>
           <p className="text-26 font-bold tracking-wide text-white text-right">
-          Weight Entry
+            Weight Entry
           </p>
         </div>
       </div>
 
       <div className="balance">
-     
-      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
-  <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
-	<InputCom
-	  placeholder=""
-	  label=""
-	  name="first_name"
-	  type="text"
-	  iconName="people"
-	/>
-  </div>
-  <div className="input-item flex-1">
-	<InputCom
-	  placeholder=""
-	  label=""
-	  name="Last_name"
-	  type="text"
-	  iconName="people"
-	/>
-  </div>
-</div>
-<div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
-
-<div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
-	<InputCom
-	  placeholder=""
-	  label=""
-	  name="first_name"
-	  type="text"
-	  iconName="people"
-	/>
-  </div>
-  <div className="input-item flex-1">
-	<InputCom
-	  placeholder=""
-	  label=""
-	  name="Last_name"
-	  type="text"
-	  iconName="people"
-	/>
-  </div>
-</div>
-
-       
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+          <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+            <InputCom
+              placeholder=""
+              label=""
+              name="val1"
+              type="text"
+             
+            />
+          </div>
+          <div className="input-item flex-1">
+            <InputCom
+              placeholder="Drop down Units"
+              label=""
+              name="unitofmeasure"
+              type="text"
+            
+            />
+          </div>
+        </div>
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+          <div className="input-item  w-full mb-5 sm:mb-0">
+            <InputCom
+              placeholder="date time selection"
+              label=""
+              name="event_time"
+              type="text"
+            />
+          </div>
+        </div>
 
         <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
-
-        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
-	
-  </div>
-  <div className="input-item flex-1">
-  <button
-                    
-                    type="button"
-                    className="btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center "><span>Add</span>
-                  </button>
-  </div>
-</div>
-
-      
+          <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+            <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0"></div>
+            <div className="input-item flex-1">
+              <button
+                type="button"
+                className="btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center "
+              >
+                <span>Add</span>
+              </button>
+            </div>
+          </div>
         </p>
       </div>
-
     </div>
   );
 }

src/components/Tracking/TrackAction/index.jsx

@@ -1,16 +1,43 @@
-import React from "react";
-import { useParams } from 'react-router-dom'
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 
 import Layout from "../../Partials/Layout";
 import UserWeightWidget from "./UserWeightWidget";
+import TrackEntryWidget from "./TrackEntryWidget";
 import UserRecentTracking from "./UserRecentTracking";
+import usersService from "../../../services/UsersService";
 
 export default function TrackAction() {
-  
-  let {trackpage} = useParams();
+  const api = new usersService();
+  let { trackpage } = useParams();
+  const [selectedCategory, setSelTrackCat] = useState([]);
 
-  console.log("TRACK PAGE  = = ",trackpage);
+  const getTrackCat = async () => {
+    try {
+      const res = await api.refreshTrackCategory();
+      if (res.status == 200) {
+        var fliterCategory = res.data.filter(function (el) {
+          return el.widget == trackpage;
+        });
+        //debugger;
+        setSelTrackCat([{ data: fliterCategory[0] }]);
+        return;
+      }
+    } catch (error) {
+      // setIsLoading(false)
+    }
+  };
 
+  useEffect(() => {
+    getTrackCat();
+  }, []);
+
+  console.log("TRACK PAGE  = = ", trackpage);
+  console.log("SELECTED TRACK PAGE  trackCat = = ", selectedCategory);
+  const selectedEntry = selectedCategory[0]?.data; // better way to do this so thst null on promise will not kill the screen
+
+  console.log("wait till you know whst page to show");
+  //debugger;
   return (
     <>
       <Layout>
@@ -18,19 +45,29 @@ export default function TrackAction() {
           <div className="main-wrapper w-full">
             <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
               <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
-                <UserWeightWidget />
+                <TrackEntryWidget selectedEntry={selectedEntry} />
               </div>
               <div className="flex-1">
                 <div className="my-wallets w-full h-full bg-white dark:bg-dark-white   rounded-lg p-6">
                   <div className="mb-4">
                     <h1 className="text-xl font-bold tracking-wide   text-dark-gray dark:text-white">
-                     Some title HERE 
+                      {selectedCategory[0]?.data?.title}
                     </h1>
                   </div>
                   <div className="content-area">
-
-                    SOMETHING HERE 
-
+                    <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2" style={{ backgroundColor: 'blue', textAlign:"center",paddingTop:'50px' }}>
+                      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+                        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0"></div>
+                        <div className="input-item flex-1">
+                          <button
+                            type="button"
+                            className="btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center "
+                          >
+                            <span>Connect Device</span>
+                          </button>
+                        </div>
+                      </div>
+                    </p>
                   </div>
                 </div>
               </div>

src/components/Tracking/index.jsx

@@ -6,20 +6,45 @@ import TrackingTable from "./TrackingTable";
 import MarketHistorySection from "./MarketHistorySection";
 import TrackCategory from "./TrackCategory";
 import datas from "../../data/product_data.json";
+import usersService from "../../services/UsersService";
+
 
 export default function Tracking(props) {
   console.log("IN TRACKING COMPO", props);
- 
   const trending = datas.datas;
-  console.log("IN TRACKING COMPO TRD", trending);
-  //debugger;
+
+  const api = new usersService();
+  const [isLoading, setIsLoading] = useState(true)
+  const [userTrackingHx, setUserTrackingHx] = useState([]);
+  const getUserTrackingHx = async () => {
+    try {
+      const res = await api.getUserTrackingHistory();
+      if(res.status == 200){
+        setUserTrackingHx([
+          {data: res.data.tracking_data},
+        ]);
+        setIsLoading(false)
+        return
+      }
+      setIsLoading(false)
+    }catch(error) {
+      setIsLoading(false)
+    }
+  };
+  
+  useEffect(() => {
+    getUserTrackingHx();
+  }, []);
+
+
+  console.log("IN TRACKING COMPO TRD", userTrackingHx);
   return (
     <>
       <Layout>
         <div className="history-wrapper w-full mb-10">
           <div className="main-wrapper w-full">
             <TrackCategory trackcategory={props.trackCategory} className="mb-10" />
-            <TrackingTable />
+            <TrackingTable userTrackingHx={userTrackingHx}/>
           </div>
         </div>
       </Layout>

src/index.css

@@ -669,6 +669,7 @@ TODO: Responsive ===========================
   .nft-userprofile-wrapper .content-wrapper-profile-only .auth {
     margin-top: -70px;
   }
+  .react-date-picker__calendar {width: 290px;}
 }
 @media (max-width: 376px) {
   .notification-page .content-item .notifications {
@@ -677,6 +678,7 @@ TODO: Responsive ===========================
   .notification-page .content-item .notifications .icon {
     @apply mb-2;
   }
+
 }
 
 /* Calendar */
@@ -684,6 +686,7 @@ TODO: Responsive ===========================
   width: 100%;
   min-height: 23.2rem;
   border-radius: 7px !important;
+  @apply border border-pink !important;
 }
 
 .dark .react-calendar{
@@ -699,9 +702,13 @@ TODO: Responsive ===========================
 .react-calendar__navigation{
   margin-top: 2px;
   margin-inline: 2px;
+  @apply text-pink !important;
 }
 
-.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
+.react-calendar__tile--active{color: #fff; font-weight: bold;
+  /* background-color: #006edc; */
+  @apply bg-pink;
+}
 .dark .react-calendar__tile--active{color: #fff;}
 
 .react-calendar__navigation button:enabled:hover,
@@ -717,14 +724,16 @@ TODO: Responsive ===========================
 .react-calendar__month-view__weekdays__weekday abbr:where([title]){
   text-decoration: none !important;
   cursor: default;
+  @apply text-pink !important;
 }
 
 .react-calendar__tile{
   border: 1px solid #cfd7e3 !important;
   border-left: 0;
   text-align: right;
-  height: 4.813rem !important;
+  height: 6.813rem !important;
   transition: all 500ms;
+  /* @apply border border-pink !important; */
 }
 
 .dark .react-calendar__tile{background: #11131F;}
@@ -735,7 +744,7 @@ TODO: Responsive ===========================
   appearance: none;
   background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
   background-position: calc(100% - 0.75rem) center !important;
-  border: 0.5px solid #E3E4FE; 
+  @apply border border-pink;
 }
 
 .dark .reminder-select select {
@@ -759,11 +768,17 @@ TODO: Responsive ===========================
 }
 
 /* Date Picker */
+.react-date-picker{
+  display: flex !important;
+  flex: 1;
+}
+
 .react-date-picker__wrapper{
   border: 0.5px solid #E3E4FE;
   padding: 1.25rem;
   background: #fafafa;
   border-radius: 9999px;
+  @apply border border-pink;
 }
 
 .dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
@@ -775,6 +790,7 @@ TODO: Responsive ===========================
 
 .dark .react-date-picker__button svg{stroke: #7B818D;}
 
+.react-date-picker__calendar {inset: 100% 25px auto auto !important;}
 .react-date-picker__calendar .react-calendar{
   min-height: 18.4rem;
 }
@@ -788,4 +804,6 @@ TODO: Responsive ===========================
 .react-date-picker__inputGroup__leadingZero{
   cursor: pointer;
   color: #374151;
-}
+}
+
+.animate-fadeIn {@apply transition duration-300}

src/middleware/AuthRoute.jsx

@@ -18,6 +18,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     localStorage.removeItem('member_id');
     localStorage.removeItem('member_uuid');
     localStorage.removeItem('status');
+    localStorage.removeItem('layout');
+    localStorage.removeItem('measurement_units');
     navigate("/login", { replace: true }); // redirects user to login page after session expires
   };
 
@@ -30,15 +32,15 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
 
   useEffect(()=>{
-    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 4 mins 240000
+    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 8 mins
       expireSessionReminder()
-    }, 240000) 
+    }, 480000)
 
-    let timeForSessionExpiry = setTimeout(()=>{ //reminds user of session expiry after 4 mins 300000
+    let timeForSessionExpiry = setTimeout(()=>{ //expire session after 10 mins
       expireSession()
-    }, 300000) 
+    }, 600000) 
 
-    return ()=>{ // clears timeout side effect
+    return ()=>{ // clears timeout side effect7
       clearTimeout(sessionExpReminder)
       clearInterval(timeForSessionExpiry)
     }

src/services/SiteService.js

@@ -3,7 +3,7 @@ import Axios from "axios";
 
 class SiteService {
     constructor() {
-        console.log("Er are here anyway");
+        console.log("Site Service Entered");
     }
     // Blog Data {Get}
     blogData() {

src/services/UsersService.js

@@ -5,6 +5,11 @@ class usersService {
         console.log("Er are here anyway");
     }
 
+    // Reset Password
+    resetPassword(reqData) {
+        return this.postAuxEnd('/resetpass', reqData);
+    }
+
     logInUser(reqData) {
         localStorage.setItem("session_token", ``);
         return this.postAuxEnd("/login", reqData);
@@ -15,6 +20,11 @@ class usersService {
         return this.postAuxEnd("/editreminder", reqData);
     }
 
+    //SIGNUP AUTH
+    signupUser(reqData){
+        return this.postAuxEnd("/account", reqData);
+    }
+
     getUserReminders(){
         var reqData = {
             member_id: localStorage.getItem("member_id")
@@ -28,6 +38,13 @@ class usersService {
         };
         return this.getAuxEnd("/loginhx", reqData);
       }
+      getUserTrackingHistory(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id"),
+            member_uuid: localStorage.getItem("member_uuid")
+        };
+        return this.getAuxEnd("/trackinghx", reqData);
+      }
 
        //END POINT TO POPULATE MODE AND CATEGORY ON ADD REMINDER PAGED
         getUserModeCategory(path){
@@ -44,6 +61,10 @@ class usersService {
         return this.getAuxEnd("/resources", reqData);
       }
 
+      refreshTrackCategory(){
+        console.log("IMPLEMENT LOCAL STORAGE HERE - no need for server gab everytime");
+        return this.getTrackCategory();
+      }
       getTrackCategory(){
         var reqData = {
             member_id: localStorage.getItem("member_id")
@@ -112,7 +133,7 @@ class usersService {
                 if (error.response) {
                     //response status is an error code
                     console.log("ERROR-------------------------------------------------------");
-                    console.log(error.response.status);
+                    console.log(error.response.status, 'err');
                     console.log("ERROR-------------------------------------------------------");
                 } else if (error.request) {
                     //response not received though the request was sent

src/views/TrackActionPage.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import MyWallet from "../components/MyWallet";
 import TrackAction from "../components/Tracking/TrackAction";
 
 export default function TrackActionPage() {

src/views/VerifySignupCompletePage.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import CompleteSignUp from "../components/AuthPages/SignUp/CompleteSignUp";
+
+export default function VerifySignupCompletePage() {
+  return <CompleteSignUp />;
+}

src/views/VerifySignupPage.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import VerifyYou from "../components/AuthPages/VerifyYou";
+import VerifySignup from "../components/AuthPages/SignUp/VerifySignup";
+
+export default function VerifySignupPage() {
+  return <VerifySignup />;
+}