lock job popout

src/components/Cards/AvailableJobsCard.jsx

@@ -10,6 +10,7 @@ export default function AvailableJobsCard({
   hidden = false,
   contentDisplay,
   image_server,
+  marketPlaceProduct
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
@@ -103,9 +104,10 @@ export default function AvailableJobsCard({
               {/* <div className="product-two-options flex justify-between mb-5 relative"></div> */}
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">
-                  <div>
+                  <div className='w-full'>
-                    <p className="w-full font-bold text-xl tracking-wide text-dark-gray dark:text-white">
+                    <p className="w-full flex gap-1 items-center font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                       {/* {thePrice} | {datas.timeline_days} day(s) */}
+                      {datas?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
                       {thePrice}
                     </p>
                     <p className="text-sm text-lighter-gray">
@@ -171,7 +173,8 @@ export default function AvailableJobsCard({
               </div>
 
               <div className="block sm:flex flex-wrap gap-4">
-                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
+                <p className="text-sm text-thin-light-gray flex flext-start gap-1 items-center">
+                  {datas?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
                   Price: <span className="text-purple">{thePrice}</span>
                 </p>
                 <p className="text-sm text-thin-light-gray">
@@ -220,6 +223,7 @@ export default function AvailableJobsCard({
             setMarketPopUp({ show: false, data: {} });
           }}
           situation={marketPopUp.show}
+          marketPlaceProduct={marketPlaceProduct}
         />
       )}
 

src/components/MarketPlace/MainSection.jsx

@@ -150,6 +150,7 @@ export default function MainSection({
                         contentDisplay={contentDisplay}
                         image_server={image_server}
                         datas={datum}
+                        marketPlaceProduct={marketPlaceProduct}
                       />
                     </div>
                   ))

src/components/MarketPlace/PopUp/LockJob.jsx

@@ -0,0 +1,252 @@
+import React, {useEffect, useState} from 'react'
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+
+export default function LockJob({details, marketPlaceProduct, ManageInterest, manageInt, handleInputChange, MarketDetail, marketMsg, errMsg, textValue}) {
+    const apiCall = new usersService()
+
+    const [completedTask, setCompletedTask] = useState({
+        loading: true,
+        data: []
+    })
+
+    let thePrice = PriceFormatter(
+        details?.price * 0.01,
+        details?.currency_code,
+        details?.currency
+      );
+
+    let cleanedText = details?.job_description
+      ?.replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"')
+      .replace(/&amp;/g, "&");
+
+    let dependOn = marketPlaceProduct?.filter(item => item?.job_uid == details?.offer_depend_uid)[0]
+
+    useEffect(()=>{
+        apiCall.getVerifyCompletedTask({offer_depend_uid:details?.offer_depend_uid}).then(res => {
+            console.log('RES', res.data)
+            setCompletedTask({loading:false, data:res?.data?.result_list})
+        }).catch(err =>{
+            setCompletedTask({loading:false, data:[]})
+        })
+    },[])
+
+    return (
+        <>
+            {completedTask.loading ?
+            <div className='w-full md:col-span-4 flex justify-center items-center min-h-[500px]'>
+                <LoadingSpinner 
+                    size='10'
+                />
+            </div>
+            :
+            <>
+                <div className="px-4 py-1 w-full md:col-span-3 md:border-r-1">
+                <div className="min-h-[300px]">
+                    <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
+                    {details?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
+                    {details?.title}
+                    </h2>
+
+                    {/* INPUT SECTION */}
+                    {[
+                    {
+                        name: "Description",
+                        content: details.description,
+                    },
+                    {
+                        name: "",
+                        content: {
+                        text: `Timeline: ${details.timeline_days} day(s) -- `,
+                        bold: `Budget: ${thePrice}`,
+                        },
+                    },
+                    {
+                        name: "Delivery Detail",
+                        content: cleanedText,
+                        danger: true,
+                    },
+                    ].map(({ name, content, danger }, idx) => (
+                    <div className={`my-1 flex flex-col items-start`} key={idx}>
+                        <label className="py-1 job-label w-full">
+                        {name}
+                        </label>
+                        <div
+                        className={`w-full p-2 text-slate-900 dark:text-white market-pop rounded-2xl ${
+                            name == "Description"
+                            ? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words bg-slate-50"
+                            : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[100px] max-h-[100px] bg-slate-50"
+                            : "h-full flex items-center"
+                        }`}
+                        >
+                        {danger ? (
+                            <p
+                            className={`dark:text-white`}
+                            dangerouslySetInnerHTML={{
+                                __html: danger && content,
+                            }}
+                            />
+                        ) : (
+                            <p className={`w-full text-slate-900 dark:text-white`}>
+                            {name !== "Delivery Detail" ? (
+                                <>
+                                {typeof content !== "object" ? content : null}
+                                {typeof content === "object" && (
+                                    <>
+                                    {/* <hr className="mb-1" /> */}
+                                    <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
+                                    <span className="flex items-center gap-2 dark:text-white">
+                                        {content?.text}
+                                        <strong>{thePrice}</strong>
+                                    </span>
+                                    <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
+                                    {/* <hr className="mt-1" /> */}
+                                    </>
+                                )}
+                                </>
+                            ) : (
+                                ""
+                            )}
+                            </p>
+                        )}
+                        </div>
+                    </div>
+                    ))}
+                </div>
+                <hr className='my-3' />
+                {completedTask.loading ?
+                    <p className='py-3 w-full text-center text-lg'>Loading...</p>
+                    :completedTask?.data?.filter(item => item?.job_uid == details.offer_depend_uid).length > 0 ?
+                    <div className='w-full'>
+                    <label className="job-label w-full flex gap-2 items-center">
+                        If you have any questions about this task:
+                        <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
+                        {marketMsg.state && "Message Sent!"}
+                        {errMsg.market && "Failed to send"}
+                        </span>
+                    </label>
+                    <div className="w-full flex items-center gap-3">
+                        <div className="w-full">
+                        <textarea
+                            className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                            marketMsg.loading && "italic text-[#9CA3AF]"
+                            } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                            rows="3"
+                            style={{ resize: "none" }}
+                            placeholder="Enter message here ..."
+                            value={marketMsg.loading ? "Sending..." : textValue}
+                            onChange={handleInputChange}
+                        />
+                        </div>
+                        <div className="relative flex flex-col">
+                        <button
+                            className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
+                            name="market-message"
+                            onClick={MarketDetail}
+                            disabled={marketMsg.loading}
+                        >
+                            {marketMsg.loading ? (
+                            <LoadingSpinner size={5} color="white" />
+                            ) : (
+                            // "Send Message"
+                            <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 11 20"
+                            id="Arrow"
+                            className="w-[0.7rem]"
+                            >
+                            <path
+                                fillRule="evenodd"
+                                d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                // fill=""
+                                className="color000000 svgShape fill-[#fff]"
+                            ></path>
+                            </svg>
+                            )}
+                        </button>
+                        </div>
+                    </div>
+                    </div>
+                    :
+                    <div className='w-full'>
+                        <h1 className='text-red-600 text-lg'>This task depends on the task below</h1>
+                        <div className='my-1 w-full'>
+                            <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
+                            {dependOn?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
+                            {dependOn?.title}
+                            </h2>
+                        </div>
+                        <div className={`p-2 flex flex-col items-start`}>
+                            <p className="py-1 job-label w-full">Description</p>
+                            <div className={`w-full p-2 text-slate-900 dark:text-white market-pop rounded-2xl bg-slate-50 break-words min-h-[100px] max-h-[100px]`}>
+                                {dependOn?.description}
+                            </div>
+                        </div>
+                    </div>
+                }
+                </div>
+
+                <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
+                <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
+                    <div className="w-full flex flex-col justify-center pb-4 gap-2">
+                    <p className="job-label w-full">
+                        Interested?
+                    </p>
+                    <hr />
+                    {completedTask.loading ?
+                    <p className='py-3 w-full text-center text-lg'>Loading...</p>
+                    :completedTask?.data?.filter(item => item?.job_uid == details.offer_depend_uid).length > 0 ?
+                    <button
+                        className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
+                        name="market-interest"
+                        onClick={ManageInterest}
+                    >
+                        {" "}
+                        <div className="flex md:flex-col justify-center gap-2">
+                        <span>Notify</span>
+                        <span>Owner</span>
+                        </div>
+                    </button>
+                    :
+                    <h1 className='text-red-600 text-base font-bold'>This task depends on completion of another task</h1>
+                    }
+                    <>
+                        {manageInt.loading ? (
+                        <p className="text-sm italic">please wait...</p>
+                        ) : (
+                        <>
+                            {manageInt?.msg !== "" && (
+                            <p
+                                className={`text-sm italic ${
+                                manageInt?.state ? "text-green-500" : "text-red-500"
+                                }`}
+                            >
+                                {manageInt?.msg}
+                            </p>
+                            )}
+                        </>
+                        )}
+                    </>
+                    </div>
+
+                    <div className="text-slate-900">
+                    <p className="flex items-center tracking-wide">
+                        <span className="job-label">Interest: </span> <b className="ml-1">{details.interest_count}</b>
+                    </p>
+                    <hr />
+                    <p className="my-1 flex flex-col">
+                        <span className="job-label">Expire: </span> 
+                        <span> {new Date(details.expire).toLocaleString()} </span>
+                    </p>
+                    </div>
+                </div>
+                </div>
+            </>
+            }
+        </>
+    )
+}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -5,8 +5,9 @@ import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import { SocketValues } from "../../Contexts/SocketIOContext";
+import LockJob from "./LockJob";
 
-const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduct }) => {
 
   let {sendJobInterestToOwner} = SocketValues() // function to emit job interest request
   const emitOfferInterest = () => {
@@ -143,185 +144,202 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
         </div>
 
         <div className="md:grid md:grid-cols-4 bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
-          <div className="px-4 py-1 w-full md:col-span-3 md:border-r-1">
+          {details?.offer_depend_uid ?
-            <div className="min-h-[300px]">
+          <LockJob
-              <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
+            marketPlaceProduct={marketPlaceProduct}
-                {details?.title}
+            details={details}
-              </h2>
+            ManageInterest={ManageInterest}
+            manageInt={manageInt}
+            marketMsg={marketMsg}
+            errMsg={errMsg}
+            textValue={textValue}
+            MarketDetail={MarketDetail}
+            handleInputChange={handleInputChange}
+          />
+          :
+          <>
+            <div className="px-4 py-1 w-full md:col-span-3 md:border-r-1">
+              <div className="min-h-[300px]">
+                <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
+                  {details?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
+                  {details?.title}
+                </h2>
 
-              {/* INPUT SECTION */}
+                {/* INPUT SECTION */}
-              {[
+                {[
-                {
+                  {
-                  name: "Description",
+                    name: "Description",
-                  content: details.description,
+                    content: details.description,
-                },
-                {
-                  name: "",
-                  content: {
-                    text: `Timeline: ${details.timeline_days} day(s) -- `,
-                    bold: `Budget: ${thePrice}`,
                   },
-                },
+                  {
-                {
+                    name: "",
-                  name: "Delivery Detail",
+                    content: {
-                  content: cleanedText,
+                      text: `Timeline: ${details.timeline_days} day(s) -- `,
-                  danger: true,
+                      bold: `Budget: ${thePrice}`,
-                },
+                    },
-              ].map(({ name, content, danger }, idx) => (
+                  },
-                <div className={`my-3 md:flex items-start`} key={idx}>
+                  {
-                  <label className="py-2 job-label w-full md:w-[19%]">
+                    name: "Delivery Detail",
-                    {name}
+                    content: cleanedText,
-                  </label>
+                    danger: true,
-                  <div
+                  },
-                    className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop rounded-2xl ${
+                ].map(({ name, content, danger }, idx) => (
-                      name == "Description"
+                  <div className={`my-3 md:flex items-start`} key={idx}>
-                        ? "min-h-[150px] max-h-[150px] h-full overflow-y-auto break-words bg-slate-50"
+                    <label className="py-2 job-label w-full md:w-[19%]">
-                        : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[150px] max-h-[150px] bg-slate-50"
+                      {name}
-                        : "h-full flex items-center"
+                    </label>
-                    }`}
+                    <div
-                  >
+                      className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop rounded-2xl ${
-                    {danger ? (
+                        name == "Description"
-                      <p
+                          ? "min-h-[150px] max-h-[150px] h-full overflow-y-auto break-words bg-slate-50"
-                        className={`dark:text-white`}
+                          : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[150px] max-h-[150px] bg-slate-50"
-                        dangerouslySetInnerHTML={{
+                          : "h-full flex items-center"
-                          __html: danger && content,
+                      }`}
-                        }}
-                      />
-                    ) : (
-                      <p className={`w-full text-slate-900 dark:text-white`}>
-                        {name !== "Delivery Detail" ? (
-                          <>
-                            {typeof content !== "object" ? content : null}
-                            {typeof content === "object" && (
-                              <>
-                                {/* <hr className="mb-1" /> */}
-                                <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
-                                <span className="flex items-center gap-2 dark:text-white">
-                                  {content?.text}
-                                  <strong>{thePrice}</strong>
-                                </span>
-                                <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
-                                {/* <hr className="mt-1" /> */}
-                              </>
-                            )}
-                          </>
-                        ) : (
-                          ""
-                        )}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-            <hr className='my-1' />
-            <div className='w-full'>
-              <label className="job-label w-full flex gap-2 items-center">
-                If you have any questions about this task:
-                <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
-                  {marketMsg.state && "Message Sent!"}
-                  {errMsg.market && "Failed to send"}
-                </span>
-              </label>
-              <div className="w-full flex items-center gap-3">
-                <div className="w-full">
-                  <textarea
-                    className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
-                      marketMsg.loading && "italic text-[#9CA3AF]"
-                    } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
-                    rows="3"
-                    style={{ resize: "none" }}
-                    placeholder="Enter message here ..."
-                    value={marketMsg.loading ? "Sending..." : textValue}
-                    onChange={handleInputChange}
-                  />
-                </div>
-                <div className="relative flex flex-col">
-                  <button
-                    className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
-                    name="market-message"
-                    onClick={MarketDetail}
-                    disabled={marketMsg.loading}
-                  >
-                    {marketMsg.loading ? (
-                      <LoadingSpinner size={5} color="white" />
-                    ) : (
-                      // "Send Message"
-                      <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 11 20"
-                      id="Arrow"
-                      className="w-[0.7rem]"
                     >
-                      <path
+                      {danger ? (
-                        fillRule="evenodd"
-                        d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
-                        // fill=""
-                        className="color000000 svgShape fill-[#fff]"
-                      ></path>
-                    </svg>
-                    )}
-                  </button>
-                  {/* <span className="text-sm text-[#57cd89]">
-                    {marketMsg.state && "Sent!"}
-                    {errMsg.market && "Failed"}
-                  </span> */}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
-            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
-              <div className="w-full flex flex-col justify-center pb-4 gap-2">
-                <p className="job-label w-full">
-                  Interested?
-                </p>
-                <hr />
-                <button
-                  className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
-                  name="market-interest"
-                  onClick={ManageInterest}
-                >
-                  {" "}
-                  <div className="flex md:flex-col justify-center gap-2">
-                    <span>Notify</span>
-                    <span>Owner</span>
-                  </div>
-                </button>
-                <>
-                  {manageInt.loading ? (
-                    <p className="text-sm italic">please wait...</p>
-                  ) : (
-                    <>
-                      {manageInt?.msg !== "" && (
                         <p
-                          className={`text-sm italic ${
+                          className={`dark:text-white`}
-                            manageInt?.state ? "text-green-500" : "text-red-500"
+                          dangerouslySetInnerHTML={{
-                          }`}
+                            __html: danger && content,
-                        >
+                          }}
-                          {manageInt?.msg}
+                        />
+                      ) : (
+                        <p className={`w-full text-slate-900 dark:text-white`}>
+                          {name !== "Delivery Detail" ? (
+                            <>
+                              {typeof content !== "object" ? content : null}
+                              {typeof content === "object" && (
+                                <>
+                                  {/* <hr className="mb-1" /> */}
+                                  <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
+                                  <span className="flex items-center gap-2 dark:text-white">
+                                    {content?.text}
+                                    <strong>{thePrice}</strong>
+                                  </span>
+                                  <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
+                                  {/* <hr className="mt-1" /> */}
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            ""
+                          )}
                         </p>
                       )}
-                    </>
+                    </div>
-                  )}
+                  </div>
-                </>
+                ))}
               </div>
-
+              <hr className='my-1' />
-              <div className="text-slate-900">
+              <div className='w-full'>
-                <p className="flex items-center tracking-wide">
+                <label className="job-label w-full flex gap-2 items-center">
-                  <span className="job-label">Interest: </span> <b className="ml-1">{details.interest_count}</b>
+                  If you have any questions about this task:
-                </p>
+                  <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
-                <hr />
+                    {marketMsg.state && "Message Sent!"}
-                <p className="my-1 flex flex-col">
+                    {errMsg.market && "Failed to send"}
-                  <span className="job-label">Expire: </span> 
+                  </span>
-                  <span> {new Date(details.expire).toLocaleString()} </span>
+                </label>
-                </p>
+                <div className="w-full flex items-center gap-3">
+                  <div className="w-full">
+                    <textarea
+                      className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                        marketMsg.loading && "italic text-[#9CA3AF]"
+                      } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                      rows="3"
+                      style={{ resize: "none" }}
+                      placeholder="Enter message here ..."
+                      value={marketMsg.loading ? "Sending..." : textValue}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className="relative flex flex-col">
+                    <button
+                      className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
+                      name="market-message"
+                      onClick={MarketDetail}
+                      disabled={marketMsg.loading}
+                    >
+                      {marketMsg.loading ? (
+                        <LoadingSpinner size={5} color="white" />
+                      ) : (
+                        // "Send Message"
+                        <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 11 20"
+                        id="Arrow"
+                        className="w-[0.7rem]"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                          // fill=""
+                          className="color000000 svgShape fill-[#fff]"
+                        ></path>
+                      </svg>
+                      )}
+                    </button>
+                    {/* <span className="text-sm text-[#57cd89]">
+                      {marketMsg.state && "Sent!"}
+                      {errMsg.market && "Failed"}
+                    </span> */}
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
+
-          {/* END OF ACTION SECTION */}
+            <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
+              <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
+                <div className="w-full flex flex-col justify-center pb-4 gap-2">
+                  <p className="job-label w-full">
+                    Interested?
+                  </p>
+                  <hr />
+                  <button
+                    className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
+                    name="market-interest"
+                    onClick={ManageInterest}
+                  >
+                    {" "}
+                    <div className="flex md:flex-col justify-center gap-2">
+                      <span>Notify</span>
+                      <span>Owner</span>
+                    </div>
+                  </button>
+                  <>
+                    {manageInt.loading ? (
+                      <p className="text-sm italic">please wait...</p>
+                    ) : (
+                      <>
+                        {manageInt?.msg !== "" && (
+                          <p
+                            className={`text-sm italic ${
+                              manageInt?.state ? "text-green-500" : "text-red-500"
+                            }`}
+                          >
+                            {manageInt?.msg}
+                          </p>
+                        )}
+                      </>
+                    )}
+                  </>
+                </div>
+
+                <div className="text-slate-900">
+                  <p className="flex items-center tracking-wide">
+                    <span className="job-label">Interest: </span> <b className="ml-1">{details.interest_count}</b>
+                  </p>
+                  <hr />
+                  <p className="my-1 flex flex-col">
+                    <span className="job-label">Expire: </span> 
+                    <span> {new Date(details.expire).toLocaleString()} </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </>
+          }
         </div>
+        
         <div className="modal-footer-wrapper">
           <button
             className="custom-btn bg-transparent border border-red-500 text-red-500 ml-auto"

src/components/MyJobs/MyJobTable.jsx

@@ -165,6 +165,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           setWalletItem={setWalletItem}
           openWallet={openPopUp}
           situation={jobPopout.show}
+          myJobList={MyJobList}
         />
       )}
       {/* End of Job List Popout */}

src/components/jobPopout/JobListPopout.jsx

@@ -10,17 +10,19 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
 import { SocketValues } from "../Contexts/SocketIOContext";
 
+// .required("This is required ")
+
 const validationSchema = Yup.object().shape({
-  family: Yup.string().required("This is required "),
+  family: Yup.string(),
   public: Yup.string(),
   individual: Yup.string()
     .email("Invalid email format")
     .matches(
       /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
       "Invalid email format"
-    )
+    ),
-    .required("Email is required"),
   group: Yup.string(),
+  depend_uid: Yup.string(),
 });
 
 function JobListPopout({
@@ -29,6 +31,7 @@ function JobListPopout({
   situation,
   openWallet,
   setWalletItem,
+  myJobList
 }) {
 
   let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -46,12 +49,7 @@ function JobListPopout({
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
     member: false,
-    jobFields: {
+    jobFields: false
-      family: false,
-      public: false,
-      individual: false,
-      group: false,
-    },
   });
 
   const apiCall = useMemo(() => new usersService(), []);
@@ -106,6 +104,7 @@ function JobListPopout({
     public: "",
     individual: "",
     group: "",
+    depend_uid: ''
   };
 
   let [textArea, setTextArea] = useState(details?.job_detail);
@@ -136,11 +135,12 @@ function JobListPopout({
     } finally {
       setTimeout(() => {
         setErrMsg({ jobFields: "" });
-      }, 3000);
+      }, 5000);
     }
   };
 
   const jobFieldHandler = async (values, helpers) => {
+    setLoader({ jobFields: true });
     let { job_id, job_uid } = details;
 
     if (!textArea) {
@@ -163,15 +163,14 @@ function JobListPopout({
         family_uid: values?.family,
         assign_mode: 110011,
       };
-      setLoader({ jobFields: { family: true } });
     } else if (values?.public !== "") {
       // for public input
       reqData = {
         ...jobReq,
         duration: Number(values?.public),
         assign_mode: 110022,
+        depend_uid: values?.depend_uid
       };
-      setLoader({ jobFields: { public: true } });
     } else if (values?.individual !== "") {
       // for individual input
       reqData = {
@@ -179,7 +178,6 @@ function JobListPopout({
         email: values?.individual,
         assign_mode: 110033,
       };
-      setLoader({ jobFields: { individual: true } });
     } else if (values?.group !== "") {
       // for group input
       reqData = {
@@ -190,8 +188,8 @@ function JobListPopout({
         duration: details?.timeline_days,
         // duration: 0,
       };
-      setLoader({ jobFields: { group: true } });
     } else {
+      setLoader({ jobFields: false });
       return;
     }
 
@@ -203,7 +201,7 @@ function JobListPopout({
         return setTimeout(() => {
           setLoader({ jobFields: false });
           setRequestStatus({ message: "", status: false });
-        }, 3000);
+        }, 5000);
       }
       marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists
       dispatch(tableReload({ type: "JOBTABLE" }));  // reloads my job page
@@ -213,14 +211,14 @@ function JobListPopout({
         setLoader({ jobFields: false });
         onClose();
         // throw new Response(data);
-      }, 3000);
+      }, 5000);
     } catch (error) {
       setRequestStatus({ message: "Unable to complete", status: false });
       setTimeout(() => {
         setRequestStatus({ message: "", status: false });
         setLoader({ jobFields: false });
         throw new Error(error);
-      }, 3000);
+      }, 5000);
     }
   };
 
@@ -355,142 +353,198 @@ function JobListPopout({
                     ))}
                   </div>
                   <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
-                    {selectedTab == "family" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.family}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="hidden">
-                              {/* Assign to Family */}
-                              <JobFieldInput
-                                label="Assign to family"
-                                select={true}
-                                inputName="family"
-                                value={props?.values.family}
-                                data={familyList}
-                                btnText="Assign to family"
-                                optionText="Select Family"
-                                loader={loader?.jobFields?.family}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values?.family === "" && (
-                                  <span>{errMsg?.jobFields?.family}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
 
-                    {selectedTab == "public" && (
+                    <Formik
-                      <Formik
+                      initialValues={initialValues}
-                        initialValues={initialValues}
+                      validationSchema={validationSchema.fields.public}
-                        validationSchema={validationSchema.fields.public}
+                      onSubmit={jobFieldHandler}
-                        onSubmit={jobFieldHandler}
+                    >
-                      >
+                      {(props) => {
-                        {(props) => {
+                        return (
-                          return (
+                          <Form className="p-3">
-                            <Form className="">
+                            <div className='flex items-center justify-start mt-1 mb-2.5'>
-                              {/* Offer this job to public input */}
+                              <label
-                              <JobFieldInput
+                                className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
-                                label="Offer this job to public"
+                                // htmlFor={''}
-                                select={true}
+                              >
-                                inputName="public"
+                                {selectedTab == 'family' ?
-                                value={props?.values.public}
+                                  'Assign to family'
-                                data={publicArray}
+                                  : selectedTab == 'public' ?
-                                btnText="Show Task to Public"
+                                  'Offer this job to public'
-                                optionText="Select Duration"
+                                  : selectedTab == 'individual' ?
-                                loader={loader?.jobFields?.public}
+                                  'Offer this job to individual'
-                                errorHandler={errorHandler}
+                                  : selectedTab == 'group' ?
-                                parentClass="w-full flex flex-col gap-4"
+                                  'Offer this job to your Group'
-                              />
+                                  :
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                  null
-                                {" "}
+                                }
-                                {props?.values.public === "" && (
+                              </label>
-                                  <span>{errMsg?.jobFields?.public}</span>
+                            </div>
-                                )}
+                            <div className='w-full'>
-                              </p>{" "}
+                              {/* ASSIGN TO FAMILY */}
-                            </Form>
+                              {selectedTab == "family" && (
-                          );
+                                <div className='hidden w-full'>
-                        }}
+                                  <JobFieldInput
-                      </Formik>
+                                    select={true}
-                    )}
+                                    inputName="family"
+                                    value={props?.values.family}
+                                    data={familyList}
+                                    optionText="Select Family"
+                                    errorHandler={errorHandler}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values?.family === "" && (
+                                      <span>{errMsg?.jobFields?.family}</span>
+                                    )}
+                                  </p>{" "}
+                                </div>
+                              )}
 
-                    {selectedTab == "individual" && (
+                              {/* ASSIGN TO PUBLIC/MARKET */}
-                      <Formik
+                              {selectedTab == "public" && (
-                        initialValues={initialValues}
+                                <div className='w-full'>
-                        validationSchema={validationSchema.fields.individual}
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
-                        onSubmit={jobFieldHandler}
+                                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Depends on</label>
-                      >
+                                    {/* <JobFieldInput
-                        {(props) => {
+                                      input={true}
-                          return (
+                                      select={true}
-                            <Form className="">
+                                      inputName="depend_uid"
-                              {/* Offer this job to individual input */}
+                                      value={props?.values.depend_uid}
-                              <JobFieldInput
+                                      data={myJobList}
-                                label="Offer this job to individual"
+                                      optionText="None"
-                                input={true}
+                                      parentClass="w-full flex flex-col gap-4"
-                                inputName="individual"
+                                    /> */}
-                                value={props?.values.individual}
+                                    <div
-                                placeholder="Enter email of individual"
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] 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`}
-                                inputHandler={props?.handleChange}
+                                    >
-                                btnText="Send Offer to Individual"
+                                      <select 
-                                loader={loader?.jobFields?.individual}
+                                        className='px-2 w-full h-full bg-white border-0 outline-0'
-                                errorHandler={errorHandler}
+                                        name="depend_uid"
-                                parentClass="w-full flex flex-col gap-4"
+                                        value={props?.values.depend_uid}
-                              />
+                                        onChange={props.handleChange}
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                      >
-                                {" "}
+                                        <>
-                                {props?.values.individual === "" && (
+                                          {myJobList.loading ? (
-                                  <span>{errMsg?.jobFields?.individual}</span>
+                                            <option value={""}>Loading...</option>
-                                )}
+                                          ) : myJobList?.data?.result_list?.length > 0 ? (
-                              </p>{" "}
+                                            <>
-                            </Form>
+                                              <option value="">None</option>
-                          );
+                                              {myJobList?.data?.result_list?.filter(item => item.job_uid != details.job_uid)?.map((item, index) => (
-                        }}
+                                                <option value={item?.job_uid} key={item.job_uid}>
-                      </Formik>
+                                                  {item?.title}
-                    )}
+                                                </option>
+                                              ))}
+                                            </>
+                                          ) : (
+                                            <option value="">No Job Found</option>
+                                          )}
+                                        </>
+                                      </select>
+                                    </div>
+                                  </div>
+                                  
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Duration <span className='text-red-600 tracking-wide'>{(props?.values.public === "" && errMsg?.jobFields?.public) && '*'}</span></label>
+                                    <div className='w-full'>
+                                      <JobFieldInput
+                                        select={true}
+                                        inputName="public"
+                                        value={props?.values.public}
+                                        data={publicArray}
+                                        optionText="Select Duration"
+                                        parentClass="w-full flex flex-col gap-4"
+                                      />
+                                      {/* <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                        {" "}
+                                        {props?.values.public === "" && (
+                                          <span>{errMsg?.jobFields?.public}</span>
+                                        )}
+                                      </p>{" "} */}
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
 
-                    {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+                              {/* ASSIGN TO INDIVIDUAL */}
-                    {selectedTab == "group" && (
+                              {selectedTab == "individual" && (
-                      <Formik
+                                <div className='w-full'>
-                        initialValues={initialValues}
+                                  <JobFieldInput
-                        validationSchema={validationSchema.fields.group}
+                                    input={true}
-                        onSubmit={jobFieldHandler}
+                                    inputName="individual"
-                      >
+                                    value={props?.values.individual}
-                        {(props) => {
+                                    placeholder="Enter email of individual"
-                          return (
+                                    inputHandler={props?.handleChange}
-                            <Form className="">
+                                    parentClass="w-full flex flex-col gap-4"
-                              {/* Offer this job to your group input */}
+                                  />
-                              <JobFieldInput
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                label="Offer this job to your Group"
+                                    {" "}
-                                select={true}
+                                    {props?.values.individual === "" && (
-                                inputName="group"
+                                      <span>{errMsg?.jobFields?.individual}</span>
-                                value={props?.values.group}
+                                    )}
-                                btnText="Send Order to Group"
+                                  </p>{" "}
-                                optionText="Select Group"
+                                </div>
-                                loader={loader?.jobFields?.group}
+                              )}
-                                errorHandler={errorHandler}
+
-                                data={groupList}
+                              {/* ASSIGN TO GROUP */}
-                                parentClass="w-full flex flex-col gap-4"
+                              {selectedTab == "group" && (
-                              />
+                                <div className='w-full'>
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                  <JobFieldInput
-                                {" "}
+                                    select={true}
-                                {props?.values.group === "" && (
+                                    inputName="group"
-                                  <span>{errMsg?.jobFields?.group}</span>
+                                    value={props?.values.group}
-                                )}
+                                    optionText="Select Group"
-                              </p>
+                                    data={groupList}
-                            </Form>
+                                    parentClass="w-full flex flex-col gap-4"
-                          );
+                                  />
-                        }}
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      </Formik>
+                                    {" "}
-                    )}
+                                    {props?.values.group === "" && (
+                                      <span>{errMsg?.jobFields?.group}</span>
+                                    )}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                            <div className="mt-3 mb-1 flex justify-end items-center">
+                              <button
+                                className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+                                type="submit"
+                                name={
+                                  selectedTab == 'family' ?
+                                  'family'
+                                  : selectedTab == 'public' ?
+                                  'public'
+                                  : selectedTab == 'individual' ?
+                                  'individual'
+                                  : selectedTab == 'group' ?
+                                  'group'
+                                  :
+                                  null
+                                }
+                                onClick={errorHandler}
+                                // disabled={!value}
+                              >
+                                {loader?.jobFields ? 
+                                  <LoadingSpinner size={5} /> 
+                                  : selectedTab == 'family' ?
+                                  'Assign to family'
+                                  : selectedTab == 'public' ?
+                                  'Show Task to Public'
+                                  : selectedTab == 'individual' ?
+                                  'Send Offer to Individual'
+                                  : selectedTab == 'group' ?
+                                  'Send Order to Group'
+                                  :
+                                  null
+                                }
+                              </button>
+                            </div>
+                          </Form>
+                        );
+                      }}
+                    </Formik>
                     <p
                       className={`text-center w-full text-lg ${
                         requestStatus.status
@@ -530,30 +584,15 @@ const JobFieldInput = ({
   select,
   label,
   labelClass,
-  btnText,
   parentClass,
   optionText,
-  errorHandler,
-  loader,
   data,
 }) => {
   return (
-    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
+    <div className="field w-full flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
-            <div
-              className={`flex items-center justify-start mb-2.5 ${labelClass}`}
-            >
-              {label && (
-                <label
-                  className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
-                  htmlFor={inputName}
-                >
-                  {label}
-                </label>
-              )}
-            </div>
             <div
               className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] 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}`}
             >
@@ -616,8 +655,6 @@ const JobFieldInput = ({
       {input && (
         <InputCom
           fieldClass="px-6"
-          label={label}
-          labelClass="tracking-wide border-2 w-full border-sky-700 py-4 px-2"
           type="email"
           name={inputName}
           placeholder={placeholder}
@@ -627,25 +664,6 @@ const JobFieldInput = ({
           parentClass={`${parentClass}`}
         />
       )}
-
-      {/* btn */}
-      <div className="my-1 flex justify-end items-center">
-        <button
-          type="submit"
-          name={inputName}
-          onClick={errorHandler}
-          // className={`px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md ${
-          //   !value && "disabled:grayscale-[65%] transition duration-300"
-          // }`}
-          className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white ${
-            !value && ""
-          }
-          `}
-          // disabled={!value}
-        >
-          {loader ? <LoadingSpinner size={5} /> : btnText}
-        </button>
-      </div>
     </div>
   );
 };

src/lib/apiConst.js

@@ -183,6 +183,7 @@ export const apiConst = {
     WRENCHBOARD_JOB_EXTEND_EXPIRE: 13041,
     WRENCHBOARD_JOB_RESEND_MESSAGE: 13042,
     WRENCHBOARD_JOB_CANCEL_OFFER: 13043,
+    WRENCHBOARD_VERIFY_COMPLETED_TASK: 13033,
 
     WRENCHBOARD_JOB_JOBGROUPS:    13045,
     WRENCHBOARD_JOB_JOBGROUPADD:  13046,

src/services/UsersService.js

@@ -1481,6 +1481,18 @@ class usersService {
     return this.postAuxEnd("/jobmanagerfiles", postData);
   }
 
+  // API FUNCTION FOR GETTING LIST OF VERIFY COMPLETED TASK
+  getVerifyCompletedTask(reqData) {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_VERIFY_COMPLETED_TASK,
+      ...reqData
+    };
+    return this.postAuxEnd("/verifycompleted", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)