fixed size for mobile view

This reverts commit d13ddd5cec.

.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

package-lock.json

@@ -3011,6 +3011,22 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-calendar": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@types/react-calendar/-/react-calendar-3.9.0.tgz",
+      "integrity": "sha512-KpAu1MKAGFw5hNwlDnWsHWqI9i/igAB+8jH97YV7QpC2v7rlwNEU5i6VMFb73lGRacuejM/Zd2LklnEzkFV3XA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-dom": {
+      "version": "18.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
+      "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4897,6 +4913,11 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
       "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
+    "detect-element-overflow": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/detect-element-overflow/-/detect-element-overflow-1.3.1.tgz",
+      "integrity": "sha512-E29Axx3pyotgg3j5HUbusTTarjPUHsC02p7fZ3/cnUufyK0kx5RzRA9waBvrKFWGc/LWiRj3pD9Y3y+mymMYiQ=="
+    },
     "detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -9486,6 +9507,11 @@
         }
       }
     },
+    "make-event-props": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.4.2.tgz",
+      "integrity": "sha512-ZOHqRpLn2htnMd9zqhE+wticVr31PdwrJXHcvEEdKgrfjCOuSDn8urG9SDzEIqzP1ayp1uTdDJcOiTlJhqWpEQ=="
+    },
     "makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -11087,6 +11113,22 @@
         "countup.js": "^2.3.2"
       }
     },
+    "react-date-picker": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-9.2.0.tgz",
+      "integrity": "sha512-kAE7HFLq1ic4pS0Pk9SyPTjejIfjTyPov04a2eZzLxfZh8ss8EPaaaX7bBUP4RUCkbxHpR0P4UHloD0/fFDCZw==",
+      "requires": {
+        "@types/react-calendar": "^3.0.0",
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^4.0.0",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -11153,6 +11195,18 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fit": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/react-fit/-/react-fit-1.5.0.tgz",
+      "integrity": "sha512-U9RxtM55RrNlGZp76r3QPWwSZ74r8NUOvwxwNOk+0vLlu/oJwP+6vjCkaOTw1hf8SzY0tmI07HwDdW/2CXYeLQ==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "detect-element-overflow": "^1.3.1",
+        "prop-types": "^15.6.0",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -12738,6 +12792,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12952,6 +13011,11 @@
         "picocolors": "^1.0.0"
       }
     },
+    "update-input-width": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/update-input-width/-/update-input-width-1.3.1.tgz",
+      "integrity": "sha512-hV2DGiSn7FKerjIXaI3s0EG/AnmAeoRTV5cvpsFcygzUzKreYj5qSu7rVihzUOEXF/MP2mjJpUzwi14sZdp0nw=="
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "react-calendar": "^4.0.0",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
+    "react-date-picker": "^9.2.0",
     "react-dom": "^18.0.0",
     "react-lottie": "^1.2.3",
     "react-redux": "^8.0.2",

src/Routers.jsx

@@ -22,12 +22,16 @@ 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';
 import TrackingPage from "./views/TrackingPage";
 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 (
@@ -47,6 +51,8 @@ export default function Routers() {
           element={<UpdatePasswordPages />}
         />
         <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 />}>
@@ -59,11 +65,16 @@ export default function Routers() {
           <Route exact path="/my-collection" element={<MyCollection />} />*/}
           <Route exact path="/reminders" element={<RemindersPage />} />
           <Route exact path="/add-reminder" element={<RemindersAddPage />} />
+          <Route exact path="/add-reminder/:reminder_uuid" element={<RemindersAddPage />} />
           <Route exact path="/tracking" element={<TrackingPage />} />
           <Route exact path="/calendar" element={<CalendarPage />} />
           <Route exact path="/resources" element={<ResourcePage />} />
           <Route exact path="/my-wallet" element={<MyWalletPage />} />
           <Route exact path="/notification" element={<Notification />} />
+          <Route exact path="/subscription" element={<SubscriptionPage />} />
+
+          <Route exact path="/t-weight" element={<TrackingPage />} />
+          <Route exact path="/track-action/:trackpage" element={<TrackActionPage />} />
           <Route
             exact
             path="/my-collection/collection-item"

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,49 @@ 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");
-
     } 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)
+    if (reset.status == 200){
+      setTimeout(() => {
+        navigate("/verify-you", {replace : true});
+        setLoading(false)
+      }, 2000);
+    }else{
+      setValidation('An error occurred')
+    }
+  }
+  
   useEffect(() => {
     validationChecker(email)
   }, [email])
@@ -61,21 +76,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/Login/index.jsx

