Revert "react date-picker import"

This reverts commit d13ddd5cec.

package-lock.json

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

package.json

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

src/Routers.jsx

@@ -28,6 +28,7 @@ import RemindersAddPage from './views/RemindersAddPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
 import ResourcePage from "./views/ResourcePage";
+import TrackActionPage from "./views/TrackActionPage";
 
 export default function Routers() {
   return (
@@ -65,6 +66,9 @@ export default function Routers() {
           <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="/track-action/:trackpage" element={<TrackActionPage />} />
           <Route
             exact
             path="/my-collection/collection-item"

src/components/Cards/TrackItemCard.jsx

@@ -16,7 +16,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
     }
   };
   return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[187px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+    <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">
@@ -38,18 +38,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
               >
                 <Icons name="love" />
               </span>
-              <span
-                onClick={() => setOption(!options)}
-                className="w-7 h-7 flex justify-center items-center bg-white  rounded-full cursor-pointer"
-              >
-                <Icons name="dots" />
-              </span>
-              {options && (
-                <div
-                  onClick={() => setOption(!options)}
-                  className="w-full h-screen fixed top-0 left-0 z-10"
-                ></div>
-              )}
+       
             </div>
             {hidden && (
               <div className="flex justify-center">
@@ -87,22 +76,18 @@ export default function TrackItemCard({ datas, hidden = false }) {
         </div>
         {/* user */}
         <div className="user w-ful -mt-6 mb-2">
-          <div className="user-img w-10 h-10 flex  justify-center items-center overflow-hidden rounded-full mb-2 ml-4">
-            <img
-              src={localImgLoad(`images/${datas.profile_img}`)}
-              alt="user"
-              className=" w-full h-full"
-            />
-          </div>
+
           <p className="text-sm text-thin-light-gray dark:text-white">
-            Owned by
-            <Link to="/user-profile" className="text-purple ml-1">
-              {datas.username}
+            <Link
+            to={`/track-action/${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>
      
     </div>
   );

src/components/Helpers/Icons.jsx

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

src/components/Home/TotalRecentHx.jsx

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

src/components/Home/index.jsx

@@ -1,12 +1,8 @@
 import React from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
-import CreateNft from "./CreateNft";
-import Hero from "./Hero";
-import SellHistoryMarketVisitorAnalytic from "./SellHistoryMarketVisitorAnalytic";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import TrendingSection from "./TrendingSection";
 import UpdateTable from "./UpdateTable";
+import TotalRecentHx from "./TotalRecentHx";
 
 export default function Home() {
     const trending = datas.datas;
@@ -14,10 +10,7 @@ export default function Home() {
     return (
         <Layout>
             <div className="home-page-wrapper">
-                {/*   <Hero className="mb-10" />
-        <CreateNft />
-        <TrendingSection trending={trending} className="mb-10" />*/}
-                <SellHistoryMarketVisitorAnalytic className="mb-10"/> {/* <TopSellerTopBuyerSliderSection className="mb-10" /> */}
+                <TotalRecentHx className="mb-10"/> 
                 <UpdateTable className="mb-10"/>
             </div>
         </Layout>

src/components/Partials/RightSideBar.jsx

@@ -1,7 +1,18 @@
 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";
+import BtcIco from "../Helpers/Icons/BtcIco";
+import EthIco from "../Helpers/Icons/EthIco";
+import LtcIco from "../Helpers/Icons/LtcIco";
+import Usdt from "../Helpers/Icons/Usdt";
 import SelectBox from "../Helpers/SelectBox";
 
 export default function RightSideBar() {
@@ -184,7 +195,7 @@ export default function RightSideBar() {
             <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="tracking" />
+                <Icons name="tracking2" />
               </span>
                 <p className="text-thin-light-gray text-base font-medium">
                   Add Tracking
@@ -193,6 +204,7 @@ export default function RightSideBar() {
             </div>
             </Link>
           </div>
+
         </div>
       </div>
     </>

src/components/Reminders/AddEditReminder.jsx

@@ -5,10 +5,8 @@ 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";
 
 
@@ -36,9 +34,9 @@ export default function AddEditReminder({ className }) {
   const [reminder, setReminder]=useState({
     'member_id': localStorage.getItem('member_id'),
     description: location.state?.reminder.description || '',
-    note: location.state?.reminder.note || '',
-    category: location.state?.reminder.category || '',
-    mode: location.state?.reminder.mode || '',
+    notes: location.state?.reminder.notes || '',
+    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
   })
@@ -49,7 +47,6 @@ export default function AddEditReminder({ className }) {
     ))
   }
 
-  
   const getUserMode = async () => {
     try {
       const res = await api.getUserModeCategory('remmode');
@@ -75,9 +72,9 @@ export default function AddEditReminder({ className }) {
      }
     setSuccess(true)
     setMessage({status: true, message: ''})
-    let {description, note, category, mode} = reminder
+    let {description, notes, category, mode} = reminder
     //CHECKING IF AN EMPTY FIELD WAS PASSED
-    if(!description || !note || !category || !mode){
+    if(!description || !notes || !category || !mode){
       setSuccess(false)
       setMessage({status: false, message: 'All fields must be filled'})
       return
@@ -87,19 +84,21 @@ export default function AddEditReminder({ className }) {
       const res = await api.addReminder(reminder);
       if(res && res.status == 200){
         setSuccess(false)
-        setMessage({status: true, message: 'Reminder successfully'})
+        setMessage({status: true, message: 'Reminder set successfully'})
         setTimeout(()=>{
           navigate('/reminders', {replace: true})
         }, 2000)
         return
       }
       setSuccess(false)
-      setMessage({status: false, message: `Opps, couldn't perform action`})
+      setMessage({status: false, message: `Sorry, couldn't perform action`})
     } catch (error) {
       setSuccess(false)
       setMessage({status: false, message: 'An error occurred'})
     }
   }
+
+  
   
   useEffect(() => {
     getUserMode();
@@ -132,7 +131,7 @@ export default function AddEditReminder({ className }) {
 
              {/* first name and last name */}
              <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full mb-6 xl:mb-0">
+              <div className="field w-full reminder-select mb-6 xl:mb-0">
                 {/* <InputCom
                   label="Reminder Type"
                   type="text"
@@ -141,19 +140,19 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
-                <select value={reminder.category} name='category' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.category} name='category' className='bg-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.category}>{option.category}</option>
+                      <option key={index} className='' value={option.code}>{option.category}</option>
                     ))
                     }
                   </>
                   }
                 </select>
               </div>
-              <div className="field w-full">
+              <div className="field w-full reminder-select">
                 {/* <InputCom
                   label="Mode"
                   type="text"
@@ -162,12 +161,12 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
-                <select value={reminder.mode} name='mode' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.mode} name='mode' className='bg-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.mode}>{option.mode}</option>
+                      <option key={index} className='' value={option.code}>{option.mode}</option>
                     ))
                     }
                   </>
@@ -207,8 +206,8 @@ export default function AddEditReminder({ className }) {
               <div className="input-field mt-2">
                 <div className="input-wrapper w-full ">
                   <textarea
-                    name='note'
-                    value={reminder.note}
+                    name='notes'
+                    value={reminder.notes}
                     placeholder="provide a detailed description of your item."
                     rows="7"
                     className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
@@ -247,7 +246,7 @@ export default function AddEditReminder({ className }) {
                 className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                 onClick={handleAddReminder}
               >
-                {location.state?.reminder ? 'Edit' : 'Upadate'}
+                {location.state?.reminder ? 'Edit' : 'Add Reminder'}
               </button>
             }
           </div>

src/components/Reminders/ReminderTable.jsx

@@ -3,6 +3,7 @@ import dataImage1 from "../../assets/images/data-table-user-1.png";
 import usersService from "../../services/UsersService";
 import SelectBox from "../Helpers/SelectBox";
 import { Link } from "react-router-dom";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function ReminderTable({ className }) {
   const api = new usersService();
@@ -98,7 +99,7 @@ export default function ReminderTable({ className }) {
                       <div className="flex space-x-2 items-center">
                         <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                           <img
-                            src={dataImage1}
+                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
                             alt="data"
                             className="w-full h-full"
                           />
@@ -137,7 +138,7 @@ export default function ReminderTable({ className }) {
                       </span>
                     </td>
                     <td className="text-right py-4 px-2">
-                    <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full">Edit</Link>
+                    <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>
                       ))
@@ -150,8 +151,8 @@ export default function ReminderTable({ className }) {
                     <td className=" py-4">
                       <div className="flex space-x-2 items-center">
                         <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                          <img
-                            src={dataImage1}
+                        <img
+                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
                             alt="data"
                             className="w-full h-full"
                           />
@@ -196,7 +197,7 @@ export default function ReminderTable({ className }) {
                       >
                         Edit
                       </button> */}
-                      <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full">Edit</Link>
+                      <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>
                         )

src/components/Tracking/TrackAction/UserRecentTracking.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+export default function UserRecentTracking() {
+  
+
+  return (
+    <div className="currency-statics w-full mb-11">
+      <div className="w-full bg-white dark:bg-dark-white   rounded-2xl p-7">
+        <div className="flex flex-col justify-between h-full">
+          <div className="content sm:flex justify-between items-center mb-5">
+            <div>
+              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+               Recent Records
+              </h1>
+            </div>
+           
+          </div>
+          <div className="currency-statics-chart">
+           
+           SOME TABLE HERE 
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+  );
+}

src/components/Tracking/TrackAction/UserWeightWidget.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import background from "../../../assets/images/shape/balance-bg.svg";
+
+export default function UserWeightWidget() {
+  const [eth] = useState(90);
+  const [btc] = useState(85);
+  const [ltc] = useState(20);
+  return (
+    <div
+      className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col justify-between  px-8 py-9"
+      style={{
+        background: `url(${background}) 0% 0% / cover no-repeat`,
+      }}
+    >
+
+
+    </div>
+  );
+}

src/components/Tracking/TrackAction/index.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useParams } from 'react-router-dom'
+
+import bank1 from "../../../assets/images/bank-1.png";
+import bank2 from "../../../assets/images/bank-2.png";
+import bank3 from "../../../assets/images/bank-3.png";
+import bank4 from "../../../assets/images/bank-4.png";
+import Layout from "../../Partials/Layout";
+//import CurrencyStaticsSection from "./CurrencyStaticsSection";
+//import CurrentBalanceWidget from "./CurrentBalanceWidget";
+//import InvestmentSection from "./InvestmentSection";
+//import RecentTransactionWidget from "./RecentTransactionWidget";
+
+import UserWeightWidget from "./UserWeightWidget";
+import UserRecentTracking from "./UserRecentTracking";
+
+export default function TrackAction() {
+  
+  let {trackpage} = useParams();
+
+  console.log("TRACK PAGE  = = ",trackpage);
+
+  return (
+    <>
+      <Layout>
+        <div className="my-wallet-wrapper w-full mb-10">
+          <div className="main-wrapper w-full">
+            <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
+              <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
+                <UserWeightWidget />
+              </div>
+              <div className="flex-1">
+                <div className="my-wallets w-full h-full bg-white dark:bg-dark-white   rounded-lg p-6">
+                  <div className="mb-4">
+                    <h1 className="text-xl font-bold tracking-wide   text-dark-gray dark:text-white">
+                     Some title HERE 
+                    </h1>
+                  </div>
+                  <div className="content-area">
+
+                    SOMETHING HERE 
+
+                  </div>
+                </div>
+              </div>
+            </div>
+            <UserRecentTracking />
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}

src/components/Tracking/TrackCategory.jsx

@@ -3,7 +3,7 @@ import TrackItemCard from "../Cards/TrackItemCard";
 import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 
-export default function TrackCategoy({ className, trending }) {
+export default function TrackCategory({ className, trackcategory }) {
   const settings = {
     arrows: false,
     slidesToShow: 4,
@@ -91,9 +91,9 @@ export default function TrackCategoy({ className, trending }) {
       {/* trending products */}
       <div className="trending-products relative w-full">
         <SliderCom selector={trendingSlider} settings={settings}>
-          {trending &&
-            trending.length > 0 &&
-            trending.map((item) => (
+          {trackcategory &&
+            trackcategory.length > 0 &&
+            trackcategory.map((item) => (
               <TrackItemCard key={item.id} datas={item} />
             ))}
         </SliderCom>

src/components/Tracking/index.jsx

@@ -1,20 +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 TrackCategoy from "./TrackCategory";
+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">
-            <TrackCategoy trending={trending} className="mb-10" />
+            <TrackCategory trackcategory={props.trackCategory} className="mb-10" />
             <TrackingTable />
           </div>
         </div>

src/index.css

@@ -712,3 +712,28 @@ TODO: Responsive ===========================
   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;
+  }
+}

src/services/UsersService.js

@@ -43,6 +43,13 @@ class usersService {
         };
         return this.getAuxEnd("/resources", reqData);
       }
+
+      getTrackCategory(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/trackcategory", reqData);
+      }
     //----------------------------------------  -----
     //----------------------------------------  -----
     // Unified call below

src/views/TrackActionPage.jsx

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

src/views/TrackingPage.jsx

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