Merge with master

src/components/Cards/OfferCard.jsx

@@ -20,7 +20,7 @@ export default function OfferCard({
   let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`
 
   return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+    <div className="card-style-one flex flex-col gap-3 justify-between w-full bg-white dark:bg-dark-white p-3 rounded-2xl">
       <div className="content">
         <div className="w-full h-40">
           {/* thumbnail image/video */}
@@ -46,24 +46,24 @@ export default function OfferCard({
           </h1>
 
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-1 gap-2">
-              {/* <div className="flex flex-col justify-between items-center border-r-2">
+            {/* <div className="grid grid-cols-1 gap-2">
+              <div className="flex flex-col justify-between items-center border-r-2">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Task Code
                 </p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   {datas.contract}
                 </p>
-              </div> */}
+              </div>
               <div className="flex flex-col justify-between items-center">
                 <p className="text-sm text-red-500 tracking-wide">Expires</p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   <CountDown lastDate={datas.expire} />
                 </p>
               </div>
-            </div>
+            </div> */}
 
-            <hr className="my-2" />
+            {/* <hr className="my-2" /> */}
 
             <div className="grid grid-cols-2 gap-2">
               <div className="flex flex-col justify-between items-center border-r-2">
@@ -74,13 +74,19 @@ export default function OfferCard({
                   {thePrice}
                 </p>
               </div>
-              <div className="flex flex-col justify-between items-center">
+              {/* <div className="flex flex-col justify-between items-center">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Timeline
                 </p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   {`${datas.timeline_days} day(s)`}
                 </p>
+              </div> */}
+              <div className="flex flex-col justify-between items-center">
+                <p className="text-sm text-red-500 tracking-wide">Expires</p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  <CountDown lastDate={datas.expire} />
+                </p>
               </div>
             </div>
           </div>

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -58,9 +58,9 @@ export default function FamilyTableNew() {
 
   // Array of tab names
   const tabs = [
-    { id: 1, name: "tasks" },
-    { id: 2, name: "waiting" },
-    { id: 3, name: "pending" },
+    { id: 1, name: "Tasks" },
+    { id: 2, name: "Waiting" },
+    { id: 3, name: "Pending" },
   ];
 
   // State for the currently selected tab
@@ -68,31 +68,31 @@ export default function FamilyTableNew() {
 
   // Function to handle tab changes
   const tabHandler = (value) => {
-    setTab(value);
+    setTab(value.toLowerCase());
   };
 
   // Object that maps tab names to their corresponding components
   const tabComponents = {
-    Tasks: (
+    tasks: (
       <FamilyTasks
         familyData={familyTasks}
         action={familyAssignPopUpHandler}
       />
     ),
-    Waiting: (
+    waiting: (
       <FamilyWaitlist
         familyData={familyWaitList}
         setUpdatePage={setUpdatePage}
       />
     ),
-    Pending: (
+    pending: (
       <FamilyPending
         familyData={familyPending}
       />
     ),
   };
 
-  const defaultTabComponent = tabComponents.Tasks;
+  const defaultTabComponent = tabComponents.tasks;
 
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
@@ -200,7 +200,7 @@ export default function FamilyTableNew() {
         <Suspense
           fallback={
             <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
-              <LoadingSpinner size="16" color="sky-blue" />
+              <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
             </div>
           }
         >
@@ -213,7 +213,7 @@ export default function FamilyTableNew() {
                       <li
                         onClick={() => tabHandler(name)}
                         className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                          tab === name
+                          tab.toLowerCase() === name.toLowerCase()
                             ? "text-purple border-r"
                             : "text-thin-light-gray"
                         }`}
@@ -235,7 +235,7 @@ export default function FamilyTableNew() {
                 <div className="flex-[0.9] h-full">
                   <div className="h-full relative overflow-y-auto">
                     <Suspense
-                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                      fallback={<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />}
                     >
                       {selectedTabComponent}
                     </Suspense>

src/components/MyTasks/index.jsx

@@ -37,7 +37,7 @@ export default function MyTasks({
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
-          <div className="sm:flex justify-between items-center mb-6">
+          <div className="sm:flex justify-between items-center hidden">
             {/* <div className="w-full mb-5 sm:mb-0 flex justify-between items-center gap-1">
               {userDetails.account_type == 'FAMILY' &&
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">

src/components/jobPopout/OfferJobPopout.jsx

@@ -141,72 +141,72 @@ function OfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+        <div className="grid md:grid-cols-4 bg-white dark:bg-dark-white rounded-lg">
+          <div className="md:col-span-3 md:border-r-2">
 
             {/* INPUT SECTION */}
-            <div className='grid md:grid-cols-2'>
-              <div className="my-2 md:flex">
-                <Detail
-                  label="Date"
-                  value={
-                    (details.offer_added && details.offer_added?.split(" ")[0]) ||
-                    "default"
-                  }
-                />
+            <div className='bg-[#FFFDEE] p-4 w-full'>
+              <div className='grid md:grid-cols-2'>
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Date :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>
+                    {
+                      (details.offer_added && details.offer_added?.split(" ")[0]) ||
+                      "default"
+                    }
+                  </p>
+                </div>
+
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Expire :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{details.expire && details.expire.split(" ")[0]}</p>
+                </div>
               </div>
 
+              <div className='grid md:grid-cols-2'>
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Reward :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{thePrice}</p>
+                </div>
+
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Duration :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{`${details.timeline_days} day(s)`}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className='p-4 w-full'>
+              <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
+                {details.title}
+              </p>
+
               <div className="my-2 md:flex">
-                <Detail
-                  label="Offer Expire"
-                  value={details.expire && details.expire.split(" ")[0]}
+                <label className='job-label w-full md:w-[150px]'>Description :</label>
+                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
+                {/* <Detail label="Description" value={details.description} /> */}
+              </div>
+
+              <div className="my-2 md:flx">
+                {/* <label className='job-label w-full md:w-[150px]'>Detail</label>
+                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
+                <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                  Delivery Detail :
+                </label>
+                <textarea
+                  className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                  rows="5"
+                  style={{ resize: "none" }}
+                  value={details.job_description || details.job_detail}
+                  readOnly
                 />
               </div>
             </div>
 
-            <div className='grid md:grid-cols-2'>
-              <div className="my-2 md:flex">
-                <Detail label="Reward" value={thePrice} />
-              </div>
-
-              <div className="my-2 md:flex">
-                <Detail
-                  label="Duration"
-                  value={`${details.timeline_days} day(s)`}
-                />
-              </div>
-            </div>
-
-            <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
-              {details.title}
-            </p>
-
-            <div className="my-2 md:flex">
-              <label className='job-label w-full md:w-[150px]'>Description</label>
-              <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
-              {/* <Detail label="Description" value={details.description} /> */}
-            </div>
-
-
-
-            <div className="my-2 md:flx">
-              {/* <label className='job-label w-full md:w-[150px]'>Detail</label>
-              <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
-              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
-                Delivery Detail
-              </label>
-              <textarea
-                className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                rows="5"
-                style={{ resize: "none" }}
-                value={details.job_description || details.job_detail}
-                readOnly
-              />
-            </div>
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-1/4 h-full">
+          <div className="p-4 w-full md:col-span-1 h-full flex flex-col justify-between">
             <div className="my-3 md:flex flex-col md:justify-center">
               <h1 className='mb-2 text-base font-semibold text-slate-900 dark:text-white tracking-wide'>I understand the task</h1>
               {requestStatus.loading && requestStatus.trigger == "offer" ? (

src/middleware/AuthRoute.jsx

@@ -111,6 +111,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
+  //FUNCTION TO GET COMMON HEAD DATA
+  useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
+      apiCall
+        .getHeroJBanners()
+        .then((res) => {
+          if (res.data?.internal_return < 0) {
+            return;
+          }
+          dispatch(commonHeadBanner(res.data));
+        })
+        .catch((error) => {
+          console.log("ERROR ", error);
+        });
+  }, [isLogin.status, homeBanners]);
+
   useEffect(() => { // FUNCTION TO GET NOTIFICATIONS LIST
     const notifications = () => {
       // function to load user notification
@@ -231,24 +249,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMarketActiveJobList();
   }, [apiCall, dispatch, marketTableList, isLogin.status]);
 
-  //FUNCTION TO GET COMMON HEAD DATA
-  useEffect(() => {
-    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
-      return
-    }
-      apiCall
-        .getHeroJBanners()
-        .then((res) => {
-          if (res.data?.internal_return < 0) {
-            return;
-          }
-          dispatch(commonHeadBanner(res.data));
-        })
-        .catch((error) => {
-          console.log("ERROR ", error);
-        });
-  }, [isLogin.status, homeBanners]);
-
   //FUNCTION TO GET COMMON HEAD DATA
   // useEffect(() => {
   //   if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY