added referal page header

src/components/AuthPages/VerifyYou/index2.jsx

@@ -28,21 +28,14 @@ export default function VerifyYou() {
                 </span>
               </div>
               <div className="input-area">
-                <div className="mb-5">
+              <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account
+                    Please <span className="font-semibold tracking-wide">verify your email</span> to secure your account.
-                    by verifying your email registration address. Verification
-                    will let you access all of WrenchBoard's features.
                   </p>
                 </div>
                 <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few
+                    If you don't see the confirmation email, check your <span className='font-semibold tracking-wide'>Junk</span> or <span className='font-semibold tracking-wide'>Spam</span> folder and mark it as "Not Junk"
-                    minutes of signing up, please check your Junk E-mail folder
-                    just in case the confirmation email got delivered there
-                    instead of your inbox. If so, select the confirmation
-                    message and click Not Junk, which will allow future messages
-                    to get through.
                   </p>
                 </div>
               </div>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import ModalCom from "../../Helpers/ModalCom";
@@ -9,6 +10,11 @@ import LockJob from "./LockJob";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduct }) => {
 
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const interestCount = jobLists?.interest_list?.filter(item => item.job_uid == details.job_uid);
+  // console.log('interestList', interest_count)
+  // console.log('MEMO', jobLists?.interest_list, datas.job_uid)
+
   let {sendJobInterestToOwner} = SocketValues() // function to emit job interest request
   const emitOfferInterest = () => {
     let message = {
@@ -326,7 +332,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
 
                 <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>
+                    <span className="job-label">Interest: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
                   </p>
                   <hr />
                   <p className="my-1 flex flex-col">

src/components/Referral/ReferralDisplay.jsx

@@ -7,6 +7,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
+import TabButton from "../customTabs/TabButton";
 
 const validationSchema = Yup.object().shape({
   ref_email: Yup.string()
@@ -105,13 +106,27 @@ function ReferralDisplay() {
     sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE
   };
 
+  const [selectedTab, setSelectedTab] = useState("Send Referral");
+  const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+      {
+        id: 1,
+        title: "Send Referral",
+        iconName: "history",
+      },
+      {
+        id: 2,
+        title: "Referral List",
+        iconName: "history",
+      },
+  ]
+
   useEffect(() => {
     allReferrals();
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
+    <>
-      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+      <div className='w-full'>
         <div className="sm:flex justify-between items-center mb-6">
           <div className="mb-5 sm:mb-0">
             <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
@@ -119,111 +134,138 @@ function ReferralDisplay() {
             </h1>
           </div>
         </div>
-
+      </div>
-        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+      <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
-          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+        <div className="content-tab-items lg:w-[230px] w-full mr-2">
-            Send Referral
+            <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
-          </h2>
+                {tabs.map((item) => (
-          <Formik
+                    <div key={item.id} className='w-full'>
-            initialValues={initialValues}
+                        <TabButton 
-            validationSchema={validationSchema}
+                            key={item.id}
-            onSubmit={handleSubmit}
+                            item={item.title}
-          >
+                            iconName={item.iconName}
-            {(props) => (
+                            selectedTab={selectedTab}
-              <Form className="referral-info">
+                            setSelectedTab={setSelectedTab}
-                <div className="block md:mb-6 md:flex gap-10">
+                        />
-                  {/* Firstname */}
+                    </div>
-                  <div className="field w-full mb-6 md:mb-0">
+                ))}
-                    <InputCom
+            </div>
-                      fieldClass="px-6"
-                      label="Firstname"
-                      type="text"
-                      name="ref_firstname"
-                      placeholder="Firstname"
-                      value={props.values.ref_firstname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_firstname &&
-                      props.touched.ref_firstname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_firstname}
-                        </p>
-                      )}
-                  </div>
-
-                  {/* Lastname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Lastname"
-                      type="text"
-                      name="ref_lastname"
-                      placeholder="Lastname"
-                      value={props.values.ref_lastname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_lastname &&
-                      props.touched.ref_lastname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_lastname}
-                        </p>
-                      )}
-                  </div>
-                </div>
-
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Email"
-                    type="text"
-                    name="ref_email"
-                    placeholder="Email"
-                    value={props.values.ref_email}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.ref_email && props.touched.ref_email && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.ref_email}
-                    </p>
-                  )}
-                </div>
-
-                <hr />
-                {error.message != "" && (
-                  <p className="text-base text-red-500 py-2">{error.message}</p>
-                )}
-                <div className="referral-btn flex justify-end items-center py-4 border-b-4">
-                  {error.loading ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : (
-                    <button
-                      type="submit"
-                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      Send Message
-                    </button>
-                  )}
-                </div>
-              </Form>
-            )}
-          </Formik>
         </div>
+        <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+        <div className="flex-1 overflow-y-auto min-h-[520px]">
+          <>
+            {selectedTab == 'Send Referral' &&
+              <div className="referral w-full p-4">
+                <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                  Send Referral
+                </h2>
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {(props) => (
+                    <Form className="referral-info">
+                      <div className="block md:mb-6 md:flex gap-10">
+                        {/* Firstname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Firstname"
+                            type="text"
+                            name="ref_firstname"
+                            placeholder="Firstname"
+                            value={props.values.ref_firstname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_firstname &&
+                            props.touched.ref_firstname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_firstname}
+                              </p>
+                            )}
+                        </div>
 
-        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                        {/* Lastname */}
-          <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                        <div className="field w-full mb-6 md:mb-0">
-            Referral List
+                          <InputCom
-          </h2>
+                            fieldClass="px-6"
-          {referralList.loading ? (
+                            label="Lastname"
-            <LoadingSpinner size="32" color="sky-blue" />
+                            type="text"
-          ) : (
+                            name="ref_lastname"
-            <ReferralTable history={referralList} />
+                            placeholder="Lastname"
-          )}
+                            value={props.values.ref_lastname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_lastname &&
+                            props.touched.ref_lastname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_lastname}
+                              </p>
+                            )}
+                        </div>
+                      </div>
+
+                      <div className="field w-full mb-6">
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Email"
+                          type="text"
+                          name="ref_email"
+                          placeholder="Email"
+                          value={props.values.ref_email}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                        />
+                        {props.errors.ref_email && props.touched.ref_email && (
+                          <p className="text-sm text-red-500">
+                            {props.errors.ref_email}
+                          </p>
+                        )}
+                      </div>
+
+                      <hr />
+                      {error.message != "" && (
+                        <p className="text-base text-red-500 py-2">{error.message}</p>
+                      )}
+                      <div className="referral-btn flex justify-end items-center py-4">
+                        {error.loading ? (
+                          <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                          <button
+                            type="submit"
+                            className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            Send Message
+                          </button>
+                        )}
+                      </div>
+                    </Form>
+                  )}
+                </Formik>
+              </div>
+            }
+
+            {selectedTab == 'Referral List' &&
+              <>
+                <div className="w-full p-4">
+                  <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                    Referral List
+                  </h2>
+                  {referralList.loading ? (
+                    <LoadingSpinner size="22" color="sky-blue" />
+                  ) : (
+                    <ReferralTable history={referralList} />
+                  )}
+                </div>
+              </>
+            }
+          </>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

src/components/jobPopout/NewJobListPopout.jsx

@@ -252,7 +252,7 @@ function NewJobListPopout({
     ];
 
     return (
-      <div className="px-4 pb-3 w-full md:border-r-2 flex flex-col justify-between">
+      <div className="px-4 pb-3 w-full h-full md:border-r-2 flex flex-col justify-between">
         {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
         {/* INPUT SECTION */}
@@ -320,7 +320,7 @@ function NewJobListPopout({
           <>
             {/* ACTION SECTION */}
             {+taskWalletSelector.amount > +details.price ? (
-              <div className="px-4 pb-3 w-full flex flex-col justify-between">
+              <div className="px-4 pb-3 w-full flex flex-col justify-between h-auto md:min-h-[450px]">
                 <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
                   Send this Task to:
                 </h1>
@@ -344,11 +344,11 @@ function NewJobListPopout({
                         {selectedTab == 'family' ?
                             'Assign to family'
                             : selectedTab == 'public' ?
-                            'Offer this job to public'
+                            'Place in Market'
                             : selectedTab == 'individual' ?
-                            'Offer this job to individual'
+                            'Assign to individual'
                             : selectedTab == 'group' ?
-                            'Offer this job to your Group'
+                            'Preferred List'
                             :
                             null
                         }

src/components/jobPopout/popoutcomponent/AssignToFamily.jsx

@@ -28,7 +28,7 @@ export default function AssignToFamily({
   >
     {(props) => {
       return (
-        <Form className="w-full">
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
           <div className='w-full'>
               <div className='hidden w-full'>
                 <JobFieldInput
@@ -48,7 +48,7 @@ export default function AssignToFamily({
           </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`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
               type="submit"
               name='family'
             >

src/components/jobPopout/popoutcomponent/AssignToGroup.jsx

@@ -28,7 +28,7 @@ export default function AssignToGroup({
   >
     {(props) => {
       return (
-        <Form className="w-full">
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
           <div className='w-full'>
               <div className='w-full'>
                 <JobFieldInput
@@ -48,14 +48,14 @@ export default function AssignToGroup({
           </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`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
               type="submit"
               name='group'
             >
               {loader?.jobFields ? 
                 <LoadingSpinner size={5} /> 
                 :
-                'Send Order to Group'
+                'Send Task to Group'
               }
             </button>
           </div>

src/components/jobPopout/popoutcomponent/AssignToIndividual.jsx

@@ -32,7 +32,7 @@ export default function AssignToIndividual({
   >
     {(props) => {
       return (
-        <Form className="w-full">
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
           <div className='w-full'>
               <div className='w-full'>
                 <JobFieldInput
@@ -41,7 +41,8 @@ export default function AssignToIndividual({
                     value={props?.values.individual}
                     placeholder="Enter email of individual"
                     inputHandler={props?.handleChange}
-                    parentClass="w-full flex flex-col gap-4"
+                    parentClass="w-full"
+                    labelClass="mb-0"
                 />
                 <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
                   {(props.errors.individual && props.touched.individual) && (
@@ -52,7 +53,7 @@ export default function AssignToIndividual({
           </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`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
               type="submit"
               name='individual'
             >

src/components/jobPopout/popoutcomponent/AssignToPublic.jsx

@@ -15,8 +15,8 @@ const validationSchema = Yup.object().shape({
 
 let initialValues = {
     public: "",
-    depend_uid: '',
+    depend_uid: "",
-    timeline: ''
+    timeline: "0"
 };
 
 export default function AssignToPublic({
@@ -36,37 +36,37 @@ export default function AssignToPublic({
   >
     {(props) => {
       return (
-        <Form className="w-full">
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
             <div className='w-full'>
                 <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'>Depends on:</label>
+                  <label className='w-full xxs:max-w-[120px] xxs:text-right'>Depends on:</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`}
+                      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`}
-                >
+                  >
-                    <select 
+                      <select 
-                    className='px-2 w-full h-full bg-white border-0 outline-0'
+                      className='px-2 w-full h-full bg-white border-0 outline-0'
-                    name="depend_uid"
+                      name="depend_uid"
-                    value={props?.values.depend_uid}
+                      value={props?.values.depend_uid}
-                    onChange={props.handleChange}
+                      onChange={props.handleChange}
-                    >
+                      >
-                    <>
+                      <>
-                        {myJobList.loading ? (
+                          {myJobList.loading ? (
-                        <option value={""}>Loading...</option>
+                          <option value={""}>Loading...</option>
-                        ) : myJobList?.data?.result_list?.length > 0 ? (
+                          ) : myJobList?.data?.result_list?.length > 0 ? (
-                        <>
+                          <>
-                            <option value="">None</option>
+                              <option value="">None</option>
-                            {myJobList?.data?.result_list?.filter(item => item.job_uid != details.job_uid)?.map((item, index) => (
+                              {myJobList?.data?.result_list?.filter(item => item.job_uid != details.job_uid)?.map((item, index) => (
-                            <option value={item?.job_uid} key={item.job_uid}>
+                              <option value={item?.job_uid} key={item.job_uid}>
-                                {item?.title}
+                                  {item?.title}
-                            </option>
+                              </option>
-                            ))}
+                              ))}
-                        </>
+                          </>
-                        ) : (
+                          ) : (
-                        <option value="">No Job Found</option>
+                          <option value="">No Job Found</option>
-                        )}
+                          )}
-                    </>
+                      </>
-                    </select>
+                      </select>
-                </div>
+                  </div>
                 </div>
                 
                 <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
@@ -102,14 +102,14 @@ export default function AssignToPublic({
             </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`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
               type="submit"
               name='public'
             >
               {loader?.jobFields ? 
                 <LoadingSpinner size={5} /> 
                 :
-                'Show Task to Public'
+                'Place Task to the Market'
               }
             </button>
           </div>

src/components/jobPopout/popoutcomponent/JobFieldInput.jsx

@@ -36,7 +36,9 @@ export default function JobFieldInput({
                 {(inputName == "family" || inputName == "public" || inputName == "timeline") &&
                   Array.isArray(data) && (
                     <>
+                    {inputName != "timeline" &&
                       <option value="">{optionText}</option>
+                    }
                       {data?.map((item, idx) => (
                         <React.Fragment key={idx}>
                           {inputName === "family" &&
@@ -98,6 +100,7 @@ export default function JobFieldInput({
           inputBg="bg-white"
           parentClass={`${parentClass}`}
           disable={disabled}
+          labelClass={labelClass}
         />
       )}
     </div>

src/services/UsersService.js

@@ -208,7 +208,7 @@ class usersService {
   // }
   getHeroJBanners() {
     var postData = {
-      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,