add task btn position changed

src/components/FamilyAcc/FamilyManage.jsx

@@ -11,6 +11,7 @@ export default function FamilyManage() {
   let location = useLocation();
   let navigate = useNavigate();
   let accountDetails = location?.state;
+  
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -14,6 +14,9 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import profile from "../../../assets/images/profile-info-profile.png";
 import FamilyTasks from "./FamilyTasks";
 
+import AssignTaskPopout from '../FamilyPopout/AssignTaskPopout'
+
+
 export default function FamilyManageTabs({
   className,
   accountDetails,
@@ -50,6 +53,13 @@ export default function FamilyManageTabs({
   const tabHandler = (value) => {
     setTab(value);
   };
+
+  let [familyTaskPopout, setFamilyTaskPopout] = useState(false) // DETERMINES WHEN FAMILY ADD TASK POPOUT DISPLAYS
+
+  const familyPopUpHandler = () => { // FUNCTION TO CHANGE THE FAMILY ADD TASK POPOIUT STATE
+    setFamilyTaskPopout(prev => !prev)
+  }
+
   //   For profile uploads
   const [profileImg, setProfileImg] = useState(profile);
   // profile img
@@ -141,21 +151,31 @@ export default function FamilyManageTabs({
             </div>
             <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
-                <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                <div className="w-full pr-8 flex items-center gap-1">
-                  {tabs.map(({ name, id }) => (
+                  <ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
-                    <li
+                    {tabs.map(({ name, id }) => (
-                      onClick={() => tabHandler(name)}
+                      <li
-                      className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
+                        onClick={() => tabHandler(name)}
-                        tab === name
+                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
-                          ? "text-purple border-r"
+                          tab === name
-                          : " text-thin-light-gray"
+                            ? "text-purple border-r"
-                      }`}
+                            : " text-thin-light-gray"
-                      key={id}
+                        }`}
-                    >
+                        key={id}
-                      <h1>{name}</h1>
+                      >
-                    </li>
+                        <h1>{name}</h1>
-                  ))}
+                      </li>
-                </ul>
+                    ))}
+                  </ul>
+                  <button
+                    type="button"
+                    onClick={familyPopUpHandler}
+                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  >
+                    Add task
+                    {/* {accountDetails?.firstname} */}
+                  </button>
+                </div>
                 <div className="flex-[0.9] lg:min-h-[450px] h-full">
                   {/* Your content here */}
                   {tabs.map(({ name, id }) => {
@@ -171,7 +191,7 @@ export default function FamilyManageTabs({
                             className={className}
                             loader={details.familyTasks.loading}
                             familyData={details.familyTasks.data}
-                            familyDetails={details.familyDetails.data}
+                            accountDetails={accountDetails}
                           />
                         )}
                         {name === "Account" && (
@@ -192,6 +212,15 @@ export default function FamilyManageTabs({
           </div>
         </Suspense>
       </div>
+
+      {/* FAMILY ADD TASK POPOUT */}
+      {familyTaskPopout &&
+        <AssignTaskPopout 
+          action={familyPopUpHandler}
+          situation={familyTaskPopout}
+          familyDetails={details.familyDetails.data}
+        />
+      }
     </div>
   );
 }

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -8,18 +8,12 @@ import Icons from "../../Helpers/Icons";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import ModalCom from "../../Helpers/ModalCom";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
-import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-export default function FamilyTasks({ familyData, familyDetails, className, loader }) {
+
+export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
-  let [familyTaskPopout, setFamilyTaskPopout] = useState(false)
-
-  const familyPopUpHandler = () => {
-    setFamilyTaskPopout(prev => !prev)
-  }
-
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -43,15 +37,6 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
         </div>
       ) : (
         <>
-          <div className="w-full p-2 my-2 flex justify-end items-center">
-            <button
-              type="button"
-              onClick={familyPopUpHandler}
-              className="px-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-            >
-              Add task for {familyDetails?.firstname}
-            </button>
-          </div>
           {familyData && familyData?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -122,9 +107,8 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
                                       state: {
                                         ...value,
                                         pathname,
-                                        dueDate,
+                                        accountDetails
-                                        thePrice,
+                                      }
-                                      },
                                     });
                                   }}
                                   className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -158,13 +142,6 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
           )}
         </>
       )}
-      {familyTaskPopout &&
-        <AssignTaskPopout 
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyDetails={familyDetails}
-        />
-      }
     </div>
   );
 }

src/components/Helpers/PriceFormatter.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 // export const PriceFormatter = (price, currency, currencyName) => {
 //   const supportedCurrencies = ["USD", "EUR", "GBP"];
@@ -17,32 +17,35 @@ import React from 'react'
 //   return `${formatter.format(price)} ${displayCurrencyName}`;
 // };
 
-
+export const PriceFormatter = (
-export const PriceFormatter = (price='00', currency='', currencyName='') => {
+  price = "00",
+  currency = "",
+  currencyName = ""
+) => {
   // Convert the number to a string
-let numStr = String(price);
+  let numStr = String(price);
 
-// Split the string into integer and decimal parts
+  // Split the string into integer and decimal parts
-let parts = numStr.split('.');
+  let parts = numStr.split(".");
-let integerPart = parts[0];
+  let integerPart = parts[0] || "";
-let decimalPart = parts[1] || '';
+  let decimalPart = parts[1] || "";
 
-// Add thousands separators to the integer part
+  // Add thousands separators to the integer part
-// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  // let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-let formattedInteger = integerPart;
+  let formattedInteger = integerPart;
 
-// Truncate or pad the decimal part to two decimal points
+  // Truncate or pad the decimal part to two decimal points
-let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+  let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
 
-// Combine the formatted integer and decimal parts
+  // Combine the formatted integer and decimal parts
-// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+  // let formattedNumber = formattedInteger + '.' + formattedDecimal;
 
-// return formattedNumber;
+  // return formattedNumber;
   return (
-    <span className='text-sm flex items-center'>
+    <span className="text-sm flex items-center">
-      <sup>{currency || currencyName || ''}</sup>
+      <sup>{currency || currencyName || ""}</sup>
-      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
+      <span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
-      <sup>{formattedDecimal}</sup>
+      <sup>{formattedDecimal || ""}</sup>
     </span>
-  )
+  );
-}
+};

