btn name changed based on job owner status

.env

@@ -82,4 +82,6 @@ REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
 #Family
-REACT_APP_MAX_FAMILY_MEMBERS=8
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0

.env.development

@@ -50,4 +50,6 @@ REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
-REACT_APP_MAX_FAMILY_MEMBERS=8
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0

.env.production

@@ -56,4 +56,6 @@ REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 REACT_APP_MAX_CREDIT_CARDS=4
 REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
 
-REACT_APP_MAX_FAMILY_MEMBERS=8
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0

src/components/Home/FullAccountDash.jsx

@@ -8,9 +8,13 @@ import { useSelector } from "react-redux";
 // import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
 //import UpdateTable from "./UpdateTable";
 import HomeActivities from "./HomeActivities";
+import MyOffersTable from "../MyTasks/MyOffersTable";
+import MyJobTable from "../MyTasks/MyJobTable";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function FullAccountDash(props) {
   console.log("PROPS IN HOME->", props);
+
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   return (
@@ -22,7 +26,31 @@ export default function FullAccountDash(props) {
           bannerList={props.bannerList}
           nextDueTask={props.nextDueTask}
         />
-        <HomeActivities className="mb-10" />
+        { props.offersList?.data?.result_list?.length ?
+          <MyOffersTable
+            MyActiveOffersList={props.offersList?.data}
+            className="mb-10"
+          />
+        : props.MyActiveJobList?.data?.length ?
+          <>
+            <div className="w-full mb-5 flex justify-between items-center gap-1">
+              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                <span>
+                  My Tasks
+                </span>
+              </h1>
+            </div>
+            <MyJobTable ActiveJobList={props.MyActiveJobList} Account={userDetails} />
+          </>
+         
+        : !props.offersList?.loading && !props.MyActiveJobList?.loading?
+          <HomeActivities className="mb-10" />
+        :
+          <div className="w-full h-[220px] flex items-center justify-center">
+            <LoadingSpinner size="16" color="sky-blue" />
+          </div>
+        }
+        
         {/*<UpdateTable className="mb-10"/>*/}
         {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}

src/components/Home/index.jsx

@@ -12,23 +12,25 @@ export default function Home(props) {
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
   let [nextDueTask, setNextDueTask] = useState({});
-  const [MyOffersList, setMyOffersList] = useState([]);
+  const [MyOffersList, setMyOffersList] = useState({loading: true, data: []});
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  // const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
 
   const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
     try {
       const res = await userApi.getMyActiveTaskList();
-      setMyActiveJobList(res?.data?.result_list);
+      setMyActiveJobList({loading:false, data:res?.data?.result_list});
+      // setMyActiveJobList(res?.data?.result_list);
     } catch (error) {
-      setMyActiveJobList([]);
+      setMyActiveJobList({loading:false, data:[]});
+      // setMyActiveJobList([]);
       console.log("Error getting tasks");
     }
   };
 
-
   // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
   const getHomeDate = () => {
     userApi
@@ -47,8 +49,9 @@ export default function Home(props) {
   const getMyOffersList = async () => {
     try {
       const res = await userApi.getOffersList();
-      setMyOffersList(res.data?.result_list);
+      setMyOffersList({loading:false, data:res.data});
     } catch (error) {
+      setMyOffersList({loading:false, data:[]});
       console.log("Error getting offers", error);
     }
   };
@@ -72,13 +75,15 @@ export default function Home(props) {
           <FamilyDash
             account={userDetails}
             commonHeadData={props.bannerList}
-            familyOffers={MyOffersList}
-            MyActiveJobList={MyActiveJobList}
+            familyOffers={MyOffersList?.data?.result_list}
+            MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (
           <FullAccountDash
             nextDueTask={nextDueTask}
             bannerList={props.bannerList}
+            offersList={MyOffersList}
+            MyActiveJobList={MyActiveJobList}
           />
         ) : (
           <div>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -405,6 +405,7 @@ function ActiveJobs(props) {
                   name="message"
                   onChange={handleMessageChange}
                   value={messageToSend}
+                  autoFocus
                 />
               ) : (
                 <div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -113,9 +113,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                     state: { ...value, pathname },
                                   });
                                 }}
-                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                               >
-                                View
+                                {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
                               </button>
                             </div>
                           </td>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -18,7 +18,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
     indexOfFirstItem,
     indexOfLastItem
   );
-
+  
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -103,9 +103,9 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                               onClick={() => {
                                 setJobPopout({ show: true, data: value });
                               }}
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
-                              View
+                              {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
                             </button>
                           </td>
                         </tr>

src/components/MyTasks/MyJobTable.jsx

@@ -55,15 +55,14 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
       {!ActiveJobList?.data.length && accountType && (
         <div className="absolute inset-0 bg-black opacity-30"></div>
       )}
-      {ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
+      {ActiveJobList.loading ? 
         <div className="w-full h-[520px] flex items-center justify-center">
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
-      )}
-
+      :
       <div className="relative w-full sm:rounded-lg">
         <div className="h-auto w-full">
-          {ActiveJobList?.data?.length > 0 &&
+          {ActiveJobList?.data?.length > 0 ?
             currentTask?.map((task, idx) => {
               // find due date
               const dueDate = task?.delivery_date.split(" ")[0];
@@ -129,16 +128,15 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                           state: { ...task, pathname },
                         });
                       }}
-                      className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                     >
-                      Manage
+                      {task.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
                     </button>
                   </div>
                 </div>
               );
-            })}
-
-          {ActiveJobList?.data?.length <= 0 && (
+            })
+          :
             <div
               className={`flex flex-col ${
                 accountType ? "items-center" : "items-end"
@@ -175,12 +173,12 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                 </button>
               </div>
             </div>
-          )}
-          {ActiveJobList?.internal_return < 0 && (
+          }
+          {/* {ActiveJobList?.internal_return < 0 && (
             <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
               <p className="p-2">Error Occurred! Unable to display Tasks!</p>
             </div>
-          )}
+          )} */}
         </div>
 
         {/* PAGINATION BUTTON */}
@@ -199,6 +197,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
         />
         {/* END OF PAGINATION BUTTON */}
       </div>
+      }
     </div>
   );
 }

src/components/jobPopout/JobListPopout.jsx

@@ -168,7 +168,6 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   // console.log("Job List P >> ", details)
-
   return (
     <ModalCom action={onClose} situation={situation} className="job-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -338,7 +337,8 @@ function JobListPopout({ details, onClose, situation }) {
                 );
               }}
             </Formik>
-
+            
+            { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.group}
@@ -368,6 +368,7 @@ function JobListPopout({ details, onClose, situation }) {
                 );
               }}
             </Formik>
+            }
           </div>
           {/* END OF ACTION SECTION */}
         </div>
@@ -468,10 +469,14 @@ const JobFieldInput = ({
           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"
-          }`}
-          disabled={!value}
+          // 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>