@@ -50,6 +50,8 @@ export default function Login() {
         localStorage.setItem("session_token", `${loginResult.data.session_token}`);
         localStorage.setItem("status", loginResult.data.status);
         localStorage.setItem("profile", `${JSON.stringify(loginResult.data.profile)}`);
+        localStorage.setItem("measurement_units", `${JSON.stringify(loginResult.data.measurement_units)}`);
+        localStorage.setItem("layout", `${JSON.stringify(loginResult.data.layout)}`);
         setLoginLoading(true);
          // userApi.getUserReminders(); //testing
         setTimeout(() => {         

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,159 @@
+import React, {useState} from "react";
+// import titleShape from "../../../../assets/images/shape/text-shape-three.svg";
+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: 'anumuduchukwuebuka@gmail.com',
+      pend_uid: 'ec497517-ddb5-4830-a2c4-b7e2a68627de',
+      random_text: otpCode,
+      mode: 'VERIFY',
+      // loc: 'Desktop',
+      // sessionid: 'ec497517-ddb5-4830-a2c4-b7e2a68627de',
+      // code: otpCode,
+    }
+
+    try {
+      const res = await verifyOTP.signupOTPVerify(apiInput);
+      console.log(res)
+      if(res.status != 200){
+        setLoading(false)
+        setErrorMessage({
+          success: false,
+          message: 'Could not verify code'
+        })
+        return
+      }
+      // if status code is 200 proceed
+      setErrorMessage({
+        success: true,
+        message: 'verification successfully'
+      })
+      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,128 @@ 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 || res.data.status < 1){
+        setLoading(false)
+        setErrorMessage({
+          success: false,
+          message: 'Could not create account try again later'
+        })
+        return
+      }
+      // if status code is 200 proceed
+      setErrorMessage({
+        success: true,
+        message: 'Account created successfully'
+      })
+      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 +163,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 +189,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 +200,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 +253,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 +284,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/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/BlogCardStyle.jsx

@@ -29,15 +29,15 @@ export default function BlogCardStyle({
           <div className="owned-by flex space-x-2 items-center">
             <div className="owned w-[46px] h-[46px] rounded-full overflow-hidden">
               <img
-                src={localImgLoad(`images/${datas.owner_img}`)}
+                src={`${datas.meta_value}`}
                 alt=""
                 className="w-full h-full"
               />
             </div>
             <div>
-              <p className="text-thin-light-gray text-sm leading-3">Owned by</p>
+              <p className="text-thin-light-gray text-sm leading-3">Published : </p>
               <p className="text-base   text-dark-gray dark:text-white">
-                {datas.owner}
+                {datas.post_date}
               </p>
             </div>
           </div>
@@ -48,9 +48,7 @@ export default function BlogCardStyle({
           <div
             className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
             style={{
-              background: `url(${localImgLoad(
-                `images/${datas.thumbnil}`
-              )}) 0% 0% / cover no-repeat`,
+              background: `url(${datas.meta_value}) 0% 0% / cover no-repeat`,
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -183,7 +181,7 @@ export default function BlogCardStyle({
           {/* title */}
           <Link to="/shop-details" className="mb-2.5">
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-              {datas.title}
+              {datas.post_title}
             </h1>
           </Link>
           <div className="flex justify-between">

src/components/Cards/TrackItemCard.jsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+// import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";
+
+export default function TrackItemCard({ datas, hidden = false }) {
+  const navigate = useNavigate()
+  const [addFavorite, setValue] = useState(false);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = (e) => {
+    e.stopPropagation()
+    if (!addFavorite) {
+      setValue(true);
+    } else {
+      setValue(false);
+    }
+  };
+  return (
+    <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-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% / 100% no-repeat`,
+            }}
+          >
+            <div className="product-options flex justify-between relative">
+              <span
+                onClick={favoriteHandler}
+                className={`w-7 h-7 bg-white   rounded-full flex justify-center items-center  cursor-pointer ${
+                  addFavorite ? "text-pink" : "  text-dark-gray"
+                }`}
+              >
+                <Icons name="love" />
+              </span>
+       
+            </div>
+            {hidden && (
+              <div className="flex justify-center">
+                <svg
+                  width="108"
+                  height="91"
+                  viewBox="0 0 108 91"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M88.7686 70.8596C87.0739 69.1408 85.4043 67.4283 83.7222 65.7285C81.13 63.1157 78.5316 60.5092 75.9143 57.9216C75.5879 57.5943 75.5439 57.3676 75.7636 56.9458C83.5841 41.861 74.3577 23.6597 57.5994 21.1351C52.3334 20.3418 47.3184 21.2169 42.586 23.6723C42.2784 23.8297 42.0587 23.9871 41.7135 23.6408C38.3681 20.2474 34.9977 16.8854 31.6334 13.5108C31.5393 13.4164 31.464 13.3093 31.3008 13.1142C32.6879 12.5916 33.9934 12.0628 35.3303 11.6095C43.5274 8.82042 51.9442 7.95159 60.5368 8.88967C81.5568 11.1939 100.116 25.3659 107.899 45.0341C108 45.2922 108.031 45.6636 107.924 45.9155C103.889 55.8629 97.6122 64.0979 89.1138 70.6266C89.051 70.6833 88.9757 70.7274 88.7686 70.8596Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M19.1878 20.1909C21.234 22.256 23.2299 24.2769 25.2384 26.2916C27.5168 28.577 29.7952 30.8687 32.0861 33.1415C32.3936 33.4437 32.4438 33.6577 32.2367 34.0606C25.1192 47.7667 31.9731 64.4506 46.6601 69.0466C53.0622 71.0487 59.3011 70.4506 65.3014 67.416C65.5022 67.3153 65.6968 67.2082 65.8663 67.1201C69.4376 70.715 72.9776 74.2847 76.5677 77.9048C76.4046 77.9804 76.1974 78.0874 75.9778 78.1756C66.9898 81.8334 57.6692 83.1619 48.0222 82.186C26.7197 80.0265 8.07841 65.9868 0.119793 46.092C0.00053969 45.7898 -0.0496724 45.368 0.0633048 45.0847C4.06772 35.2002 10.3003 27.0156 18.7297 20.512C18.8489 20.4113 18.987 20.3294 19.1878 20.1909Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M8.82617 4.58337C10.2133 3.1731 11.7636 1.60544 13.3515 0C41.9787 28.8034 70.6247 57.6195 99.2519 86.4229C97.8272 87.8458 96.2643 89.4009 94.6638 91C66.0554 62.1966 37.422 33.3742 8.82617 4.58337Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M58.5234 59.5084C54.6696 60.9753 48.0227 60.7361 43.24 55.6553C39.5997 51.7897 38.0243 44.7573 40.0516 41.0112C46.2151 47.1812 52.341 53.3133 58.5234 59.5084Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M49.7617 31.4036C53.1887 29.5022 60.2309 31.0825 64.1035 34.7278C69.1938 39.5189 69.426 46.2114 68.0515 49.8063C61.957 43.6805 55.8437 37.5294 49.7617 31.4036Z"
+                    fill="white"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </div>
+        {/* user */}
+        <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 capitalize line-clamp-1"
+            >
+            {datas.title}
+            </Link>
+          </p>
+        </div>
+
+        </div>
+     
+    </div>
+  );
+}

src/components/Cards/YouTubeCardStyle.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+// import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";
+
+export default function YouTubeCardStyle({
+  className,
+  datas,
+  hidden = false,
+}) {
+  const [addFavorite, setValue] = useState(datas.whishlisted);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+    } else {
+      setValue(false);
+    }
+  };
+  return (
+    <div
+      className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col justify-between w-full h-full">
+        <div className="card-two-info flex justify-between items-center">
+          <div className="owned-by flex space-x-2 items-center">
+            <div>
+              <p className="text-thin-light-gray text-sm leading-3">Video : </p>
+              <p className="text-base   text-dark-gray dark:text-white">
+                {datas.post_date}
+              </p>
+            </div>
+          </div>
+          <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+  
+        </div>
+        <div className="thumbnail-area w-full">
+          <div
+            className="w-full h-[236px]  rounded-xl overflow-hidden">
+                  <iframe
+      width="100%"
+      height="100%"
+      src={`${datas.content}`}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      title={datas.title}
+    />        
+      
+
+
+
+            {hidden && (
+              <div className="flex justify-center">
+                <svg
+                  width="108"
+                  height="91"
+                  viewBox="0 0 108 91"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M88.7686 70.8596C87.0739 69.1408 85.4043 67.4283 83.7222 65.7285C81.13 63.1157 78.5316 60.5092 75.9143 57.9216C75.5879 57.5943 75.5439 57.3676 75.7636 56.9458C83.5841 41.861 74.3577 23.6597 57.5994 21.1351C52.3334 20.3418 47.3184 21.2169 42.586 23.6723C42.2784 23.8297 42.0587 23.9871 41.7135 23.6408C38.3681 20.2474 34.9977 16.8854 31.6334 13.5108C31.5393 13.4164 31.464 13.3093 31.3008 13.1142C32.6879 12.5916 33.9934 12.0628 35.3303 11.6095C43.5274 8.82042 51.9442 7.95159 60.5368 8.88967C81.5568 11.1939 100.116 25.3659 107.899 45.0341C108 45.2922 108.031 45.6636 107.924 45.9155C103.889 55.8629 97.6122 64.0979 89.1138 70.6266C89.051 70.6833 88.9757 70.7274 88.7686 70.8596Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M19.1878 20.1909C21.234 22.256 23.2299 24.2769 25.2384 26.2916C27.5168 28.577 29.7952 30.8687 32.0861 33.1415C32.3936 33.4437 32.4438 33.6577 32.2367 34.0606C25.1192 47.7667 31.9731 64.4506 46.6601 69.0466C53.0622 71.0487 59.3011 70.4506 65.3014 67.416C65.5022 67.3153 65.6968 67.2082 65.8663 67.1201C69.4376 70.715 72.9776 74.2847 76.5677 77.9048C76.4046 77.9804 76.1974 78.0874 75.9778 78.1756C66.9898 81.8334 57.6692 83.1619 48.0222 82.186C26.7197 80.0265 8.07841 65.9868 0.119793 46.092C0.00053969 45.7898 -0.0496724 45.368 0.0633048 45.0847C4.06772 35.2002 10.3003 27.0156 18.7297 20.512C18.8489 20.4113 18.987 20.3294 19.1878 20.1909Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M8.82617 4.58337C10.2133 3.1731 11.7636 1.60544 13.3515 0C41.9787 28.8034 70.6247 57.6195 99.2519 86.4229C97.8272 87.8458 96.2643 89.4009 94.6638 91C66.0554 62.1966 37.422 33.3742 8.82617 4.58337Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M58.5234 59.5084C54.6696 60.9753 48.0227 60.7361 43.24 55.6553C39.5997 51.7897 38.0243 44.7573 40.0516 41.0112C46.2151 47.1812 52.341 53.3133 58.5234 59.5084Z"
+                    fill="white"
+                  />
+                  <path
+                    d="M49.7617 31.4036C53.1887 29.5022 60.2309 31.0825 64.1035 34.7278C69.1938 39.5189 69.426 46.2114 68.0515 49.8063C61.957 43.6805 55.8437 37.5294 49.7617 31.4036Z"
+                    fill="white"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="details-area">
+          {/* title */}
+          <Link to="/shop-details" className="mb-2.5">
+            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              {datas.title}
+            </h1>
+          </Link>
+          <div className="flex justify-between">
+            <div className="flex items-center space-x-2">
+              <div className="w-[42px] h-[42px]">
+     
+              </div>
+              <div>
+               
+              </div>
+
+            </div>
+            <div>
+              <button
+                type="button"
+                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              >
+               View
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Helpers/Icons.jsx

@@ -6,6 +6,7 @@ import Reminder from "../../assets/images/icons/myFit_reminder.png";
 import Resources from "../../assets/images/icons/myFit_resources.png";
 import Settings from "../../assets/images/icons/myFit_settings.png";
 import Tracking from "../../assets/images/icons/myFit_tracking.png";
+import Tracking2 from "../../assets/images/icons/myFit_tracking2.png";
 
 export default function Icons({ name }) {
   return (
@@ -477,6 +478,7 @@ export default function Icons({ name }) {
         </svg>
       ) : name === "settings" ? (<img src={Settings} alt="image" className="w-[24px] h-[24px]" />)
         : name === "tracking" ? (<img src={Tracking} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "tracking2" ? (<img src={Tracking2} alt="image" className="w-[24px] h-[24px]" />)
         : name === "resources" ? (<img src={Resources} alt="image" className="w-[24px] h-[24px]" />)
         : name === "reminder" ? (<img src={Reminder} alt="image" className="w-[24px] h-[24px]" />)
         : name === "profile" ? (<img src={Profile} alt="image" className="w-[24px] h-[24px]" />)

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]  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-bese 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/Home/HomeLayouts/HmLayout1.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import UpdateTable from "./../UpdateTable";
+import TotalRecentHx from "./../TotalRecentHx";
+
+export default function HmLayout1({ className }) {
+  return (
+    <div>
+        <TotalRecentHx className="mb-10"/> 
+        <UpdateTable className="mb-10"/>
+    </div>
+  );
+}

src/components/Home/HomeLayouts/HmLayout2.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import UpdateTable from "./../UpdateTable";
+import TotalRecentHx from "./../TotalRecentHx";
+
+export default function HmLayout2({ className }) {
+  return (
+    <div>
+        <UpdateTable className="mb-10"/>
+        <TotalRecentHx className="mb-10"/> 
+    </div>
+  );
+}

src/components/Home/HomeLayouts/HmLayout3.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import UpdateTable from "./../UpdateTable";
+import TotalRecentHx from "./../TotalRecentHx";
+
+export default function HmLayout3({ className }) {
+  return (
+    <div>
+        <TotalRecentHx className="mb-10"/> 
+        <TotalRecentHx className="mb-10"/> 
+    </div>
+  );
+}

src/components/Home/TotalRecentHx.jsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import MarketVisitorAnalytic from "../Charts/MarketVisitorAnalytic";
+import SelectBox from "../Helpers/SelectBox";
+import SellHistoryWidget from "./SellHistoryWidget";
+
+export default function TotalRecentHx({ className }) {
+  const [currencyDataLvl, setCurrencyDataLvl] = useState([
+    "Jan 1",
+    "Jan 2",
+    "Jan 3",
+    "Jan 4",
+    "Jan 5",
+    "Jan 6",
+    "Jan 7",
+    "Jan 8",
+    "Jan 9",
+    "Jan 10",
+    "Jan 11",
+    "Jan 12",
+    "Jan 13",
+    "Jan 14",
+    "Jan 15",
+  ]);
+  const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
+  const [filterDataSet, setFilterDataSet] = useState([
+    50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100,
+  ]);
+  const dataSetHandler = (value) => {
+    if (value === "Last Month") {
+      setCurrencyDataLvl([
+        "Jan 1",
+        "Jan 2",
+        "Jan 3",
+        "Jan 4",
+        "Jan 5",
+        "Jan 6",
+        "Jan 7",
+        "Jan 8",
+        "Jan 9",
+        "Jan 10",
+        "Jan 11",
+        "Jan 12",
+        "Jan 13",
+        "Jan 14",
+        "Jan 15",
+        "Jan 16",
+        "Jan 17",
+        "Jan 18",
+        "Jan 19",
+        "Jan 20",
+        "Jan 21",
+        "Jan 22",
+        "Jan 23",
+        "Jan 24",
+        "Jan 25",
+        "Jan 26",
+        "Jan 27",
+        "Jan 28",
+        "Jan 29",
+        "Jan 30",
+      ]);
+      setFilterDataSet([
+        50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 50, 30,
+        50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100,
+      ]);
+    } else if (value === "Last 7 days") {
+      setCurrencyDataLvl([
+        "Jan 1",
+        "Jan 2",
+        "Jan 3",
+        "Jan 4",
+        "Jan 5",
+        "Jan 6",
+        "Jan 7",
+      ]);
+      setFilterDataSet([50, 30, 100, 20, 50, 30, 100]);
+    } else {
+      setCurrencyDataLvl([
+        "Jan 1",
+        "Jan 2",
+        "Jan 3",
+        "Jan 4",
+        "Jan 5",
+        "Jan 6",
+        "Jan 7",
+        "Jan 8",
+        "Jan 9",
+        "Jan 10",
+        "Jan 11",
+        "Jan 12",
+        "Jan 13",
+        "Jan 14",
+        "Jan 15",
+      ]);
+      setFilterDataSet([
+        50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100,
+      ]);
+    }
+  };
+  return (
+    <div
+      className={`sell-history-market-visitor-analytic w-full ${
+        className || ""
+      }`}
+    >
+      <div className="content-wrapper w-full  lg:flex xl:space-x-8 lg:space-x-4">
+
+        <div className="flex-1 ">
+          <div className="market-visitor w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white   overflow-hidden rounded-2xl  section-shadow">
+            <div className="flex flex-col justify-between h-full">
+              <div className="content flex justify-between items-center mb-5">
+                <div>
+                  <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                    Market Visitor
+                  </h1>
+                </div>
+                <SelectBox datas={filterDatas} action={dataSetHandler} />
+              </div>
+              <div className="h-[233px]">
+                <MarketVisitorAnalytic
+                  datasets={filterDataSet}
+                  dataLvls={currencyDataLvl}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+          <SellHistoryWidget />
+        </div>
+
+      </div>
+    </div>
+  );
+}

src/components/Home/index.jsx

@@ -1,24 +1,29 @@
 import React from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
-import CreateNft from "./CreateNft";
-import Hero from "./Hero";
-import SellHistoryMarketVisitorAnalytic from "./SellHistoryMarketVisitorAnalytic";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import TrendingSection from "./TrendingSection";
-import UpdateTable from "./UpdateTable";
+
+import HmLayout1 from "./HomeLayouts/HmLayout1";
+import HmLayout2 from "./HomeLayouts/HmLayout2";
+import HmLayout3 from "./HomeLayouts/HmLayout3";
+
 
 export default function Home() {
     const trending = datas.datas;
-
+    const main_layout =JSON.parse( localStorage.getItem("layout") ); // need to make safer - check for type first
+    const recomended = main_layout.dash; // make safe 
     return (
         <Layout>
             <div className="home-page-wrapper">
-                {/*   <Hero className="mb-10" />
-        <CreateNft />
-        <TrendingSection trending={trending} className="mb-10" />*/}
-                <SellHistoryMarketVisitorAnalytic className="mb-10"/> {/* <TopSellerTopBuyerSliderSection className="mb-10" /> */}
-                <UpdateTable className="mb-10"/>
+                {
+                  recomended=='33010'?(<HmLayout1 />):
+                  recomended=='33015'?(<HmLayout2 />):
+                  recomended=='33020'?(<HmLayout3 />):
+                  recomended=='33025'?(<HmLayout1 />):
+                  recomended=='33030'?(<HmLayout3 />):
+                  recomended=='33035'?(<HmLayout2 />):
+                  recomended=='33040'?(<HmLayout1 />):
+                  ''
+                }
             </div>
         </Layout>
     );

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/Partials/RightSideBar.jsx

@@ -5,6 +5,7 @@ import topCreator2 from "../../assets/images/top-creator-2.png";
 import topCreator3 from "../../assets/images/top-creator-3.png";
 import topCreator4 from "../../assets/images/top-creator-4.png";
 import topCreator5 from "../../assets/images/top-creator-5.png";
+import tracking from "../../assets/images/icons/myFit_tracking2.png";
 import DoughnutChart from "../Charts/DoughnutChart";
 import MiniLineChart from "../Charts/MiniLineChart";
 import Icons from "../Helpers/Icons";
@@ -14,6 +15,8 @@ import LtcIco from "../Helpers/Icons/LtcIco";
 import Usdt from "../Helpers/Icons/Usdt";
 import SelectBox from "../Helpers/SelectBox";
 
+import SideMenuSub from "../Subscriptions/SideMenuSub";
+
 export default function RightSideBar() {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
   const [filterDataSet, setFilterDataSet] = useState([10, 30, 20, 40]);
@@ -43,7 +46,12 @@ export default function RightSideBar() {
   };
   return (
     <>
+ 
+    
       <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed 2xl:grid-cols-none 2xl:block grid lg:grid-cols-2 grid-cols-1 xl:gap-7 gap-4 h-full 2xl:pb-96">
+             <div> 
+         <SideMenuSub />
+      </div>
         <div className="chart-one bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border flex flex-col sm:flex-row 2xl:flex-col 2xl:block lg:justify-between sm:items-center space-x-5 2xl:space-x-0 ">
           <div>
             <div className="chart-heading mb-4 xl:flex justify-between items-center">
@@ -166,7 +174,7 @@ export default function RightSideBar() {
             </div>
           </div>
         </div>
-      
+     
         {/* top-platform */}
         <div className="top-platform bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border ">
           {/* heading */}
@@ -181,70 +189,29 @@ export default function RightSideBar() {
           <div className="platform-list flex flex-col gap-4">
             <Link to="/add-reminder" className="cursor-pointer p-2 md:hover:shadow-md transition md:hover:duration-300 rounded-md">
             <div className="item flex space-x-3 items-center">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg
-                  className="w-[100%]"
-                  // width="40"
-                  // height="41"
-                  viewBox="0 0 40 41"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M40 20.7556C40.0074 31.7371 31.0431 40.6838 20.0369 40.6912C8.95687 40.6838 0 31.7812 0 20.741C0 9.69341 8.92002 0.80542 20.0295 0.80542C31.08 0.80542 39.9926 9.7081 40 20.7556ZM15.4736 10.3178C15.5326 10.4206 15.5621 10.5088 15.6211 10.5749C16.2772 11.4784 16.808 12.448 17.2282 13.4763C18.6878 17.0242 18.5256 20.3957 16.174 23.5396C16.0855 23.6571 15.9307 23.7673 16.0413 23.9509C16.1445 24.1125 16.314 24.0758 16.4689 24.0758C17.0807 24.0758 17.6926 24.0831 18.3045 24.0758C18.5477 24.0684 18.6804 24.1199 18.6731 24.4063C18.6583 25.016 18.6657 25.6257 18.6731 26.2353C18.6731 26.4557 18.5993 26.5292 18.3708 26.5218C17.7663 26.5145 17.1471 26.4778 16.5426 26.5145C14.8765 26.6173 14.39 26.0591 13.7928 24.59C13.7707 24.5312 13.7486 24.4724 13.7265 24.4137C13.6602 24.1713 13.5127 24.0758 13.2473 24.0684C11.397 24.0244 9.54663 23.973 7.69628 23.8995C7.36454 23.8848 7.26871 23.9803 7.28345 24.3108C7.37191 26.0517 7.96167 27.5722 9.09694 28.9164C9.94471 29.9228 10.962 30.5618 12.2374 30.8263C13.6528 31.1127 15.0903 31.267 16.5352 31.3037C19.2186 31.3698 21.8946 31.1201 24.5853 31.098C25.8459 31.0833 26.878 30.5618 27.711 29.6069C28.3229 28.9091 28.8316 28.1452 29.355 27.3812C30.0479 26.3676 30.7409 25.2804 31.9278 24.8618C32.7313 24.5753 32.7976 24.1272 32.7313 23.4808C32.7313 23.4514 32.7313 23.4147 32.7313 23.3853C32.7682 22.9593 32.5765 22.8785 32.1858 22.9887C30.6082 23.4074 29.0306 23.804 27.453 24.2227C26.8633 24.377 26.2514 24.5532 25.8386 25.038C24.9466 26.1031 23.7892 26.5218 22.4327 26.5365C21.1353 26.5512 21.1353 26.5732 21.1353 25.2731C21.1353 24.1933 21.1353 24.1786 22.2042 24.2007C22.7792 24.2154 23.2805 24.1346 23.7154 23.7159C24.5042 22.9666 25.2046 22.1513 25.6911 21.1743C26.185 20.1754 26.3472 19.1397 26.045 18.0378C25.7059 16.7891 25.0866 15.702 24.2905 14.703C23.4427 13.6453 22.4254 12.7711 21.3859 11.9044C21.1943 11.7501 21.1279 11.5812 21.1353 11.3461C21.15 10.7218 21.1426 10.0974 21.1353 9.47305C21.1279 8.71646 20.5824 8.14352 19.8968 8.15087C19.1891 8.16556 18.6878 8.70912 18.6731 9.48039C18.6657 9.8697 18.6583 10.2664 18.6731 10.6557C18.6878 10.9421 18.5993 11.0082 18.3266 10.9274C17.6926 10.7438 17.0586 10.5675 16.4173 10.4206C16.1297 10.3545 15.8349 10.2296 15.4736 10.3178ZM8.63251 21.7179C8.86841 21.7326 9.00848 21.7473 9.14117 21.7473C10.7409 21.7473 12.3406 21.7326 13.9403 21.7546C14.5522 21.762 14.9871 21.5269 15.3262 21.0348C15.7833 20.3737 16.0781 19.6612 16.0487 18.8458C15.9749 16.936 15.5547 15.107 14.8102 13.3514C14.5964 12.8519 14.4563 12.8593 14.1688 13.2927C13.0188 15.0409 11.8614 16.7891 10.7114 18.5447C10.0405 19.5804 9.36233 20.6087 8.63251 21.7179Z"
-                    fill="#2481E1"
-                  />
-                  <path
-                    d="M15.4729 10.3178C15.8267 10.2223 16.129 10.3472 16.4165 10.4207C17.0578 10.5676 17.6918 10.7439 18.3258 10.9275C18.5986 11.0083 18.687 10.9422 18.6723 10.6557C18.6502 10.2664 18.6649 9.87709 18.6723 9.48044C18.6797 8.70917 19.181 8.15826 19.896 8.15091C20.5816 8.13622 21.1271 8.70916 21.1345 9.47309C21.1419 10.0975 21.1419 10.7218 21.1345 11.3462C21.1271 11.5886 21.2009 11.7502 21.3852 11.9044C22.4246 12.7638 23.4419 13.638 24.2897 14.703C25.0859 15.702 25.7051 16.7892 26.0442 18.0379C26.3465 19.1397 26.1843 20.1754 25.6904 21.1744C25.2038 22.1587 24.5035 22.9667 23.7147 23.7159C23.2797 24.1346 22.7711 24.208 22.2034 24.2007C21.1345 24.1787 21.1345 24.1934 21.1345 25.2731C21.1345 26.5733 21.1345 26.5512 22.432 26.5366C23.7884 26.5219 24.9458 26.1032 25.8378 25.0381C26.2506 24.5459 26.8551 24.377 27.4522 24.2227C29.0298 23.8041 30.6074 23.4074 32.185 22.9887C32.5757 22.8859 32.7674 22.9593 32.7305 23.3854C32.7305 23.4147 32.7305 23.4515 32.7305 23.4809C32.7969 24.1346 32.7305 24.5753 31.927 24.8618C30.7401 25.2878 30.0472 26.3676 29.3542 27.3813C28.8308 28.1452 28.3221 28.9091 27.7103 29.607C26.8772 30.5545 25.8452 31.0834 24.5846 31.0981C21.9012 31.1275 19.2252 31.3699 16.5344 31.3037C15.0895 31.267 13.6594 31.1128 12.2366 30.8263C10.9539 30.5692 9.94395 29.9228 9.09618 28.9165C7.96091 27.5723 7.37115 26.0518 7.28269 24.3109C7.26795 23.973 7.36378 23.8849 7.69552 23.8995C9.54587 23.9657 11.3962 24.0171 13.2466 24.0685C13.512 24.0758 13.6594 24.164 13.7257 24.4137C13.7405 24.4725 13.7626 24.5312 13.7921 24.59C14.3892 26.0591 14.8758 26.6174 16.5418 26.5145C17.1537 26.4778 17.7655 26.5145 18.3774 26.5366C18.6059 26.5439 18.6797 26.4704 18.6797 26.2501C18.6723 25.6404 18.6649 25.0307 18.6797 24.4211C18.687 24.1346 18.5617 24.0832 18.3111 24.0905C17.6992 24.0979 17.0873 24.0905 16.4755 24.0905C16.3207 24.0905 16.1511 24.1199 16.0479 23.9657C15.9299 23.782 16.0921 23.6792 16.1806 23.5543C18.5249 20.4031 18.6944 17.0389 17.2348 13.491C16.8072 12.4553 16.2838 11.4931 15.6277 10.5896C15.5687 10.5088 15.5319 10.4207 15.4729 10.3178Z"
-                    fill="#FEFEFE"
-                  />
-                </svg>
-              </div>
-              {/* name */}
-              <div>
-                <p className="text-thin-light-gray text-base font-medium">
-                  Add Reminder
-                </p>
-              </div>
+              <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                <Icons name="reminder" />
+              </span>
+               <p className="text-thin-light-gray text-base font-medium">
+                 Add Reminder
+              </p>
+           
               {/* action */}
             </div>
             </Link>
             <Link to="/#" className="cursor-pointer p-2 md:hover:shadow-md transition md:hover:duration-300 rounded-md">       
             <div className="item flex space-x-3 items-center">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg
-                  className="w-[100%]"
-                  // width="40"
-                  // height="41"
-                  viewBox="0 0 40 41"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="20"
-                    cy="20.5745"
-                    rx="20"
-                    ry="19.9392"
-                    fill="#FDD903"
-                  />
-                  <path
-                    d="M30.0432 20.1565C29.8181 20.2625 29.8101 20.5908 30.0328 20.7018C31.565 21.4629 32.3814 22.7261 32.4556 24.4068C32.5245 25.8708 32.4715 27.3349 32.4821 28.7989C32.4821 29.0738 32.3973 29.1636 32.1216 29.1636C30.0169 29.153 27.907 29.153 25.8023 29.1636C25.4524 29.1636 25.4471 28.9945 25.4471 28.7408C25.4524 27.5569 25.4524 26.3782 25.4471 25.1943C25.4418 23.91 24.9169 23.318 23.6287 23.3022C20.8825 23.2705 18.1417 23.2916 15.3955 23.2757C15.0615 23.2757 15.035 23.4237 15.035 23.688C15.0456 25.3476 15.0297 27.0072 15.0456 28.6668C15.0509 29.0526 14.9608 29.1742 14.5526 29.1689C12.5327 29.1478 10.5182 29.1478 8.49834 29.1689C8.09543 29.1742 8 29.0632 8 28.6668C8.0106 23.2123 8.0106 17.7578 8.0053 12.3034C8.0053 11.9757 8.03181 11.8013 8.44532 11.8013C14.1444 11.8171 19.8488 11.8066 25.5478 11.833C27.0216 11.8383 28.4901 11.9968 29.842 12.6469C31.5279 13.4609 32.3125 14.8562 32.2117 16.7748C32.1332 18.3693 31.4419 19.4977 30.0432 20.1565ZM19.6208 18.6035C20.909 18.6035 22.2026 18.6088 23.4909 18.5982C23.7877 18.5982 24.0952 18.5824 24.3868 18.5242C24.7791 18.4449 24.9965 18.186 25.0018 17.7737C25.0071 17.3509 24.8109 17.0549 24.3815 16.9809C24.0899 16.9281 23.7877 16.9016 23.4855 16.9016C21.084 16.8963 18.6771 16.8963 16.2756 16.8963C15.0191 16.8963 15.035 16.8963 15.0297 18.1701C15.0297 18.5295 15.1464 18.6088 15.4804 18.6035C16.864 18.5929 18.2424 18.6035 19.6208 18.6035Z"
-                    fill="#020200"
-                  />
-                </svg>
-              </div>
-              {/* name */}
-              <div>
+              <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                <Icons name="tracking2" />
+              </span>
                 <p className="text-thin-light-gray text-base font-medium">
                   Add Tracking
                 </p>
-              </div>
               {/* action */}
             </div>
             </Link>
           </div>
+
         </div>
       </div>
     </>

src/components/Reminders/AddEditReminder.jsx

@@ -1,14 +1,13 @@
 import React, {useState, useEffect} from 'react'
+import DatePicker from 'react-date-picker';
 import Layout from '../Partials/Layout'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useLocation, useParams } from 'react-router-dom'
 
 // import { toast } from 'react-toastify';
 
 import InputCom from "../Helpers/Inputs/InputCom";
-
-import Calendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css';
-
+// import Calendar from 'react-calendar';
+// import 'react-calendar/dist/Calendar.css';
 import usersService from "../../services/UsersService";
 
 
@@ -16,6 +15,10 @@ export default function AddEditReminder({ className }) {
   let navigate = useNavigate()
   const api = new usersService();
 
+  let {reminder_uuid} = useParams() // uuid of single reminder
+  
+  let location = useLocation()
+ 
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
 
@@ -29,24 +32,20 @@ export default function AddEditReminder({ className }) {
     message: ''
   })
 
-
   const [reminder, setReminder]=useState({
     'member_id': localStorage.getItem('member_id'),
-    description: '',
-    note: '',
-    category: '',
-    mode: '',
-    'start_date': startDate,
-    'end_date': endDate
+    description: location.state?.reminder.description || '',
+    notes: location.state?.reminder.notes || '',
+    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}
     ))
   }
 
-  
   const getUserMode = async () => {
     try {
       const res = await api.getUserModeCategory('remmode');
@@ -67,33 +66,41 @@ export default function AddEditReminder({ className }) {
 
   const handleAddReminder = async () => { // function to add reminder, after all test cases are met
      // toast('Reminder Added')
+     let infoDetail = reminder
+     infoDetail.start_date = startDate
+     infoDetail.end_date = endDate
+     if(location.state){
+      infoDetail.uuid = reminder_uuid
+     }
     setSuccess(true)
     setMessage({status: true, message: ''})
-    let {description, note, category, mode} = reminder
+    let {description, notes, category, mode} = infoDetail
     //CHECKING IF AN EMPTY FIELD WAS PASSED
-    if(!description || !note || !category || !mode){
+    if(!description || !category || !mode){
       setSuccess(false)
       setMessage({status: false, message: 'All fields must be filled'})
       return
     }
 
     try {
-      const res = await api.addReminder(reminder);
+      const res = await api.addReminder(infoDetail);
       if(res && res.status == 200){
         setSuccess(false)
-        setMessage({status: true, message: 'Reminder added successfully'})
+        setMessage({status: true, message: 'Reminder set successfully'})
         setTimeout(()=>{
           navigate('/reminders', {replace: true})
         }, 2000)
         return
       }
       setSuccess(false)
-      setMessage({status: false, message: 'Opps cannot add reminder, try again'})
+      setMessage({status: false, message: `Sorry, couldn't perform action`})
     } catch (error) {
       setSuccess(false)
       setMessage({status: false, message: 'An error occurred'})
     }
   }
+
+  
   
   useEffect(() => {
     getUserMode();
@@ -120,13 +127,14 @@ export default function AddEditReminder({ className }) {
                 placeholder="Describe the Reminder"
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
-                maxLength={10}
+                maxLength={100}
+                borderColor='border border-pink'
               />
             </div>
 
              {/* first name and last name */}
              <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full mb-6 xl:mb-0">
+              <div className="field w-full reminder-select mb-6 xl:mb-0">
                 {/* <InputCom
                   label="Reminder Type"
                   type="text"
@@ -135,19 +143,19 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
-                <select name='category' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
                     {category.map((option, index)=>(
-                      <option key={index} className='' value={option.category}>{option.category}</option>
+                      <option key={index} className='' value={option.code}>{option.category}</option>
                     ))
                     }
                   </>
                   }
                 </select>
               </div>
-              <div className="field w-full">
+              <div className="field w-full reminder-select">
                 {/* <InputCom
                   label="Mode"
                   type="text"
@@ -156,12 +164,12 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
-                <select name='mode' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>
                     {mode.map((option, index)=>(
-                      <option key={index} className='' value={option.mode}>{option.mode}</option>
+                      <option key={index} className='' value={option.code}>{option.mode}</option>
                     ))
                     }
                   </>
@@ -180,18 +188,35 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
-                <Calendar onChange={setStartDate} value={startDate} calendarType="US" />
+                {/* <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" /> */}
+                <DatePicker
+                minDate={new Date()}
+                minDetail="decade"
+                format="y-MM-dd"
+                monthPlaceholder="mm"
+                yearPlaceholder="yyyy"
+                dayPlaceholder="dd"
+                range="range"
+                clearIcon={startDate ? null : 'x'}
+                value={startDate}
+                onChange={(date) => setStartDate(date)}
+                calendarIcon={<CalendarIcon />}
+              />
               </div>
               <div className="field w-full">
-                {/* <InputCom
-                  label="End Date"
-                  type="text"
-                  name="endDate"
-                  placeholder="10-20-2034"
-                  value={''}
-                /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">End Date</label>
-                <Calendar onChange={setEndDate} value={endDate} calendarType="US" />
+                <DatePicker
+                minDate={startDate}
+                minDetail="decade"
+                format="y-MM-dd"
+                monthPlaceholder="mm"
+                yearPlaceholder="yyyy"
+                dayPlaceholder="dd"
+                range="range"
+                value={endDate}
+                onChange={(date) => setEndDate(date)}
+                calendarIcon={<CalendarIcon />}
+              />
               </div>
             </div>
 
@@ -201,11 +226,11 @@ export default function AddEditReminder({ className }) {
               <div className="input-field mt-2">
                 <div className="input-wrapper w-full ">
                   <textarea
-                    name='note'
-                    value={reminder.note}
-                    placeholder="provide a detailed description of your item."
+                    name='notes'
+                    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"
+                    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}
                   />
@@ -220,6 +245,7 @@ export default function AddEditReminder({ className }) {
             <button
               type="button"
               className="text-18 text-light-red tracking-wide "
+              onClick={() => navigate('/reminders')}
             >
               <span className="border-b dark:border-[#5356fb29]  border-light-red">
                 {" "}
@@ -241,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}
               >
-                Upadate
+                {location.state?.reminder ? 'Update' : 'Add Reminder'}
               </button>
             }
           </div>
@@ -253,3 +279,8 @@ export default function AddEditReminder({ className }) {
     </>
   )
 }
+
+const CalendarIcon = () => (<><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-[#374151]">
+<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+</svg>
+</>)

src/components/Reminders/ReminderTable.jsx

@@ -3,6 +3,7 @@ import dataImage1 from "../../assets/images/data-table-user-1.png";
 import usersService from "../../services/UsersService";
 import SelectBox from "../Helpers/SelectBox";
 import { Link } from "react-router-dom";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function ReminderTable({ className }) {
   const api = new usersService();
@@ -98,7 +99,7 @@ export default function ReminderTable({ className }) {
                       <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={dataImage1}
+                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
                             alt="data"
                             className="w-full h-full"
                           />
@@ -110,8 +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()} */}
-                              {reminder.added.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                              {/* {new Date(reminder.added).toLocaleString().replace(/-/g, '/')} */}
+                              {reminder.added.split(' ')[0]}
                               </span>
                           </span>
                         </div>
@@ -121,16 +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()} */}
-                        {reminder.start_date.split('.')[0].replace(/-/g, '/').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()} */}
-                        {reminder.end_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {/* {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')} */}
+                        {reminder.end_date.split(' ')[0]}
                         </span>
                       </div>
                     </td>
@@ -140,12 +141,7 @@ export default function ReminderTable({ className }) {
                       </span>
                     </td>
                     <td className="text-right py-4 px-2">
-                      <button
-                        type="button"
-                        className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                      >
-                        Edit
-                      </button>
+                    <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
                     </td>
                       </tr>
                       ))
@@ -158,8 +154,8 @@ export default function ReminderTable({ className }) {
                     <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={dataImage1}
+                        <img
+                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
                             alt="data"
                             className="w-full h-full"
                           />
@@ -171,8 +167,7 @@ export default function ReminderTable({ className }) {
                           <span className="text-sm text-thin-light-gray">
                           
                             Added <span className="text-purple">
-                              {/* {new Date(reminder.added).toLocaleString()} */}
-                              {reminder.added.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                            {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
                               </span>
                           </span>
                         </div>
@@ -182,16 +177,14 @@ 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()} */}
-                        {reminder.start_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {new Date(reminder.start_date).toLocaleString().replace(/-/g, '/')}
                         </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()} */}
-                        {reminder.end_date.split('.')[0].replace(/-/g, '/').replace(/ /g, ', ')}
+                        {new Date(reminder.end_date).toLocaleString().replace(/-/g, '/')}
                         </span>
                       </div>
                     </td>
@@ -201,12 +194,13 @@ export default function ReminderTable({ className }) {
                       </span>
                     </td>
                     <td className="text-right py-4 px-2">
-                      <button
+                      {/* <button
                         type="button"
                         className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
                       >
                         Edit
-                      </button>
+                      </button> */}
+                      <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
                     </td>
                           </tr>
                         )
@@ -214,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/Resources/BlogTab.jsx

@@ -4,7 +4,9 @@ import DataIteration from "../Helpers/DataIteration";
 import SearchCom from "../Helpers/SearchCom";
 import BlogCardStyle from "../Cards/BlogCardStyle";
 
-export default function BlogTab({ className, products }) {
+export default function BlogTab({ className, products, resources }) {
+ // console.log('In blog data -> ',resources);
+  //debugger;
   return (
     <>
       <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
@@ -42,12 +44,12 @@ export default function BlogTab({ className, products }) {
           <div className="content-section w-full-width">
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
-                datas={products}
+                datas={resources?.blog}
                 startLength={0}
-                endLength={products.length}
+                endLength={resources.blog!=null?resources.blog.length:0}
               >
                 {({ datas }) => (
-                  <BlogCardStyle key={datas.id} datas={datas} />
+                  <BlogCardStyle key={datas.id} datas={datas}  />
                 )}
               </DataIteration>
             </div>

src/components/Resources/VideoYouTube.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import DataIteration from "../Helpers/DataIteration";
+import SearchCom from "../Helpers/SearchCom";
+import BlogCardStyle from "../Cards/BlogCardStyle";
+import YouTubeCardStyle from "../Cards/YouTubeCardStyle";
+
+export default function VideoYouTube({ className, products, resources }) {
+ // console.log('In blog data -> ',resources);
+  //debugger;
+  return (
+    <>
+      <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
+        <div className="main-container w-full">
+          <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+            {/* filter-search */}
+            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+              <SearchCom />
+            </div>
+            {/* filer-dropdown */}
+            <div className="flex-1 flex sm:justify-end">
+              <div className="flex space-x-1 items-center">
+                <span className="text-18 text-thin-light-gray">
+                  Recently Received
+                </span>
+                <span>
+                  <svg
+                    width="20"
+                    height="10"
+                    viewBox="0 0 13 6"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      opacity="0.7"
+                      d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"
+                      fill="#374557"
+                      fillOpacity="0.6"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="content-section w-full-width">
+            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+              <DataIteration
+                datas={resources?.youtube}
+                startLength={0}
+                endLength={resources.youtube!=null?resources.youtube.length:0}
+              >
+                {({ datas }) => (
+                  <YouTubeCardStyle key={datas.id} datas={datas}  />
+                )}
+              </DataIteration>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Resources/index.jsx

@@ -14,6 +14,7 @@ import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";
 
 import BlogTab from "./BlogTab";
+import VideoYouTube from "./VideoYouTube";
 
 import usersService from "../../services/UsersService";
 
@@ -25,51 +26,19 @@ export default function Resources() {
   const ownProducts = products.datas;
   const collectionProducts = collections.data;
 
-  const tabs = [
-    {
-      id: 1,
-      name: "blog",
-      content: "Blogs",
-    },
-    {
-      id: 2,
-      name: "owned",
-      content: "Owned",
-    },
-    {
-      id: 3,
-      name: "created",
-      content: "Created",
-    },
-    {
-      id: 4,
-      name: "hidden",
-      content: "Hidden",
-    },
-    {
-      id: 5,
-      name: "collection",
-      content: "Collection",
-    },
-    {
-      id: 6,
-      name: "activity",
-      content: "Activity",
-    },
-  ];
-
 
   const api = new usersService();
-
+  const [tabs, setUserTab] = useState([]);
   const [isLoading, setIsLoading] = useState(true)
-
   const [userResources, setUserResource] = useState([]);
-
+  const [tab, setTab] = useState(/*tabs[0].name*/ null);
   
   const getUserResources = async () => {
     try {
       const res = await api.getUserResources();
       setUserResource(res.data.resources);
+      setUserTab(res.data.category);
+      setTab(res.data.category[0].name);
       setIsLoading(false)
       
     }catch(error) {
@@ -81,8 +50,8 @@ export default function Resources() {
     getUserResources();
   }, []);
 
+  //debugger;
 
-  const [tab, setTab] = useState(tabs[0].name);
   const tabHandler = (value) => {
     setTab(value);
   };
@@ -127,12 +96,7 @@ export default function Resources() {
                     </ul>
                   </div>
                   <div style={{ transform: "translateY(-22px)" }}>
-                    <Link
-                      to="/upload-product"
-                      className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                    >
-                      Upload Product
-                    </Link>
+           
                   </div>
                 </div>
                 <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
@@ -142,6 +106,8 @@ export default function Resources() {
             <div className="tab-cotainer w-full mb-10">
               {tab === "blog" ? (
                 <BlogTab products={onSaleProducts} resources={userResources} />
+              ) : tab === "youtube" ? (
+                <VideoYouTube products={onSaleProducts} resources={userResources} />
               ) : tab === "owned" ? (
                 <OwnTab products={ownProducts} />
               ) : tab === "created" ? (

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

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import SellAnalysChart from "../Charts/SellAnalysChart";
+import SelectBox from "../Helpers/SelectBox";
+
+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>
+            <li className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+               {item}
+            </li>
+           
+            </div>
+        ))
+       }
+       </ul>
+        </div>
+        <div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Subscriptions/SellProductHistoryTable.jsx

@@ -0,0 +1,718 @@
+import React, { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import SelectBox from "../Helpers/SelectBox";
+
+export default function SellProductHistoryTable({ className }) {
+  const filterCategories = ["All Categories", "Explore", "Featured"];
+  const [selectedCategory, setCategory] = useState(filterCategories[0]);
+  return (
+    <div
+      className={`sell-product-history-table update-table w-full md:p-8 p-4 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+        className || ""
+      }`}
+    >
+      <div className="header w-full sm:flex justify-between items-center mb-5">
+        <div className="flex space-x-2 items-center">
+          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+            Products History
+          </h1>
+        </div>
+        <SelectBox
+          action={setCategory}
+          datas={filterCategories}
+          className="Update-table-dropdown"
+          contentBodyClasses="w-auto min-w-max"
+        />
+      </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 border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+              <td className="py-4">List</td>
+              <td className="py-4">Publish date</td>
+              <td className="py-4">Product Name</td>
+              <td className="py-4 text-center">type</td>
+              <td className="py-4 text-center">Sell</td>
+              <td className="py-4 text-center">Tendered</td>
+              <td className="py-4 text-center">Earnings</td>
+            </tr>
+            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+              <td className="text-start py-4 px-2">
+                <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                  01
+                </span>
+              </td>
+              <td className="text-start py-4 px-2">
+                <span className="text-base text-thin-light-gray whitespace-nowrap">
+                  2 Hours 1 min 30s
+                </span>
+              </td>
+              <td className=" py-4 px-2">
+                <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={dataImage1}
+                      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">
+                      Mullican Computer Joy
+                    </h1>
+                    <span className="text-sm text-thin-light-gray">
+                      Owned by <span className="text-purple">Xoeyam</span>
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                  Art
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  343
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+            </tr>
+            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+              <td className="text-start py-4 px-2">
+                <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                  02
+                </span>
+              </td>
+              <td className="text-start py-4 px-2">
+                <span className="text-base text-thin-light-gray whitespace-nowrap">
+                  2 Hours 1 min 30s
+                </span>
+              </td>
+              <td className=" py-4 px-2">
+                <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={dataImage1}
+                      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">
+                      Mullican Computer Joy
+                    </h1>
+                    <span className="text-sm text-thin-light-gray">
+                      Owned by <span className="text-purple">Xoeyam</span>
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                  Art
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  343
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+            </tr>
+            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+              <td className="text-start py-4 px-2">
+                <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                  03
+                </span>
+              </td>
+              <td className="text-start py-4 px-2">
+                <span className="text-base text-thin-light-gray whitespace-nowrap">
+                  2 Hours 1 min 30s
+                </span>
+              </td>
+              <td className=" py-4 px-2">
+                <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={dataImage1}
+                      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">
+                      Mullican Computer Joy
+                    </h1>
+                    <span className="text-sm text-thin-light-gray">
+                      Owned by <span className="text-purple">Xoeyam</span>
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                  Art
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  343
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+            </tr>
+            <tr className="hover:bg-gray-50 ">
+              <td className="text-start py-4 px-2">
+                <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                  04
+                </span>
+              </td>
+              <td className="text-start py-4 px-2">
+                <span className="text-base text-thin-light-gray whitespace-nowrap">
+                  2 Hours 1 min 30s
+                </span>
+              </td>
+              <td className=" py-4 px-2">
+                <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={dataImage1}
+                      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">
+                      Mullican Computer Joy
+                    </h1>
+                    <span className="text-sm text-thin-light-gray">
+                      Owned by <span className="text-purple">Xoeyam</span>
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                  Art
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  343
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+              <td className="text-center py-4 px-2">
+                <span className="text-base text-dark-gray dark:text-white font-medium">
+                  1.323ETH
+                </span>
+              </td>
+            </tr>
+
+            {selectedCategory === "All Categories" ? (
+              <>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      01
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      02
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      03
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+                <tr className="hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      04
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+              </>
+            ) : selectedCategory === "Explore" ? (
+              <>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      01
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      02
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      03
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+              </>
+            ) : (
+              <>
+                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      03
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+                <tr className="hover:bg-gray-50 ">
+                  <td className="text-start py-4 px-2">
+                    <span className="text-xl tracking-wide font-bold   text-dark-gray dark:text-white">
+                      04
+                    </span>
+                  </td>
+                  <td className="text-start py-4 px-2">
+                    <span className="text-base text-thin-light-gray whitespace-nowrap">
+                      2 Hours 1 min 30s
+                    </span>
+                  </td>
+                  <td className=" py-4 px-2">
+                    <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={dataImage1}
+                          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">
+                          Mullican Computer Joy
+                        </h1>
+                        <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-sm text-white bg-light-green rounded-full  px-2.5 py-1.5">
+                      Art
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      343
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                  <td className="text-center py-4 px-2">
+                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                      1.323ETH
+                    </span>
+                  </td>
+                </tr>
+              </>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/Subscriptions/SideMenuSub.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Icons from "../Helpers/Icons";
+
+
+export default function SideMenuSub() {
+  return (
+    <>
+        <div className="top-platform bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border ">
+          {/* heading */}
+          <div className="heading flex justify-between items-center mb-3.5">
+            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+              Subscription
+            </h3>
+            <div>
+            </div>
+          </div>
+
+          <div className="platform-list flex flex-col gap-4">
+          
+            <div className="item flex space-x-3 items-center"> 
+               <p className="text-thin-light-gray text-base font-medium">
+                 Show Sub level
+              </p>
+              {/* action */}
+            </div>
+           
+            <Link to="/subscription" className="cursor-pointer p-2 md:hover:shadow-md transition md:hover:duration-300 rounded-md">       
+            <div className="item flex space-x-3 items-center">
+              <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                <Icons name="tracking2" />
+              </span>
+                <p className="text-thin-light-gray text-base font-medium">
+                  Upgrade
+                </p>
+              {/* action */}
+            </div>
+            </Link>
+          </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

@@ -0,0 +1,90 @@
+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";
+import SellMonthStatics from "../Charts/SellMonthStatics";
+import SellHistoryWidget from "../Home/SellHistoryWidget";
+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>
+            </div>
+
+          
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}

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

@@ -0,0 +1,161 @@
+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">
+      <div className="w-full bg-white dark:bg-dark-white   rounded-2xl p-7">
+        <div className="flex flex-col justify-between h-full">
+          <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
+              </h1>
+            </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

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import background from "../../../assets/images/shape/balance-bg.svg";
+import InputCom from "../../../components/Helpers/Inputs/InputCom";
+
+export default function UserWeightWidget() {
+  const [eth] = useState(90);
+  const [btc] = useState(85);
+  const [ltc] = useState(20);
+  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 bg-[#485199] flex justify-center items-center">
+          <div>
+            <p className="text-26 font-bold text-white tracking-wide text-center">
+              04
+            </p>
+            <p className="text-lg text-white tracking-wide text-center">
+              Wallets
+            </p>
+          </div>
+        </div>
+        <div>
+          <p className="text-26 font-bold tracking-wide text-white text-right">
+            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="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/index.jsx

@@ -0,0 +1,81 @@
+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() {
+  const api = new usersService();
+  let { trackpage } = useParams();
+  const [selectedCategory, setSelTrackCat] = useState([]);
+
+  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>
+        <div className="my-wallet-wrapper w-full mb-10">
+          <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">
+                <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">
+                      {selectedCategory[0]?.data?.title}
+                    </h1>
+                  </div>
+                  <div className="content-area">
+                    <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>
+            </div>
+            <UserRecentTracking />
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}

src/components/Tracking/TrackCategory.jsx

@@ -0,0 +1,103 @@
+import React, { useRef } from "react";
+import TrackItemCard from "../Cards/TrackItemCard";
+import Icons from "../Helpers/Icons";
+import SliderCom from "../Helpers/SliderCom";
+
+export default function TrackCategory({ className, trackcategory }) {
+  const settings = {
+    arrows: false,
+    slidesToShow: 4,
+    slidesToScroll: 4,
+    infinite: true,
+    responsive: [
+      {
+        breakpoint: 1025,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+        },
+      },
+      {
+        breakpoint: 769,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+        },
+      },
+      {
+        breakpoint: 619,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+  const trendingSlider = useRef(null);
+  const prevHandler = () => {
+    trendingSlider.current.slickPrev();
+  };
+  const nextHandler = () => {
+    trendingSlider.current.slickNext();
+  };
+  return (
+    <div className={`trending-section w-full px-2 sm:px-0 ${className || ""}`}>
+      {/* heading */}
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Select Tracking</h1>
+        </div>
+        <div className="slider-btns flex space-x-4">
+          <button onClick={nextHandler} type="button">
+            <div className="trending-slider-left-btn relative text-white w-10 h-10 flex justify-center items-center rounded-full overflow-hidden">
+              <svg
+                width="11"
+                height="19"
+                viewBox="0 0 11 19"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"
+                  stroke="url(#paint0_linear_220_23410)"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <defs>
+                  <linearGradient
+                    id="paint0_linear_220_23410"
+                    x1="9.09766"
+                    y1="1.1499"
+                    x2="-4.2474"
+                    y2="7.96749"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stopColor="#F539F8" />
+                    <stop offset="0.416763" stopColor="#C342F9" />
+                    <stop offset="1" stopColor="#5356FB" />
+                  </linearGradient>
+                </defs>
+              </svg>
+            </div>
+          </button>
+          <button onClick={prevHandler} type="button">
+            <div className="trending-slider-right-btn  primary-gradient  text-white w-10 h-10 relative flex justify-center items-center rounded-full ">
+              <Icons name="arrows" />
+            </div>
+          </button>
+        </div>
+      </div>
+      {/* trending products */}
+      <div className="trending-products relative w-full">
+        <SliderCom selector={trendingSlider} settings={settings}>
+          {trackcategory &&
+            trackcategory.length > 0 &&
+            trackcategory.map((item) => (
+              <TrackItemCard key={item.id} datas={item} />
+            ))}
+        </SliderCom>
+      </div>
+    </div>
+  );
+}

src/components/Tracking/index.jsx

@@ -1,17 +1,50 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import HistoryAnalyticsCard from "../Cards/HistoryAnalyticsCard";
 import SellHistoryMarketVisitorAnalytic from "../Home/SellHistoryMarketVisitorAnalytic";
 import Layout from "../Partials/Layout";
 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() {
+
+export default function Tracking(props) {
+  console.log("IN TRACKING COMPO", props);
+  const trending = datas.datas;
+
+  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">
-            <TrackingTable />
+            <TrackCategory trackcategory={props.trackCategory} className="mb-10" />
+            <TrackingTable userTrackingHx={userTrackingHx}/>
           </div>
         </div>
       </Layout>

src/index.css

@@ -23,6 +23,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 * {
   min-height: 0;
   min-width: 0;
@@ -657,7 +658,7 @@ TODO: Responsive ===========================
   .children-element {
     left: 0;
     top: 0;
-    webkit-transform: none;
+    -webkit-transform: none;
     transform: none;
   }
 }
@@ -668,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 {
@@ -676,6 +678,7 @@ TODO: Responsive ===========================
   .notification-page .content-item .notifications .icon {
     @apply mb-2;
   }
+
 }
 
 /* Calendar */
@@ -683,13 +686,31 @@ TODO: Responsive ===========================
   width: 100%;
   min-height: 23.2rem;
   border-radius: 7px !important;
+  @apply border border-pink !important;
 }
 
+.dark .react-calendar{
+  background: #11131F;
+  color: #7B818D;
+  border: 1px solid #25284F;  
+}
+.dark .react-calendar__navigation button:enabled:hover, 
+.dark .react-calendar__navigation button:enabled:focus,
+.dark .react-calendar__tile:disabled,
+.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
+
 .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; */
+  @apply bg-pink;
+}
+.dark .react-calendar__tile--active{color: #fff;}
+
 .react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus{
   @apply rounded-full transition duration-500
@@ -703,12 +724,86 @@ 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;}
+
+.reminder-select select{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  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;
+  @apply border border-pink;
+}
+
+.dark .reminder-select select {
+  border: 0.5px solid #25284F; 
+}
+
+.reminder-select select::-ms-expand {
+  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
+}
+
+.reminder-select select option{
+  color: inherit;
+}
+
+/* Target Internet Explorer 9 to undo the custom arrow */
+@media screen and (min-width:0\0) {
+  .reminder-select select {
+      background: none\9;
+      padding: 5px\9;
+  }
+}
+
+/* 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;}
+
+.dark .react-date-picker__wrapper{
+  background: #11131F;
+  color: #7B818D;
+}
+
+.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;
+}
+
+.react-date-picker__calendar .react-calendar__tile{
+  height: 40px !important;
+}
+
+.react-date-picker__inputGroup__input,
+.react-date-picker__inputGroup__divider, 
+.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,16 @@ class usersService {
         return this.postAuxEnd("/editreminder", reqData);
     }
 
+    //SIGNUP AUTH
+    signupUser(reqData){
+        return this.postAuxEnd("/account", reqData);
+    }
+
+    //SIGNUP OTP VERIFICATION AUTH
+    signupOTPVerify(reqData){
+        return this.postAuxEnd("/signup-code", reqData);
+    }
+
     getUserReminders(){
         var reqData = {
             member_id: localStorage.getItem("member_id")
@@ -28,6 +43,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){
@@ -43,6 +65,17 @@ 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")
+        };
+        return this.getAuxEnd("/trackcategory", reqData);
+      }
     //----------------------------------------  -----
     //----------------------------------------  -----
     // Unified call below
@@ -105,7 +138,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/SubscriptionPage.jsx

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

src/views/TrackActionPage.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import TrackAction from "../components/Tracking/TrackAction";
+
+export default function TrackActionPage() {
+  return (
+    <>
+      <TrackAction />
+    </>
+  );
+}

src/views/TrackingPage.jsx

@@ -1,10 +1,32 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Tracking from "../components/Tracking";
-
+import usersService
+ from "../services/UsersService";
 export default function TrackingPage() {
+    const userApi = new usersService();
+    const [trackCategory, setTrackCategory] = useState([]);
+//debugger;
+    const getTrackCategory = async () => {
+        try {
+          const res = await userApi.getTrackCategory(); 
+          if(res.status == 200){
+            setTrackCategory(res.data);
+            return
+          }
+        }catch(error) {
+            console.log("error ~");
+        }
+      };
+      
+      useEffect(() => {
+        getTrackCategory();
+      }, []);
+
     return (
         <>
-            <Tracking />
+            <Tracking 
+              trackCategory={trackCategory}
+            />
         </>
     );
 }

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 />;
+}