fixed edit reminder style issue

Merge branch 'reminder-select-btns-value' of MyFit/users-myfit into master
Merge branch 'select-boxes-with-round-edges' of MyFit/users-myfit into master
2023-02-09 17:11:49 +01:00 · 2023-02-09 01:50:46 +00:00 · 2023-02-09 01:50:36 +00:00 · 2023-02-09 01:50:30 +00:00 · 2023-02-09 01:46:36 +00:00 · 2023-02-08 20:37:45 -05:00
59 changed files with 1438 additions and 1829 deletions
@@ -9,5 +9,9 @@ REACT_APP_APPSITE=" https://myfitapp.mermsemr.com"

 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 = 5
+
+REACT_APP_TRACKING="Tracking"
+REACT_APP_RESOURCES="Resources"
@@ -5,6 +5,9 @@
 /.pnp
 .pnp.js

+/.idea
+/.vscode
+
 # testing
 /coverage

@@ -3348,6 +3348,11 @@
        "@xtuc/long": "4.2.2"
      }
    },
+    "@wojtekmaj/date-utils": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.1.2.tgz",
+      "integrity": "sha512-06PQad/6pyYDjInBW2ih4Oy30EAg0mtXTCz+b/fGwzN2JB2X2Zsa4QtHl4I8M+IaCKN8bwj61OW3XAWxh+D9hA=="
+    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -6490,6 +6495,14 @@
        "get-intrinsic": "^1.1.1"
      }
    },
+    "get-user-locale": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.5.1.tgz",
+      "integrity": "sha512-WiNpoFRcHn1qxP9VabQljzGwkAQDrcpqUtaP0rNBEkFxJdh4f3tik6MfZsMYZc+UgQJdGCxWEjL9wnCUlRQXag==",
+      "requires": {
+        "lodash.memoize": "^4.1.1"
+      }
+    },
    "glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -11049,6 +11062,17 @@
        }
      }
    },
+    "react-calendar": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-4.0.0.tgz",
+      "integrity": "sha512-y9Q5Oo3Mq869KExbOCP3aJ3hEnRZKZ0TqUa9QU1wJGgDZFrW1qTaWp5v52oZpmxTTrpAMTUcUGaC0QJcO1f8Nw==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.2",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.2.0",
+        "prop-types": "^15.6.0"
+      }
+    },
    "react-chartjs-2": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
@@ -14,6 +14,7 @@
    "cors": "^2.8.5",
    "faker": "^6.6.6",
    "react": "^18.0.0",
+    "react-calendar": "^4.0.0",
    "react-chartjs-2": "^4.1.0",
    "react-countup": "^6.2.0",
    "react-dom": "^18.0.0",
@@ -24,6 +24,7 @@ import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";

 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";
