From f4d9eb65c6a76f7d32b2c2d823a13906c3d109f1 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 4 Mar 2024 18:12:02 +0100
Subject: [PATCH] added breadcrumb component to other family account pages

---
 src/components/Blogs/index.jsx                | 30 ++++++++++++++-----
 src/components/FamilyAcc/FamilyMarket.jsx     | 14 ++++++++-
 src/components/FamilyAcc/FamilyPastDue.jsx    | 14 ++++++++-
 .../FamilyAcc/FamilyPendingOffer.jsx          | 14 +++++++++
 src/components/MyOffers/ParentWaiting.jsx     | 16 ++++++++--
 .../familyResources/FamAIQuestion.jsx         |  2 +-
 6 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/src/components/Blogs/index.jsx b/src/components/Blogs/index.jsx
index fdb2aef..78fa4ef 100644
--- a/src/components/Blogs/index.jsx
+++ b/src/components/Blogs/index.jsx
@@ -5,6 +5,7 @@ import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function BlogItem(props) {
 
@@ -43,8 +44,21 @@ export default function BlogItem(props) {
                     commonHeadData={props.commonHeadData}
                 />
             }
+            { account_type == 'FAMILY' &&
+            <div className="mb-5">
+                <CustomBreadcrumb 
+                title = {blogdata?.data?.blogdata?.length > 0 ? blogdata?.data?.blogdata[0]?.post_title : 'Blog'}
+                breadcrumb={
+                    [
+                    { link: "/", title: "Home" },
+                    { link: "/fam-blog", title: "Blogs", active: true},
+                    ]
+                }
+                />
+            </div>
+            }
             <div className="notification-page w-full mb-10">
-                <div className="mb-5">
+                {/* <div className="mb-5">
                     <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                         <span
                             className={`${selectTab === "today" ? "block" : "hidden"}`}
@@ -52,7 +66,7 @@ export default function BlogItem(props) {
                         {blogdata.data?.blogdata?.[0]?.post_title}
                         </span>
                     </h1>
-                </div>
+                </div> */}
                 <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
                     {blogdata?.loading ? 
                         <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
@@ -60,8 +74,8 @@ export default function BlogItem(props) {
                         blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
                         <div className="w-full">
                             {/* heading */}
-                            <div className="sm:flex justify-between items-center mb-6">
-                                {/* <div className="mb-5">
+                            {/* <div className="sm:flex justify-between items-center mb-6">
+                                <div className="mb-5">
                                     <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                                         <span
                                             className={`${selectTab === "today" ? "block" : "hidden"}`}
@@ -69,10 +83,10 @@ export default function BlogItem(props) {
                                         {blogdata.data?.blogdata?.[0]?.post_title}
                                         </span>
                                     </h1>
-                                </div> */}
-                                {/* <div className="slider-btns flex space-x-4">
-                                </div> */}
-                            </div>
+                                </div>
+                                <div className="slider-btns flex space-x-4">
+                                </div>
+                            </div> */}
                             <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
                             </div>
                     </div>
diff --git a/src/components/FamilyAcc/FamilyMarket.jsx b/src/components/FamilyAcc/FamilyMarket.jsx
index 8a94aab..603aa87 100644
--- a/src/components/FamilyAcc/FamilyMarket.jsx
+++ b/src/components/FamilyAcc/FamilyMarket.jsx
@@ -4,6 +4,7 @@ import SearchCom from "../Helpers/SearchCom";
 import FamilyMarketCard from "../Cards/FamilyMarketCard";
 import usersService from "../../services/UsersService";
 import SuggestTask from "../FamilyPopup/SuggestTask";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function FamilyMarket() {
   const [popUp, setPopUp] = useState(false);
@@ -53,12 +54,23 @@ export default function FamilyMarket() {
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
-          <div className="sm:flex justify-between items-center mb-6">
+          {/* <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>Suggest Task to the Parents</span>
               </h1>
             </div>
+          </div> */}
+          <div className="mb-5">
+            <CustomBreadcrumb 
+            title = {'Suggest Task to the Parents'}
+            breadcrumb={
+                [
+                { link: "/", title: "Home" },
+                { link: "/familymarket", title: "Family Market", active: true},
+                ]
+            }
+            />
           </div>
           {/* Body */}
           <div className="filter-section w-full items-center sm:flex justify-between mb-6">
diff --git a/src/components/FamilyAcc/FamilyPastDue.jsx b/src/components/FamilyAcc/FamilyPastDue.jsx
index 33b0b50..9ec729d 100644
--- a/src/components/FamilyAcc/FamilyPastDue.jsx
+++ b/src/components/FamilyAcc/FamilyPastDue.jsx
@@ -1,10 +1,22 @@
 import React from 'react'
 import Layout from '../Partials/Layout'
+import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
 
 export default function FamilyPastDue() {
   return (
     <Layout>
-        <div>Family PastDue Page Here</div>
+        <div className="mb-5">
+          <CustomBreadcrumb 
+          title = {'Past Due'}
+          breadcrumb={
+              [
+              { link: "/", title: "Home" },
+              { link: "/pastdue", title: "Past Due", active: true},
+              ]
+          }
+          />
+        </div>
+        <div className='w-full h-[20rem] rounded-2xl flex justify-center items-center text-black dark:text-white bg-white dark:bg-dark-white transition-all duration-300'>Family PastDue Page Here</div>
     </Layout>
   )
 }
diff --git a/src/components/FamilyAcc/FamilyPendingOffer.jsx b/src/components/FamilyAcc/FamilyPendingOffer.jsx
index 36ef045..b0d9464 100644
--- a/src/components/FamilyAcc/FamilyPendingOffer.jsx
+++ b/src/components/FamilyAcc/FamilyPendingOffer.jsx
@@ -3,6 +3,7 @@ import Layout from '../Partials/Layout'
 import MyOffersFamilyTable from '../MyTasks/MyOffersFamilyTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 import usersService from '../../services/UsersService';
+import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb';
 
 export default function FamilyPendingOffer() {
     const userApi = new usersService();
@@ -25,8 +26,21 @@ export default function FamilyPendingOffer() {
     },[])
     return (
         <Layout>
+            <div className="mb-5">
+                <CustomBreadcrumb 
+                title = {'Ready to Start'}
+                breadcrumb={
+                    [
+                    { link: "/", title: "Home" },
+                    { link: "/pending", title: "Pending", active: true},
+                    ]
+                }
+                />
+            </div>
             {myOffersList.loading ?
+            <div className='w-full flex justify-center items-center rounded-2xl bg-white'>
                 <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]'  />
+            </div>
             :
             myOffersList?.data?.result_list && myOffersList?.data?.result_list.length > 0 ?
             <MyOffersFamilyTable
diff --git a/src/components/MyOffers/ParentWaiting.jsx b/src/components/MyOffers/ParentWaiting.jsx
index 4bf969e..c28936b 100644
--- a/src/components/MyOffers/ParentWaiting.jsx
+++ b/src/components/MyOffers/ParentWaiting.jsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import activeAidsBanner from "../../assets/images/kids-waiting.jpg";
 import ParentWaitingTable from "./ParentWaitingTable";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function ParentWaiting({ className }) {
   const [addFavorite, setValue] = useState(false);
@@ -19,9 +20,20 @@ export default function ParentWaiting({ className }) {
     <>
       <div className={`overview-section w-full ${className || ""}`}>
         <div className="w-full mb-3 flex justify-between items-center gap-1">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+          {/* <h1 className="text-26 font-bold text-dark-gray dark:text-white">
             Waiting for Parent to Get Started...
-          </h1>
+          </h1> */}
+
+          <CustomBreadcrumb 
+          title = {'Waiting for Parent to Get Started...'}
+          breadcrumb={
+              [
+              { link: "/", title: "Home" },
+              { link: "/suggested", title: "Suggested", active: true},
+              ]
+          }
+          />
+
           <Link
             to='/familymarket'
             className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
diff --git a/src/components/familyResources/FamAIQuestion.jsx b/src/components/familyResources/FamAIQuestion.jsx
index 4535a3c..1091bd0 100644
--- a/src/components/familyResources/FamAIQuestion.jsx
+++ b/src/components/familyResources/FamAIQuestion.jsx
@@ -79,7 +79,7 @@ export default function FamAIQuestion() {
           <div className={`w-full`}>
               <div className="main-container w-full">
                   <div className="filter-section w-fullmb-6">
-                      <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">Ask our A.I</h1>
+                      {/* <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">Ask our A.I</h1> */}
                       <div className="mt-2 lg:grid grid-cols-2 gap-2 h-full lg:h-[500px]">
                           <div className="h-full mb-5 lg:mb-0">
                               <img className="w-full h-full rounded-2xl" src={localImgLoad(`images/resources-ask.jpg`)} alt='AI' />