added breadcrumb component to other family account pages

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="sm:flex justify-between items-center mb-6">
-                                {/* <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"}`}
@@ -69,10 +83,10 @@ export default function BlogItem(props) {
                                         {blogdata.data?.blogdata?.[0]?.post_title}
                                         </span>
                                     </h1>
-                                </div> */}
+                                </div>
-                                {/* <div className="slider-btns flex space-x-4">
+                                <div className="slider-btns flex space-x-4">
-                                </div> */}
+                                </div>
-                            </div>
+                            </div> */}
                             <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
                             </div>
                     </div>

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">

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>
   )
 }

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

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"

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' />

src/components/familyResources/FamBlog.jsx

@@ -1,12 +1,46 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Layout from '../Partials/Layout'
 import SearchCom from '../Helpers/SearchCom'
 import DataIteration from '../Helpers/DataIteration'
 import FamBlogItem from './FamBlogItem'
 import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
+import usersService from '../../services/UsersService'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
 
 export default function FamBlog() {
-  let blogdata = [1,2,3,4,5,6,7,8]
+
+  const [blogData, setBlogData] = useState({loading: true, data: []});
+
+  const [filteredBlog, setFilteredBlog] = useState({value: '', data:[]}) // State to hold filter blog
+
+  const handleFilterBlog = ({target}) => {
+    let filterWord = target.value
+    let filteredData = []
+    if(!filterWord){
+      filteredData = blogData?.data?.blogdata
+    }else{
+      filteredData = blogData?.data?.blogdata?.filter(item => item.post_title.toLowerCase().startsWith(filterWord.toLowerCase()))
+    }
+    setFilteredBlog({value:target.value, data: filteredData})
+  }
+
+  const api = new usersService();
+  const getFamilyBlog = async () => {
+    setBlogData({loading: true, data: []})
+    try {
+      const res = await api.getFamilyBlogData();
+      setBlogData({loading: false, data:res.data});
+      setFilteredBlog(prev => ({...prev, data:res.data?.blogdata}))
+    } catch (error) {
+      setBlogData({loading: false, data: []})
+      throw new Error("Error getting mode");
+    }
+  };
+
+  useEffect(() => {
+    getFamilyBlog();
+  }, []);
+
   return (
     <Layout>
       <>
@@ -25,30 +59,46 @@ export default function FamBlog() {
           <div className="main-container w-full">
             <div className="filter-section w-full items-center sm:flex justify-between mb-6">
               {/* filter-search */}
+              {blogData?.data?.blogdata?.length > 0 &&
               <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
-                <SearchCom placeholder='Search Blog Items...' />
+                <SearchCom 
+                  placeholder='Search Blog Items...' 
+                  value={filteredBlog.value}
+                  handleSearch={handleFilterBlog}
+                />
               </div>
+              }
             </div>
 
             <div className="content-section w-full-width">
-              <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+              {blogData.loading ?
-                <DataIteration
+                <div className='flex justify-center items-center bg-white rounded-2xl'>
-                  datas={blogdata}
+                  <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]' />
-                  startLength={process.env.REACT_APP_ZERO_STATE}
+                </div>
-                  endLength={blogdata.length}
+                : blogData?.data?.blogdata?.length > 0 && filteredBlog?.data?.length > 0?
-                >
+                <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
-                  {({ datas }) => (
+                  <DataIteration
-                    <div key={Math.random()}>
+                    datas={filteredBlog?.data}
-                      <FamBlogItem
+                    startLength={process.env.REACT_APP_ZERO_STATE}
-                        datas={datas}
+                    endLength={filteredBlog?.data?.length}
-                        bg={blogdata?.image_url && blogdata.image_url}
+                  >
-                        className=''
+                    {({ datas }) => (
-                        hidden={false}
+                      <div key={Math.random()}>
-                      />
+                        <FamBlogItem
-                    </div>
+                          datas={datas}
-                  )}
+                          bg={blogData?.data?.image_url && blogData?.data?.image_url}
-                </DataIteration>
+                          className=''
-              </div>
+                          hidden={false}
+                        />
+                      </div>
+                    )}
+                  </DataIteration>
+                </div>
+                :
+                <div className='h-[30rem] flex justify-center items-center bg-white rounded-2xl'>
+                  <p>No Blog Found</p>
+                </div>
+              }
             </div>
           </div>
         </div>

src/components/familyResources/FamBlogItem.jsx

@@ -13,7 +13,7 @@ export default function FamBlogItem({datas, className, bg, hidden=false}) {
               <div
                 className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-sky-200"
                 style={{
-                // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+                background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
                 }}
               >
                 <div className="product-two-options flex justify-between mb-5 relative">

src/services/UsersService.js

@@ -1279,6 +1279,20 @@ class usersService {
     };
     return this.postAuxEnd("/familyresources", postData);
   }
+
+  // API FUNCTION TO GET FAMILY BLOG DATA
+  getFamilyBlogData() {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      page: 0,
+      offset: 0,
+      limit: 100,
+    };
+    return this.postAuxEnd("/blogdata", postData);
+  }
+  
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)