src/components/Home/FamilyDash.jsx

@@ -3,7 +3,8 @@ import datas from "../../data/product_data.json";
 import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
 import CommonHead from "../UserHeader/CommonHead";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
-
+import OverviewSection from "../ActiveBids/OverviewSection";
+import ParentWaiting from "../MyPendingJobs/ParentWaiting";
 
 
 export default function FamilyDash(props) {
@@ -18,7 +19,8 @@ export default function FamilyDash(props) {
                     commonHeadData={props.commonHeadData}
                 />
                 <FamilyActiveLSlde trending={trending} className="mb-10" />
-                <TopSellerTopBuyerSliderSection className="mb-10" />
+                {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
+                <ParentWaiting className="mb-10" />
             </div>
         </div>
     );

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -259,8 +259,13 @@ function ActiveJobs(props) {
             <button
               type="button"
               className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-              onClick={() =>
+              onClick={() =>{
-                navigate(props.details.pathname, { replace: true })
+                  if(props.details.pathname == '/manage-family'){
+                    navigate(props.details.pathname, {state: { ...props.details.accountDetails }}, { replace: true })
+                  }else{
+                    navigate(props.details.pathname, { replace: true })
+                  }
+                }
               }
             >
               <svg

src/components/MyPendingJobs/ParentWaiting.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import activeAidsBanner from "../../assets/images/kids-waiting.jpg";
+import HeroUser from "../../assets/images/hero-user.png";
+import CountDown from "../Helpers/CountDown";
+import ParentWaitingTable from "./ParentWaitingTable";
+
+export default function ParentWaiting({ className }) {
+    const [addFavorite, setValue] = useState(false);
+    const favoriteHandler = () => {
+        if (!addFavorite) {
+            setValue(true);
+            toast.success("Added to Favorite List");
+        } else {
+            setValue(false);
+            toast.warn("Remove to Favorite List");
+        }
+    };
+    return (
+        <>
+            <div className={`overview-section w-full ${className || ""}`}>
+                <div>
+                    <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Waiting for Parent to Get Started...</h1>
+                </div>
+                <div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2">
+                    <div className="lg:w-[540px] w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden mb-10">
+                        <img
+                            src={activeAidsBanner}
+                            alt="banner"
+                            className="w-full lg:h-full h-[400px]"
+                        />
+                    </div>
+
+                    <div className="overview-countdown lg:w-2/5 w-full h-full flex flex-col justify-between lg:pl-11 rounded-2xl bg-white dark:bg-dark-white  ">
+                        {<ParentWaitingTable />}
+
+              {/*          <div className="lg:mb-0 mb-3">*/}
+              {/*              <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
+              {/*                  Lock and Lob x Fiesta Spurs*/}
+              {/*              </h1>*/}
+              {/*              <span className="text-[18px] font-thin tracking-wide   text-dark-gray dark:text-white">*/}
+              {/*  ID : 2320382*/}
+              {/*</span>*/}
+              {/*          </div>*/}
+              {/*          /!* user *!/*/}
+              {/*          <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
+              {/*              <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
+              {/*                  <img src={HeroUser} alt="" />*/}
+              {/*              </div>*/}
+              {/*              <div>*/}
+              {/*                  <p className="text-xl tracking-wide font-bold antise   text-dark-gray dark:text-white">*/}
+              {/*                      Brokln Simons*/}
+              {/*                  </p>*/}
+              {/*                  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">*/}
+              {/*                      @broklinslam_75*/}
+              {/*                  </p>*/}
+              {/*              </div>*/}
+              {/*          </div>*/}
+
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+

src/components/MyPendingJobs/ParentWaitingTable.jsx

@@ -0,0 +1,339 @@
+import React, { useState } from "react";
+import transaction1 from "../../assets/images/recent-transation-1.png";
+import transaction2 from "../../assets/images/recent-transation-2.png";
+import transaction3 from "../../assets/images/recent-transation-3.png";
+
+export default function ParentWaitingTable() {
+    const transationFilterData = [
+        {
+            id: 1,
+            name: "all",
+            uniqueId: Math.random(),
+        },
+        {
+            id: 2,
+            name: "send",
+            uniqueId: Math.random(),
+        },
+        {
+            id: 3,
+            name: "recent",
+            uniqueId: Math.random(),
+        },
+    ];
+    const [filterActive, setValue] = useState(transationFilterData[0].id);
+    const filterHander = (value) => {
+        setValue(value);
+    };
+    return (
+        <div className="rounded-2xl bg-white dark:bg-dark-white  ">
+            {/* heading */}
+            <div className="heading sm:flex justify-between items-center">
+
+                <div>
+                    <ul className="flex space-x-5 items-center">
+                        {transationFilterData.map((value) => (
+                            <li
+                                onClick={() => filterHander(value.id)}
+                                key={value.uniqueId}
+                                className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29]  border-transparent hover:border-purple uppercase ${
+                                    filterActive === value.id ? "border-purple text-purple" : ""
+                                }`}
+                            >
+                                {value.name}
+                            </li>
+                        ))}
+                        {/* <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29]  border-transparent hover:border-purple uppercase">
+              All
+            </li>
+            <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29]  border-transparent hover:border-purple uppercase">
+              SEND
+            </li>
+            <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29]  border-transparent hover:border-purple uppercase">
+              recent
+            </li> */}
+                    </ul>
+                </div>
+            </div>
+            {/* content */}
+
+            {filterActive === 2 ? (
+                <div className="content">
+                    <ul>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction1} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add ETH from MetaMask
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-green text-right">
+                                        +324.75
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction2} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add BTC from Coinbase Wallet
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-red text-right">
+                                        -824.78
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction3} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Buy Nft art from LTC
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-red text-right">
+                                        -924.54
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            ) : filterActive === 3 ? (
+                <div className="content">
+                    <ul>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction1} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add ETH from MetaMask
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-green text-right">
+                                        +324.75
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction2} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add BTC from Coinbase Wallet
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-red text-right">
+                                        -824.78
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            ) : (
+                <div className="content">
+                    <ul>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction1} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add ETH from MetaMask
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-green text-right">
+                                        +324.75
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction2} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add BTC from Coinbase Wallet
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-red text-right">
+                                        -824.78
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction3} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Buy Nft art from LTC
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-red text-right">
+                                        -924.54
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                        <li className="content-item py-3 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29]  hover:border-purple">
+                            <div className="flex justify-between items-center">
+                                <div className="account-name flex space-x-4 items-center">
+                                    <div className="icon w-14 h-14 flex justify-center items-center">
+                                        <img src={transaction1} alt="" className="" />
+                                    </div>
+                                    <div>
+                                        <div className="name">
+                                            <p className="text-base text-dark-gray dark:text-white font-medium mb-1">
+                                                Add ETH from MetaMask
+                                            </p>
+                                        </div>
+                                        <div className="time">
+                                            <p className="text-sm text-thin-light-gray font-medium">
+                                                22 hours ago
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <p className="eth text-xl font-bold   text-dark-gray dark:text-white">
+                                        $512.44
+                                    </p>
+                                    <p className="usd text-base text-light-green text-right">
+                                        +324.75
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/MyTasks/MyOffersTable.jsx

@@ -143,7 +143,10 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
                             <button
                               type="button"
                               onClick={() => {
-                                setOfferPopout({ show: true, data: value });
+                                setOfferPopout({
+                                  show: true,
+                                  data: {...value, thePrice },
+                                });
                               }}
                               className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
                             >

src/components/Resources/index.jsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 // import profileBanner from "../../assets/images/profile-cover.png";
 // import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
 // import marketPlace from "../../data/marketplace_data.json";
-import LoadingSpinner from "../../components/Spinners/LoadingSpinner"
+import LoadingSpinner from "../../components/Spinners/LoadingSpinner";
 import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import {
@@ -35,6 +35,8 @@ export default function Resources(props) {
     setTab(value);
   };
 
+  console.log("first")
+
   // Category Components
   const tabComponents = {
     onsale: <OnSaleTab products={onSaleProducts} />,
@@ -105,38 +107,35 @@ export default function Resources(props) {
     <>
       <Layout>
         <div className="nft-authprofile-wrapper w-full">
-          {__resources.length == 0 ||
+          {__resources.length == 0 || Object.keys(__resources).length == 0 ? (
-          Object.keys(__resources).length == 0 ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size={16} color="sky-blue" />
             </div>
           ) : (
-          <div className="main-wrapper w-full">
+            <div className="main-wrapper w-full">
-            <div className="content-wrapper-profile-only w-full mb-6">
+              <div className="content-wrapper-profile-only w-full mb-6">
-              <div className="auth-tab-content relative mb-10">
+                <div className="auth-tab-content relative mb-10">
-                <div className="lg:flex justify-between">
+                  <div className="lg:flex justify-between">
-                  <div className="tab-items">
+                    <div className="tab-items">
-                    <ul className="lg:flex lg:space-x-14 space-x-8">
                       <TabList tabCategories={tab_categories} />
-                    </ul>
+                    </div>
-                  </div>
+                    <div style={{ transform: "translateY(-22px)" }}>
-                  <div style={{ transform: "translateY(-22px)" }}>
+                      <Link
-                    <Link
+                        to="/upload-product"
-                      to="/upload-product"
+                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                      className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+                      >
-                    >
+                        Upload Product
-                      Upload Product
+                      </Link>
-                    </Link>
+                    </div>
                   </div>
+                  <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>
-                <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
+              </div>
+
+              <div className="tab-cotainer w-full mb-10">
+                {selectedTabComponent}
               </div>
             </div>
-
-            <div className="tab-cotainer w-full mb-10">
-              {selectedTabComponent}
-            </div>
-          </div>
           )}
         </div>
       </Layout>

src/components/jobPopout/OfferJobPopout.jsx

@@ -1,64 +1,108 @@
-import React, {useState} from 'react'
+import React, { useState } from "react";
-import Detail from './popoutcomponent/Detail'
+import Detail from "./popoutcomponent/Detail";
-import ModalCom from '../Helpers/ModalCom'
+import ModalCom from "../Helpers/ModalCom";
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from "react-router-dom";
 
-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";
-import LoadingSpinner from '../Spinners/LoadingSpinner'
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import { tableReload } from '../../store/TableReloads'
+import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from 'react-redux'
+import { useDispatch } from "react-redux";
 
-function OfferJobPopout({details, onClose, situation}) {
+function OfferJobPopout({ details, onClose, situation }) {
-  const apiUrl = new usersService()
+  const apiUrl = new usersService();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
-  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+    trigger: "",
+  });
 
   //FUNCTION TO HANDLE AN OFFER
-  const handleOffer = ({target:{name}}) => {
+  const handleOffer = ({ target: { name } }) => {
     const reqData = {
       // offer_result: 100,
       offer_code: details.contract,
-      contract: details.contract
+      contract: details.contract,
-    }
+    };
 
     //logic to determine the button pressed and set reqDate accordingly
-    if(name == 'accept'){
+    if (name == "accept") {
-      setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'})
+      setRequestStatus({
-      reqData.offer_result = 100
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "offer",
+      });
+      reqData.offer_result = 100;
     }
-    if(name == 'reject'){
+    if (name == "reject") {
-      setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
+      setRequestStatus({
-      reqData.offer_result = 333
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "reject",
+      });
+      reqData.offer_result = 333;
     }
 
     // API CALL
-    apiUrl.offersResponse(reqData).then(response => {
+    apiUrl
-      if(response.status != 200 || response.data.internal_return < 0){
+      .offersResponse(reqData)
-        setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''})
+      .then((response) => {
-        return
+        if (response.status != 200 || response.data.internal_return < 0) {
-      }
+          setRequestStatus({
-      setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
+            loading: false,
-      setTimeout(()=>{
+            status: false,
-        onClose()
+            message: `Unable to ${name} Offer, try again later`,
-        dispatch(tableReload({type:'MYTASKTABLE'}))
+            trigger: "",
-        navigate('/mytask', {replace:true})
+          });
-        setRequestStatus({loading: false, status: false, message: '', trigger: ''})
+          return;
-      },2000)
+        }
-    }).catch(error => {
+        setRequestStatus({
-      setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''})
+          loading: false,
-    }).finally(()=>{
+          status: true,
-      setTimeout(()=>{
+          message: `Offer ${name}ed Successfully`,
-        setRequestStatus({loading: false, status: false, message: '', trigger: ''})
+          trigger: "",
-      },5000)
+        });
-    })
+        setTimeout(() => {
-  }
+          onClose();
+          dispatch(tableReload({ type: "MYTASKTABLE" }));
+          navigate("/mytask", { replace: true });
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "",
+            trigger: "",
+          });
+        }, 2000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: `Opps! An Error Occurred`,
+          trigger: "",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "",
+            trigger: "",
+          });
+        }, 5000);
+      });
+  };
 
   return (
     <ModalCom action={onClose} situation={situation}>
-    <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Start Task
@@ -89,98 +133,104 @@ function OfferJobPopout({details, onClose, situation}) {
             </svg>
           </button>
         </div>
-        <div className='md:flex bg-white rounded-lg shadow-lg'>
+        <div className="md:flex bg-white rounded-lg shadow-lg">
-          <div className='p-4 w-full md:w-3/4 md:border-r-2'>
+          <div className="p-4 w-full md:w-3/4 md:border-r-2">
-            <p className='text-lg my-5 font-semibold text-slate-900 tracking-wide'>{details.title}</p>
+            <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
+              {details.title}
+            </p>
 
             {/* INPUT SECTION */}
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
+              <Detail label="Date" value={details.offer_added || "default"} />
+            </div>
+
+            <div className="my-2 md:flex">
+              <Detail label="Description" value={details.description} />
+            </div>
+
+            <div className="my-2 md:flex">
               <Detail
-                  label='Date' 
+                label="Offer Expire"
-                  value={details.offer_added || 'default'}
+                value={
+                  details.expire &&
+                  `${details.expire.split(" ")[0]} ${
+                    details.expire.split(" ")[1].split(".")[0]
+                  }`
+                }
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Description' 
+                label="Price"
-                  value={details.description} 
+                value={details.thePrice}
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Offer Expire' 
+                label="Duration"
-                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
+                value={`${details.timeline_days} day(s)`}
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Price' 
+                label="Detail"
-                  value={`${details.price*0.01} ${details.currency}`} 
+                value={details.job_description || details.description}
               />
             </div>
-  
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Duration' 
-                  value={`${details.timeline_days} day(s)`} 
-              />
-            </div>
-
-            <div className='my-2 md:flex'>
-              <Detail 
-                  label='Detail' 
-                  value={details.job_description || details.description} 
-              />
-            </div>
-  
           </div>
 
           {/* ACTION SECTION */}
-          <div className='p-4 w-full md:w-1/4 h-full'>
+          <div className="p-4 w-full md:w-1/4 h-full">
-            <div className='my-3 md:flex md:justify-center'>
+            <div className="my-3 md:flex md:justify-center">
-              {requestStatus.loading && requestStatus.trigger == 'offer' ?
+              {requestStatus.loading && requestStatus.trigger == "offer" ? (
-                <LoadingSpinner size={8} color='sky-blue' />
+                <LoadingSpinner size={8} color="sky-blue" />
-              :
+              ) : (
                 <button
-                  name='accept' 
+                  name="accept"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    Accept Offer
+                >
+                  Accept Offer
                 </button>
-              }
+              )}
             </div>
 
-            <div className='mt-10 md:mt-20 md:flex md:justify-center'>
+            <div className="mt-10 md:mt-20 md:flex md:justify-center">
-              {requestStatus.loading && requestStatus.trigger == 'reject' ?
+              {requestStatus.loading && requestStatus.trigger == "reject" ? (
-                <LoadingSpinner size={8} color='sky-blue' />
+                <LoadingSpinner size={8} color="sky-blue" />
-              :
+              ) : (
                 <button
-                  name='reject' 
+                  name="reject"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    Reject Offer
+                >
+                  Reject Offer
                 </button>
-              }
+              )}
             </div>
 
             {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-            {requestStatus.message != "" && (
+            {requestStatus.message != "" &&
-                  !requestStatus.status ?
+              (!requestStatus.status ? (
-                  (<div className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+                <div
-                      {requestStatus.message}
+                  className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                  </div>)
+                >
-                  :
+                  {requestStatus.message}
-                  requestStatus.status &&
+                </div>
-                      (<div className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+              ) : (
-                          {requestStatus.message}
+                requestStatus.status && (
-                      </div>
+                  <div
-                      )
+                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                )}
+                  >
+                    {requestStatus.message}
+                  </div>
+                )
+              ))}
             {/* End of error or success display */}
           </div>
         </div>
@@ -188,18 +238,18 @@ function OfferJobPopout({details, onClose, situation}) {
         {/* close button */}
         <div className="p-6 flex justify-end">
           <button
-              onClick={onClose}
+            onClick={onClose}
-              disabled={requestStatus.loading}
+            disabled={requestStatus.loading}
-              type="button"
+            type="button"
-              className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
+            className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
-            >
+          >
-              <span className="text-gradient">Cancel</span>
+            <span className="text-gradient">Cancel</span>
-            </button>
+          </button>
         </div>
         {/* end of close button */}
-    </div>
+      </div>
-  </ModalCom>
+    </ModalCom>
-    )
+  );
 }
 
-export default OfferJobPopout
+export default OfferJobPopout;