add task btn position changed

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -14,6 +14,9 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import profile from "../../../assets/images/profile-info-profile.png";
 import FamilyTasks from "./FamilyTasks";
 
+import AssignTaskPopout from '../FamilyPopout/AssignTaskPopout'
+
+
 export default function FamilyManageTabs({
   className,
   accountDetails,
@@ -50,6 +53,13 @@ export default function FamilyManageTabs({
   const tabHandler = (value) => {
     setTab(value);
   };
+
+  let [familyTaskPopout, setFamilyTaskPopout] = useState(false) // DETERMINES WHEN FAMILY ADD TASK POPOUT DISPLAYS
+
+  const familyPopUpHandler = () => { // FUNCTION TO CHANGE THE FAMILY ADD TASK POPOIUT STATE
+    setFamilyTaskPopout(prev => !prev)
+  }
+
   //   For profile uploads
   const [profileImg, setProfileImg] = useState(profile);
   // profile img
@@ -120,7 +130,7 @@ export default function FamilyManageTabs({
       className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
         className || ""
       }`}
-    >
+    > 
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
         <Suspense
           fallback={
@@ -141,21 +151,31 @@ export default function FamilyManageTabs({
             </div>
             <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
-                <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                <div className="w-full pr-8 flex items-center gap-1">
-                  {tabs.map(({ name, id }) => (
+                  <ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
-                    <li
+                    {tabs.map(({ name, id }) => (
-                      onClick={() => tabHandler(name)}
+                      <li
-                      className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
+                        onClick={() => tabHandler(name)}
-                        tab === name
+                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
-                          ? "text-purple border-r"
+                          tab === name
-                          : " text-thin-light-gray"
+                            ? "text-purple border-r"
-                      }`}
+                            : " text-thin-light-gray"
-                      key={id}
+                        }`}
-                    >
+                        key={id}
-                      <h1>{name}</h1>
+                      >
-                    </li>
+                        <h1>{name}</h1>
-                  ))}
+                      </li>
-                </ul>
+                    ))}
+                  </ul>
+                  <button
+                    type="button"
+                    onClick={familyPopUpHandler}
+                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  >
+                    Add task
+                    {/* {accountDetails?.firstname} */}
+                  </button>
+                </div>
                 <div className="flex-[0.9] lg:min-h-[450px] h-full">
                   {/* Your content here */}
                   {tabs.map(({ name, id }) => {
@@ -171,7 +191,6 @@ export default function FamilyManageTabs({
                             className={className}
                             loader={details.familyTasks.loading}
                             familyData={details.familyTasks.data}
-                            familyDetails={details.familyDetails.data}
                             accountDetails={accountDetails}
                           />
                         )}
@@ -193,6 +212,15 @@ export default function FamilyManageTabs({
           </div>
         </Suspense>
       </div>
+
+      {/* FAMILY ADD TASK POPOUT */}
+      {familyTaskPopout &&
+        <AssignTaskPopout 
+          action={familyPopUpHandler}
+          situation={familyTaskPopout}
+          familyDetails={details.familyDetails.data}
+        />
+      }
     </div>
   );
 }

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -8,18 +8,12 @@ import Icons from "../../Helpers/Icons";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import ModalCom from "../../Helpers/ModalCom";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
-import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-export default function FamilyTasks({ familyData, familyDetails, className, loader, accountDetails }) {
+
+export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
-  let [familyTaskPopout, setFamilyTaskPopout] = useState(false)
-
-  const familyPopUpHandler = () => {
-    setFamilyTaskPopout(prev => !prev)
-  }
-
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -43,15 +37,6 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
         </div>
       ) : (
         <>
-          <div className="w-full p-2 my-2 flex justify-end items-center">
-            <button
-              type="button"
-              onClick={familyPopUpHandler}
-              className="px-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-            >
-              Add task for {familyDetails?.firstname}
-            </button>
-          </div>
           {familyData && familyData?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -157,13 +142,6 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
           )}
         </>
       )}
-      {familyTaskPopout &&
-        <AssignTaskPopout 
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyDetails={familyDetails}
-        />
-      }
     </div>
   );
 }