@@ -57,11 +58,16 @@ export default function Routers() {
          <Route exact path="/my-wallet" element={<MyWalletPage />} />
          <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="/t-weight" element={<TrackingPage />} />
+
          <Route
            exact
            path="/my-collection/collection-item"
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
+// import { toast } from "react-toastify";
 import activeAidsBanner from "../../assets/images/active-aids-banner.jpg";
 import HeroUser from "../../assets/images/hero-user.png";
 import CountDown from "../Helpers/CountDown";
@@ -10,10 +10,8 @@ export default function OverviewSection({ className }) {
  const favoriteHandler = () => {
    if (!addFavorite) {
      setValue(true);
-      toast.success("Added to Favorite List");
    } else {
      setValue(false);
-      toast.warn("Remove to Favorite List");
    }
  };
  return (
@@ -1,10 +1,40 @@
-import React from "react";
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+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";

 export default function ForgotPassword() {
+
+  const navigate = useNavigate();
+  const [validation, setValidation] = useState("")
+  const [buttonDisabled, setButtonDisabled] = useState(true)
+
+  // 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)
+    }
+  }
+
+  useEffect(() => {
+    validationChecker(email)
+  }, [email])
+
  return (
    <>
      <AuthLayout
@@ -28,19 +58,24 @@ export default function ForgotPassword() {
                  name="email"
                  type="email"
                  iconName="message"
+                  inputHandler={handleEmail}
+                  value={email}
                />
+                {validation && <p className="my-5 font-bold  text-red-500">{validation}</p>}
              </div>
+
              <div className="signin-area mb-3.5">
-                <a
-                  href="/verify-you"
+
+                <button
                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  disabled={buttonDisabled}
+                  onClick={() => navigate("/verify-you")}
                >
                  Send Code
-                </a>
-
+                </button>

                <Link to="/"
-                  className=" my-40 font-bold flex justify-center text-red-500 items-center"
+                  className="my-40 font-bold flex justify-center text-red-500 items-center"
                >
                  Back to Home
                </Link>
@@ -45,7 +45,10 @@ export default function Login() {
      // if (email === "support@mermsemr.com") {
      if (loginResult.data.status > 0 && loginResult.data.session_token !='') { // just for a start
        localStorage.setItem("email", `${email}`);
+        localStorage.setItem("member_id", loginResult.data.member_id);
+        localStorage.setItem("member_uuid", loginResult.data.member_uuid);
        localStorage.setItem("session_token", `${loginResult.data.session_token}`);
+        localStorage.setItem("status", loginResult.data.status);
        localStorage.setItem("profile", `${JSON.stringify(loginResult.data.profile)}`);
        setLoginLoading(true);
         // userApi.getUserReminders(); //testing
@@ -0,0 +1,212 @@
+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 BlogCardStyle({
+  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 className="owned w-[46px] h-[46px] rounded-full overflow-hidden">
+              <img
+                src={localImgLoad(`images/${datas.owner_img}`)}
+                alt=""
+                className="w-full h-full"
+              />
+            </div>
+            <div>
+              <p className="text-thin-light-gray text-sm leading-3">Owned by</p>
+              <p className="text-base   text-dark-gray dark:text-white">
+                {datas.owner}
+              </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] p-6  rounded-xl overflow-hidden"
+            style={{
+              background: `url(${localImgLoad(
+                `images/${datas.thumbnil}`
+              )}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <div className="product-two-options flex justify-between mb-5 relative">
+              <div className="status">
+                {datas.isActive && (
+                  <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
+                    Active
+                  </span>
+                )}
+              </div>
+              <div className=" review flex space-x-2">
+                <button
+                  onClick={favoriteHandler}
+                  type="button"
+                  className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${
+                    addFavorite ? "text-red-500" : "text-thin-light-gray"
+                  }`}
+                >
+                  <Icons name="love" />
+                </button>
+                <button
+                  onClick={() => setOption(!options)}
+                  type="button"
+                  className="w-7 h-7 bg-white   rounded-full flex justify-center items-center text-thin-light-gray"
+                >
+                  <Icons name="dots" />
+                </button>
+                {options && (
+                  <div
+                    onClick={() => setOption(!options)}
+                    className="w-full h-screen fixed top-0 left-0 z-10"
+                  ></div>
+                )}
+                <div
+                  style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}
+                  className={`drop-down-content w-[80px] bg-white dark:bg-dark-white   rounded-[4px] p-2.5 absolute right-0 top-[100%] z-20 ${
+                    options ? "active" : ""
+                  }`}
+                >
+                  <ul className="flex flex-col space-y-3">
+                    <li
+                      onClick={() => setOption(!options)}
+                      className="text-thin-light-gray tracking-wide text-xs cursor-pointer"
+                    >
+                      <div className="flex space-x-2.5 items-center">
+                        <span>
+                          <svg
+                            width="13"
+                            height="12"
+                            viewBox="0 0 13 12"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M0.110352 11.9873C0.154533 10.848 0.104327 9.69692 0.260972 8.57138C0.639531 5.85371 2.91942 3.60923 5.76865 3.03157C6.15022 2.95404 6.53983 2.91055 6.95102 2.84768C6.95102 1.93155 6.95102 1.00502 6.95102 0.000488281C8.99544 1.56756 10.9836 3.09255 12.9999 4.63835C10.9876 6.18745 8.99895 7.71764 6.96106 9.28613C6.96106 8.30145 6.96106 7.37729 6.96106 6.3789C6.39875 6.48337 5.86505 6.53868 5.36147 6.68381C3.3045 7.2766 1.81738 8.49243 0.95282 10.3611C0.700281 10.9066 0.452259 11.454 0.20223 12.001"
+                              fill="#374557"
+                              fillOpacity="0.6"
+                            />
+                          </svg>
+                        </span>
+                        <span className="text-sm tracking-wide text-[#374557]">
+                          Share
+                        </span>
+                      </div>
+                    </li>
+                    <li
+                      onClick={() => setOption(!options)}
+                      className="text-thin-light-gray tracking-wide text-xs cursor-pointer"
+                    >
+                      <div className="flex space-x-2.5 items-center">
+                        <span>
+                          <svg
+                            width="11"
+                            height="11"
+                            viewBox="0 0 11 11"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M5.47576 9.99806C4.18586 9.99806 2.89403 10.0078 1.60413 9.99418C0.665318 9.98448 -0.0659459 9.19853 0.00388304 8.26121C0.02328 7.9934 0.116385 7.70813 0.252164 7.47332C1.50908 5.27072 2.7757 3.07394 4.05008 0.881042C4.73286 -0.29109 6.26327 -0.294972 6.94411 0.875221C8.2243 3.072 9.4948 5.27654 10.7575 7.48496C11.4287 8.65904 10.6392 9.99418 9.28338 9.99806C8.01482 10.0019 6.74626 9.99806 5.47576 9.99806ZM6.09452 3.81526C6.0984 3.81526 6.10422 3.81526 6.1081 3.81526C6.1081 3.75122 6.1081 3.68717 6.1081 3.62119C6.10616 3.22143 5.84818 2.94004 5.48934 2.94198C5.13631 2.94392 4.84924 3.26218 4.86863 3.65224C4.91713 4.56821 4.97338 5.48225 5.03157 6.39822C5.05097 6.68737 5.23718 6.85814 5.49903 6.8562C5.75701 6.85426 5.94516 6.67184 5.96068 6.38851C6.00917 5.53076 6.04991 4.67301 6.09452 3.81526ZM4.88997 7.88279C4.88221 8.22628 5.14795 8.50767 5.48546 8.51349C5.80551 8.51931 6.08288 8.25927 6.09646 7.94295C6.11004 7.58393 5.84624 7.29284 5.50291 7.28896C5.17705 7.28508 4.89967 7.55482 4.88997 7.88279Z"
+                              fill="#374557"
+                              fillOpacity="0.6"
+                            />
+                          </svg>
+                        </span>
+                        <span className="text-sm tracking-wide text-[#374557]">
+                          Report
+                        </span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </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>
+        <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>
+  );
+}
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
+// import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
@@ -11,10 +11,8 @@ export default function ProductCardStyleOne({ datas, hidden = false }) {
  const favoriteHandler = () => {
    if (!addFavorite) {
      setValue(true);
-      toast.success("Added to Favorite List");
    } else {
      setValue(false);
-      toast.warn("Remove to Favorite List");
    }
  };
  return (
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
+// import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
 import Icons from "../Helpers/Icons";

@@ -14,10 +14,8 @@ export default function ProductCardStyleTwo({
  const favoriteHandler = () => {
    if (!addFavorite) {
      setValue(true);
-      toast.success("Added to Favorite List");
    } else {
      setValue(false);
-      toast.warn("Remove to Favorite List");
    }
  };
  return (
@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+// import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import CountDown from "../Helpers/CountDown";
+import Icons from "../Helpers/Icons";
+
+export default function TrackItemCard({ datas, hidden = false }) {
+  const [addFavorite, setValue] = useState(false);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+    } else {
+      setValue(false);
+    }
+  };
+  return (
+    <div className="card-style-one flex flex-col justify-between w-full h-[200px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+      <div className="content">
+        {/* thumbnail */}
+        <div className="w-full h-40">
+          {/* thumbnail image */}
+          <div
+            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+            style={{
+              background: `url(${localImgLoad(
+                `images/${datas.thumbnil}`
+              )}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <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-ful -mt-6 mb-2">
+
+          <p className="text-sm text-thin-light-gray dark:text-white">
+            <Link
+            to={`/${datas.widget}`}
+            className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
+            >
+            {datas.title}
+            </Link>
+          </p>
+        </div>
+
+        </div>
+     
+    </div>
+  );
+}
@@ -1,4 +1,12 @@
 import React from "react";
+import Calendar from "../../assets/images/icons/myFit_calendar.png";
+import History from "../../assets/images/icons/myFit_history.png";
+import Profile from "../../assets/images/icons/myFit_profile.png";
+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 (
@@ -468,7 +476,15 @@ export default function Icons({ name }) {
        >
          <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
        </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]" />)
+        : name === "History" ? (<img src={History} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "calendar" ? (<img src={Calendar} alt="image" className="w-[24px] h-[24px]" />)
+        : (
        ""
      )}
    </>
@@ -9,6 +9,7 @@ export default function InputCom({
  iconName,
  inputHandler,
  value,
+  maxLength
 }) {
  return (
    <div className="input-com">
@@ -28,6 +29,8 @@ export default function InputCom({
          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"
          type={type}
          id={name}
+          name={name}
+          maxLength={maxLength}
        />
        {iconName && (
          <div className="absolute right-6 bottom-[19px] z-10">
@@ -37,4 +40,4 @@ export default function InputCom({
      </div>
    </div>
  );
-}
+}
@@ -2,15 +2,15 @@ import React, { useState } from "react";
 import useToggle from "../../../hooks/useToggle";

 function SelectBox({ datas = [], className, action, contentBodyClasses }) {
-  const [item, setItem] = useState(datas[0]);
+  const [item, setItem] = useState('All category');
  // custom hook
  const [toggle, setToggle] = useToggle(false);
-  const handler = (e, value) => {
+  const handler = (e, code, category) => {
    e.preventDefault();
    if (action) {
-      action(value);
+      action(code);
    }
-    setItem(value);
+    setItem(category);
    setToggle.set(false);
  };
  return (
@@ -54,13 +54,13 @@ function SelectBox({ datas = [], className, action, contentBodyClasses }) {
            } ${contentBodyClasses || ""}`}
          >
            <ul className="flex flex-col space-y-3">
-              {datas.map((value) => (
+              {datas.map((value, index) => (
                <li
-                  key={value}
-                  onClick={(e) => handler(e, value)}
+                  key={index}
+                  onClick={(e) => handler(e, value.code, value.category)}
                  className="text-thin-light-gray tracking-wide text-sm cursor-pointer"
                >
-                  {value}
+                  {value.category}
                </li>
              ))}
            </ul>
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
+// import { toast } from "react-toastify";
 import heroBg from "../../assets/images/hero-bg.svg";
 import heroUser from "../../assets/images/hero-user.png";
 import slider1 from "../../assets/images/slider-1.jpg";
@@ -21,10 +21,8 @@ export default function Hero({ className }) {
  const favoriteHandler = () => {
    if (!addFavorite) {
      setValue(true);
-      toast.success("Added to Favorite List");
    } else {
      setValue(false);
-      toast.warn("Remove to Favorite List");
    }
  };
  return (
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
+// import { toast } from "react-toastify";
 import useToggle from "../../hooks/useToggle";
 import { drawerToggle } from "../../store/drawer";
 import ModalCom from "../Helpers/ModalCom";
@@ -21,10 +21,14 @@ export default function Layout({ children }) {
  const navigate = useNavigate();
  const logOut = () => {
    localStorage.removeItem("email");
+    localStorage.removeItem('profile');
+    localStorage.removeItem('member_id');
+    localStorage.removeItem('member_uuid');
    localStorage.removeItem('session_token');
-    toast.success("Come Back Soon", {
-      icon: `🙂`,
-    });
+    localStorage.removeItem('status');
+    // toast.success("Come Back Soon", {
+    //   icon: `🙂`,
+    // });

    navigate("/login", { replace: true });
  };
@@ -91,7 +95,7 @@ export default function Layout({ children }) {
      {logoutModal && (
        <ModalCom action={logoutModalHandler} situation={logoutModal}>
          <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white   lg:rounded-2xl">
-            <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
+            <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
              <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                Confirm
              </h1>
@@ -0,0 +1,10 @@
+diff a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx	(rejected hunks)
+@@ -143,7 +143,7 @@
+               </div>
+               <div className="mb-6">
+                 <p className="text-2xl tracking-wide text-center text-dark-gray dark:text-white">
+-                  Are you sure you want to Logout of your myFit account?
+                  Are you sure you want to Logout of your myFit account ?
+                 </p>
+               </div>
+               <div className="flex space-x-2.5">
@@ -111,8 +111,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                    <Icons name="market" />
                  </span>
                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    Tracking
-
+                    {process.env.REACT_APP_TRACKING}
                  </span>
                </NavLink>
              </li>
@@ -138,7 +137,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                    <Icons name="star" />
                  </span>
                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    Resources
+                    {process.env.REACT_APP_RESOURCES}
                  </span>
                </NavLink>
              </li>
@@ -1,9 +1,11 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import topCreator1 from "../../assets/images/top-creator-1.png";
 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";
@@ -177,144 +179,32 @@ export default function RightSideBar() {
            </div>
          </div>

-          <div className="platform-list">
-            <div className="item flex space-x-3 items-center mb-4">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg
-                  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">
-                  OpenSea
-                </p>
-              </div>
+          <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">
+              <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>
-            <div className="item flex space-x-3 items-center mb-4">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg
-                  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>
+            </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">
+              <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">
-                  Rarible
+                  Add Tracking
                </p>
-              </div>
              {/* action */}
            </div>
-            <div className="item flex space-x-3 items-center mb-4">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg
-                  width="40"
-                  height="41"
-                  viewBox="0 0 40 41"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="20"
-                    cy="20.4043"
-                    rx="20"
-                    ry="19.9392"
-                    fill="url(#paint0_linear_249_2794)"
-                  />
-                  <path
-                    d="M16.7403 14.4243C17.8836 14.4243 19.0272 14.4261 20.1705 14.4233C20.5666 14.4226 20.9612 14.4431 21.3489 14.5184C22.272 14.698 23.0864 15.0843 23.742 15.7545C23.8172 15.8312 23.8625 15.8401 23.9512 15.7762C24.8988 15.091 25.9527 14.6419 27.1244 14.484C27.8811 14.3821 28.6353 14.4115 29.3836 14.5947C30.3403 14.829 31.1613 15.277 31.8103 16.0013C32.413 16.674 32.7934 17.4511 32.9361 18.3386C33.054 19.0731 32.9989 19.7955 32.8499 20.5197C32.6718 21.3867 32.5167 22.2578 32.3477 23.1265C32.1933 23.92 32.0337 24.7123 31.8768 25.5054C31.7749 26.0202 31.6807 26.5367 31.5694 27.0493C31.5198 27.2772 31.3745 27.371 31.1365 27.3713C29.9446 27.3727 28.7528 27.3742 27.561 27.3745C27.2971 27.3745 27.1996 27.273 27.2463 27.0252C27.3872 26.2776 27.5365 25.5313 27.6807 24.7844C27.8136 24.095 27.9428 23.4052 28.076 22.7158C28.2148 21.9976 28.356 21.2798 28.4958 20.5616C28.5601 20.2311 28.6272 19.9038 28.5196 19.5662C28.3527 19.0422 27.8877 18.7075 27.3171 18.667C26.2023 18.5882 25.2894 19.4682 25.1459 20.415C25.0269 21.2017 24.844 21.9788 24.6918 22.7609C24.5703 23.386 24.4546 24.0126 24.3319 24.6378C24.1727 25.4483 24.0125 26.2587 23.8446 27.0674C23.8026 27.2694 23.65 27.3749 23.4365 27.3752C22.2322 27.377 21.028 27.3774 19.8237 27.3763C19.5956 27.3759 19.4854 27.2393 19.5292 27.0142C19.6609 26.3365 19.7956 25.6591 19.9278 24.9814C20.0869 24.1649 20.2446 23.3481 20.4031 22.5312C20.5549 21.7495 20.7017 20.9671 20.8604 20.1868C21.013 19.4359 20.4038 18.7124 19.6179 18.6688C18.5688 18.6102 17.6843 19.3695 17.4934 20.2162C17.3587 20.8144 17.2583 21.42 17.1415 22.0225C16.9389 23.0648 16.7359 24.1067 16.5322 25.1486C16.4114 25.7681 16.2895 26.3873 16.1683 27.0067C16.1187 27.2602 15.9832 27.3798 15.7197 27.3802C13.4145 27.3816 11.1097 27.3816 8.8045 27.3795C8.47305 27.3791 8.20621 27.1083 8.20548 26.7866C8.20475 26.471 8.48911 26.192 8.82823 26.1902C9.56414 26.186 10.3 26.1916 11.0359 26.1863C11.4995 26.1828 11.7854 25.749 11.5864 25.3581C11.5003 25.1888 11.3524 25.0904 11.1641 25.0503C11.0078 25.0169 10.8491 25.0304 10.6914 25.0301C9.77293 25.029 8.85451 25.0304 7.93645 25.0287C7.58712 25.0279 7.36408 24.893 7.27063 24.636C7.12754 24.242 7.42395 23.8444 7.87878 23.8323C8.18869 23.8241 8.49897 23.8305 8.80925 23.8305C9.95253 23.8302 11.0962 23.8312 12.2395 23.8287C12.5326 23.828 12.7702 23.6388 12.8148 23.3814C12.867 23.0807 12.7301 22.839 12.4494 22.7243C12.3493 22.6835 12.2468 22.6885 12.1442 22.6885C11.2805 22.687 10.4169 22.687 9.55318 22.6863C9.25933 22.686 9.03557 22.5749 8.91766 22.3001C8.76471 21.944 8.9998 21.5713 9.39257 21.5209C10.0653 21.4346 10.7403 21.5028 11.4138 21.4793C11.5171 21.4758 11.6207 21.4804 11.7237 21.4719C12.0642 21.4435 12.2891 21.206 12.2814 20.8886C12.2741 20.5943 12.0037 20.3351 11.6861 20.3277C11.4127 20.3213 11.1385 20.3316 10.8651 20.3231C10.5895 20.3142 10.3292 20.098 10.2884 19.8601C10.2362 19.5556 10.365 19.3056 10.633 19.1849C10.7487 19.1327 10.871 19.1402 10.9914 19.1398C11.7211 19.1367 12.4512 19.1388 13.1809 19.1342C13.5488 19.1317 13.7376 19.0099 13.8482 18.7444C13.9891 18.4064 13.6992 18.0148 13.3919 17.9829C13.1791 17.9609 12.967 17.9687 12.7549 17.9683C11.8124 17.9673 10.8699 17.9729 9.92734 17.9744C9.65539 17.9747 9.39002 17.6992 9.37468 17.4074C9.35899 17.1096 9.62181 16.8153 9.93318 16.7865C10.0117 16.7794 10.0912 16.7826 10.1701 16.7826C11.5689 16.7823 12.9677 16.783 14.3665 16.7819C14.6666 16.7816 14.8754 16.6342 14.9535 16.3754C15.0312 16.1184 14.9316 15.8546 14.702 15.7112C14.5728 15.6303 14.4264 15.625 14.28 15.6246C13.8055 15.6235 13.3313 15.6285 12.8567 15.6221C12.4822 15.6171 12.2252 15.4088 12.1876 15.0964C12.1435 14.7271 12.4253 14.4282 12.8359 14.4254C13.5963 14.4204 14.3563 14.4236 15.1167 14.4236C15.658 14.4236 16.1993 14.4236 16.7407 14.4236C16.7403 14.424 16.7403 14.424 16.7403 14.4243Z"
-                    fill="white"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear_249_2794"
-                      x1="3"
-                      y1="16.4165"
-                      x2="26.9783"
-                      y2="26.4379"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop stopColor="#E100C5" />
-                      <stop offset="1" stopColor="#FF812B" />
-                    </linearGradient>
-                  </defs>
-                </svg>
-              </div>
-              {/* name */}
-              <div>
-                <p className="text-thin-light-gray text-base font-medium">
-                  Myth Market
-                </p>
-              </div>
-            </div>
-            <div className="item flex space-x-3 items-center mb-4">
-              {/* image */}
-              <div className="w-8 h-8 rounded-full">
-                <svg
-                  width="40"
-                  height="41"
-                  viewBox="0 0 40 41"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="20"
-                    cy="20.2341"
-                    rx="20"
-                    ry="19.9392"
-                    fill="#5165FF"
-                  />
-                  <path
-                    d="M26.1647 27.2085C22.5316 27.2448 19.3317 24.2111 19.3359 20.2195C19.3402 16.4128 22.3393 13.2525 26.1704 13.2554C30.0813 13.2583 33.012 16.5264 33.0006 20.2501C32.9892 24.1456 29.8505 27.2492 26.1647 27.2085Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M20.5815 27.1983C20.5217 27.2245 20.4405 27.207 20.3607 27.207C16.0039 27.2085 11.647 27.2085 7.29019 27.2085C7.25742 27.2085 7.22465 27.2099 7.1933 27.2085C7.01094 27.2026 7.00951 27.2026 7.00381 27.0076C7.00239 26.9581 7.00381 26.9086 7.00381 26.8576C7.00381 22.4395 7.00381 18.0214 7.00381 13.6033C7.00381 13.5072 6.99099 13.4082 7.01236 13.334C11.5373 17.9559 16.0566 22.5749 20.5815 27.1983Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-              {/* name */}
-              <div>
-                <p className="text-thin-light-gray text-base font-medium">
-                  KnownOrigin
-                </p>
-              </div>
-            </div>
+            </Link>
          </div>
+
        </div>
      </div>
    </>
@@ -1,12 +1,27 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
-import logo from "../../assets/images/myfit-logo-2.png"; //logo-2.svg";
-import logo3 from "../../assets/images/myfit-logo-2.png"; //logo-3.svg";
+import { default as logo, default as logo3 } from "../../assets/images/myfit-logo-2.png"; //logo-2.svg";
+import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";

 export default function Sidebar({ sidebar, action, logoutModalHandler }) {
  const darkMode = useContext(DarkModeContext);
+  const [userReminders, setUserReminders] = useState([]);
+  const api = new usersService();
+
+  useEffect(() => {
+    getUserReminders();
+  }, []);
+
+  const getUserReminders = async () => {
+    try {
+      const res = await api.getUserReminders();
+      setUserReminders(res.data.reminders);
+    } catch (error) {
+      console.log("Error from User Reminders", error);
+    }
+  };
  useEffect(() => {
    const title = document.querySelectorAll(".menu-setting-items .heading");
    if (sidebar) {
@@ -101,11 +116,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                  } `}
                  to="/"
                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <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="dashboard" />
                  </span>
                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white dark:focus:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
@@ -121,17 +136,17 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <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>
                  <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple dark:hover:text-white dark:focus:text-white text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
                   Reminders
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
-                      0
+                    <span className={`absolute left-24 -top-1 text-sm flex primary-gradient justify-center items-center w-5 h-5 rounded-full text-white ${'dark' ? 'dark-primary-gradient text-purple' : '', userReminders.length == 0 ? 'hidden' : ''}`}>
+                      {userReminders.length > 0 && userReminders.length}
                    </span>
                  </span>
                </NavLink>
@@ -144,15 +159,15 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <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="tracking" />
                  </span>
                  <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
-                   Tracking
+                   {process.env.REACT_APP_TRACKING}
                  </span>
                </NavLink>
              </li>
@@ -164,11 +179,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <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="calendar" />
                  </span>
                  <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
@@ -184,15 +199,15 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="star" />
+                  <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="resources" />
                  </span>
                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
-                    Resources
+                    {process.env.REACT_APP_RESOURCES}
                  </span>
                </NavLink>
              </li>
@@ -205,11 +220,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="history" />
+                  <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="History" />
                  </span>
                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
@@ -234,11 +249,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="people-two" />
+                  <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="profile" />
                  </span>
                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
@@ -254,11 +269,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "justify-start space-x-3.5" : "justify-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 text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="setting" />
+                  <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="settings" />
                  </span>
                  <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                      sidebar ? "active flex-1" : "w-0"
                    }`}
                  >
@@ -0,0 +1,260 @@
+import React, {useState, useEffect} from 'react'
+import Layout from '../Partials/Layout'
+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 usersService from "../../services/UsersService";
+
+
+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());
+
+  const [mode, setMode] = useState([]) // for setting mode option display, content is updated when page loads
+
+  const [category, setCategory] = useState([]) // for setting category option display, content is updated when page loads
+
+  const [success, setSuccess] = useState(false)
+  const [message, setMessage]=useState({
+    status: false,
+    message: ''
+  })
+
+  const [reminder, setReminder]=useState({
+    'member_id': localStorage.getItem('member_id'),
+    description: location.state?.reminder.description || '',
+    note: location.state?.reminder.note || '',
+    category: location.state?.reminder.code || '',
+    mode: location.state?.reminder.code || '',
+    'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
+    'end_date': location.state? new Date(location.state?.reminder.end_date) : endDate
+  })
+  
+  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');
+      setMode(res.data);
+    } catch (error) {
+      console.log("Error getting mode");
+    }
+  };
+
+  const getUserCategory = async () => {
+    try {
+      const res = await api.getUserModeCategory('remcategory');
+      setCategory(res.data);
+    } catch (error) {
+      console.log("Error getting user category");
+    }
+  };
+
+  const handleAddReminder = async () => { // function to add reminder, after all test cases are met
+     // toast('Reminder Added')
+     if(location.state){
+      reminder.uuid = reminder_uuid
+     }
+    setSuccess(true)
+    setMessage({status: true, message: ''})
+    let {description, note, category, mode} = reminder
+    //CHECKING IF AN EMPTY FIELD WAS PASSED
+    if(!description || !note || !category || !mode){
+      setSuccess(false)
+      setMessage({status: false, message: 'All fields must be filled'})
+      return
+    }
+
+    try {
+      const res = await api.addReminder(reminder);
+      if(res && res.status == 200){
+        setSuccess(false)
+        setMessage({status: true, message: 'Reminder set successfully'})
+        setTimeout(()=>{
+          navigate('/reminders', {replace: true})
+        }, 2000)
+        return
+      }
+      setSuccess(false)
+      setMessage({status: false, message: `Sorry, couldn't perform action`})
+    } catch (error) {
+      setSuccess(false)
+      setMessage({status: false, message: 'An error occurred'})
+    }
+  }
+
+  
+  
+  useEffect(() => {
+    getUserMode();
+    getUserCategory()
+  }, []);
+  return (
+    <>
+      <Layout>
+        <div className="content-wrapper-profile-only w-full mb-6">
+        <div className="history-wrapper w-full mb-10">
+            
+        <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+        className || ""
+      }`}
+    >
+		  <div className="fields w-full">
+               {/*description */}
+               <div className="field w-full mb-6">
+              <InputCom
+                label="Description"
+                type="text"
+                name="description"
+                placeholder="Describe the Reminder"
+                value={reminder.description}
+                inputHandler={onReminderInputChange}
+                maxLength={100}
+              />
+            </div>
+
+             {/* first name and last name */}
+             <div className="xl:flex xl:space-x-7 mb-6">
+              <div className="field w-full reminder-select mb-6 xl:mb-0">
+                {/* <InputCom
+                  label="Reminder Type"
+                  type="text"
+                  name="remType"
+                  placeholder="Drop down of Category"
+                  value={''}
+                /> */}
+                <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
+                <select value={reminder.category} name='category' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                  <option className='' value="">Select category</option>
+                  {category.length > 0 &&
+                  <>
+                    {category.map((option, index)=>(
+                      <option key={index} className='' value={option.code}>{option.category}</option>
+                    ))
+                    }
+                  </>
+                  }
+                </select>
+              </div>
+              <div className="field w-full reminder-select">
+                {/* <InputCom
+                  label="Mode"
+                  type="text"
+                  name="remMode"
+                  placeholder="Drop down of Modes"
+                  value={''}
+                /> */}
+                <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
+                <select value={reminder.mode} name='mode' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <option className='' value="">Select mode</option>
+                  {category.length > 0 &&
+                  <>
+                    {mode.map((option, index)=>(
+                      <option key={index} className='' value={option.code}>{option.mode}</option>
+                    ))
+                    }
+                  </>
+                  }
+                </select>
+              </div>
+            </div>
+
+            <div className="xl:flex xl:space-x-7 mb-6">
+              <div className="field w-full mb-6 xl:mb-0">
+                {/* <InputCom
+                  label="Start Date"
+                  type="text"
+                  name="startDate"
+                  placeholder="10-10-2021"
+                  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={reminder.start_date} calendarType="US" />
+              </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={reminder.end_date} calendarType="US" />
+              </div>
+            </div>
+
+            {/* bio */}
+            <div className="field w-full mb-6">
+              <h1 className="field-title">Optional Details </h1>
+              <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."
+                    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"
+                    onChange={onReminderInputChange}
+                    maxLength={250}
+                  />
+                </div>
+              </div>
+            </div>
+              <p className={`text-center ${message.status ? 'text-[rgb(0,128,0)]':'text-[rgb(255,0,0)]'}`}>{message.message}</p>
+          </div>
+          {/* border line */}
+          <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+          <div className="flex space-x-4 mr-9">
+            <button
+              type="button"
+              className="text-18 text-light-red tracking-wide "
+            >
+              <span className="border-b dark:border-[#5356fb29]  border-light-red">
+                {" "}
+                Cancel
+              </span>
+            </button>
+              {
+                success ? 
+                <div role="status">
+                  <svg aria-hidden="true" className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" 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>
+                :
+              <button
+                type="button"
+                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                onClick={handleAddReminder}
+              >
+                {location.state?.reminder ? 'Edit' : 'Add Reminder'}
+              </button>
+            }
+          </div>
+        </div>
+        </div>
+</div>
+        </div>
+      </Layout>
+    </>
+  )
+}
@@ -2,29 +2,39 @@ import React, { useEffect, useState } from "react";
 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();
+
+  const [isLoading, setIsLoading] = useState(true)
+
  const [userReminders, setUserReminders] = useState([]);

-  const api = new usersService();
+  
+  const getUserReminders = async () => {
+    try {
+      const res = await api.getUserReminders();
+      if(res.status == 200){
+        setUserReminders([
+          {reminders: res.data.reminders},
+          {category: [{category: 'All category', code: 'All category'}, ...res.data.reminder_category]}
+        ]);
+        setIsLoading(false)
+        return
+      }
+      setIsLoading(false)
+    }catch(error) {
+      setIsLoading(false)
+    }
+  };
+  
  useEffect(() => {
    getUserReminders();
  }, []);

-  const getUserReminders = async () => {
-    try {
-      const res = await api.getUserReminders();
-     
-      setUserReminders(res.data.reminders);
-      console.log("res", res);
-      
-    } catch (error) {
-      console.log("Error from User Reminders", error);
-    }
-  };
-
-  const filterCategories = ["All Categories", "Doctors Visit", "Medications"];
-  const [selectedCategory, setCategory] = useState(filterCategories[0]);
+  const [selectedCategory, setCategory] = useState('All category')
  return (
    <div
      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
@@ -39,433 +49,167 @@ export default function ReminderTable({ className }) {
        </div>
        <SelectBox
          action={setCategory}
-          datas={filterCategories}
+          datas={userReminders.length > 0 && userReminders[1].category}
          className="Update-table-dropdown"
          contentBodyClasses="w-auto min-w-max"
        />
      </div>
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      {
+        userReminders.length < 1 ?
+        // when no reminders display below code
+        <div  className="lg:flex justify-center">
+          <div style={{ transform: 'translateY(150px)' }}>
+            {
+              isLoading ? 
+              <div role="status">
+                <svg aria-hidden="true" className="w-32 h-32 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" 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>
+              :
+            <Link
+              to="/add-reminder"
+              className="btn-gradient lg:flex hidden w-[300px] h-[50px] rounded-full text-white justify-center items-center"
+            >
+              0 Reminders Start Reminder
+            </Link>
+            }
+          </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 ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
              <td className="py-4">Item</td>
              <td className="py-4 text-center">Start</td>
              <td className="py-4 text-center">End</td>
              <td className="py-4 text-center">Reminder</td>
              <td className="py-4 text-right">.</td>
            </tr>
+          
+                {
+                  userReminders[0].reminders.length > 0 && (
+                    selectedCategory == "All category" ? (
+                      userReminders[0].reminders.map((reminder, index) => (
+                      <tr key={index} 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={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
+                            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">
+                          {reminder.description.substring(0, 30)+ ' ...'}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                          
+                            Added <span className="text-purple">
+                              {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
+                              </span>
+                          </span>
+                        </div>
+                      </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.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().replace(/-/g, '/')}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-right py-4 px-2">
+                      <span className="text-base text-thin-light-gray whitespace-nowrap">
+                       {reminder.reminder}
+                      </span>
+                    </td>
+                    <td className="text-right py-4 px-2">
+                    <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>
+                      ))
+                    )
+                    :
+                    userReminders[0].reminders.map((reminder, index) => {
+                      if(reminder.category == selectedCategory){
+                        return (
+                          <tr key={index} 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={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
+                            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">
+                          {reminder.description.substring(0, 30)+ ' ...'}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                          
+                            Added <span className="text-purple">
+                            {new Date(reminder.added).toLocaleString().replace(/-/g, '/')}
+                              </span>
+                          </span>
+                        </div>
+                      </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.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().replace(/-/g, '/')}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-right py-4 px-2">
+                      <span className="text-base text-thin-light-gray whitespace-nowrap">
+                       {reminder.reminder}
+                      </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>
+                        )
+                      }
+                    })
+                  )
+                }

-            {selectedCategory === "All Categories" ? (
-
-              <>
-               {userReminders.map((reminders, index) => ( 
-
-                <tr key={reminders.id} 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={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">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                        
-                          Added <span className="text-purple">{reminders.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 className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                      {reminders.start_date}
-                      </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">
-                      {reminders.end_date}
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     {reminders.reminder}
-                    </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>
-                  </td>
-                </tr>
-              ))}
-                {/* <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={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">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr>
-                <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={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">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr>
-                <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={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">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr> */}
-              </>
-            
-            ) : selectedCategory === "Doctors Visit" ? (
-              <>
-                <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={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">
-                          Doctors Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr>
-                <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={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">
-                          Hospital Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr>
-              </>
-            ) : (
-              <>
-                <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={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">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr>
-                <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={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">
-                          Pizza Testing Appointament
-                        </h1>
-                        <span className="text-sm text-thin-light-gray">
-                          Added <span className="text-purple">10-10-2025</span>
-                        </span>
-                      </div>
-                    </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">
-                        12-01-25 : 6:30 PM
-                      </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">
-                      12-01-28 : 6:30 PM
-                      </span>
-                    </div>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray whitespace-nowrap">
-                     4
-                    </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>
-                  </td>
-                </tr>
-              </>
-            )}
          </tbody>
        </table>
      </div>
+      }
    </div>
-  );
-}
+  )
+}
@@ -0,0 +1,59 @@
+import React from "react";
+//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
+import DataIteration from "../Helpers/DataIteration";
+import SearchCom from "../Helpers/SearchCom";
+import BlogCardStyle from "../Cards/BlogCardStyle";
+
+export default function BlogTab({ className, products }) {
+  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={products}
+                startLength={0}
+                endLength={products.length}
+              >
+                {({ datas }) => (
+                  <BlogCardStyle key={datas.id} datas={datas} />
+                )}
+              </DataIteration>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import authProfilePic from "../../assets/images/auth-profile-picture.png";
 import profileBanner from "../../assets/images/profile-cover.png";
@@ -13,6 +13,10 @@ import HiddenProductsTab from "./HiddenProductsTab";
 import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";

+import BlogTab from "./BlogTab";
+
+import usersService from "../../services/UsersService";
+
 export default function Resources() {
  const onSaleProducts = marketPlace.data;
  const CreatedSell = marketPlace.data;
@@ -24,8 +28,8 @@ export default function Resources() {
  const tabs = [
    {
      id: 1,
-      name: "onsale",
-      content: "On Sale",
+      name: "blog",
+      content: "Blogs",
    },
    {
      id: 2,
@@ -54,6 +58,30 @@ export default function Resources() {
    },
  ];

+
+  const api = new usersService();
+
+  const [isLoading, setIsLoading] = useState(true)
+
+  const [userResources, setUserResource] = useState([]);
+
+  
+  const getUserResources = async () => {
+    try {
+      const res = await api.getUserResources();
+      setUserResource(res.data.resources);
+      setIsLoading(false)
+      
+    }catch(error) {
+      setIsLoading(false)
+    }
+  };
+  
+  useEffect(() => {
+    getUserResources();
+  }, []);
+
+
  const [tab, setTab] = useState(tabs[0].name);
  const tabHandler = (value) => {
    setTab(value);
@@ -112,8 +140,8 @@ export default function Resources() {
            </div>

            <div className="tab-cotainer w-full mb-10">
-              {tab === "onsale" ? (
-                <OnSaleTab products={onSaleProducts} />
+              {tab === "blog" ? (
+                <BlogTab products={onSaleProducts} resources={userResources} />
              ) : tab === "owned" ? (
                <OwnTab products={ownProducts} />
              ) : tab === "created" ? (
@@ -1,146 +1,115 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Icons from "../../Helpers/Icons";
+import usersService from "../../../services/UsersService";

 export default function LoginActivityTab() {
+  const api = new usersService();
+
+  const [userHistory, setUserHistory] = useState([]) // State for user login history
+
+  //page loading status
+  const [isLoading, setIsloading] = useState({
+    status: true,
+    message: 'loading'
+  })
+
+  
+  const getUserLoginHistory = async () => {
+    try {
+      const res = await api.getUserLoginHistory();
+      console.log(res.status == 200)
+      if(res.status != 200){
+        setIsloading({
+          status: false,
+          message: `Couldn't get user history, try again`
+        })
+        return
+      }
+      if(res.status == 200 && res.data.loginhx.length < 1){
+        setIsloading({
+          status: false,
+          message: `No User History found`
+        })
+        return
+      }
+      setUserHistory(res.data.loginhx);
+      setIsloading({
+        status: false,
+        message: ``
+      })
+    } catch(error) {
+      setIsloading({
+        status: false,
+        message: `Opps! something went wrong`
+      })
+    }
+  };
+  
+  useEffect(() => {
+    getUserLoginHistory();
+  }, []);
+  
  return (
    <div className="login-activity-tab w-full">
      <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">
+        {
+          isLoading.status == true ?
+          <div role="status">
+            <svg aria-hidden="true" className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" 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>
+          :
+          <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 text-center">Channel</td>
              <td className="py-4 text-center">Date</td>
              <td className="py-4 text-center">Location</td>
            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <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
-                  </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
-                  </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
-                </span>
-              </td>
-            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <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
-                  </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
-                  </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
-                </span>
-              </td>
-            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <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
-                  </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
-                  </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
-                </span>
-              </td>
-            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <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
-                  </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
-                  </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
-                </span>
-              </td>
-            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <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
-                  </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
-                  </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
-                </span>
-              </td>
-            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <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">
-                    Mobile
-                  </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
-                  </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
-                </span>
-              </td>
-            </tr>
+            {
+              userHistory.length > 0 ?
+              userHistory.map((data, index)=>(
+                <>
+                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                  <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} */}
+                      </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} */}
+                      </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} */}
+                    </span>
+                  </td>
+                </tr>
+              </>
+              ))
+              :
+              <>
+                <tr>
+                  <td colSpan={3}>{isLoading.message}</td>
+                </tr>             
+              </>
+            }
          </tbody>
        </table>
+        }
      </div>
    </div>
  );
-}
+}
@@ -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>
+  );
+}
@@ -17,7 +17,7 @@ export default function TrackingTable({ className }) {
      <div className="header w-full 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">
-            Tracking
+            Recent Tracking
          </h1>
        </div>
        <SelectBox
@@ -1,16 +1,24 @@
-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";

-export default function Tracking() {
+export default function Tracking(props) {
+  console.log("IN TRACKING COMPO", props);
+ 
+  const trending = datas.datas;
+  console.log("IN TRACKING COMPO TRD", trending);
+  //debugger;
  return (
    <>
      <Layout>
        <div className="history-wrapper w-full mb-10">
          <div className="main-wrapper w-full">
+            <TrackCategory trackcategory={props.trackCategory} className="mb-10" />
            <TrackingTable />
          </div>
        </div>
@@ -47,6 +47,10 @@ html {
  background-size: cover; */
 }

+.dark .dark-primary-gradient {
+  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%);
+}
+
 .primary-home {
  /*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
  background-image: url("./assets/images/left-myft.jpg");
@@ -309,6 +313,9 @@ input[type="number"] {
 .menu-setting-items .nav-item.active span.item-content {
  @apply text-purple;
 }
+.dark .menu-setting-items .nav-item.active span.item-content {
+  @apply text-white
+}
 /* TODO: =================================layout end================================ */
 /* TODO: =================================HomePage ================================ */
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {
@@ -520,7 +527,7 @@ input[type="number"] {
  transition: all 0.5s ease-in-out;
  width: 58px;
  height: 58px;
-  @apply bg-pink;
+  @apply bg-purple;
 }

 /* TODO: =================================login end================================= */
@@ -670,3 +677,63 @@ TODO: Responsive ===========================
    @apply mb-2;
  }
 }
+
+/* Calendar */
+.react-calendar{
+  width: 100%;
+  min-height: 23.2rem;
+  border-radius: 7px !important;
+}
+
+.react-calendar__navigation{
+  margin-top: 2px;
+  margin-inline: 2px;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus{
+  @apply rounded-full transition duration-500
+}
+
+.react-calendar__month-view__days{
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.react-calendar__month-view__weekdays__weekday abbr:where([title]){
+  text-decoration: none !important;
+  cursor: default;
+}
+
+.react-calendar__tile{
+  border: 1px solid #cfd7e3 !important;
+  border-left: 0;
+  text-align: right;
+  height: 4.813rem !important;
+  transition: all 500ms;
+}
+
+.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;
+  box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2); 
+}
+
+.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;
+  }
+}
@@ -1,5 +1,5 @@
 import React, {useEffect} from "react";
-import { Navigate, Outlet, useNavigate } from "react-router-dom";
+import { Navigate, Outlet, useNavigate, useLocation } from "react-router-dom";
 import { toast } from "react-toastify";

 const AuthRoute = ({ redirectPath = "/login", children }) => {
@@ -7,23 +7,43 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
  const profile = localStorage.getItem("profile")

  const navigate = useNavigate();
+  const { pathname } = useLocation();

-  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES
+
+  //FUNCTION TO EXPIRE SESSION AFETR 5 MINUTES AND REDIRECT USER TO LOGIN PAGE
  const expireSession = () => {
    localStorage.removeItem("email");
    localStorage.removeItem('session_token');
    localStorage.removeItem('profile');
-    // navigate("/login", { replace: true });
+    localStorage.removeItem('member_id');
+    localStorage.removeItem('member_uuid');
+    localStorage.removeItem('status');
+    navigate("/login", { replace: true }); // redirects user to login page after session expires
  };

+   //FUNCTION TO REMIND USER OF EXPIRY TIME
+  const expireSessionReminder = () => {
+    toast.success("session is about to expire", {
+      icon: `🙂`,
+    });
+  }
+
+
  useEffect(()=>{
-    setTimeout(()=>{
+    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 4 mins 240000
+      expireSessionReminder()
+    }, 240000) 
+
+    let timeForSessionExpiry = setTimeout(()=>{ //reminds user of session expiry after 4 mins 300000
      expireSession()
-      toast.success("Opps, session has expired", {
-        icon: `🙂`,
-      });
-    }, 300000) //expires user login session after 5 minutes
-  },[])
+    }, 300000) 
+
+    return ()=>{ // clears timeout side effect
+      clearTimeout(sessionExpReminder)
+      clearInterval(timeForSessionExpiry)
+    }
+  },[pathname])
+

  if (!isLogin || !profile || (typeof JSON.parse(profile) == 'object' && JSON.parse(profile).firstname == undefined)) {
    return <Navigate to={redirectPath} replace />;
@@ -6,24 +6,56 @@ class usersService {
    }

    logInUser(reqData) {
-       // debugger;
-        /*
-        clean up the request data here
-         */
        localStorage.setItem("session_token", ``);
        return this.postAuxEnd("/login", reqData);
    }

-    getUserReminders(){
-        return this.getAuxEnd("/reminders", null);
+     //END POINT TO ADD REMINDER
+     addReminder(reqData){
+        return this.postAuxEnd("/editreminder", reqData);
    }
+
+    getUserReminders(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/reminders", reqData);
+    }
+
+    getUserLoginHistory(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/loginhx", reqData);
+      }
+
+       //END POINT TO POPULATE MODE AND CATEGORY ON ADD REMINDER PAGED
+        getUserModeCategory(path){
+            var reqData = {
+                member_id: localStorage.getItem("member_id")
+            };
+            return this.getAuxEnd(`/${path}`, reqData);
+        }
+
+      getUserResources(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/resources", reqData);
+      }
+
+      getTrackCategory(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/trackcategory", reqData);
+      }
    //----------------------------------------  -----
    //----------------------------------------  -----
    // Unified call below
    //----------------------------------------  -----
    //----------------------------------------  -----
    getAuxEnd(uri, reqData) {
-        // debugger;
        const session_token = localStorage.getItem("session_token");
        let axiosConfig = {
            headers: {
@@ -33,11 +65,12 @@ class usersService {
            }
        };
        const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
-        return Axios.get(endPoint,axiosConfig)
+        return Axios.get(endPoint,{
+               params: {
+                reqData
+               }})
            .then((response) => {
-                // console.log(response);
-                // res = response;
-                // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+                 console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
                return response;
            })
            .catch((error) => {
@@ -54,24 +87,21 @@ class usersService {
            });
    }

+
    postAuxEnd(uri, reqData) {
        const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
        const session_token = localStorage.getItem("session_token");
        let axiosConfig = {
            headers: {
                'Accept': 'application/json',
+                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json;charset=UTF-8',
                'Authorization': `Basic ${session_token}`,
            }
        };
-        //Access-Control-Allow-Origin
-        var postData = {
-            email: "test@test.com",
-            password: "password"
-        };
      //  Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
      //  Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
-        return Axios.post(endPoint, reqData,axiosConfig)
+        return Axios.post(endPoint, reqData)
            .then((response) => {
                console.log(response);
                // res = response;
@@ -0,0 +1,10 @@
+import React from "react";
+import AddEditReminder from "../components/Reminders/AddEditReminder";
+
+export default function RemindersAddPage() {
+  return (
+    <>
+      <AddEditReminder />
+    </>
+  );
+}
@@ -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}
+            />
        </>
    );
 }
@@ -5,7 +5,7 @@ module.exports = {
    extend: {
      colors: {
        pink: "#F539F8",
-        purple: "#5356FB",
+        purple: "#1a3544",
        "light-gray": "#E5E5E5",
        "thin-light-gray": "#858D98",
        "dark-gray": "#374557",
Author	SHA1	Message	Date
victorAnumudu	71e37a21b5	fixed edit reminder style issue	2023-02-09 17:11:49 +01:00
tokslaw	2548eb0ee2	Merge branch 'reminder-select-btns-value' of MyFit/users-myfit into master	2023-02-09 01:50:46 +00:00
tokslaw	aefb9198b7	Merge branch 'select-boxes-with-round-edges' of MyFit/users-myfit into master	2023-02-09 01:50:36 +00:00
tokslaw	3cb373593f	Merge branch 'Reminder_update_button' of MyFit/users-myfit into master	2023-02-09 01:50:30 +00:00
tokslaw	2dc6a5d9d3	Merge branch 'task-icons-change' of MyFit/users-myfit into master	2023-02-09 01:46:36 +00:00
jenkins	7e7ca34361	Img edit	2023-02-08 20:37:45 -05:00
jenkins	dd1baed764	Reminder test icons	2023-02-08 20:10:31 -05:00
jenkins	694b4267be	tack Images	2023-02-08 19:44:38 -05:00
jenkins	1722a598ce	weight img	2023-02-08 18:59:05 -05:00
jenkins	aed4e7feaa	Tracking page	2023-02-08 18:22:22 -05:00
Chukwumdiebube	02fb7dbae0	updated reminder state	2023-02-08 20:51:00 +01:00
Chukwumdiebube	b8c12cec6b	changed messages	2023-02-08 19:42:40 +01:00
Chukwumdiebube	f360bb4b8a	Values modified	2023-02-08 19:41:03 +01:00
Chukwumdiebube	0b0b258d49	Added rounded edges on select boxes	2023-02-08 18:51:12 +01:00
ChineseChikki	26ccd78be9	icons changed	2023-02-08 17:41:59 +01:00
Chukwumdiebube	a26f7c3bae	Add reminder button modified	2023-02-08 14:59:43 +01:00
tokslaw	b4dba45fae	Merge branch 'activate_edit_reminder_conflict_fixed' of MyFit/users-myfit into master	2023-02-08 13:18:02 +00:00
victorAnumudu	368a8f2b53	Fixed activate edit reminder conflict	2023-02-08 13:21:41 +01:00
jenkins	099ace7f73	Track item table	2023-02-07 21:09:20 -05:00
jenkins	449a7d40ee	Track Category	2023-02-07 21:06:23 -05:00
jenkins	046e1f5c37	Styling reminders	2023-02-07 20:32:04 -05:00
jenkins	cee6a10dce	Notes spelling error	2023-02-07 19:55:26 -05:00
tokslaw	05b2d2e3c9	Merge branch 'expired_session_redirect' of MyFit/users-myfit into master	2023-02-06 23:48:42 +00:00
tokslaw	f49f246637	Merge branch 'theme-color-login' of MyFit/users-myfit into master	2023-02-06 23:27:46 +00:00
tokslaw	b51ee6170e	Merge branch 'change_icons_dashboard' of MyFit/users-myfit into master	2023-02-06 23:27:22 +00:00
Chukwumdiebube	82ebf969d0	theme color changed	2023-02-07 00:15:08 +01:00
Chukwumdiebube	9d98e156cb	merged the two actions in bubble	2023-02-07 00:03:15 +01:00
Chukwumdiebube	a724e35d99	reminder bubble	2023-02-06 23:43:45 +01:00
Chukwumdiebube	733478170f	added style for reminder bubble	2023-02-06 23:32:36 +01:00
Chukwumdiebube	bc74d0a854	arranged styles	2023-02-06 22:42:29 +01:00
Chukwumdiebube	4237947003	Images added	2023-02-06 21:58:45 +01:00
victorAnumudu	a28b362034	notifies that session is abou to expire and routes to login when session expires	2023-02-06 21:51:10 +01:00
tokslaw	86d379ac38	Merge branch 'format_date_safari_bug' of MyFit/users-myfit into master	2023-02-06 19:04:42 +00:00
victorAnumudu	61d2ddd4a2	changed date method	2023-02-06 17:41:08 +01:00
tokslaw	35ccdff4a6	Merge branch 'add_reminder_conflict_fixed_victor' of MyFit/users-myfit into master	2023-02-06 13:15:56 +00:00
victorAnumudu	272ea60abc	add reminder conflict fixed	2023-02-06 14:11:26 +01:00
Olu Amey	ac8ecba36d	Updated gitignore	2023-02-06 08:06:24 -05:00
victorAnumudu	ad84db5eb2	add reminder conflict fixed	2023-02-06 14:04:47 +01:00
tokslaw	19491f6aad	Merge branch 'Reminder_Link' of MyFit/users-myfit into master	2023-02-06 12:44:09 +00:00
tokslaw	2ac5db9e05	Merge branch 'reminder_category_dropdown_victor' of MyFit/users-myfit into master	2023-02-06 12:25:21 +00:00
jenkins	8645221684	Blog card	2023-02-05 18:58:40 -05:00
jenkins	2540b75837	Blog data resources	2023-02-05 18:30:36 -05:00
jenkins	e15fd84676	Resoues point started	2023-02-05 17:18:40 -05:00
victorAnumudu	6f8adf5aeb	implemented category drop down list and filtering	2023-02-05 15:08:55 +01:00
tokslaw	6f29a1f7e0	Merge branch 'no_reminder_item_victor' of MyFit/users-myfit into master	2023-02-05 03:41:12 +00:00
tokslaw	9894925377	Merge branch 'user_login_history' of MyFit/users-myfit into master	2023-02-05 03:40:41 +00:00
victorAnumudu	fb1e328bb6	implemented the display for no user reminder item	2023-02-05 01:16:32 +01:00
victorAnumudu	d7e1fa7ccb	implemented user login history	2023-02-05 00:15:40 +01:00
jenkins	76dbfde6be	send member_id	2023-02-04 09:36:29 -05:00
tokslaw	1092c6d5a3	Merge branch 'env4Tracking&Resources' of MyFit/users-myfit into master	2023-02-04 13:27:23 +00:00
tokslaw	fdd3dbe99a	Merge branch 'format-calender' of MyFit/users-myfit into master	2023-02-04 13:23:51 +00:00
tokslaw	f319003e40	Merge branch 'task13-reminder-name' of MyFit/users-myfit into master	2023-02-04 13:23:42 +00:00
Chukwumdiebube	e6ba42afcd	env variables created	2023-02-04 06:28:15 +01:00
Chukwumdiebube	0170f03e10	calender size formatted	2023-02-04 06:14:07 +01:00
Chukwumdiebube	d984773e08	reminder link activated	2023-02-04 00:28:57 +01:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	ebcfa8da27	Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/users-myfit into task13-reminder-name	2023-02-03 18:16:52 -05:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	0b659816be	fixed name length and no reminder scenario	2023-02-03 18:16:15 -05:00
tokslaw	63ef5d6699	Merge branch 'theme_color_change' of MyFit/users-myfit into master	2023-02-03 15:00:43 +00:00
victorAnumudu	7840e7b13d	theme color changed	2023-02-03 15:22:03 +01:00
jenkins	41c56445fd	Calendar page updated	2023-02-02 22:21:42 -05:00
tokslaw	fcd6afbf1b	Merge branch 'unwanted-popups' of MyFit/users-myfit into master	2023-02-02 23:01:28 +00:00
tokslaw	0138119953	Merge branch 'task-7-implement-reminder-fixed' of MyFit/users-myfit into master	2023-02-02 18:29:14 +00:00
tokslaw	39995b637b	Merge branch 'task-3-reset-password' of MyFit/users-myfit into master	2023-02-02 18:07:31 +00:00
$DESKTOP-QHP1O2H\MIKE$ DESKTOP-QHP1O2H\MIKE	153499fa31	implemented reminder list counter	2023-02-02 11:51:36 -05:00
jenkins	ddf15feb62	Reminder page	2023-02-02 11:00:10 -05:00
jenkins	3789a8d9cb	Reminder add routing	2023-02-02 07:21:48 -05:00
jenkins	3476a8e7f0	Menu cleanup	2023-02-02 06:44:33 -05:00
Chukwumdiebube	b45be9fafd	All unwanted pop-ups removed	2023-02-02 10:42:03 +01:00
tokslaw	a3af650036	Merge branch 'task-7-implement-reminders' of MyFit/users-myfit into master	2023-02-01 23:23:18 +00:00
tokslaw	26d2ddf719	Merge branch 'successful_login_definition' of MyFit/users-myfit into master	2023-02-01 23:18:56 +00:00
victorAnumudu	2afbbe305d	sets local storage values on successful login and clears those values when user logs out	2023-02-01 19:41:59 +01:00
ChineseChikki	590293d561	reset password implemented	2023-01-31 22:59:13 +01:00