Interest count data update

src/Routers.jsx

@@ -43,6 +43,7 @@ import AuthRedirect from "./views/AuthRedirect";
 import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
 import BlogPage from "./views/BlogPage";
 import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
+import OffersInterestPage from "./views/OffersInterestPage";
 
 export default function Routers() {
   return (
@@ -97,6 +98,7 @@ export default function Routers() {
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route exact path="/blog-page"  element={<BlogPage />} />
+          <Route exact path="/offer-interest"  element={<OffersInterestPage />} />
 
 
           <Route

src/components/Home/HomeSliders.jsx

@@ -22,8 +22,8 @@ export default function HomeSliders(props) {
                         {/*<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.map((item, index) => (
-                            <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        {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}
                                 />

src/components/Home/index.jsx

@@ -17,10 +17,7 @@ export default function Home(props) {
 
     const {userDetails} = useSelector((state) => state?.userDetails)
 
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA INDEX ----------------=====---------------------");
-        return 0;
-    }
+    const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
     // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
     const getHomeDate = () => {
@@ -42,7 +39,7 @@ export default function Home(props) {
         <Layout>
             <div className="home-page-wrapper">
                 {userDetails && userDetails?.account_type == "FAMILY" && (
-                    <FamilyDash commonHeadData={commonHeadData} />
+                    <FamilyDash commonHeadData={props.bannerList} />
                 )}
                 {userDetails && userDetails?.account_type == "FULL" && (
                     <FullAccountDash  nextDueTask={nextDueTask} bannerList={props.bannerList} />

src/components/MarketPlace/MainSection.jsx

@@ -3,7 +3,7 @@ import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
 export default function MainSection({ className, marketPlaceProduct }) {
-  const [tab, setTab] = useState("explore");
+  const [tab, setTab] = useState("all");
   const [products, setProducts] = useState(marketPlaceProduct);
   const tabHandler = (value) => {
     setTab(value);
@@ -29,15 +29,17 @@ export default function MainSection({ className, marketPlaceProduct }) {
           <div className="tab-item lg:mb-0 mb-5">
             <div className="md:flex md:space-x-8 space-x-2">
               <span
-                onClick={() => tabHandler("explore")}
+                onClick={() => tabHandler("all")}
                 className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                  tab === "explore"
+                  tab === "all"
                     ? "text-pink border-pink"
                     : " border-transparent"
                 }`}
               >
-                Explore
+                All
               </span>
+
+
               <span
                 onClick={() => tabHandler("artist")}
                 className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
@@ -78,6 +80,8 @@ export default function MainSection({ className, marketPlaceProduct }) {
               >
                 Game Assets
               </span>
+
+
             </div>
           </div>
 

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/JobActions/CurrentJobAction.jsx

@@ -2,15 +2,15 @@ import React from 'react'
 
 function CurrentJobAction() {
   return (
-    <div className=''>
-      <p className="my-3 py-1 text-base">
+    <div className='job-action'>
+      <p className="my-3 py-1 text-base active-owner">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
               <tbody>
-              <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                  <td className=" py-4">
+              <tr className=" border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                  <td className=" py-1">
                       <div className="flex space-x-2 items-center w-full">
                           <div className="flex flex-col flex-[0.9]">
-                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                              <h1 className="text-xl text-dark-gray dark:text-white">
                                   Waiting for the completion message from the client before you can approve.
                               </h1>
                           </div>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -33,25 +33,28 @@ function CurrentTaskAction({jobDetails}) {
     }
 
   return (
-    <div className=''>
+    <div className='job-action'>
 
-          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 active-worker">
               <tbody>
-              <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                  <td className=" py-4">
+              <tr className=" border-b">
+                  <td>
+
                       <div className="flex space-x-2 items-center w-full">
-                          <div className="flex flex-col flex-[0.9]">
-                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                  If you have completed this task and ready for review and acceptance, click "Set Status" button.
-                              </h1>
-                          </div>
+                          <h1 className="text-xl text-dark-gray dark:text-white">
+                              I completed this task and ready for review and acceptance.
+                          </h1>
+                          {/*<div className="flex flex-col flex-[0.9]">*/}
+
+                          {/*</div>*/}
                       </div>
                   </td>
-
-                  <td className="text-right py-4 px-2">
+              </tr>
+              <tr>
+                  <td>
                       <div className="flex justify-center items-center">
-                          <button onClick={popUpHandler} type="button" className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                              Set Status
+                          <button onClick={popUpHandler} type="button" className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                              Send of Review
                           </button>
                       </div>
                   </td>

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -2,10 +2,32 @@ import React from 'react'
 
 function PastDueJobAction() {
   return (
-    <div className=''>
-      <p className="my-3 py-1 text-base">
-        Waiting for the completion message from the client before you can approve. Owner True & PastDue
-      </p>
+    <div className='job-action'>
+
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 owner-pastdue">
+            <tbody>
+            <tr className="border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                <td>
+                    <div className="flex space-x-2 items-center w-full">
+                        <div className="flex flex-col flex-[0.9]">
+                            <h1 className="text-xl text-dark-gray dark:text-white">
+                                Time allocated has passed
+                            </h1>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <div className="flex justify-center items-center">
+                        <button type="button" className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                            Cancel or Extend Timeline
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
     </div>
   )
 }

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -2,10 +2,32 @@ import React from 'react'
 
 function PastDueTaskAction() {
   return (
-    <div className=''>
-      <p className="my-3 py-1 text-base">
-        Waiting for the completion message from the client before you can approve. Worker True & PastDue
-      </p>
+    <div className='job-action'>
+
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 worker-pastdue">
+            <tbody>
+            <tr className=" border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                <td>
+                    <div className="flex space-x-2 items-center w-full">
+                        <div className="flex flex-col flex-[0.9]">
+                            <h1 className="text-xl text-dark-gray dark:text-white">
+                                You have missed the allocated time
+                            </h1>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <div className="flex justify-center items-center">
+                        <button type="button" className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                            Request Extension
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
     </div>
   )
 }

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -2,9 +2,32 @@ import React from 'react'
 
 function ReviewJobAction() {
   return (
-    <div className=''>
+    <div className='job-action'>
       <p className="my-3 py-1 text-base">
-        Waiting for the completion message from the client before you can approve. Owner True & Review Job
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 review-owner">
+              <tbody>
+              <tr className="border-b dark:border-[#5356fb29]">
+                  <td className=" py-1">
+                      <div className="flex space-x-2 items-center w-full">
+                          <div className="flex flex-col flex-[0.9]">
+                              <h1 className="text-xl text-dark-gray dark:text-white">
+                                  This Job is Ready for your review
+                              </h1>
+                          </div>
+                      </div>
+                  </td>
+              </tr>
+              <tr>
+                  <td>
+                      <div className="flex justify-center items-center">
+                          <button  type="button" className="w-120 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                             Reject or Accept
+                          </button>
+                      </div>
+                  </td>
+              </tr>
+              </tbody>
+          </table>
       </p>
     </div>
   )

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 function ReviewTaskAction() {
   return (
-    <div className=''>
+    <div className='job-action'>
       <p className="my-3 py-1 text-base">
         Waiting for the completion message from the client before you can approve. Worker True & Review Job
       </p>

src/components/MyCoupons/CouponTable.jsx

@@ -0,0 +1,67 @@
+import React, {useState} from 'react'
+
+//import PaginatedList from '../../Pagination/PaginatedList'
+import PaginatedList from '../Pagination/PaginatedList';
+import { handlePagingFunc } from '../Pagination/HandlePagination';
+
+function CouponTable({coupon}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+    const handlePagination = (e) => {
+        handlePagingFunc(e,setCurrentPage)
+    }
+
+    return (
+        <div className='flex flex-col justify-between h-full'>
+            <table className="wallet-activity w-full table-auto border-collapse text-left">
+                <thead className='border-b-2'>
+                <tr className='text-slate-600'>
+                    <th className="p-2">Coupon</th>
+                    {/*<th className="p-2">Description</th>*/}
+                    {/*<th className="p-2">Amount</th>*/}
+                    <th className="p-2">Status</th>
+                </tr>
+                </thead>
+                {coupon.data.length ?
+                    (
+                        <tbody>
+                        {currentCoupon.map((item, index) => (
+                            <tr key={index} className='text-slate-500'>
+                                <td className="p-2">{item.added} <br /> {item.code} <br />{item.amount}</td>
+                                {/*<td className="p-2"></td>*/}
+                                {/*<td className="p-2"></td>*/}
+                                <td className="p-2">{item.status}</td>
+                            </tr>
+                        ))}
+                        </tbody>
+                    )
+                    :
+                    coupon.error ?
+                        (
+                            <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+                            </tr>
+                            </tbody>
+                        )
+                        :
+                        <tbody>
+                        <tr className='text-slate-500'>
+                            <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+                        </tr>
+                        </tbody>
+                }
+            </table>
+
+            {/* PAGINATION BUTTON */}
+            <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+            {/* END OF PAGINATION BUTTON */}
+        </div>
+    )
+}
+
+export default CouponTable

src/components/MyCoupons/MyCoupons.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react'
+import Layout from "../Partials/Layout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import CouponTable from "./CouponTable";
+import usersService from '../../services/UsersService'
+
+export default function MyCoupons() {
+    const apiCall = new usersService()
+    let [couponHistory, setCouponHistory] = useState({ // FOR COUPON HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    //FUNCTION TO GET COUPON HISTORY
+    const getCouponHistory = ()=>{
+        apiCall.getCouponHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setCouponHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setCouponHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setCouponHistory(prev => ({...prev, loading: false, error: true}))
+        })
+    }
+
+    useEffect(()=>{
+        getCouponHistory()
+    }, [])
+
+    return (
+        <>
+            <Layout>
+                <div className="my-wallet-wrapper w-full mb-10">
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+
+                                Coupons
+
+                            </h1>
+                        </div>
+
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                    <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+
+                    {/* COUPON 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 max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                            {couponHistory.loading ?
+                                <LoadingSpinner size='16' color='sky-blue' />
+                                :
+                                <CouponTable coupon={couponHistory} />
+                            }
+                        </div>
+                    </div>
+                    {/* END OF COUPON SECTION */}
+
+                </div>
+                </div>
+            </Layout>
+        </>
+    );
+}

src/components/MyWallet/Balance.jsx

@@ -8,13 +8,24 @@ import LoadingSpinner from '../Spinners/LoadingSpinner'
 function Balance({wallet, coupon}) {
     return (
         <div className="content-wrapper">
+            {/* heading */}
+            <div className="sm:flex justify-between items-center mb-6">
+                <div className="mb-5 sm:mb-0">
+                    <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                        Wallet
+                    </h1>
+                </div>
+                <div className="slider-btns flex space-x-4">
+
+                </div>
+            </div>
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                 {/* WALLET SECTION */}
-                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
+                <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='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>
+                            {/*<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>*/}
                         </div>
                         {/* wallet balance */}
                         {wallet.loading ?
@@ -26,7 +37,7 @@ function Balance({wallet, coupon}) {
                             <div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
                                 <div className='balance-info'>
                                     <p className='py-2'></p>
-                                    <span className='text-base'>{item.description}</span>
+                                    <span className='text-xl text-dark-gray dark:text-white'>{item.description}</span>
                                     <p className='text-base text-slate-500'>{item.symbol}</p>
                                 </div>
                                 <div className='balance-info'>
@@ -43,10 +54,10 @@ function Balance({wallet, coupon}) {
                                 {
                                     item.action_type != 'AC_AD_FD_ONLY' ?
                                         <Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
-                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>Transfer</Link>:''
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4 lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
                                 }
                                 <Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
-                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>+Add Credit</Link>
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4 lg:text-xl text-lg font-bold text-white'>+Add Credit</Link>
                             </div>
                         </div>
                         ))
@@ -73,22 +84,22 @@ function Balance({wallet, coupon}) {
 
             </div>
 
-            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+            {/*<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>*/}
 
-                {/* COUPON SECTION */}
-                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                        <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
-                        {coupon.loading ?
-                            <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <CouponTable coupon={coupon} />
-                        }
-                    </div>
-                </div>
-                {/* END OF COUPON SECTION */}
+            {/*    /!* COUPON SECTION *!/*/}
+            {/*    <div className="lg:w-3/4 w-full mb-10 lg:mb-0">*/}
+            {/*        <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">*/}
+            {/*            <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>*/}
+            {/*            {coupon.loading ?*/}
+            {/*                <LoadingSpinner size='16' color='sky-blue' />*/}
+            {/*                :*/}
+            {/*                <CouponTable coupon={coupon} />*/}
+            {/*            }*/}
+            {/*        </div>*/}
+            {/*    </div>*/}
+            {/*    /!* END OF COUPON SECTION *!/*/}
 
-            </div>
+            {/*</div>*/}
         </div>
       )
 }

src/components/UserHeader/CommonHead.jsx

@@ -1,34 +1,35 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import RecomendedSliders from "./RecomendedSliders";
 
 export default function CommonHead({ className,commonHeadData }) {
-    const vvv=  commonHeadData();
-    console.log("UUUUUUUU-",vvv);
     return (
         <div
-            className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-9 p-4 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
+            className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
                 className || ""
             }`}
         >
-            <div className="lg:w-8/12 w-full mb-8 lg:mb-0">
-                <h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
-                    This is common head which will appear as needed , will take many shape
-                </h1>
-                <p className="text-base text-thin-light-gray tracking-wide">
-                    some space for extra texts here
-                </p>
-            </div>
-            <div className="flex-1 flex lg:justify-end">
-                <div className="flex items-center space-x-5">
-                    <Link
-                        to="/mytask"
-                        className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                       View Task
-                    </Link>
+            {commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData}  /> }
+            {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
+            {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
+            {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}
+            {/*    /!*</h1>*!/*/}
+            {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
+            {/*    /!*    some space for extra texts here*!/*/}
+            {/*    /!*</p>*!/*/}
+            {/*   */}
+            {/*</div>*/}
+            {/*<div className="flex-1 flex lg:justify-end">*/}
+            {/*    <div className="flex items-center space-x-5">*/}
+            {/*        <Link*/}
+            {/*            to="/mytask"*/}
+            {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
+            {/*        >*/}
+            {/*           View Task*/}
+            {/*        </Link>*/}
 
-                </div>
-            </div>
+            {/*    </div>*/}
+            {/*</div>*/}
         </div>
     );
 }

src/components/UserHeader/RecomendedSliders.jsx

@@ -0,0 +1,132 @@
+import React, { useRef } from "react";
+import top from "../../assets/images/top-buyer-1png.png";
+import top2 from "../../assets/images/top-buyer-2.png";
+import top3 from "../../assets/images/top-buyer-3.png";
+import top4 from "../../assets/images/top-buyer-4.png";
+import Icons from "../Helpers/Icons";
+import SliderCom from "../Helpers/SliderCom";
+import { Link } from "react-router-dom";
+
+export default function RecomendedSliders({ className,bannerData }) {
+    const settings = {
+        arrows: false,
+        dots: false,
+        infinite: bannerData.length > 4 ? true : false,
+        autoplay: true,
+        slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
+        slidesToScroll: 1,
+        responsive: [
+            {
+                breakpoint: 426,
+                settings: {
+                    infinite: bannerData.length > 2 ? true : false,
+                    slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
+                    slidesToScroll: 1,
+                },
+            },
+        ],
+    };
+    const sellSlider = useRef(null);
+    const buySlider = useRef(null);
+    const prevHandler = (value) => {
+        if (value === "sell") {
+            sellSlider.current.slickPrev();
+        }
+        if (value === "buy") {
+            buySlider.current.slickPrev();
+        }
+    };
+    const nextHandler = (value) => {
+        if (value === "sell") {
+            sellSlider.current.slickNext();
+        }
+        if (value === "buy") {
+            buySlider.current.slickNext();
+        }
+    };
+    return (
+        <>
+            {/*<div className="heading flex justify-between items-center mb-4">*/}
+            {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
+            {/*        Top Seller*/}
+            {/*    </h1>*/}
+            {/*    <div className="slider-btns flex space-x-4">*/}
+            {/*        <button*/}
+            {/*            onClick={() => nextHandler("sell")}*/}
+            {/*            type="button"*/}
+            {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
+            {/*        >*/}
+            {/*            <Icons name="arrows" />*/}
+            {/*        </button>*/}
+            {/*        <button*/}
+            {/*            onClick={() => prevHandler("sell")}*/}
+            {/*            type="button"*/}
+            {/*            className="transform rotate-180"*/}
+            {/*        >*/}
+            {/*            <div className="  text-dark-gray dark:text-white">*/}
+            {/*                <svg*/}
+            {/*                    width="11"*/}
+            {/*                    height="19"*/}
+            {/*                    viewBox="0 0 11 19"*/}
+            {/*                    fill="none"*/}
+            {/*                    xmlns="http://www.w3.org/2000/svg"*/}
+            {/*                >*/}
+            {/*                    <path*/}
+            {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
+            {/*                        stroke="url(#paint0_linear_220_23410)"*/}
+            {/*                        strokeWidth="2"*/}
+            {/*                        strokeLinecap="round"*/}
+            {/*                        strokeLinejoin="round"*/}
+            {/*                    />*/}
+            {/*                    <defs>*/}
+            {/*                        <linearGradient*/}
+            {/*                            id="paint0_linear_220_23410"*/}
+            {/*                            x1="9.09766"*/}
+            {/*                            y1="1.1499"*/}
+            {/*                            x2="-4.2474"*/}
+            {/*                            y2="7.96749"*/}
+            {/*                            gradientUnits="userSpaceOnUse"*/}
+            {/*                        >*/}
+            {/*                            <stop stopColor="#F539F8" />*/}
+            {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
+            {/*                            <stop offset="1" stopColor="#5356FB" />*/}
+            {/*                        </linearGradient>*/}
+            {/*                    </defs>*/}
+            {/*                </svg>*/}
+            {/*            </div>*/}
+            {/*        </button>*/}
+            {/*    </div>*/}
+            {/*</div>*/}
+            <div className="slider-content">
+                <SliderCom settings={settings} selector={sellSlider}>
+                    {bannerData.map((item, index) => (
+                        <Link key={index} to={`/${item.link_path}`}>
+                            <div className="item">
+                                <div className={`commonHeaderSliderItem ${item.short_style}`}>
+                                    {/* title */}
+                                    <div className="flex justify-center">
+                                        <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                            {item.short_title}
+                                        </p>
+                                    </div>
+                                    {/* username */}
+                                    <div className="flex justify-center mb-1">
+                                        <p className="text-xs text-thin-light-gray">
+                                            {item.short_description}
+                                        </p>
+                                    </div>
+                                    {/* items */}
+                                    <div className="flex justify-center">
+                                        <div className="flex space-x-1 items-center text-purple text-xs">
+                                            <span>{item.short_button_text}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </Link>
+                    ))}
+                </SliderCom>
+            </div>
+        </>
+    );
+}

src/index.css

@@ -9,6 +9,15 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
+
+
+
+.job-action{
+  background-color: lightgoldenrodyellow;
+  height: 100px;
+  border-radius: 15px;
+}
+
 .msg_box{
   background-color: aliceblue;
   margin: 5px;
@@ -34,6 +43,29 @@
   width: 100%;
   text-align: center;
 }
+.commonHeaderSliderItem{
+  background-color: aliceblue;
+  border-radius: 10px;
+  margin: 0px 5px 0px 5px;
+  height: 95px;
+  padding: 5px;
+}
+
+.short_style{
+  background-color: transparent;
+}
+.lr{
+  background-color: #e1cace;
+}
+.lg{
+  background-color: #a7dca7;
+}
+.lb{
+  background-color: #b3ccd7;
+}
+.ly{
+  background-color: #eeee67;
+}
 .offer-slide-item{
   background: rgb(2,0,36);
   background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);

src/middleware/AuthRoute.jsx

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { updateUserDetails } from "../store/UserDetails";
 import { updateJobs } from "../store/jobLists";
 import { updateUserJobList } from "../store/userJobList";
+import { commonHeadBanner } from "../store/CommonHeadBanner";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -120,6 +121,19 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMarketActiveJobList();
   }, [apiCall, dispatch]);
 
+  //FUNCTION TO GET COMMON HEAD DATA
+  useEffect(()=>{
+    apiCall.getHeroJBanners().then((res) => {
+      if (res.data.internal_return < 0) {
+        return;
+      }
+      dispatch(commonHeadBanner(res.data));
+    })
+    .catch((error) => {
+      console.log('ERROR ', error)
+    });
+  },[])
+
   return isLogin.loading ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
   ) : // Stills needs fixing

src/store/CommonHeadBanner.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  commonHeadBanner: {}
+};
+
+export const commonHeadBannerSlice = createSlice({
+  name: "commonHeadBanner",
+  initialState,
+  reducers: {
+    commonHeadBanner: (state,action) => {
+      state.commonHeadBanner = {...action.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { commonHeadBanner } = commonHeadBannerSlice.actions;
+
+export default commonHeadBannerSlice.reducer;

src/store/store.js

@@ -5,6 +5,7 @@ import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
 import tableReloadReducer from "./TableReloads";
 import userJobListReducer from './userJobList'
+import commonHeadBannerReducer from './CommonHeadBanner'
 
 export default configureStore({
   reducer: {
@@ -12,6 +13,7 @@ export default configureStore({
     userDetails: userDetailReducer,
     jobLists: jobReducer,
     tableReload: tableReloadReducer,
-    userJobList: userJobListReducer
+    userJobList: userJobListReducer,
+    commonHeadBanner: commonHeadBannerReducer
   },
 });

src/views/BlogPage.jsx

@@ -1,15 +1,13 @@
 import React, { useContext, useState, useEffect } from "react";
 import BlogItem from "../components/Blogs";
+import { useSelector } from "react-redux";
 
 export default function BlogPage() {
-    const commonHeadData = () => {
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    };
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
     return (
         <>
-            <BlogItem  commonHeadData={commonHeadData} />
+            <BlogItem  commonHeadData={commonHeadBanner.result_list} />
         </>
     );
 }

src/views/HomePages.jsx

@@ -1,29 +1,17 @@
 import React, {useState, useEffect} from 'react'
 import Home from "../components/Home";
 import usersService from "../services/UsersService";
+
+import { useSelector } from 'react-redux';
+
 export default function HomePages() {
 
-   // const [marketActiveJobList, setMarketActiveJobList] = useState([]);
-    const [bannerList, setBannerList] = useState([]);
-    const api = new usersService();
-
-    const getHeroJBannersList = async () => {
-        try {
-            const res = await api.getHeroJBanners();
-           // console.log("BANNERS->",res.data);
-            setBannerList(res.data?.result_list);
-        } catch (error) {
-            console.log("Error getting BANNERS....");
-        }
-    };
-    useEffect(() => {
-        getHeroJBannersList();
-    }, []);
+  const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
   return (
     <>
       <Home
-          bannerList={bannerList}
+          bannerList={commonHeadBanner?.result_list}
       />
     </>
   );

src/views/MarketPlacePage.jsx

@@ -1,16 +1,15 @@
 import MarketPlace from "../components/MarketPlace";
 
+import { useSelector } from "react-redux";
+
 export default function MarketPlacePage() {
 
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
   return (
     <>
       <MarketPlace
-          commonHeadData={commonHeadData} />
+          commonHeadData={commonHeadBanner?.result_list} />
     </>
   );
 }

src/views/MyActiveJobsPage.jsx

@@ -2,12 +2,10 @@ import React, { useContext,useState, useEffect } from "react";
 import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
 import MyActiveJobs from "../components/MyActiveJobs";
+import { useSelector } from "react-redux";
 
 export default function MyActiveJobsPage() {
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 //TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
@@ -28,7 +26,7 @@ export default function MyActiveJobsPage() {
         <>
             <MyActiveJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner.result_list}
             />
         </>
     );

src/views/MyCouponPage.jsx

@@ -1,10 +1,11 @@
 import React from "react";
-import WalletRoutes from "../components/MyWallet/Wallet";
+//import WalletRoutes from "../components/MyWallet/Wallet";
+import MyCoupons from "../components/MyCoupons/MyCoupons";
 
 export default function MyCouponPage() {
     return (
         <>
-            <WalletRoutes />
+            <MyCoupons />
         </>
     );
 }

src/views/MyJobsPage.jsx

@@ -7,10 +7,7 @@ import MyJobs from "../components/MyJobs";
 import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
-  const commonHeadData = () => {
-    console.log("COMMON HEAD DATA ----------------=====---------------------");
-    return 0;
-  };
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
   const {userJobList} = useSelector((state) => state.userJobList)
   
@@ -38,7 +35,7 @@ export default function MyJobsPage() {
   // debugger;
   return (
     <>
-      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadData} />
+      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadBanner.result_list} />
     </>
   );
 }

src/views/MyPastDueJobsPage.jsx

@@ -3,12 +3,10 @@ import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
 //import MyActiveJobs from "../components/MyActiveJobs";
 import MyPastDueJobs from "../components/MyActiveJobs/MyPastDueJobs";
+import { useSelector } from "react-redux";
 
 export default function MyPastDueJobsPage() {
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 //TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
@@ -29,7 +27,7 @@ export default function MyPastDueJobsPage() {
         <>
             <MyPastDueJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner?.result_list}
             />
         </>
     );

src/views/MyPendingJobsPage.jsx

@@ -3,12 +3,10 @@ import usersService from "../services/UsersService";
 //import MyJobs from "../components/MyJobs";
 import MyActiveJobs from "../components/MyActiveJobs";
 import MyPendingJobs from "../components/MyPendingJobs";
+import { useSelector } from "react-redux";
 
 export default function MyPendingJobsPage() {
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 
@@ -29,7 +27,7 @@ export default function MyPendingJobsPage() {
         <>
             <MyPendingJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner.result_list}
             />
         </>
     );

src/views/MyReviewDueJobsPage.jsx

@@ -1,12 +1,10 @@
 import React, { useContext,useState, useEffect } from "react";
 import usersService from "../services/UsersService";
 import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs";
+import { useSelector } from "react-redux";
 
 export default function MyReviewDueJobsPage() {
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
-    }
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
     const getMyJobList = async () => {
@@ -26,7 +24,7 @@ export default function MyReviewDueJobsPage() {
         <>
             <MyReviewDueJobs
                 MyJobList={MyJobList}
-                commonHeadData={commonHeadData}
+                commonHeadData={commonHeadBanner.result_list}
             />
         </>
     );

src/views/MyTaskPage.jsx

@@ -8,6 +8,8 @@ import { useSelector } from "react-redux";
 export default function MyTaskPage() {
   const { myTaskTable } = useSelector((state) => state.tableReload);
 
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+
   const [MyActiveJobList, setMyActiveJobList] = useState({
     loading: true,
     status: false,
@@ -15,10 +17,7 @@ export default function MyTaskPage() {
   });
   const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
   const api = new usersService();
-  const commonHeadData = () => {
-    console.log("COMMON HEAD DATA ----------------=====---------------------");
-    return 0;
-  };
+
   const getMyActiveJobList = async () => {
     setMyActiveJobList({ loading: true, status: false, data: [] });
     try {
@@ -53,7 +52,7 @@ export default function MyTaskPage() {
     <MyTasks
       ActiveJobList={MyActiveJobList}
       MyActiveOffersList={MyActiveOffersList}
-      commonHeadData={commonHeadData}
+      commonHeadData={commonHeadBanner?.result_list}
     />
   );
 }

src/views/OffersInterestPage.jsx

@@ -0,0 +1,13 @@
+import React, { useContext, useState, useEffect } from "react";
+import BlogItem from "../components/Blogs";
+import { useSelector } from "react-redux";
+
+export default function OffersInterestPage() {
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+
+    return (
+        <>
+            <BlogItem  commonHeadData={commonHeadBanner.result_list} />
+        </>
+    );
+}