src/components/FamilyAcc/FamilyActivities.jsx

@@ -6,10 +6,6 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyTableNew from "./FamilyTableNew";
 
 export default function FamilyActivities() {
-  const [familyList, setFamilyList] = useState({});
-  const [loader, setLoader] = useState(false);
-
-  const apiCall = useMemo(() => new usersService(), []);
 
   return (
     <Layout>
@@ -23,7 +19,10 @@ export default function FamilyActivities() {
                 <span className={``}>Tasks & Chores</span>
               </h1>
             </div>
-            <Link className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#3887c6] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]" to="/acc-family">
+            <Link
+              className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+              to="/acc-family"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -43,11 +42,7 @@ export default function FamilyActivities() {
             </Link>
           </div>
           <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
-            <FamilyTableNew
-              familyList={familyList?.result_list}
-              loader={loader}
-              imageServer={familyList?.session_image_server}
-            />
+            <FamilyTableNew />
           </Suspense>
         </div>
       </div>

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -9,16 +9,12 @@ const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
 const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
 const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
-export default function FamilyTableNew({
-  className,
-  accountDetails,
-  listReload,
-  loader,
-}) {
+export default function FamilyTableNew() {
   // Initial state for family details
   const initialDetailState = {
     loading: false,
     data: null,
+    link: "",
   };
   // console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
@@ -80,23 +76,23 @@ export default function FamilyTableNew({
   const tabComponents = {
     Tasks: (
       <FamilyTasks
-        className={className}
-        loader={details.familyTasks.loading || false}
+        image_link={details.familyTasks.link}
+        loader={details.familyTasks.loading}
         familyData={details.familyTasks.data}
-        accountDetails={accountDetails}
+        action={familyPopUpHandler}
       />
     ),
     Waiting: (
       <FamilyWaitlist
+        image_link={details.familyWaitList.link}
         familyData={details.familyWaitList.data}
-        accountDetails={accountDetails}
         loader={details.familyWaitList.loading}
       />
     ),
     Pending: (
       <FamilyPending
+        image_link={details.familyPending.link}
         familyData={details.familyPending.data}
-        accountDetails={accountDetails}
         loader={details.familyPending.loading}
       />
     ),
@@ -133,6 +129,9 @@ export default function FamilyTableNew({
         let _familyWaitData = familyWaitingRes?.data?.result_list;
         let familyPendingData = familyPendingRes?.data?.result_list;
 
+        // Getting the image server link
+        let imageServerLink = familyWaitingRes.data?.session_image_server;
+
         // Function to check for errors in data
         const checkDataError = (data) => data?.internal_return < 0;
 
@@ -145,9 +144,21 @@ export default function FamilyTableNew({
         }
 
         setDetails({
-          familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: _familyWaitData },
-          familyPending: { loading: false, data: familyPendingData },
+          familyTasks: {
+            loading: false,
+            data: tasksData,
+            link: imageServerLink,
+          },
+          familyWaitList: {
+            loading: false,
+            data: _familyWaitData,
+            link: imageServerLink,
+          },
+          familyPending: {
+            loading: false,
+            data: familyPendingData,
+            link: imageServerLink,
+          },
         });
       } catch (error) {
         resetDetails();
@@ -197,9 +208,7 @@ export default function FamilyTableNew({
 
   return (
     <div
-      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
-        className || ""
-      }`}
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full`}
     >
       <div className="relative w-full sm:rounded-lg overflow-x-auto">
         <Suspense

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -3,20 +3,12 @@ import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
 
-export default function FamilyPending({
-  familyData,
-  className,
-  accountDetails,
-  loader,
-}) {
+export default function FamilyPending({ familyData, image_link, loader }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   let filteredFamilyData = useMemo(
-    () =>
-      familyData?.filter(
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [accountDetails?.family_uid, familyData]
+    () => familyData?.filter((data) => data.family_uid !== ""),
+    [familyData]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -24,7 +16,7 @@ export default function FamilyPending({
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentPendingTasks = familyData?.slice(
+  const currentPendingTasks = filteredFamilyData?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -33,12 +25,11 @@ export default function FamilyPending({
     handlePagingFunc(e, setCurrentPage);
   };
 
-  console.log(familyData);
+  console.log(image_link)
+
   return (
     <div
-      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] ${
-        className || ""
-      }`}
+      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px]`}
     >
       {familyData && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
@@ -54,11 +45,9 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${
-                        familyData.session_image_server
-                      }${localStorage.getItem("session_token")}/job/${
-                        value.job_uid
-                      }`;
+                      let image = `${image_link}${localStorage.getItem(
+                        "session_token"
+                      )}/job/${value.job_uid}`;
                       return (
                         <tr
                           key={index}
@@ -140,8 +129,8 @@ export default function FamilyPending({
           <PaginatedList
             onClick={handlePagination}
             prev={currentPage == 0}
-            next={currentPage + itemsPerPage >= familyData.length}
-            data={familyData}
+            next={currentPage + itemsPerPage >= filteredFamilyData.length}
+            data={filteredFamilyData}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />

src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx

@@ -11,6 +11,7 @@ export default function FamilyNewTasks({
   className,
   loader,
   accountDetails,
+  action,
 }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
@@ -28,16 +29,14 @@ export default function FamilyNewTasks({
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem);
+  const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem);
 
   const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  console.log(familyData)
-  console.log(typeof familyData)
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
-        className || "" 
+        familyData && "flex items-center justify-center"
       }`}
     >
       {loader ? (
@@ -46,13 +45,28 @@ export default function FamilyNewTasks({
         </div>
       ) : (
         <>
-          {familyData?.length && (
+          {familyData && (
             <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">
                 <tbody>
                   {
                     <>
-                      {familyData?.length > 0 ? (
+                      {familyData?.length <= 0 ? (
+                        <tr>
+                          <td
+                            colSpan="2"
+                            className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap flex items-center justify-center gap-1"
+                          >
+                            You currently have no active tasks{" "}
+                            <span
+                              className="text-blue-400 cursor-pointer hover:underline transition duration-150"
+                              onClick={action}
+                            >
+                              add new
+                            </span>
+                          </td>
+                        </tr>
+                      ) : (
                         currentTasks.map((value, index) => {
                           // find due date
                           const dueDate = value?.delivery_date.split(" ")[0];
@@ -131,15 +145,6 @@ export default function FamilyNewTasks({
                             </tr>
                           );
                         })
-                      ) : (
-                        <tr>
-                          <td
-                            colSpan="2"
-                            className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"
-                          >
-                            No Family Task
-                          </td>
-                        </tr>
                       )}
                     </>
                   }

src/components/FamilyAcc/index.jsx

@@ -165,7 +165,7 @@ export default function FamilyAcc() {
             </div>
 
             <div className="flex gap-4 items-center">
-              <Link to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#3887c6] text-white px-2 gap-2`}>
+              <Link to="/acc-family/activities" className={`nav-item flex items-center rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white px-2 gap-2`}>
                 <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
                   <Icons name="pending-job" />
                 </span>
@@ -178,7 +178,7 @@ export default function FamilyAcc() {
               <Link
                 to={`/familysettings`}
                 state={{ imageServer: familyList?.session_image_server }}
-                className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#3887c6] text-white"
+                className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"