job lock key add

src/components/Cards/AvailableJobsCard.jsx

@@ -103,9 +103,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 +172,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">

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -145,7 +145,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
         <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">
             <div className="min-h-[300px]">
-              <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
+              <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>
 

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>
                                   
-                    {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
-                    {selectedTab == "group" && (
+                                    <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>
-                      <Formik
+                                    <div className='w-full'>
-                        initialValues={initialValues}
+                                      <JobFieldInput
-                        validationSchema={validationSchema.fields.group}
+                                        select={true}
-                        onSubmit={jobFieldHandler}
+                                        inputName="public"
-                      >
+                                        value={props?.values.public}
-                        {(props) => {
+                                        data={publicArray}
-                          return (
+                                        optionText="Select Duration"
-                            <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.public === "" && (
-                                inputName="group"
+                                          <span>{errMsg?.jobFields?.public}</span>
-                                value={props?.values.group}
+                                        )}
-                                btnText="Send Order to Group"
+                                      </p>{" "} */}
-                                optionText="Select Group"
+                                    </div>
-                                loader={loader?.jobFields?.group}
+                                  </div>
-                                errorHandler={errorHandler}
+                                </div>
-                                data={groupList}
+                              )}
-                                parentClass="w-full flex flex-col gap-4"
+
-                              />
+                              {/* ASSIGN TO INDIVIDUAL */}
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                              {selectedTab == "individual" && (
-                                {" "}
+                                <div className='w-full'>
-                                {props?.values.group === "" && (
+                                  <JobFieldInput
-                                  <span>{errMsg?.jobFields?.group}</span>
+                                    input={true}
-                                )}
+                                    inputName="individual"
-                              </p>
+                                    value={props?.values.individual}
-                            </Form>
+                                    placeholder="Enter email of individual"
-                          );
+                                    inputHandler={props?.handleChange}
-                        }}
+                                    parentClass="w-full flex flex-col gap-4"
-                      </Formik>
+                                  />
-                    )}
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values.individual === "" && (
+                                      <span>{errMsg?.jobFields?.individual}</span>
+                                    )}
+                                  </p>{" "}
+                                </div>
+                              )}
+
+                              {/* ASSIGN TO GROUP */}
+                              {selectedTab == "group" && (
+                                <div className='w-full'>
+                                  <JobFieldInput
+                                    select={true}
+                                    inputName="group"
+                                    value={props?.values.group}
+                                    optionText="Select Group"
+                                    data={groupList}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {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>
   );
 };