From b89cf9a6bc2f32df23feb19cfeb046fc779c3936 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Tue, 13 Jun 2023 21:17:58 -0400
Subject: [PATCH] finterest table

---
 src/components/FamilyAcc/FamilyTable.jsx      |   2 +-
 .../OffersInterest/OffersInterestTable.jsx    | 161 ++++++++++++++++++
 2 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 src/components/OffersInterest/OffersInterestTable.jsx

diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index 72671e7..81b6d8a 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -135,7 +135,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
               </button>
             </div>
             <div className="p-2 w-full md:w-1/2">
-              <img className='w-full' src={familyImage} alt="A Family" />
+              <img className='w-full' src={familyImage} alt="Add Family" />
             </div>
           </div>
           )
diff --git a/src/components/OffersInterest/OffersInterestTable.jsx b/src/components/OffersInterest/OffersInterestTable.jsx
new file mode 100644
index 0000000..a5d6b10
--- /dev/null
+++ b/src/components/OffersInterest/OffersInterestTable.jsx
@@ -0,0 +1,161 @@
+import React, { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+
+import familyImage from '../../assets/images/no-family-side.png'
+
+export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
+    const filterCategories = ["All Categories", "Explore", "Featured"];
+    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+    const navigate = useNavigate();
+    // let location = useLocation();
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem =
+        Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+
+    const handlePagination = (e) => {
+        handlePagingFunc(e, setCurrentPage);
+    };
+
+    return (
+        <div
+            className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
+                className || ""
+            }`}
+        >
+            <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
+                {loader ? (
+                        <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+                            <LoadingSpinner size="16" color="sky-blue" />
+                        </div>
+                    )
+                    :
+                    familyList?.length > 0 ?
+                        (
+                            <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"></th>
+                                </tr>
+                                </thead>
+                                <tbody className="h-full">
+                                {currentFamilyList?.map((props, idx) => {
+                                    let {
+                                        firstname,
+                                        lastname,
+                                        age,
+                                        added,
+                                        last_login,
+                                        task_count,
+                                        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={family_uid}
+                                        >
+                                            <td className=" py-4">
+                                                <div className="flex space-x-2 items-center w-full">
+                                                    <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
+                                                        <img
+                                                            src={dataImage1}
+                                                            alt="data"
+                                                            className="w-full h-full"
+                                                        />
+                                                    </div>
+                                                    <div className="flex flex-col flex-[0.9]">
+                                                        <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 ml-1">
+                                    {addedDate}
+                                  </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">
+                                {LoginDate}
+                              </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">
+                                {task_count}
+                              </span>
+                                                </div>
+                                            </td>
+                                            <td className="text-right py-4 px-2 flex items-center justify-center">
+                                                <button
+                                                    onClick={() => {
+                                                        navigate("/manage-family", {
+                                                            state: { ...props },
+                                                        });
+                                                    }}
+                                                    type="button"
+                                                    className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                >
+                                                    Manage
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    );
+                                })
+                                }
+                                </tbody>
+                            </table>
+                        )
+                        :
+                        (
+                            <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
+                                <div className="p-2 w-full md:w-1/2">
+                                    <p className="mb-4 p-3 md:p-16">Add your family, assign tasks, and get the whole team engaged.</p>
+                                    <button
+                                        onClick={popUpHandler}
+                                        type="button"
+                                        className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                                    >
+                                        Add Family
+                                    </button>
+                                </div>
+                                <div className="p-2 w-full md:w-1/2">
+                                    <img className='w-full' src={familyImage} alt="Add Family" />
+                                </div>
+                            </div>
+                        )
+                }
+            </div>
+            {/* PAGINATION BUTTON */}
+            <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                    currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                    familyList?.length
+                        ? true
+                        : false
+                }
+                data={familyList}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+            />
+            {/* END OF PAGINATION BUTTON */}
+        </div>
+    );
+}