reject btn placed below

src/components/Dashboards/AccountDashboard.jsx

@@ -44,13 +44,13 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
                 );
               
                 let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
-                return (
-                  <div key={item.id}>
-                    {index < 3 &&
-                      <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
-                    }
-                  </div>
-                )
+                if(index < 3){
+                  return (
+                    <div key={item.offer_uid}>
+                        <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>
+                  )
+                }
             })}
           </>
 
@@ -89,12 +89,11 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
               
                 let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
                 if(index >= 3) {
-                    return 
-                    (<div key={item.id}>
+                    return(
+                    <div key={item.offer_uid}>
                         <NewOfferCardFlat datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
-                    </div>)
-                }else{
-                  null
+                    </div>
+                    )
                 }
             })}
           </>

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -20,6 +20,9 @@ export default function FamilyTableNew() {
 
   let { pathname } = useLocation();
 
+  const queryParams = new URLSearchParams(location?.search);
+  const preSelectedTab = queryParams.get("tab");
+
   // Initial state for family details
   const initialDetailState = {
     loading: false,
@@ -55,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
@@ -94,6 +97,14 @@ export default function FamilyTableNew() {
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
+  useEffect(()=>{ // EFFECT TO CHECK FOR PRE SELECTED TAB AND DEFAULT TO IT OR TO DEFAULT IF NOT AVALIABLE
+    if(preSelectedTab && tabs.map(item => item.name.toLowerCase()).includes(preSelectedTab.toLowerCase())){
+      setTab(preSelectedTab)
+    }else{
+      setTab(tabs[0].name)
+    }
+  },[])
+
 
   // Effect to manage active family task details
   useEffect(() => {

src/components/jobPopout/OfferJobPopout.jsx

@@ -141,60 +141,85 @@ 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="p-4 w-full 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"
+                {/* <Detail
+                  label="Date :"
                   value={
                     (details.offer_added && details.offer_added?.split(" ")[0]) ||
                     "default"
                   }
-                />
+                /> */}
+                <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">
-                <Detail
-                  label="Offer Expire"
+                {/* <Detail
+                  label="Offer Expire :"
                   value={details.expire && details.expire.split(" ")[0]}
-                />
+                /> */}
+                <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">
-                <Detail label="Reward" value={thePrice} />
+                {/* <Detail label="Reward :" value={thePrice} /> */}
+                <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">
-                <Detail
-                  label="Duration"
+                {/* <Detail
+                  label="Duration :"
                   value={`${details.timeline_days} day(s)`}
-                />
+                /> */}
+                <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>
 
-            <p className="text-lg my-5 font-semibold text-slate-900 dark:text-white tracking-wide line-clamp-1">
+            <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="Description" value={details.description} />
+              <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:flex">
-              <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 boder-2 rounded-md`}>{details.job_description || details.job_detail}</p>
+            <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" ? (