final touches

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 (
@@ -67,7 +68,7 @@ export default function Routers() {
           <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

@@ -79,7 +79,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
 
           <p className="text-sm text-thin-light-gray dark:text-white">
             <Link
-            to={`/${datas.widget}`}
+            to={`/track-action/${datas.widget}`}
             className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
             >
             {datas.title}

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

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

src/components/Home/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/Reminders/AddEditReminder.jsx

@@ -1,12 +1,13 @@
 import React, {useState, useEffect} from 'react'
+import DatePicker from 'react-date-picker';
 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 Calendar from 'react-calendar';
+// import 'react-calendar/dist/Calendar.css';
 import usersService from "../../services/UsersService";
 
 
@@ -17,7 +18,7 @@ export default function AddEditReminder({ className }) {
   let {reminder_uuid} = useParams() // uuid of single reminder
   
   let location = useLocation()
-
+ 
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
 
@@ -34,11 +35,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 || '',
+    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
+    mode: location.state?.reminder.code || ''
   })
   
   const onReminderInputChange = ({target:{name,value}}) => { //function to run when user changes any input on the add reminder page
@@ -67,21 +66,24 @@ export default function AddEditReminder({ className }) {
 
   const handleAddReminder = async () => { // function to add reminder, after all test cases are met
      // toast('Reminder Added')
+     let infoDetail = reminder
+     infoDetail.start_date = startDate
+     infoDetail.end_date = endDate
      if(location.state){
-      reminder.uuid = reminder_uuid
+      infoDetail.uuid = reminder_uuid
      }
     setSuccess(true)
     setMessage({status: true, message: ''})
-    let {description, note, category, mode} = reminder
+    let {description, notes, category, mode} = infoDetail
     //CHECKING IF AN EMPTY FIELD WAS PASSED
-    if(!description || !note || !category || !mode){
+    if(!description || !notes || !category || !mode){
       setSuccess(false)
       setMessage({status: false, message: 'All fields must be filled'})
       return
     }
 
     try {
-      const res = await api.addReminder(reminder);
+      const res = await api.addReminder(infoDetail);
       if(res && res.status == 200){
         setSuccess(false)
         setMessage({status: true, message: 'Reminder set successfully'})
@@ -140,7 +142,7 @@ 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-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}>
+                <select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
@@ -161,7 +163,7 @@ 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-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}>
+                <select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>
@@ -185,18 +187,35 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
-                <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" />
+                {/* <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" /> */}
+                <DatePicker
+                minDate={new Date()}
+                minDetail="decade"
+                format="y-MM-dd"
+                monthPlaceholder="mm"
+                yearPlaceholder="yyyy"
+                dayPlaceholder="dd"
+                range="range"
+                clearIcon={startDate ? null : 'x'}
+                value={startDate}
+                onChange={(date) => setStartDate(date)}
+                calendarIcon={<CalendarIcon />}
+              />
               </div>
               <div className="field w-full">
-                {/* <InputCom
-                  label="End Date"
-                  type="text"
-                  name="endDate"
-                  placeholder="10-20-2034"
-                  value={''}
-                /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">End Date</label>
-                <Calendar onChange={setEndDate} value={reminder.end_date} calendarType="US" />
+                <DatePicker
+                minDate={startDate}
+                minDetail="decade"
+                format="y-MM-dd"
+                monthPlaceholder="mm"
+                yearPlaceholder="yyyy"
+                dayPlaceholder="dd"
+                range="range"
+                value={endDate}
+                onChange={(date) => setEndDate(date)}
+                calendarIcon={<CalendarIcon />}
+              />
               </div>
             </div>
 
@@ -206,11 +225,11 @@ export default function AddEditReminder({ className }) {
               <div className="input-field mt-2">
                 <div className="input-wrapper w-full ">
                   <textarea
-                    name='note'
-                    value={reminder.note}
-                    placeholder="provide a detailed description of your item."
+                    name='notes'
+                    value={reminder.notes}
+                    placeholder="Provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />
@@ -225,6 +244,7 @@ export default function AddEditReminder({ className }) {
             <button
               type="button"
               className="text-18 text-light-red tracking-wide "
+              onClick={() => navigate('/reminders')}
             >
               <span className="border-b dark:border-[#5356fb29]  border-light-red">
                 {" "}
@@ -257,4 +277,9 @@ export default function AddEditReminder({ className }) {
       </Layout>
     </>
   )
-}
+}
+
+const CalendarIcon = () => (<><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-[#374151]">
+<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+</svg>
+</>)

src/components/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/index.css

@@ -23,6 +23,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 * {
   min-height: 0;
   min-width: 0;
@@ -657,7 +658,7 @@ TODO: Responsive ===========================
   .children-element {
     left: 0;
     top: 0;
-    webkit-transform: none;
+    -webkit-transform: none;
     transform: none;
   }
 }
@@ -685,11 +686,24 @@ TODO: Responsive ===========================
   border-radius: 7px !important;
 }
 
+.dark .react-calendar{
+  background: #11131F;
+  color: #7B818D;
+  border: 1px solid #25284F;  
+}
+.dark .react-calendar__navigation button:enabled:hover, 
+.dark .react-calendar__navigation button:enabled:focus,
+.dark .react-calendar__tile:disabled,
+.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
+
 .react-calendar__navigation{
   margin-top: 2px;
   margin-inline: 2px;
 }
 
+.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
+.dark .react-calendar__tile--active{color: #fff;}
+
 .react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus{
   @apply rounded-full transition duration-500
@@ -713,13 +727,19 @@ TODO: Responsive ===========================
   transition: all 500ms;
 }
 
+.dark .react-calendar__tile{background: #11131F;}
+
 .reminder-select select{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
   background-position: calc(100% - 0.75rem) center !important;
-  box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2); 
+  border: 0.5px solid #E3E4FE; 
+}
+
+.dark .reminder-select select {
+  border: 0.5px solid #25284F; 
 }
 
 .reminder-select select::-ms-expand {
@@ -736,4 +756,36 @@ TODO: Responsive ===========================
       background: none\9;
       padding: 5px\9;
   }
+}
+
+/* Date Picker */
+.react-date-picker__wrapper{
+  border: 0.5px solid #E3E4FE;
+  padding: 1.25rem;
+  background: #fafafa;
+  border-radius: 9999px;
+}
+
+.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
+
+.dark .react-date-picker__wrapper{
+  background: #11131F;
+  color: #7B818D;
+}
+
+.dark .react-date-picker__button svg{stroke: #7B818D;}
+
+.react-date-picker__calendar .react-calendar{
+  min-height: 18.4rem;
+}
+
+.react-date-picker__calendar .react-calendar__tile{
+  height: 40px !important;
+}
+
+.react-date-picker__inputGroup__input,
+.react-date-picker__inputGroup__divider, 
+.react-date-picker__inputGroup__leadingZero{
+  cursor: pointer;
+  color: #374151;
 }

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