From a4597599b7db4b9c0c313753cca7288fbfae6818 Mon Sep 17 00:00:00 2001
From: Chief Bube <ebube.ojinta@chiefsoft.com>
Date: Sat, 11 Nov 2023 08:10:02 -0800
Subject: [PATCH] added icon and page for family settings

---
 src/Routers.jsx                               |  2 +
 .../FamilyAcc/FamilySettings/index.jsx        | 10 ++++
 src/components/FamilyAcc/index.jsx            | 47 ++++++++++++-------
 src/views/FamilyManagePage.jsx                |  2 +-
 src/views/FamilySettingsPage.jsx              |  9 ++++
 5 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 src/components/FamilyAcc/FamilySettings/index.jsx
 create mode 100644 src/views/FamilySettingsPage.jsx

diff --git a/src/Routers.jsx b/src/Routers.jsx
index d3893d0..6af7cc2 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -50,6 +50,7 @@ import FamilyMarketPage from "./views/FamilyMarketPage";
 import FacebookRedirect from "./views/FacebookRedirect";
 import AppleRedirectPage from "./views/AppleRedirectPage";
 import LndPage from "./views/LndPage";
+import FamilySettingsPage from "./views/FamilySettingsPage";
 
 export default function Routers() {
   return (
@@ -98,6 +99,7 @@ export default function Routers() {
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
           <Route exact path="/familymarket" element={<FamilyMarketPage />} />
+          <Route exact path="/familysettings" element={<FamilySettingsPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
new file mode 100644
index 0000000..50ee4b5
--- /dev/null
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import Layout from '../../Partials/Layout'
+
+const FamilySettings = () => {
+  return (
+    <Layout>FamilySettings</Layout>
+  )
+}
+
+export default FamilySettings
\ No newline at end of file
diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx
index e4d3094..653b0f0 100644
--- a/src/components/FamilyAcc/index.jsx
+++ b/src/components/FamilyAcc/index.jsx
@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { Link } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
@@ -13,7 +14,6 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyTable from "./FamilyTable";
 
 export default function FamilyAcc() {
-  const [selectTab, setValue] = useState("today");
   // State to store the selected year and month
   const [selectedYear, setSelectedYear] = useState("");
   const [selectedMonth, setSelectedMonth] = useState("");
@@ -33,10 +33,6 @@ export default function FamilyAcc() {
     setPopUp((prev) => !prev);
   };
 
-  const filterHandler = (value) => {
-    setValue(value);
-  };
-
   // Handle year selection
   const handleYearChange = (e) => {
     setSelectedYear(e.target.value);
@@ -116,7 +112,7 @@ export default function FamilyAcc() {
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status === "OK") {
         const { result_list, session_image_server } = data;
-        setFamilyList({result_list, session_image_server});
+        setFamilyList({ result_list, session_image_server });
         setLoader(false);
       } else {
         return;
@@ -146,12 +142,9 @@ export default function FamilyAcc() {
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
               <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span
-                  className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Family Accounts
-                </span>
-                {familyList?.result_list?.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
+                <span className={``}>Family Accounts</span>
+                {familyList?.result_list?.length <
+                  process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
                   !loader && (
                     <button
                       onClick={popUpHandler}
@@ -163,12 +156,30 @@ export default function FamilyAcc() {
                   )}
               </h1>
             </div>
-            <div className="slider-btns flex space-x-4">
-              <div
-                onClick={() => filterHandler("today")}
-                className="relative"
-              ></div>
-            </div>
+            <Link
+              to={`/familysettings`}
+              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%)]"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-6 h-6 dark:stroke-white"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+            </Link>
           </div>
           <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
             <FamilyTable
diff --git a/src/views/FamilyManagePage.jsx b/src/views/FamilyManagePage.jsx
index 08a0d7d..ae5567c 100644
--- a/src/views/FamilyManagePage.jsx
+++ b/src/views/FamilyManagePage.jsx
@@ -6,4 +6,4 @@ export default function FamilyManagePage() {
       <FamilyManage />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/views/FamilySettingsPage.jsx b/src/views/FamilySettingsPage.jsx
new file mode 100644
index 0000000..4118ba7
--- /dev/null
+++ b/src/views/FamilySettingsPage.jsx
@@ -0,0 +1,9 @@
+import FamilySettings from "../components/FamilyAcc/FamilySettings";
+
+export default function FamilySettingsPage() {
+  return (
+    <>
+      <FamilySettings />
+    </>
+  );
+}