Merge branch 'accept-offer-bg' of WrenchBoard/Users-Wrench into master

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -58,9 +58,9 @@ export default function FamilyTableNew() {
 
   // Array of tab names
   const tabs = [
-    { id: 1, name: "tasks" },
+    { id: 1, name: "Tasks" },
-    { id: 2, name: "waiting" },
+    { id: 2, name: "Waiting" },
-    { id: 3, name: "pending" },
+    { id: 3, name: "Pending" },
   ];
 
   // State for the currently selected tab
@@ -68,7 +68,7 @@ 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
@@ -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/jobPopout/OfferJobPopout.jsx

@@ -142,10 +142,10 @@ function OfferJobPopout({ details, onClose, situation }) {
           </button>
         </div>
         <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">
+          <div className="md:col-span-3 md:border-r-2">
 
             {/* INPUT SECTION */}
-            <div className='bg-[#FFFDEE]'>
+            <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>
@@ -175,33 +175,34 @@ function OfferJobPopout({ details, onClose, situation }) {
                 </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>
 
-            <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
+              <div className="my-2 md:flex">
-              {details.title}
+                <label className='job-label w-full md:w-[150px]'>Description :</label>
-            </p>
+                <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">
+              <div className="my-2 md:flx">
-              <label className='job-label w-full md:w-[150px]'>Description :</label>
+                {/* <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 max-h-[200px] overflow-y-auto`}>{details.description}</p>
+                <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> */}
-              {/* <Detail label="Description" value={details.description} /> */}
+                <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="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 */}