default height added to box tables

.env.production

@@ -43,5 +43,4 @@ REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
 DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
-
+REACT_APP_TOTAL_NUM_FILE=4

src/components/Cards/HomeBannerOffersCard.jsx

@@ -1,42 +1,48 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import localImgLoad from "../../lib/localImgLoad";
+import bannerImage from "../../assets/images/banner-coupons.jpg";
 
 export default function HomeBannerOffersCard(props) {
-    console.log("HomeBannerOffersCard-> ##->",props)
-    const link_result = "/" + props.itemData.link_path;
-    var imgUrl = props.itemData.banner; //  ? this.state.nextImgSrc : this.state.song.imgSrc;
-    console.log("IMAGE FOR BANNER->",imgUrl);
-    var divStyle = {
-        backgroundImage: 'url(' + imgUrl + ')'
-    }
-    var linkDivStyle = "item w-full block group banner-630-340 " + divStyle;
+  const [imageUrl, setImageUrl] = useState("");
+  const link_result = "/" + props.itemData.link_path;
 
+  useEffect(() => {
+    let { banner, banner_location } = props?.itemData;
+    if (banner_location === "LOCAL") {
+      const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
+      console.log("This is local");
+      setImageUrl(imagePath);
+    } else if (banner_location === "URL") setImageUrl(banner);
+    else return null;
+  }, []);
 
-    return (
-        <Link
-            to={link_result}
-            className={linkDivStyle}
-        >
-            <div className="flex flex-col justify-between h-full">
-                <div className="content flex justify-between items-center mb-5">
-                    <div className="siderCardHeader">
-                        <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
-                            <>{props.itemData.title}</>
-                        </h1>
-                    </div>
-                    {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
-                </div>
-                <div className="h-[233px]">
-                    <div className="siderCardDescription">
-                       {props.itemData.description}
-                    </div>
-                    <div className="siderCardButton">
-                     [   {props.itemData.button_text}  ]
-                    </div>
-                </div>
-
-            </div>
-        </Link>
-    );
+  return (
+    <Link
+      to={link_result}
+      className="item w-full block group banner-630-340 bg-cover bg-center"
+      style={{
+        backgroundImage: `url('${imageUrl}')`,
+      }}
+    >
+      <div className="flex flex-col justify-between h-full">
+        <div className="content flex justify-between items-center mb-5">
+          <div className="siderCardHeader">
+            <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
+              <>{props.itemData.title}</>
+            </h1>
+          </div>
+          {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
+        </div>
+        <div className="h-[233px]">
+          <div className="siderCardDescription">
+            {props.itemData.description}
+          </div>
+          <div className="siderCardButton">
+            [ {props.itemData.button_text} ]
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
 }

src/components/FamilyAcc/FamilyTable.jsx

@@ -25,7 +25,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
 
   return (
     <div
-      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow ${
+      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
         className || ""
       }`}
     >

src/components/Home/FullAccountDash.jsx

@@ -10,37 +10,37 @@ import { useSelector } from "react-redux";
 import HomeActivities from "./HomeActivities";
 
 export default function FullAccountDash(props) {
+  console.log("PROPS IN HOME->", props);
 
-    console.log("PROPS IN HOME->",props);
+  const trending = datas.datas;
+  const jobData = datas.datas; // api calls or cache
 
-    const trending = datas.datas;
-    const jobData =  datas.datas; // api calls or cache
-    
-    const userApi = new usersService();
+  const userApi = new usersService();
 
-    const {userDetails} = useSelector((state) => state?.userDetails)
+  const { userDetails } = useSelector((state) => state?.userDetails);
 
-    return (
-        <div>
-            <div className="home-page-wrapper">
-                <Hero className="mb-10"
-                      data={userDetails}
-                      bannerList={props.bannerList}
-                      nextDueTask={props.nextDueTask}
-                />
-                <HomeActivities className="mb-10"/>
-                {/*<UpdateTable className="mb-10"/>*/}
-                {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
-                {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
+  return (
+    <div>
+      <div className="home-page-wrapper">
+        <Hero
+          className="mb-10"
+          data={userDetails}
+          bannerList={props.bannerList}
+          nextDueTask={props.nextDueTask}
+        />
+        <HomeActivities className="mb-10" />
+        {/*<UpdateTable className="mb-10"/>*/}
+        {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
+        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
 
-                {/*<HomeTaskDisplay*/}
-                {/*    jobData={jobData}*/}
-                {/*    className="mb-10"*/}
-                {/*    bannerList={props.bannerList}*/}
-                {/*/>*/}
-            </div>
-        </div>
-    );
+        {/*<HomeTaskDisplay*/}
+        {/*    jobData={jobData}*/}
+        {/*    className="mb-10"*/}
+        {/*    bannerList={props.bannerList}*/}
+        {/*/>*/}
+      </div>
+    </div>
+  );
 }
 // /*
 //      <Layout>
@@ -53,10 +53,10 @@ export default function FullAccountDash(props) {
 //     className="mb-10"
 //     bannerList={props.bannerList}
 // />
-{/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+{
+  /*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
                 <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/}
+                <UpdateTable className="mb-10"/>*/
+}
 // </div>
 // </Layout>
-
-

src/components/Home/Hero.jsx

@@ -19,10 +19,10 @@ export default function Hero({ className, bannerList, nextDueTask }) {
     infinite: true,
     swipe: true,
   };
-  const sildeData =null;
+  const sildeData = null;
   const [addFavorite, setValue] = useState(false);
 
-  const {userDetails} = useSelector((state) => state?.userDetails)
+  const { userDetails } = useSelector((state) => state?.userDetails);
   const favoriteHandler = () => {
     if (!addFavorite) {
       setValue(true);
@@ -33,9 +33,9 @@ export default function Hero({ className, bannerList, nextDueTask }) {
     }
   };
 
-  let loginDate = userDetails?.last_login.split(' ')[0]
-  let {firstname, lastname, email, profile_pic} = userDetails
-  let userEmail = email.split('@')[0]
+  let loginDate = userDetails?.last_login.split(" ")[0];
+  let { firstname, lastname, email, profile_pic } = userDetails;
+  let userEmail = email.split("@")[0];
 
   return (
     <div
@@ -55,13 +55,13 @@ export default function Hero({ className, bannerList, nextDueTask }) {
             Welcome
           </h1>
           <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login :  {loginDate}
+            Last Login : {loginDate}
           </span>
         </div>
         {/* user */}
         <div className="flex items-center space-x-3">
           <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={profile_pic != '' ? profile_pic : heroUser} alt="" />
+            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
           </div>
           <div>
             <p className="text-xl tracking-wide font-bold antise text-white">
@@ -71,38 +71,35 @@ export default function Hero({ className, bannerList, nextDueTask }) {
           </div>
         </div>
         {/* countdown */}
-        { nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length &&
-          (
-            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
-              <div className="flex flex-col justify-between">
-                <p className="text-base text-white tracking-wide">Current Task</p>
-                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                  {nextDueTask.next_due.item_code}
-                </p>
-                <p className="text-base text-white tracking-wide">{nextDueTask.next_due.price} Naira</p>
-              </div>
-              <div className="w-[1px] h-full bg-white-opacity"></div>
-              <div className="flex flex-col justify-between">
-                <p className="text-base text-white tracking-wide">Next due in</p>
-                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-                  <CountDown lastDate={nextDueTask.next_due.due_date} />
-                </p>
-                <div className="text-base text-white tracking-wide flex gap-[23px]">
-                  <span>Hrs</span>
-                  <span>Min</span>
-                  <span>Sec</span>
-                </div>
+        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length && (
+          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
+            <div className="flex flex-col justify-between">
+              <p className="text-base text-white tracking-wide">Current Task</p>
+              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                {nextDueTask.next_due.item_code}
+              </p>
+              <p className="text-base text-white tracking-wide">
+                {nextDueTask.next_due.price} Naira
+              </p>
+            </div>
+            <div className="w-[1px] h-full bg-white-opacity"></div>
+            <div className="flex flex-col justify-between">
+              <p className="text-base text-white tracking-wide">Next due in</p>
+              <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+                {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
+                <CountDown lastDate={nextDueTask.next_due.due_date} />
+              </p>
+              <div className="text-base text-white tracking-wide flex gap-[23px]">
+                <span>Hrs</span>
+                <span>Min</span>
+                <span>Sec</span>
               </div>
             </div>
-          )
-        }
+          </div>
+        )}
         {/* action */}
         <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link
-            to="/mytask"
-            className="text-white text-base sm:block hidden"
-          >
+          <Link to="/mytask" className="text-white text-base sm:block hidden">
             <span className=" border-b dark:border-[#5356fb29]  border-white">
               {" "}
               View All Task(s)
@@ -111,9 +108,9 @@ export default function Hero({ className, bannerList, nextDueTask }) {
         </div>
       </div>
       <HomeSliders
-          settings={settings}
-          sideData={sildeData}
-          bannerList={bannerList}
+        settings={settings}
+        sideData={sildeData}
+        bannerList={bannerList}
       />
     </div>
   );

src/components/Home/HomeSliders.jsx

@@ -1,37 +1,26 @@
 import SliderCom from "../Helpers/SliderCom";
-import slider1 from "../../assets/images/slider-1.jpg";
-import slider2 from "../../assets/images/slider-2.jpg";
-import slider3 from "../../assets/images/slider-3.jpg";
 import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";
 
-
 export default function HomeSliders(props) {
-    console.log("BANNER LIST IN HomeSliders->",props.bannerList);
-    // debugger;
-    return (
-        <>
-            <div className="hero-slider relative 2xl:w-[600px] xl:w-[500px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
-                <div className="w-full">
-                    <SliderCom settings={props.settings}>
-                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
-                        {/*    <img src={slider1} alt="slider" className="w-full h-full" />*/}
-                        {/*</div>*/}
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                            <img src={slider2} alt="slider" className="w-full h-full" />
-                        </div>
-                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
-                        {/*    <img src={slider3} alt="slider" className="w-full h-full" />*/}
-                        {/*</div>*/}
-                        {props.bannerList?.length && props.bannerList.map((item, index) => (
-                            <div key={index} className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                                <HomeBannerOffersCard
-                                    itemData={item}
-                                />
-                            </div>
-                        ))}
-                    </SliderCom>
+  console.log("BANNER LIST IN HomeSliders->", props.bannerList);
+  // debugger;
+  return (
+    <>
+      <div className="hero-slider relative 2xl:w-[600px] xl:w-[500px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
+        <div className="w-full">
+          <SliderCom settings={props.settings}>
+            {props.bannerList?.length &&
+              props.bannerList.map((item, index) => (
+                <div
+                  key={index}
+                  className="item w-full h-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden"
+                >
+                  <HomeBannerOffersCard itemData={item} />
                 </div>
-            </div>
-        </>
-    );
+              ))}
+          </SliderCom>
+        </div>
+      </div>
+    </>
+  );
 }

src/components/Home/index.jsx

@@ -6,48 +6,51 @@ import { useSelector } from "react-redux";
 import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";
 
-
 export default function Home(props) {
+  console.log("PROPS IN HOME->", props);
 
-    console.log("PROPS IN HOME->",props);
+  let [nextDueTask, setNextDueTask] = useState({});
 
-    let [nextDueTask, setNextDueTask] = useState({})
+  const userApi = new usersService();
 
-    const userApi = new usersService();
+  const { userDetails } = useSelector((state) => state?.userDetails);
 
-    const {userDetails} = useSelector((state) => state?.userDetails)
+  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
-    const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+  // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
+  const getHomeDate = () => {
+    userApi
+      .getHomeDate()
+      .then((res) => {
+        if (res.status != 200 || res.internal_return < 0) {
+          return;
+        }
+        setNextDueTask(res.data);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
-    // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
-    const getHomeDate = () => {
-        userApi.getHomeDate().then(res => {
-            if(res.status != 200 || res.internal_return < 0){
-                return
-            }
-            setNextDueTask(res.data)
-        }).catch(error => {
-            console.log(error)
-        })
-    }
+  useEffect(() => {
+    getHomeDate();
+  }, []);
 
-    useEffect(()=>{
-        getHomeDate()
-    },[])
-
-    return (
-        <Layout>
-            <div className="home-page-wrapper">
-                {userDetails && userDetails?.account_type == "FAMILY" && (
-                    <FamilyDash commonHeadData={props.bannerList} />
-                )}
-                {userDetails && userDetails?.account_type == "FULL" && (
-                    <FullAccountDash  nextDueTask={nextDueTask} bannerList={props.bannerList} />
-
-                )}
-            </div>
-        </Layout>
-    );
+  return (
+    <Layout>
+      <div className="home-page-wrapper">
+        {userDetails && userDetails?.account_type == "FAMILY" && (
+          <FamilyDash commonHeadData={props.bannerList} />
+        )}
+        {userDetails && userDetails?.account_type == "FULL" && (
+          <FullAccountDash
+            nextDueTask={nextDueTask}
+            bannerList={props.bannerList}
+          />
+        )}
+      </div>
+    </Layout>
+  );
 }
 // /*
 //      <Layout>
@@ -60,10 +63,10 @@ export default function Home(props) {
 //     className="mb-10"
 //     bannerList={props.bannerList}
 // />
-{/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+{
+  /*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
                 <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/}
+                <UpdateTable className="mb-10"/>*/
+}
 // </div>
 // </Layout>
-
-

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -245,7 +245,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
               <div className="">
                 <p className="flex items-center tracking-wide">
-                  Interest: <b className="ml-1">{marketInt?.public_view}</b>
+                  Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
                 <p className="my-1">Expire: {expireIntDate}</p>

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -28,7 +28,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
         className || ""
       }`}
     >
@@ -45,7 +45,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                 <>
                   {MyJobList &&
                     MyJobList?.result_list &&
-                    MyJobList.result_list.length > 0 &&
+                    MyJobList.result_list.length > 0 ?
                     currentActiveJobList.map((value, index) => (
                       <tr
                         key={index}
@@ -112,7 +112,14 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                           </div>
                         </td>
                       </tr>
-                    ))}
+                    ))
+                    :
+                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                      <td className="p-2">
+                        No Active Task!
+                      </td>
+                    </tr>
+                    }
                 </>
               }
             </tbody>

