Others interested offer table modified to show only list of persons interest in an offer

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/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/OffersInterest/ManageInterestOffer.jsx

@@ -75,7 +75,7 @@ export default function ManageInterestOffer(props) {
                                     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 })
+                                        navigate('/offer-interest', { replace: true })
                                     }
                                     >
                                     <svg
@@ -161,7 +161,7 @@ export default function ManageInterestOffer(props) {
                                 </div>
                                 {/* message list */}
                                 {currentMessageList.map((item, index)=>(
-                                    <div className="my-3 w-full">
+                                    <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>

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">

src/components/OffersInterest/OthersInterestedTable.jsx

@@ -4,6 +4,8 @@ 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";
 
@@ -11,6 +13,7 @@ import familyImage from '../../assets/images/no-family-side.png'
 
 export default function OthersInterestTable({othersInterestedList, className}) {
 
+    const dispatch = useDispatch()
     const navigate = useNavigate();
     let { pathname } = useLocation();
     
@@ -52,9 +55,9 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                             </tr> */}
                             </thead>
                             <tbody className="h-full">
-                            {currentOthersInterestedList?.map((item, idx) => {
+                            {currentOthersInterestedList?.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,6 +90,7 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                     <td className="text-right py-4">
                                         <button
                                             onClick={() => {
+                                                dispatch(tableReload({type:'OTHERSINTERESTEDTABLE'}))
                                                 navigate("/manage-offer", {
                                                     state: { ...item, pathname },
                                                 });

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/index.css

@@ -10,7 +10,11 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
-
+.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/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

@@ -9,6 +9,7 @@ export default function MyReviewDueJobsPage() {
     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: []})
@@ -19,12 +20,18 @@ export default function MyReviewDueJobsPage() {
             return
         }
         apiCall.offersInterestList().then(res => {
-            setOthersInterestedList({loading: false, data: res.data.result_list})
+            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 (