Merge branch 'add-family-acc' of WrenchBoard/Users-Wrench into master

src/components/FamilyAcc/FamilyTable.jsx

@@ -1,76 +1,89 @@
 import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 
-export default function FamilyTable({ className, familyList }) {
+export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   console.log(familyList)
   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">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
-          <tbody>
+            <thead className="sticky top-0">
             <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
-              <td className="py-4">Name</td>
+              <th className="py-4">Name</th>
-              <td className="py-4 text-center">Last Login</td>
+              <th className="py-4 text-center">Last Login</th>
-              <td className="py-4 text-center">No of Tasks</td>
+              <th className="py-4 text-center">No of Tasks</th>
-              <td className="py-4 text-right"></td>
+              <th className="py-4 text-right">Status</th>
             </tr>
-            {familyList?.length > 0 &&
+            </thead>
-              familyList?.map(({firstname, lastname, age,added}, idx) => (
+          <tbody className="overflow-y-scroll h-auto">
-                <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50" key={idx}>
+            {loader ? (
-                  <td className=" py-4">
+              <div className="signup btn-loader"></div>
-                    <div className="flex space-x-2 items-center">
+            ) : (
-                      <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+              <>
-                        <img
+                {familyList?.length > 0 ? (
-                          src={dataImage1}
+                  familyList?.map(({ firstname, lastname, age }, idx) => (
-                          alt="data"
+                    <tr
-                          className="w-full h-full"
+                      className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                        />
+                      key={idx}
-                      </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">{` ${added}`}</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
+                      <td className=" py-4">
-                    </button>
+                        <div className="flex space-x-2 items-center">
-                  </td>
+                          <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                </tr>
+                            <img
-              ))}
+                              src={dataImage1}
-            {familyList?.length <= 0 && (
+                              alt="data"
-              <div className="min-h-[400px] flex items-center justify-center text-black text-2xl text-center">
+                              className="w-full h-full"
-                Nothing to see here
+                            />
-              </div>
+                          </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>

src/components/FamilyAcc/index.jsx

@@ -11,6 +11,8 @@ export default function FamilyAcc() {
   const [familyList, setFamilyList] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
   const [loader, setLoader] = useState(false);
+  const [popUp, setPopUp] = useState(false);
+  const [listReload, setListReload] = useState(false);
   const [msgErr, setMsgErr] = useState("");
   const [formData, setFormData] = useState({
     first_name: "",
@@ -19,6 +21,10 @@ export default function FamilyAcc() {
 
   const apiCall = useMemo(() => new SiteService(), []);
 
+  const popUpHandler = () => {
+    setPopUp(!popUp);
+  };
+
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);
@@ -62,6 +68,7 @@ export default function FamilyAcc() {
         const { data } = res;
         if (data?.internal_return > 0 && data?.status == "OK") {
           setLoader(false);
+          setListReload((prev) => !prev);
           setIsOpen(false);
         } else {
           setLoader(false);
@@ -79,35 +86,42 @@ export default function FamilyAcc() {
       setTimeout(() => {
         setMsgErr(null);
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      setFormData({
+        first_name: "",
+        last_name: "",
+      });
     }
   };
 
-  useEffect(() => {
+  // member listing
-    // member listing
+  const memberList = useCallback(async () => {
-    const memberList = async () => {
+    setLoader(true);
-      try {
+    try {
-        let reqData = {
+      let reqData = {
-          member_id: localStorage.getItem("member_id"),
+        member_id: localStorage.getItem("member_id"),
-          uid: localStorage.getItem("uid"),
+        uid: localStorage.getItem("uid"),
-          sessionid: localStorage.getItem("session_token"),
+        sessionid: localStorage.getItem("session_token"),
-          limit: 20,
+        limit: 20,
-          offset: 0,
+        offset: 1,
-          action: 22010,
+        action: 22010,
-        };
+      };
 
-        let res = await apiCall.familyListings(reqData);
+      let res = await apiCall.familyListings(reqData);
-        const { data } = res;
+      const { data } = res;
-        if (data?.internal_return >= 0 && data?.status == "OK") {
+      if (data?.internal_return >= 0 && data?.status == "OK") {
-          let { result_list } = data;
+        let { result_list } = data;
-          setFamilyList(result_list);
+        setFamilyList(result_list);
-        } else return;
+        setLoader(false);
-      } catch (error) {
+      } else return;
-        throw new Error(error);
+    } catch (error) {
-      }
+      setLoader(false);
-    };
+      throw new Error(error);
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
     memberList();
-  }, []);
+  }, [listReload, memberList]);
-  console.log(familyList);
 
   return (
     <Layout>
@@ -130,6 +144,7 @@ export default function FamilyAcc() {
                   title="Add members"
                   isOpen={isOpen}
                   setIsOpen={setIsOpen}
+                  modalHandler={popUpHandler}
                 >
                   <FamilyForm
                     value={formData}
@@ -151,7 +166,7 @@ export default function FamilyAcc() {
               ></div>
             </div>
           </div>
-          <FamilyTable familyList={familyList} />
+          <FamilyTable familyList={familyList} loader={loader} />
         </div>
       </div>
     </Layout>

src/components/Helpers/CustomPopUp/index.jsx

@@ -1,7 +1,14 @@
-import React, { useState } from "react";
+import React, { useEffect } from "react";
-
-const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) => {
 
+const CustomPopUp = ({
+  name,
+  btn_class,
+  title,
+  children,
+  isOpen,
+  setIsOpen,
+  modalHandler,
+}) => {
   const handleOpen = () => {
     setIsOpen(true);
   };
@@ -10,6 +17,15 @@ const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) =>
     setIsOpen(false);
   };
 
+  useEffect(() => {
+    if (modalHandler) {
+      document.body.style.overflowY = "hidden";
+    }
+    return () => {
+      document.body.style.overflowY = "unset";
+    };
+  });
+
   return (
     <div>
       <button onClick={handleOpen} className={btn_class}>
@@ -17,15 +33,26 @@ const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) =>
       </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="modal-com">
-          <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
-            <div className="w-full flex justify-end">
+            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`}
-              <button onClick={handleClose}>
+          ></div>
-                <CloseIcon />
+          <div className="children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ">
-              </button>
+            <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

@@ -732,4 +732,39 @@ TODO: Responsive ===========================
 /* For IE10 */
 .content-wrapper select::-ms-expand {
   display: none;
+}
+
+/* JOBS DETAILS ALERT */
+.alert-box{
+  animation-name: scale;
+  animation-duration: .5s;
+  animation-timing-function: linear;
+}
+
+@keyframes scale {
+  0%{transform: scale(0)}
+  50%{transform: scale(1.1)}
+  100%{transform: scale(1)}
+}
+/* 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%);
 }