more pages created for family banner links

src/Routers.jsx

@@ -58,6 +58,8 @@ 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 (
@@ -130,7 +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="/parentwaiting" element={<ParentWaitingPage />} />
+          <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/Home/FamilyDash.jsx

@@ -81,9 +81,9 @@ 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 rounded-t-xl" src={content.banner.image} alt='banner image' />
                       <div className="flex flex-col justify-between">

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