faq content add from API

src/Routers.jsx

@@ -44,6 +44,7 @@ import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
 import BlogPage from "./views/BlogPage";
 import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
 import OffersInterestPage from "./views/OffersInterestPage";
+import ManageInterestOfferPage from './views/ManageInterestOfferPage'
 
 export default function Routers() {
   return (
@@ -99,6 +100,7 @@ export default function Routers() {
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route exact path="/blog-page"  element={<BlogPage />} />
           <Route exact path="/offer-interest"  element={<OffersInterestPage />} />
+          <Route exact path="/manage-offer"  element={<ManageInterestOfferPage />} />
 
 
           <Route

src/components/Cards/HomeBannerOffersCard.jsx

@@ -27,7 +27,7 @@ export default function HomeBannerOffersCard(props) {
         <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}</>
+              <span className="heroSilderTitle">{props.itemData.title}</span>
             </h1>
           </div>
           {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}

src/components/Helpers/Accordion.jsx

@@ -10,7 +10,7 @@ export default function Accordion({ datas }) {
     <>
       <div className="accordion-item overflow-hidden relative z-[1]">
         <div
-          className="accordion-title-bar flex items-center space-x-3 py-5 border-b  border-light-purple dark:border-[#5356fb29] "
+          className="accordion-title-bar flex items-center space-x-3 py-5 border-b  border-light-purple dark:border-[#5356fb29] cursor-pointer"
           onClick={accordionHandler}
         >
           <div className="accordion-title-icon relative">
@@ -36,7 +36,7 @@ export default function Accordion({ datas }) {
             <div className="w-[3px] h-auto bg-purple rounded-[28px]"></div>
             <div className="flex-1">
               <p className="text-base text-thin-light-gray tracking-wide">
-                {datas.content}
+                {datas.msg}
               </p>
             </div>
           </div>

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

@@ -68,13 +68,13 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${
             inputBg ? inputBg : "bg-[#FAFAFA]"
           } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}

src/components/History/index.jsx

@@ -241,7 +241,7 @@ export default function History() {
                 </div>
                 {/* END OF RECENT ACTIVITY SECTION */}
             </div>
-            <HistoryTable />
+            {/*<HistoryTable />*/}
           </div>
         </div>
       </Layout>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -250,7 +250,7 @@ function ActiveJobs(props) {
 
   return (
     <Layout>
-      <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
+      <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
         {/* job title */}
         <div className="w-full md:w-8/12">
           <div className="w-full flex justify-start space-x-3 items-start">
@@ -280,8 +280,8 @@ function ActiveJobs(props) {
             <p className="w-full text-base text-right text-sky-blue">
               {props.details.job_to && props.details.job_to}
             </p>
-            <div className="text-base text-slate-700 dark:text-black tracking-wide">
-              <p className="font-semibold text-black">Description: </p>
+            <div className="text-base text-slate-700 dark:text-white tracking-wide">
+              <p className="font-semibold text-black dark:text-white">Description: </p>
               <p className="p-2 border border-sky-blue">
                 {props.details?.description && props.details.description}
               </p>
@@ -295,12 +295,12 @@ function ActiveJobs(props) {
           <p className="text-base text-sky-blue">Delivery Detail</p>
           {passDue ? (
             <div className="my-1">
-              <p className="text-base text-slate-700 dark:text-black">
+              <p className="text-base text-slate-700">
                 <span className="font-semibold">Due: </span>
                 {props.details?.delivery_date &&
                   props.details.delivery_date.split(" ")[0]}
               </p>
-              <p className="py-2 text-base text-slate-700 dark:text-black">
+              <p className="py-2 text-base text-slate-700">
                 {props.details?.delivery_date &&
                   props.details.delivery_date.split(" ")[1]}
               </p>
@@ -309,10 +309,10 @@ function ActiveJobs(props) {
             <div className="my-1 flex items-start gap-3">
               <p className="font-semibold">Due: </p>
               <div className="flex flex-col justify-between">
-                <p className="text-base text-slate-700 dark:text-black tracking-wide">
+                <p className="text-base text-slate-700 tracking-wide">
                   <CountDown lastDate={props.details.delivery_date} />
                 </p>
-                <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
+                <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
                   <span>Hrs</span>
                   <span>Min</span>
                   <span>Sec</span>
@@ -321,15 +321,15 @@ function ActiveJobs(props) {
             </div>
           )}
 
-          <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
-            <span className="font-semibold text-black">Duration: </span>
+          <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+            <span className="font-semibold text-black dark:text-white">Duration: </span>
             <span className="">
               {props.details?.timeline_days && props.details.timeline_days}{" "}
               day(s)
             </span>
           </div>
-          <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
-            <span className="font-semibold text-black">No: </span>
+          <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+            <span className="font-semibold text-black dark:text-white">No: </span>
             <span className="">
               {props.details?.contract && props.details.contract}
             </span>
@@ -338,7 +338,7 @@ function ActiveJobs(props) {
         {/* end of job details */}
       </div>
 
-      <div className="my-4 py-[20px] bg-white px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+      <div className="my-4 py-[20px] bg-white dark:bg-black px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
         <div className="w-full lg:w-1/2">
           <div className="">
             <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
@@ -358,7 +358,7 @@ function ActiveJobs(props) {
                 <button
                   name="message"
                   onClick={(e) => setTab(e.target.name)}
-                  className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
                     tab == "message" ? "border-sky-blue" : "border-slate-300"
                   } tracking-wide transition duration-200`}
                 >
@@ -367,7 +367,7 @@ function ActiveJobs(props) {
                 <button
                   name="files"
                   onClick={(e) => setTab(e.target.name)}
-                  className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
                     tab == "files" ? "border-sky-blue" : "border-slate-300"
                   }  tracking-wide transition duration-200`}
                 >
@@ -376,7 +376,7 @@ function ActiveJobs(props) {
               </div>
               {tab == "message" ? (
                 <textarea
-                  className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300 outline-none"
+                  className="p-4 w-full h-[300px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
                   // rows="10"
                   style={{ resize: "none" }}
                   name="message"
@@ -498,7 +498,7 @@ function ActiveJobs(props) {
         {/* MESSAGE SECTION */}
         <div className="w-full lg:w-1/2">
           <div className="flex justify-between items-center gap-5">
-            <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">
+            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
               Message
             </p>
             <button

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 
 function CurrentJobAction() {
   return (
-    <div className='job-action'>
+    <div className='job-action bg-white dark:bg-black'>
       <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">
+          <table className="w-full text-sm text-left text-gray-500">
               <tbody>
               <tr>
                   <td>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -60,9 +60,9 @@ function CurrentTaskAction({jobDetails}) {
     }
 
   return (
-    <div className='job-action'>
+    <div className='job-action bg-white dark:bg-black'>
 
-          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 active-worker">
+          <table className="w-full text-sm text-left text-gray-500 active-worker">
               <tbody>
               <tr>
                   <td>

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -101,9 +101,9 @@ function PastDueJobAction({jobDetails}) {
     }
 
   return (
-    <div className='job-action'>
+    <div className='job-action bg-white dark:bg-black'>
 
-        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 owner-pastdue">
+        <table className="w-full text-sm text-left text-gray-500 owner-pastdue">
             <tbody>
             <tr>
                 <td>

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 
 function PastDueTaskAction() {
   return (
-    <div className='job-action'>
+    <div className='job-action bg-white dark:bg-black'>
 
-        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 worker-pastdue">
+        <table className="w-full text-sm text-left text-gray-500 worker-pastdue">
             <tbody>
             <tr>
                 <td>

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -90,9 +90,9 @@ function ReviewJobAction({jobDetails}) {
         })
     }
   return (
-    <div className='job-action'>
+    <div className='job-action bg-white dark:bg-black'>
       <div className="my-3 py-1 text-base">
-          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 review-owner">
+          <table className="w-full text-sm text-left text-gray-500 review-owner">
               <tbody>
               <tr>
                   <td>

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

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

src/components/MyWallet/WalletComponent/ReferralTable.jsx

@@ -15,7 +15,7 @@ function ReferralTable({history}) {
     }
 
   return (
-    <div className='flex flex-col justify-between h-full'>
+    <div className='flex flex-col justify-between min-h-[420px] overflow-x-auto'>
         <table className="referral-list w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -0,0 +1,210 @@
+import React, { useState } from "react";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import { useNavigate } from "react-router-dom";
+
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+
+import OthersInterestedTable from "./OthersInterestedTable";
+
+export default function ManageInterestOffer(props) {
+    const navigate = useNavigate()
+
+    const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+    const handlePagination = (e) => {
+        handlePagingFunc(e, setCurrentPage);
+    };
+
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <div className="notification-page w-full mb-10">
+                <div className="notification-wrapper w-full">
+                    {/* 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">
+                                <span className={`${selectTab === "today" ? "block" : "hidden"}`}>Manage Offer Interest</span>
+                            </h1>
+                        </div>
+
+                    </div>
+
+                    {/* manage offer section */}
+                    <div className="w-full mb-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+                        {/* <div className="w-full flex justify-start space-x-3 items-center">
+                            <button
+                            type="button"
+                            className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+                            onClick={() =>
+                                navigate(props.offerDetails.pathname, { replace: true })
+                            }
+                            >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="35"
+                                height="35"
+                                viewBox="0 0 24 24"
+                                fill="skyblue"
+                            >
+                                <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                            </svg>
+                            </button>
+                            <h1 className="text-sm lg:text-xl font-bold text-sky-blue dark:text-white tracking-wide">
+                            {props.offerDetails?.offer_code && props.offerDetails.offer_code}
+                            </h1>
+                        </div> */}
+
+                        <div className="my-2 w-full md:grid gap-5 grid-cols-3">
+                            {/* Detail section */}
+                            <div className="w-full mb-5 lg:mb-0 col-span-2">
+                                <div className="w-full flex justify-start space-x-3 items-center">
+                                    <button
+                                    type="button"
+                                    className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+                                    onClick={() =>
+                                        navigate('/offer-interest', { replace: true })
+                                    }
+                                    >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="35"
+                                        height="35"
+                                        viewBox="0 0 24 24"
+                                        fill="skyblue"
+                                    >
+                                        <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                                    </svg>
+                                    </button>
+                                    <h1 className="text-sm lg:text-xl font-bold text-sky-blue dark:text-white tracking-wide">
+                                    {props.offerDetails?.offer_code && props.offerDetails.offer_code}
+                                    </h1>
+                                </div>
+                                <h1 className="my-5 text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide border">
+                                {props.offerDetails?.title}
+                                </h1>
+                                <div className="flex items-center">
+                                    <div className="w-3/4">
+                                        <div className="my-5 flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy name</span>
+                                        </div>
+                                        <div className="my-5 flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy Date</span>
+                                        </div>
+                                        <div className="my-5 flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
+                                        </div>
+                                        <div className="my-5 flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
+                                        </div>
+                                        <div className="my-5 flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
+                                        </div>
+                                        <div className="my-5 flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <span className="w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
+                                            <span className="text-sm font-bold text-dark-gray dark:text-white tracking-wide">Dummy number</span>
+                                        </div>
+                                    </div>
+
+                                    <div className="w-1/4 flex flex-col justify-center items-center gap-10">
+                                        <button
+                                            type="button"
+                                            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                        >
+                                            <span className="text-white">Accept</span>
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                                        >
+                                            <span className="text-gradient">Reject</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* END OF Detail section */}
+
+                            {/* message section */}
+                            <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
+                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
+                                <div className="my-4 w-full">
+                                     <textarea rows={5} className="p-4 text-base font-bold text-dark-gray dark:text-white tracking-wide w-full resize-none rounded-md outline-none" />
+                                     <div className="w-full flex justify-end items-center">
+                                        <button
+                                            type="button"
+                                            className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                        >
+                                            <span className="text-white">Send</span>
+                                        </button>
+                                     </div>
+                                </div>
+                                {/* message list */}
+                                {currentMessageList.map((item, index)=>(
+                                    <div key={index} className="my-3 w-full">
+                                        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
+                                    </div>
+                                ))}
+
+                                {/* PAGINATION BUTTON */}
+                                <PaginatedList
+                                    onClick={handlePagination}
+                                    prev={currentPage == 0 ? true : false}
+                                    next={
+                                        currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                                        messageList?.data?.length
+                                            ? true
+                                            : false
+                                    }
+                                    data={messageList?.data}
+                                    start={indexOfFirstItem}
+                                    stop={indexOfLastItem}
+                                />
+                                {/* END OF PAGINATION BUTTON */}
+                            </div>
+                            {/* END of message section */}
+                        </div>
+                    </div>
+                    {/* END OF manage offer section */}
+                </div>
+
+                <div className="w-full overflow-x-auto">
+                    <div className="notification-page w-full mb-10">
+                        <div className="notification-wrapper w-full">
+                            {/* 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">
+                                        <span className={`${selectTab === "today" ? "block" : "hidden"}`}>Others interested in this Task</span>
+                                    </h1>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <OthersInterestedTable othersInterestedList={props.othersInterestedList} />
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/OffersInterest/OffersInterestTable.jsx

@@ -52,9 +52,9 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </tr> */}
                             </thead>
                             <tbody className="h-full">
-                            {currentOfferInterestList?.map((item, idx) => {
+                            {currentOfferInterestList?.map((item, index) => {
                                 return (
-                                <tr key={item?.offer_uid} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
                                             <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
@@ -87,7 +87,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
                                     <td className="text-right py-4">
                                         <button
                                             onClick={() => {
-                                                navigate("/manage-active-job", {
+                                                navigate("/manage-offer", {
                                                     state: { ...item, pathname },
                                                 });
                                             }}

src/components/OffersInterest/OthersInterestedTable.jsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import { useDispatch } from "react-redux";
+import { tableReload } from "../../store/TableReloads";
+
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+
+import familyImage from '../../assets/images/no-family-side.png'
+
+export default function OthersInterestTable({othersInterestedList, className}) {
+
+    const dispatch = useDispatch()
+    const navigate = useNavigate();
+    let { pathname } = useLocation();
+    
+    const filterCategories = ["All Categories", "Explore", "Featured"];
+    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem =
+        Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentOthersInterestedList = othersInterestedList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+    const handlePagination = (e) => {
+        handlePagingFunc(e, setCurrentPage);
+    };
+
+    return (
+        <div
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
+                className || ""
+            }`}
+        >
+            
+            {othersInterestedList?.loading ? (
+                    <div className="min-h-[520px] w-full flex flex-col justify-center items-center">
+                        <LoadingSpinner size="16" color="sky-blue" />
+                    </div>
+                )
+                :
+                othersInterestedList?.data?.length > 0 ?
+                    (
+                        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+                            <thead className="sticky top-0">
+                            {/* <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+                                <th className="py-4">Name</th>
+                                <th className="py-4 text-center">Last Login</th>
+                                <th className="py-4 text-center">No of Tasks</th>
+                                <th className="py-4 text-right"></th>
+                            </tr> */}
+                            </thead>
+                            <tbody className="h-full">
+                            {currentOthersInterestedList?.map((item, index) => {
+                                return (
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                    <td className=" py-4">
+                                        <div className="flex space-x-2 items-center">
+                                            <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                                <img
+                                                    src={dataImage1}
+                                                    alt="data"
+                                                    className="w-full h-full"
+                                                />
+                                            </div>
+                                            <div className="flex flex-col">
+                                                <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                                    {item?.title}
+                                                </h1>
+                                                <span className="text-sm text-thin-light-gray">{item?.expire}</span>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="text-center py-4 px-2">
+                                        <div className="flex space-x-1 items-center justify-center">
+                                            <p className="font-bold text-x text-dark-gray dark:text-white">{item?.client_name}</p>
+                                        </div>
+                                    </td>
+                                    <td className="text-center py-4 px-2">
+                                        <div className="flex space-x-1 items-center justify-center">
+                                            {/* <span className="font-bold text-x text-dark-gray dark:text-white">{formatNumber(item?.price * 0.01)}</span> */}
+                                            <span className="font-bold text-x text-dark-gray dark:text-white">{PriceFormatter(item?.price * 0.01,item?.currency_code,item?.currency)}</span>
+                                        </div>
+                                    </td>
+            
+                                    <td className="text-right py-4">
+                                        <button
+                                            onClick={() => {
+                                                dispatch(tableReload({type:'OTHERSINTERESTEDTABLE'}))
+                                                navigate("/manage-offer", {
+                                                    state: { ...item, pathname },
+                                                });
+                                            }}
+                                            type="button"
+                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                        >
+                                            View
+                                        </button>
+                                    </td>
+                                </tr>
+                                );
+                            })
+                            }
+                            </tbody>
+                        </table>
+                    )
+                    :
+                    (
+                        <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
+                            <div className="p-2 w-full md:w-1/2">
+                                <p className="mb-4 p-3 md:p-16">No Offer list avaliable.</p>
+                                <button
+                                    onClick={()=>{navigate('/market', {replace: true})}}
+                                    type="button"
+                                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                                >
+                                    Goto Market
+                                </button>
+                            </div>
+                            <div className="p-2 w-full md:w-1/2">
+                                <img className='w-full' src={familyImage && familyImage} alt="Add Family" />
+                            </div>
+                        </div>
+                    )
+            }
+        
+            {/* PAGINATION BUTTON */}
+            <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                    currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                    othersInterestedList?.data?.length
+                        ? true
+                        : false
+                }
+                data={othersInterestedList?.data}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+            />
+            {/* END OF PAGINATION BUTTON */}
+        </div>
+    );
+}

src/components/Pagination/PaginatedList.jsx

@@ -6,7 +6,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
         {!prev && (
           <button
             className={`p-2 border ${
-              prev ? "border-black" : "border-transparent"
+              prev ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white"
             } btn-shine rounded-full h-11 w-11`}
             name="prev"
             onClick={onClick}
@@ -26,7 +26,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
                 key={index}
                 value={index}
                 className={`p-2 border ${
-                  index === start ? "border-black" : "border-transparent"
+                  index === start ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white"
                 } btn-shine rounded-full h-11 w-11`}
                 onClick={onClick}
                 name="page_num"
@@ -43,7 +43,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
         {!next && (
           <button
             className={`p-2 border ${
-              next ? "border-black" : "border-transparent"
+              next ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white"
             } btn-shine rounded-full h-11 w-11`}
             name="next"
             onClick={onClick}

src/components/Referral/ReferralDisplay.jsx

@@ -116,10 +116,21 @@ function ReferralDisplay() {
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
+      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+        <div className="sm:flex justify-between items-center mb-6">
+          <div className="mb-5 sm:mb-0">
+            <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                <span>
+                 Refer a Friend
+                </span>
+            </h1>
+          </div>
+
+        </div>
+
+        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Send Referral
           </h2>
           <Formik
@@ -129,42 +140,44 @@ function ReferralDisplay() {
           >
             {(props) => (
               <Form className="referral-info">
-                {/* Firstname */}
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Firstname"
-                    type="text"
-                    name="firstname"
-                    placeholder="Firstname"
-                    value={props.values.firstname}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.firstname && props.touched.firstname && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.firstname}
-                    </p>
-                  )}
-                </div>
+                <div className="block md:mb-6 md:flex gap-10">
+                  {/* Firstname */}
+                  <div className="field w-full mb-6 md:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Firstname"
+                      type="text"
+                      name="firstname"
+                      placeholder="Firstname"
+                      value={props.values.firstname}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                    />
+                    {props.errors.firstname && props.touched.firstname && (
+                      <p className="text-sm text-red-500">
+                        {props.errors.firstname}
+                      </p>
+                    )}
+                  </div>
 
-                {/* Lastname */}
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Lastname"
-                    type="text"
-                    name="lastname"
-                    placeholder="Lastname"
-                    value={props.values.lastname}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.lastname && props.touched.lastname && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.lastname}
-                    </p>
-                  )}
+                  {/* Lastname */}
+                  <div className="field w-full mb-6 md:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Lastname"
+                      type="text"
+                      name="lastname"
+                      placeholder="Lastname"
+                      value={props.values.lastname}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                    />
+                    {props.errors.lastname && props.touched.lastname && (
+                      <p className="text-sm text-red-500">
+                        {props.errors.lastname}
+                      </p>
+                    )}
+                  </div>
                 </div>
 
                 <div className="field w-full mb-6">
@@ -193,8 +206,7 @@ function ReferralDisplay() {
                   ) : (
                     <button
                       type="submit"
-                      className="text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md"
-                    >
+                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"                    >
                       Send Message
                     </button>
                   )}
@@ -203,20 +215,20 @@ function ReferralDisplay() {
             )}
           </Formik>
         </div>
-      </div>
 
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
           <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Referral List
           </h2>
           {referralList.loading ? (
-            <LoadingSpinner size="32" color="sky-blue" />
+              <LoadingSpinner size="32" color="sky-blue" />
           ) : (
-            <ReferralTable history={referralList} />
+              <ReferralTable history={referralList} />
           )}
         </div>
       </div>
+
+
     </div>
   );
 }

src/components/Settings/Tabs/FaqTab.jsx

@@ -1,14 +1,18 @@
 import React from "react";
 import Accordion from "../../Helpers/Accordion";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-export default function FaqTab({ datas = [] }) {
+export default function FaqTab({ datas }) {
   return (
     <div className="faq-tab w-full">
       <div className="accordion-items w-full">
-        {datas &&
-          datas.length > 0 &&
-          datas.map((value) => (
-            <Accordion key={value.id + Math.random()} datas={value} />
+        {datas.loading ? 
+          <LoadingSpinner color='sky-blue' size={16} />  
+        :
+        datas &&
+          datas?.data?.length > 0 &&
+          datas.data.map((value, index) => (
+            <Accordion key={index + Math.random()} datas={value} />
           ))}
       </div>
     </div>

src/components/Settings/index.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
-import faq from "../../data/faq.json";
+
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
 import ChangePasswordTab from "./Tabs/ChangePasswordTab";
@@ -12,7 +12,7 @@ import PaymentMathodsTab from "./Tabs/PaymentMathodsTab";
 import PersonalInfoTab from "./Tabs/PersonalInfoTab";
 import TermsConditionTab from "./Tabs/TermsConditionTab";
 
-export default function Settings() {
+export default function Settings({faq}) {
   const tabs = [
     {
       id: 1,
@@ -83,8 +83,6 @@ export default function Settings() {
     }
   };
 
-  // fab tab
-  const faqData = faq.datas;
   return (
     <>
       <Layout>
@@ -259,7 +257,7 @@ export default function Settings() {
                   )}
                   {tab === "login_activity" && <LoginActivityTab />}
                   {tab === "password" && <ChangePasswordTab />}
-                  {tab === "faq" && <FaqTab datas={faqData} />}
+                  {tab === "faq" && <FaqTab datas={faq} />}
                   {tab === "terms" && <TermsConditionTab />}
                 </div>
               </div>

src/index.css

@@ -10,7 +10,14 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
-
+.referral{
+  margin-bottom: 20px
+}
+.heroSilderTitle{
+  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+  font-family: sans; color: white;
+  font-size: 42px;
+}
 
 .job-action{
   background-color: lightgoldenrodyellow;

src/services/UsersService.js

@@ -687,9 +687,19 @@ class usersService {
         action: 14015,
         ...reqData,
       };
-      return this.postAuxEnd("/activejobstatus ", postData);
+      return this.postAuxEnd("/activejobstatus", postData);
     }
 
+  // END POINT FOR OWNER JOB ACTION
+  getFaq() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      // member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+    };
+    return this.postAuxEnd("/faq", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/store/TableReloads.js

@@ -3,7 +3,8 @@ import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   jobListTable: false,
   pendingListTable: false,
-  myTaskTable: false
+  myTaskTable: false,
+  othersInterestedTable: false
 };
 
 export const tableReloadSlice = createSlice({
@@ -21,6 +22,9 @@ export const tableReloadSlice = createSlice({
         case 'MYTASKTABLE' :
           state.myTaskTable = !state.myTaskTable;
           return
+        case 'OTHERSINTERESTEDTABLE' :
+          state.othersInterestedTable = !state.othersInterestedTable;
+          return
         default:
           return state
       }

src/views/ManageInterestOfferPage.jsx

@@ -0,0 +1,46 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+import ManageInterestOffer from "../components/OffersInterest/ManageInterestOffer";
+import { useSelector } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export default function MyReviewDueJobsPage() {
+    const {state} = useLocation()
+    let navigate = useNavigate()
+
+    let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+    let { othersInterestedTable } = useSelector((state) => state.tableReload);
+
+    const apiCall = new usersService();
+    const [othersInterestedList, setOthersInterestedList] = useState({loading: true, data: []})
+   
+    useEffect(() => {
+        if(!state){
+            navigate('/', {replace: true})
+            return
+        }
+        apiCall.offersInterestList().then(res => {
+            let newData
+            if(res.data.result_list.length){
+                newData = res.data.result_list.filter(item => item.offer_code == state.offer_code && item.client_uid != state.client_uid)
+            }else{
+                newData = []
+            }
+            setOthersInterestedList({loading: false, data: newData})
+        }).catch(err => {
+            setOthersInterestedList({loading: false, data: []})
+            console.log('Error: ', err)
+        })
+    }, [othersInterestedTable]);
+
+    // debugger;
+    return (
+        <>
+            <ManageInterestOffer
+                othersInterestedList={othersInterestedList}
+                commonHeadData={commonHeadBanner.result_list}
+                offerDetails={state}
+            />
+        </>
+    );
+}

src/views/SettingsPage.jsx

@@ -1,10 +1,29 @@
-import React from "react";
+import React,{useState, useEffect} from "react";
 import Settings from "../components/Settings";
+import usersService from "../services/UsersService";
 
 export default function SettingsPage() {
+
+  const apiCall = new usersService()
+
+  let [faq, setFaq] = useState({loading:true, data:[]}) // STATE TO HOLD FAQ DATA
+
+  //FUNCTION TO GET FAQ
+  const getFaq = () => {
+    apiCall.getFaq().then(res => {
+      setFaq({loading:false, data:res.data.result_list})
+    }).catch(err => {
+      setFaq({loading:false, data:[]})
+      console.log('Error', err)
+    })
+  }
+
+  useEffect(()=>{
+    getFaq()
+  },[])
   return (
     <>
-      <Settings />
+      <Settings faq={faq} />
     </>
   );
 }