src/components/MyJobs/MyJobTable.jsx

@@ -70,7 +70,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
         className || ""
       }`}
     >
@@ -102,7 +102,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                 <>
                   {MyJobList &&
                     MyJobList?.data?.result_list &&
-                    MyJobList.data?.result_list.length > 0 &&
+                    MyJobList.data?.result_list.length > 0 ?
                     currentJobList.map((value, index) => (
                       <tr
                         key={index}
@@ -181,7 +181,14 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                           </button>
                         </td>
                       </tr>
-                    ))}
+                    ))
+                    :
+                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                      <td className="p-2">
+                        No Jobs Avaliable!
+                      </td>
+                    </tr>
+                    }
                 </>
               ) : selectedCategory === "Explore" ? (
                 <></>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -25,7 +25,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
 
   return (
       <div
-        className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
+        className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
           className || ""
         }`}
       >
@@ -42,7 +42,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                   <>
                     {MyJobList &&
                       MyJobList?.result_list &&
-                      MyJobList.result_list.length > 0 &&
+                      MyJobList.result_list.length > 0 ?
                       currentActiveJobList.map((value, index) => (
                         <tr
                           key={index}
@@ -105,7 +105,14 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                             </button>
                           </td>
                         </tr>
-                      ))}
+                      ))
+                    :
+                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                      <td className="p-2">
+                        No Pending Task!
+                      </td>
+                    </tr>
+                    }
                   </>
                 }
               </tbody>

src/components/MyWallet/Balance.jsx

@@ -22,7 +22,7 @@ function Balance({wallet, coupon}) {
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                 {/* WALLET SECTION */}
                 <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                    <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow min-h-[520px]">
                         <div className='flex items-baseline justify-between'>
                             {/*<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>*/}
                             {/*<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>*/}

src/components/UserHeader/RecomendedSliders.jsx

@@ -102,7 +102,7 @@ export default function RecomendedSliders({ className,bannerData }) {
                     {bannerData.map((item, index) => (
                         <Link key={index} to={`/${item.link_path}`}>
                             <div className="item">
-                                <div className={`commonHeaderSliderItem ${item.short_style}`}>
+                                <div className={`commonHeaderSliderItem flex flex-col justify-between items-center ${item.short_style}`}>
                                     {/* title */}
                                     <div className="flex justify-center">
                                         <p className="text-base font-bold   text-dark-gray dark:text-white">

src/lib/localImgLoad.js

@@ -1,4 +1,2 @@
-export default function localImgLoad(location) {
-  const img = require(`../assets/${location}`);
-  return img;
-}
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad