more pages created for family banner links

src/Routers.jsx

@@ -57,6 +57,9 @@ import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import VerifyYouPages from "./views/VerifyYouPages";
 import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
 import YourPages from "./views/YourPage_";
+import ParentWaitingPage from "./views/ParentWaitingPage";
+import FamilyPendingOfferPage from "./views/FamilyPendingOfferPage";
+import FamilyPastDuePage from "./views/FamilyPastDuePage";
 
 export default function Routers() {
   return (
@@ -129,6 +132,9 @@ 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="/suggested" element={<ParentWaitingPage />} />
+          <Route exact path="/pastdue" element={<FamilyPastDuePage />} />
+          <Route exact path="/pending" element={<FamilyPendingOfferPage />} />
           <Route
             exact
             path="/familysettings"

src/components/Dashboards/FamilyParentDashboard.jsx

@@ -3,7 +3,7 @@ import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function JobOwnerDashboard({
+export default function FamilyParentDashboard({
   className,
   bannerList,
   nextDueTask,
@@ -16,7 +16,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -28,15 +28,17 @@ export default function JobOwnerDashboard({
       <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div className="flex gap-8">
-          <h1 className="text-base ng font-medium text-white tracking-wide">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/Dashboards/HomeDashboard.jsx

@@ -3,11 +3,7 @@ import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function JobOwnerDashboard({
-  className,
-  bannerList,
-  nextDueTask,
-}) {
+export default function HomeDashboard({ className, bannerList, nextDueTask }) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];
@@ -16,7 +12,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -28,15 +24,17 @@ export default function JobOwnerDashboard({
       <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div className="flex gap-8">
-          <h1 className="text-base ng font-medium text-white tracking-wide">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/Dashboards/JobOwnerDashboard.jsx

@@ -16,7 +16,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -32,11 +32,13 @@ export default function JobOwnerDashboard({
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/Dashboards/WorkerDashboard.jsx

@@ -3,7 +3,7 @@ import CountDown from "../Helpers/CountDown";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function JobOwnerDashboard({
+export default function WorkerDashboard({
   className,
   bannerList,
   nextDueTask,
@@ -16,7 +16,7 @@ export default function JobOwnerDashboard({
 
   return (
     <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex p-1 flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
+      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
         className || ""
       }`}
       style={{
@@ -28,15 +28,17 @@ export default function JobOwnerDashboard({
       <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div className="flex gap-8">
-          <h1 className="text-base ng font-medium text-white tracking-wide">
+          <h1 className="text-base font-medium text-white tracking-wide">
             Welcome
           </h1>
           {/* user */}
-          <div>
-            <p className="text-base tracking-wide font-bold antise text-white">
+          <div className="flex flex-col gap-1">
+            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
               {`${firstname} ${lastname}`}
             </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
+            <p className="text-sm tracking-wide text-white leading-[1]">
+              @{userEmail}
+            </p>
           </div>
         </div>
 

src/components/FamilyAcc/FamilyPastDue.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Layout from '../Partials/Layout'
+
+export default function FamilyPastDue() {
+  return (
+    <Layout>
+        <div>Family PastDue Page Here</div>
+    </Layout>
+  )
+}

src/components/FamilyAcc/FamilyPendingOffer.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import Layout from '../Partials/Layout'
+import MyOffersFamilyTable from '../MyTasks/MyOffersFamilyTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+import usersService from '../../services/UsersService';
+
+export default function FamilyPendingOffer() {
+    const userApi = new usersService();
+
+    const [myOffersList, setMyOffersList] = useState({loading: true, data: []});
+
+    const getMyOffersList = async () => {
+        try {
+            const res = await userApi.getOffersList();
+            setMyOffersList({loading:false, data:res.data});
+            console.log('SAME', res.data)
+        } catch (error) {
+            setMyOffersList({loading:false, data:[]});
+            console.log("Error getting offers", error);
+        }
+    };
+
+    useEffect(()=>{
+        getMyOffersList()
+    },[])
+    return (
+        <Layout>
+            {myOffersList.loading ?
+                <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]'  />
+            :
+            myOffersList?.data?.result_list && myOffersList?.data?.result_list.length > 0 ?
+            <MyOffersFamilyTable
+                familyOffers={myOffersList?.data?.result_list}
+                image_server={myOffersList?.data?.session_image_server}
+                className="mb-10" 
+            />
+            :
+            <div className='w-full h-[30rem] bg-white dark:bg-dark-white flex justify-center items-center rounded-2xl'>
+                <p className='text-black dark:text-white'>No Record Found!</p>
+            </div>
+            }
+        </Layout>
+    )
+}

src/components/FamilyAcc/ParentWaiting.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import Layout from '../Partials/Layout'
+import ParentWaiting from '../MyOffers/ParentWaiting'
+
+export default function ParentWaitingLayout() {
+  return (
+    <Layout>
+        <ParentWaiting />
+    </Layout>
+  )
+}

src/components/Home/FamilyDash.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import usersService from "../../services/UsersService";
-import ParentWaiting from "../MyOffers/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import { useDispatch, useSelector } from "react-redux";
@@ -65,13 +64,13 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
         {/* Header */}
         <div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center">
           <div className="w-full flex flex-wrap gap-x-4">
-            <p className="text-lg font-normal">Welcome</p>
+            <p className="text-lg font-normal leading-5">Welcome</p>
             <div className="">
-              <h1 className="text-lg font-normal">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+              <h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
             </div>
           </div>
           <div className="w-full text-sm flex justify-end items-end">
-            <p>Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
+            <p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
           </div>
         </div>
 
@@ -82,25 +81,16 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
               {Object.keys(familyBannersList?.result_list).map((item, index) => {
                 let content = familyBannersList?.result_list[item]
-                let action = item == 'recommend' ? 'familymarket' : 'mytask'
+                // let action = item == 'recommend' ? 'familymarket' : 'mytask'
                 return (
-                  <Link key={item} to={`/${action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item} to={`/${content.banner.action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-[10rem] object-cover object-left rounded-t-xl" src={content.banner.image} alt='banner image' />
+                      <img className="w-full h-[10rem] object-cover rounded-t-xl" src={content.banner.image} alt='banner image' />
                       <div className="flex flex-col justify-between">
                         <div className="px-2 py-2 border-b border-transparent min-h-[4rem] flex flex-col gap-1">
                           <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
                           <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
                         </div>
-
-                        {/* <div className="px-2 py-1 flex justify-between items-center">
-                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                          <div className="flex justify-center gap-1">
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                          </div>
-                        </div> */}
                       </div>
                     </div>
                   </Link>
@@ -116,17 +106,14 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
               {tab_categories.data.map((item) => {
                 if(item.enabled){
                 return (
-                  <Link key={item.uid} to={item?.action} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item.uid} to={item?.action} className={`group rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-[12rem] object-cover rounded-t-xl" src={item?.banner} alt='banner image' />
+                      <div className="w-full h-[8rem] rounded-t-xl overflow-hidden">
+                        <img className="w-full h-full group-hover:scale-110 object-cover transition-all duration-300" src={item?.banner} alt='banner image' />
+                      </div>
                       <div className="flex flex-col justify-between">
-                        <div className="px-2 py-1 border-b border-slate-300 min-h-[5rem] flex flex-col gap-1">
+                        <div className="px-2 py-1 border-b border-transparent min-h-[2rem] flex justify-between items-center gap-1">
                           <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{item?.content}</h1>
-                          {/* <p className="text-sm text-black dark:text-white">{'Description'}</p> */}
-                        </div>
-
-                        <div className="px-2 py-1 flex justify-between items-center">
-                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
                           <div className="flex justify-center gap-1">
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
                             <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
@@ -158,9 +145,6 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             image_server={familyOffers?.session_image_server}
           />
         )}
-
-        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
-        <ParentWaiting className="mb-10" />
       </div>
     </div>
   );

src/components/MyOffers/ParentWaiting.jsx

@@ -41,29 +41,6 @@ export default function ParentWaiting({ className }) {
 
           <div className="overview-countdown h-full w-full flex flex-col justify-between p-4 rounded-2xl bg-white dark:bg-dark-white">
             {<ParentWaitingTable />}
-
-            {/*          <div className="lg:mb-0 mb-3">*/}
-            {/*              <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*                  Lock and Lob x Fiesta Spurs*/}
-            {/*              </h1>*/}
-            {/*              <span className="text-[18px] font-thin tracking-wide   text-dark-gray dark:text-white">*/}
-            {/*  ID : 2320382*/}
-            {/*</span>*/}
-            {/*          </div>*/}
-            {/*          /!* user *!/*/}
-            {/*          <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
-            {/*              <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
-            {/*                  <img src={HeroUser} alt="" />*/}
-            {/*              </div>*/}
-            {/*              <div>*/}
-            {/*                  <p className="text-xl tracking-wide font-bold antise   text-dark-gray dark:text-white">*/}
-            {/*                      Brokln Simons*/}
-            {/*                  </p>*/}
-            {/*                  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">*/}
-            {/*                      @broklinslam_75*/}
-            {/*                  </p>*/}
-            {/*              </div>*/}
-            {/*          </div>*/}
           </div>
         </div>
       </div>

src/components/Partials/Header.jsx

@@ -27,11 +27,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [moneyPopup, setPopup] = useToggle(false);
   const darkMode = useContext(DarkModeContext);
   const { userDetails } = useSelector((state) => state?.userDetails);
-  const { walletTable } = useSelector((state) => state.tableReload); // DETERMINES WHEN WALLET RELOADS
-  const [myWalletList, setMyWalletList] = useState([]);
-  const api = useMemo(() => new usersService(), []);
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
 
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
@@ -506,15 +501,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
               </div>
             </div>
-            {/* <div className="for-mobile-profile lg:hidden block">
-              <div
-                // to="/profile"
-                onClick={() => handlerProfile()}
-                className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
-              >
-                <img src={profileImg} alt="profile" className="w-full h-full" />
-              </div>
-            </div> */}
+           
           </div>
         </div>
       </div>

src/views/FamilyPastDuePage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import FamilyPastDue from '../components/FamilyAcc/FamilyPastDue'
+
+export default function FamilyPastDuePage() {
+  return (
+    <>
+        <FamilyPastDue />
+    </>
+  )
+}

src/views/FamilyPendingOfferPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import FamilyPending from '../components/FamilyAcc/FamilyPendingOffer'
+
+export default function FamilyPendingOfferPage() {
+  return (
+    <>
+        <FamilyPending />
+    </>
+  )
+}

src/views/ParentWaitingPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ParentWaitingLayout from '../components/FamilyAcc/ParentWaiting'
+
+export default function ParentWaitingPage() {
+  return (
+    <>
+        <ParentWaitingLayout />
+    </>
+  )
+}