Styled text input

src/Routers.jsx

@@ -29,6 +29,7 @@ import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
 import ResourcePage from "./views/ResourcePage";
 import TrackActionPage from "./views/TrackActionPage";
+import SubscriptionPage from "./views/SubscriptionPage";
 
 export default function Routers() {
   return (
@@ -66,6 +67,7 @@ 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="/subscription" element={<SubscriptionPage />} />
 
           <Route exact path="/t-weight" element={<TrackingPage />} />
           <Route exact path="/track-action/:trackpage" element={<TrackActionPage />} />

src/components/AuthPages/Login/index.jsx

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

src/components/Cards/BlogCardStyle.jsx

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

src/components/Cards/YouTubeCardStyle.jsx

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

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

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

src/components/Home/HomeLayouts/HmLayout1.jsx

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

src/components/Home/HomeLayouts/HmLayout2.jsx

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

src/components/Home/HomeLayouts/HmLayout3.jsx

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

src/components/Home/index.jsx

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

src/components/Partials/Layout.jsx

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

src/components/Partials/RightSideBar.jsx

@@ -15,6 +15,8 @@ import LtcIco from "../Helpers/Icons/LtcIco";
 import Usdt from "../Helpers/Icons/Usdt";
 import SelectBox from "../Helpers/SelectBox";
 
+import SideMenuSub from "../Subscriptions/SideMenuSub";
+
 export default function RightSideBar() {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
   const [filterDataSet, setFilterDataSet] = useState([10, 30, 20, 40]);
@@ -44,7 +46,12 @@ export default function RightSideBar() {
   };
   return (
     <>
+ 
+    
       <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed 2xl:grid-cols-none 2xl:block grid lg:grid-cols-2 grid-cols-1 xl:gap-7 gap-4 h-full 2xl:pb-96">
+             <div> 
+         <SideMenuSub />
+      </div>
         <div className="chart-one bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border flex flex-col sm:flex-row 2xl:flex-col 2xl:block lg:justify-between sm:items-center space-x-5 2xl:space-x-0 ">
           <div>
             <div className="chart-heading mb-4 xl:flex justify-between items-center">
@@ -167,7 +174,7 @@ export default function RightSideBar() {
             </div>
           </div>
         </div>
-      
+     
         {/* top-platform */}
         <div className="top-platform bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border ">
           {/* heading */}

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());
 
@@ -36,9 +37,7 @@ export default function AddEditReminder({ className }) {
     description: location.state?.reminder.description || '',
     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,12 +66,15 @@ 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, notes, category, mode} = reminder
+    let {description, notes, category, mode} = infoDetail
     //CHECKING IF AN EMPTY FIELD WAS PASSED
     if(!description || !notes || !category || !mode){
       setSuccess(false)
@@ -81,7 +83,7 @@ export default function AddEditReminder({ className }) {
     }
 
     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'})
@@ -126,6 +128,7 @@ export default function AddEditReminder({ className }) {
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
                 maxLength={100}
+                borderColor='border border-pink'
               />
             </div>
 
@@ -140,7 +143,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 +164,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 +188,35 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
-                <Calendar onChange={setStartDate} value={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>
 
@@ -208,9 +228,9 @@ export default function AddEditReminder({ className }) {
                   <textarea
                     name='notes'
                     value={reminder.notes}
-                    placeholder="provide a detailed description of your item."
+                    placeholder="Provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+                    className="w-full h-full px-7 py-4  border border-pink dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />
@@ -225,6 +245,7 @@ export default function AddEditReminder({ className }) {
             <button
               type="button"
               className="text-18 text-light-red tracking-wide "
+              onClick={() => navigate('/reminders')}
             >
               <span className="border-b dark:border-[#5356fb29]  border-light-red">
                 {" "}
@@ -257,4 +278,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/Reminders/ReminderTable.jsx

@@ -205,7 +205,6 @@ export default function ReminderTable({ className }) {
                     })
                   )
                 }
-
           </tbody>
         </table>
       </div>

src/components/Resources/BlogTab.jsx

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

src/components/Resources/VideoYouTube.jsx

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

src/components/Resources/index.jsx

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

src/components/Subscriptions/PricingListTable.jsx

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

src/components/Subscriptions/SellProductHistoryTable.jsx

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

src/components/Subscriptions/SideMenuSub.jsx

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

src/components/Subscriptions/index.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+import country1 from "../../assets/images/country-1.png";
+import country2 from "../../assets/images/country-2.png";
+import country3 from "../../assets/images/country-3.png";
+import SellMonthStatics from "../Charts/SellMonthStatics";
+import SellHistoryWidget from "../Home/SellHistoryWidget";
+import CurrentBalanceWidget from "../MyWallet/CurrentBalanceWidget";
+import Layout from "../Partials/Layout";
+//import SellAnaliseStatics from "./SellAnaliseStatics";
+import SellProductHistoryTable from "./SellProductHistoryTable";
+
+
+import PricingListTable from "./PricingListTable";
+export default function Subscriptions() {
+  return (
+    <>
+      <Layout>
+        <div className="sell-page-wrapper w-full mb-10">
+          <div className="main-wrapper w-full">
+            <div className="current_balance-bit-sell-widget w-full lg:h-[436px] mb-11">
+              <div className="w-full h-full lg:flex lg:space-x-7">
+                {/* style={{ width: "calc(50% - 15px)" }} */}
+
+
+                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
+                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
+                    {/* heading */}
+                    <div className="w-full h-16 bg-gold flex pl-7 items-center">
+                      <h1 className="text-xl font-medium tracking-wide text-white">
+                        Bits this Month
+                      </h1>
+                    </div>
+                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
+                      <div className="w-full px-5 pt-5">
+                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                          769.44 ETH
+                        </p>
+                        <p className="text-thin-light-gray text-18 flex items-center">
+                          <span>($949374.94)</span>
+                          <span className="ml-2 text-sm text-light-red">
+                            -224.75 (11.5%)
+                          </span>
+                        </p>
+                      </div>
+                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
+                        <PricingListTable setRGBColor="rgba(242, 153, 74)" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
+                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
+                    {/* heading */}
+                    <div className="w-full h-16 bg-gold flex pl-7 items-center">
+                      <h1 className="text-xl font-medium tracking-wide text-white">
+                        Bits this Month
+                      </h1>
+                    </div>
+                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
+                      <div className="w-full px-5 pt-5">
+                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                          769.44 ETH
+                        </p>
+                        <p className="text-thin-light-gray text-18 flex items-center">
+                          <span>($949374.94)</span>
+                          <span className="ml-2 text-sm text-light-red">
+                            -224.75 (11.5%)
+                          </span>
+                        </p>
+                      </div>
+                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
+                        <PricingListTable setRGBColor="rgba(242, 153, 74)" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
+                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
+                    {/* heading */}
+                    <div className="w-full h-16 bg-pink flex pl-7 items-center">
+                      <h1 className="text-xl font-medium tracking-wide text-white">
+                        Sell Earing this Month
+                      </h1>
+                    </div>
+                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
+                      <div className="w-full px-5 pt-5">
+                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                          769.44 ETH
+                        </p>
+                        <p className="text-thin-light-gray text-18 flex items-center">
+                          <span>($949374.94)</span>
+                          <span className="ml-2 text-sm text-light-green">
+                            224.75 (11.5%)
+                          </span>
+                        </p>
+                      </div>
+                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
+                        <PricingListTable setRGBColor="rgba(245, 57, 248, 1)" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+}

src/components/Tracking/TrackAction/UserWeightWidget.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import background from "../../../assets/images/shape/balance-bg.svg";
+import InputCom from "../../../components/Helpers/Inputs/InputCom";
 
 export default function UserWeightWidget() {
   const [eth] = useState(90);
@@ -13,6 +14,88 @@ export default function UserWeightWidget() {
       }}
     >
 
+<div className="wallet flex justify-between">
+        <div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
+          <div>
+            <p className="text-26 font-bold text-white tracking-wide text-center">
+              04
+            </p>
+            <p className="text-lg text-white tracking-wide text-center">
+              Wallets
+            </p>
+          </div>
+        </div>
+        <div>
+          <p className="text-26 font-bold tracking-wide text-white text-right">
+          Weight Entry
+          </p>
+        </div>
+      </div>
+
+      <div className="balance">
+     
+      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+  <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+	<InputCom
+	  placeholder=""
+	  label=""
+	  name="first_name"
+	  type="text"
+	  iconName="people"
+	/>
+  </div>
+  <div className="input-item flex-1">
+	<InputCom
+	  placeholder=""
+	  label=""
+	  name="Last_name"
+	  type="text"
+	  iconName="people"
+	/>
+  </div>
+</div>
+<div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+
+<div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+	<InputCom
+	  placeholder=""
+	  label=""
+	  name="first_name"
+	  type="text"
+	  iconName="people"
+	/>
+  </div>
+  <div className="input-item flex-1">
+	<InputCom
+	  placeholder=""
+	  label=""
+	  name="Last_name"
+	  type="text"
+	  iconName="people"
+	/>
+  </div>
+</div>
+
+       
+
+        <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+
+        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+	
+  </div>
+  <div className="input-item flex-1">
+  <button
+                    
+                    type="button"
+                    className="btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center "><span>Add</span>
+                  </button>
+  </div>
+</div>
+
+      
+        </p>
+      </div>
 
     </div>
   );

src/components/Tracking/TrackAction/index.jsx

@@ -1,16 +1,7 @@
 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";
 

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); 
+  @apply border border-pink;
+}
+
+.dark .reminder-select select {
+  border: 0.5px solid #25284F; 
 }
 
 .reminder-select select::-ms-expand {
@@ -736,4 +756,39 @@ 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;
+  @apply border border-pink;
+}
+
+.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
+
+.dark .react-date-picker__wrapper{
+  background: #11131F;
+  color: #7B818D;
+}
+
+.dark .react-date-picker__button svg{stroke: #7B818D;}
+
+.react-date-picker__calendar .react-calendar{
+  min-height: 18.4rem;
+}
+
+.react-date-picker__calendar .react-calendar__tile{
+  height: 40px !important;
+}
+
+.react-date-picker__inputGroup__input,
+.react-date-picker__inputGroup__divider, 
+.react-date-picker__inputGroup__leadingZero{
+  cursor: pointer;
+  color: #374151;
+}
+
+.animate-fadeIn {@apply transition duration-300}

src/middleware/AuthRoute.jsx

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

src/views/SubscriptionPage.jsx

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