added account details 01

src/components/FamilyAcc/FamilyManage.jsx

@@ -69,7 +69,7 @@ export default function FamilyManage() {
     memberList();
   }, [listReload, memberList]);
 
-//   console.log('Ebueb', familyList)
+  console.log('Ebueb', familyList)
 
   return (
     <Layout>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -1,13 +1,23 @@
-import React, { useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
+import usersService from "../../services/UsersService";
 
 export default function FamilyManageTabs({
   className,
   accountDetails,
   loader,
 }) {
+  const [familyDetails, setFamilyDetails] = useState(null);
+  const [errMsg, setErrMsg] = useState("");
+  // List of tabs
   const tabs = [
     {
       id: 1,
@@ -23,9 +33,11 @@ export default function FamilyManageTabs({
     },
   ];
   const [tab, setTab] = useState(tabs[0].name);
+  const [manageLoader, setManageLoader] = useState(false);
   const tabHandler = (value) => {
     setTab(value);
   };
+  //   For profile uploads
   const [profileImg, setProfileImg] = useState(profile);
   // profile img
   const profileImgInput = useRef(null);
@@ -41,6 +53,30 @@ export default function FamilyManageTabs({
       imgReader.readAsDataURL(e.target.files[0]);
     }
   };
+  //   Api call
+  const apiCall = useMemo(() => new usersService(), []);
+  // function for manage family
+  const familyManageHandler = useCallback(async () => {
+    setManageLoader(true);
+    try {
+      let { family_uid } = accountDetails;
+      let reqData = { family_uid };
+      let res = await apiCall.ManageFamily(reqData);
+      let { data } = await res;
+      if (data?.internal_return < 0) return;
+      setFamilyDetails(data);
+      setManageLoader(false);
+    } catch (error) {
+      setErrMsg("An error occurred");
+      throw new Error(error);
+    }
+  }, [apiCall, accountDetails]);
+
+  useEffect(() => {
+    familyManageHandler();
+  }, []);
+
+  console.log(familyDetails);
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -80,7 +116,31 @@ export default function FamilyManageTabs({
                     </li>
                   ))}
                 </ul>
-                <div className="flex-[0.9]">{/* Your content here */}</div>
+                <div className="flex-[0.9] lg:min-h-[450px] h-full">
+                  {/* Your content here */}
+                  {tabs.map(({ name, id }) => {
+                    return (
+                      <div
+                        className={`${
+                          tab === name ? "block" : "hidden"
+                        } h-full p-4 border border-[#dbd9d9]`}
+                        key={id}
+                      >
+                        {manageLoader ? (
+                          <LoadingSpinner size="8" color="sky-blue" />
+                        ) : (
+                          <>
+                            {name === "Tasks" && <Tasks />}
+                            {name === "Account" && (
+                              <Account familyDetails={familyDetails} />
+                            )}
+                            {name === "Profile" && <Profile />}
+                          </>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
               </div>
             </div>
           </div>
@@ -150,3 +210,26 @@ function ProfileInfo({
     </div>
   );
 }
+
+function Tasks() {
+  return <>Tasks</>;
+}
+
+function Account({ familyDetails }) {
+  return (
+    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
+      <div className="flex flex-col">
+        <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
+        </h2>
+        <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
+        </h2>
+      </div>
+    </div>
+  );
+}
+
+function Profile() {
+  return <>Profile</>;
+}

src/components/FamilyAcc/FamilyTable.jsx

@@ -41,14 +41,14 @@ export default function FamilyTable({ className, familyList, loader }) {
                         added,
                         last_login,
                         task_count,
-                        uid,
+                        family_uid,
                       } = props;
                       let addedDate = added?.split(" ")[0];
                       let LoginDate = last_login?.split(" ")[0];
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                          key={uid}
+                          key={family_uid}
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">