Fixed popup design and refresh list

src/components/FamilyAcc/FamilyTable.jsx

@@ -1,68 +1,89 @@
 import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 
-export default function FamilyTable({ className }) {
+export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-8 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">
-        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-          <tbody>
-            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
-              <td className="py-4">Name</td>
-              <td className="py-4 text-center">Last Login</td>
-              <td className="py-4 text-center">No of Tasks</td>
-              <td className="py-4 text-right">Status</td>
-            </tr>
-            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-              <td className=" py-4">
-                <div className="flex space-x-2 items-center">
-                  <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                    <img
-                      src={dataImage1}
-                      alt="data"
-                      className="w-full h-full"
-                    />
-                  </div>
-                  <div className="flex flex-col">
-                    <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      Firstname Lastname (age)
-                    </h1>
-                    <span className="text-sm text-thin-light-gray">
-                      Added <span className="text-purple">10-10-2029</span>
-                    </span>
-                  </div>
-                </div>
-              </td>
-              <td className="text-center py-4 px-2">
-                <div className="flex space-x-1 items-center justify-center">
-                  <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                    10-10-2019
-                  </span>
-                </div>
-              </td>
-              <td className="text-center py-4 px-2">
-                <div className="flex space-x-1 items-center justify-center">
-                  <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                    100
-                  </span>
-                </div>
-              </td>
-
-              <td className="text-right py-4 px-2">
-                <button
-                  type="button"
-                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                >
-                  Manage
-                </button>
-              </td>
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+            <thead className="sticky top-0">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+              <th className="py-4">Name</th>
+              <th className="py-4 text-center">Last Login</th>
+              <th className="py-4 text-center">No of Tasks</th>
+              <th className="py-4 text-right">Status</th>
             </tr>
+            </thead>
+          <tbody className="overflow-y-scroll h-auto">
+            {loader ? (
+              <div className="signup btn-loader"></div>
+            ) : (
+              <>
+                {familyList?.length > 0 ? (
+                  familyList?.map(({ firstname, lastname, age }, idx) => (
+                    <tr
+                      className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                      key={idx}
+                    >
+                      <td className=" py-4">
+                        <div className="flex space-x-2 items-center">
+                          <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                            <img
+                              src={dataImage1}
+                              alt="data"
+                              className="w-full h-full"
+                            />
+                          </div>
+                          <div className="flex flex-col">
+                            <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                              {`${firstname} ${lastname} (${age})`}
+                            </h1>
+                            <span className="text-sm text-thin-light-gray">
+                              Added{" "}
+                              <span className="text-purple">10-10-2029</span>
+                            </span>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="text-center py-4 px-2">
+                        <div className="flex space-x-1 items-center justify-center">
+                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                            10-10-2019
+                          </span>
+                        </div>
+                      </td>
+                      <td className="text-center py-4 px-2">
+                        <div className="flex space-x-1 items-center justify-center">
+                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                            100
+                          </span>
+                        </div>
+                      </td>
+                      <td className="text-right py-4 px-2">
+                        <button
+                          type="button"
+                          className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        >
+                          Manage
+                        </button>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr class="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                    <td class="p-2" colspan="4">
+                      No Family Accounts Found!
+                    </td>
+                  </tr>
+                )}
+              </>
+            )}
           </tbody>
         </table>
       </div>

src/components/FamilyAcc/index.jsx

@@ -1,4 +1,4 @@
-import React, { useId, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useId, useMemo, useState } from "react";
 import CustomPopUp from "../Helpers/CustomPopUp";
 import InputCom from "../Helpers/Inputs/InputCom";
 import Layout from "../Partials/Layout";
@@ -9,6 +9,10 @@ export default function FamilyAcc() {
   const [selectTab, setValue] = useState("today");
   const [selectedAge, setSelectedAge] = useState(undefined);
   const [loader, setLoader] = useState(false);
+  const [popUp, setPopUp] = useState(false);
+  const [isOpen, setIsOpen] = useState(false)
+  const [familyList, setFamilyList] = useState([])
+  const [listReload, setListReload] = useState(false);
   const [msgErr, setMsgErr] = useState("");
   const [formData, setFormData] = useState({
     first_name: "",
@@ -17,6 +21,10 @@ export default function FamilyAcc() {
 
   const apiCall = useMemo(() => new SiteService(), []);
 
+  const popUpHandler = () => {
+    setPopUp(!popUp);
+  };
+
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);
@@ -58,7 +66,11 @@ export default function FamilyAcc() {
         const { data } = res;
         if (data.internal_return > 0 && data.status == "OK") {
           setLoader(false);
-          console.log(data);
+          setListReload((prev) => !prev);
+          setIsOpen(false);
+        } else {
+          setLoader(false);
+          setMsgErr("Sorry, something went wrong");
         }
       } else {
         setLoader(false);
@@ -71,9 +83,43 @@ export default function FamilyAcc() {
       setTimeout(() => {
         setMsgErr(null);
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      setFormData({
+        first_name: "",
+        last_name: "",
+      });
     }
   };
 
+  // member listing
+  const memberList = useCallback(async () => {
+    setLoader(true);
+    try {
+      let reqData = {
+        member_id: localStorage.getItem("member_id"),
+        uid: localStorage.getItem("uid"),
+        sessionid: localStorage.getItem("session_token"),
+        limit: 20,
+        offset: 1,
+        action: 22010,
+      };
+
+      let res = await apiCall.familyListings(reqData);
+      const { data } = res;
+      if (data?.internal_return >= 0 && data?.status == "OK") {
+        let { result_list } = data;
+        setFamilyList(result_list);
+        setLoader(false);
+      } else return;
+    } catch (error) {
+      setLoader(false);
+      throw new Error(error);
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
+    memberList();
+  }, [listReload, memberList]);
+
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -93,6 +139,9 @@ export default function FamilyAcc() {
                   btn_class="text-purple"
                   key={id}
                   title="Add members"
+                  isOpen={isOpen}
+                  setIsOpen={setIsOpen}
+                  modalHandler={popUpHandler}
                 >
                   <FamilyForm
                     value={formData}
@@ -114,7 +163,7 @@ export default function FamilyAcc() {
               ></div>
             </div>
           </div>
-          <FamilyTable />
+          <FamilyTable familyList={familyList} loader={loader} />
         </div>
       </div>
     </Layout>

src/components/Helpers/CustomPopUp/index.jsx

@@ -1,8 +1,14 @@
-import React, { useState } from "react";
-
-const CustomPopUp = ({ name, btn_class, title, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+import React, { useEffect } from "react";
 
+const CustomPopUp = ({
+  name,
+  btn_class,
+  title,
+  children,
+  isOpen,
+  setIsOpen,
+  modalHandler,
+}) => {
   const handleOpen = () => {
     setIsOpen(true);
   };
@@ -11,6 +17,15 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
     setIsOpen(false);
   };
 
+  useEffect(() => {
+    if (modalHandler) {
+      document.body.style.overflowY = "hidden";
+    }
+    return () => {
+      document.body.style.overflowY = "unset";
+    };
+  });
+
   return (
     <>
       <button onClick={handleOpen} className={btn_class}>
@@ -18,15 +33,26 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
       </button>
 
       {isOpen && (
-        <div className={`fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 transition-opacity ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
-          <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out lg:max-w-[400px] lg:min-h-[300px] max-w-[300px] min-h-[200px] w-full">
-            <div className="w-full flex justify-end">
-              <button onClick={handleClose}>
-                <CloseIcon />
-              </button>
+        <div className="modal-com">
+          <div
+            className={`fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50`}
+          ></div>
+          <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">
+            <div className="bg-white rounded-md p-6 shadow-lg transform transition-all duration-300 ease-in-out dark:bg-dark-white logout-modal-wrapper lg:w-[460px] lg:h-auto  max-[467px]:max-w-[26rem]">
+              <div className="w-full flex items-center justify-between lg:px-4 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
+                {title && (
+                  <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide cursor-default">
+                    {title}
+                  </h1>
+                )}
+                <button onClick={handleClose}>
+                  <CloseIcon />
+                </button>
+              </div>
+              <div className="logout-modal-body w-full flex flex-col items-center px-4 py-8">
+                {children && children}
+              </div>
             </div>
-            {title && <h2 className="text-xl font-bold mb-2">{title}</h2>}
-            {children}
           </div>
         </div>
       )}

src/components/Helpers/ModalCom.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-export default function ModalCom({ action, children, situation }) {
+export default function ModalCom({ action, children, situation, isOpen }) {
   useEffect(() => {
     if (situation) {
       document.body.style.overflowY = "hidden";
@@ -13,7 +13,7 @@ export default function ModalCom({ action, children, situation }) {
   return (
     <div className="modal-com">
       <div
-        onClick={action}
+        onClick={action || isOpen}
         className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
       <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">

src/index.css

@@ -746,4 +746,25 @@ TODO: Responsive ===========================
   50%{transform: scale(1.1)}
   100%{transform: scale(1)}
 }
-/* END OF JOBS DETAILS ALERT */
+/* END OF JOBS DETAILS ALERT */
+
+
+/* Update table scrollbar */
+.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track{
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: transparent;
+  border-radius: 10px;
+}
+
+.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar {
+  width: 10px;
+  background-color: transparent;
+}
+
+.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  background-color: #fff;
+  background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%);
+}