.

package.json

@@ -14,17 +14,19 @@
     "chartjs": "^0.3.24",
     "cors": "^2.8.5",
     "faker": "^6.6.6",
+    "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
+    "react": "^18.2.0",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
-    "react-router-dom": "^6.0.2",
-    "react-slick": "^0.29.0",
-    "react-toastify": "^9.0.1",
-    "flutterwave-react-v3": "^1.3.0",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "react-to-print": "^2.14.12",
+    "react-toastify": "^9.0.1",
     "redux": "^4.2.0",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^1.0.1",
@@ -54,4 +56,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/Cards/HomeBannerOffersCard.jsx

@@ -3,24 +3,31 @@ import { Link } from "react-router-dom";
 import localImgLoad from "../../lib/localImgLoad";
 
 export default function HomeBannerOffersCard(props) {
-    console.log("HomeBannerOffersCard->",props.itemData)
+    console.log("HomeBannerOffersCard-> ##->",props)
+    const link_result = "/" + props.itemData.link_path;
     return (
         <Link
-            to="/my-collection/collection-item"
+            to={link_result}
             className="item w-full block group banner-630-340"
         >
             <div className="flex flex-col justify-between h-full">
                 <div className="content flex justify-between items-center mb-5">
-                    <div>
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                    <div className="siderCardHeader">
+                        <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
                             <>{props.itemData.title}</>
                         </h1>
                     </div>
                     {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
                 </div>
                 <div className="h-[233px]">
-                    {props.itemData.description}
+                    <div className="siderCardDescription">
+                       {props.itemData.description}
+                    </div>
+                    <div className="siderCardButton">
+                        [BUTTON HERE]
+                    </div>
                 </div>
+
             </div>
         </Link>
     );

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -4,12 +4,15 @@ import React, {
   useMemo,
   useRef,
   useState,
+  forwardRef,
+  Suspense,
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import profile from "../../assets/images/profile-info-profile.png";
-import qrSample from "../../assets/images/qr-sample.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
+import QRCode from "react-qr-code";
+import { useReactToPrint } from "react-to-print";
 
 export default function FamilyManageTabs({
   className,
@@ -35,7 +38,6 @@ export default function FamilyManageTabs({
     },
   ];
   const [tab, setTab] = useState(tabs[0].name);
-  const [manageLoader, setManageLoader] = useState(false);
   const tabHandler = (value) => {
     setTab(value);
   };
@@ -59,7 +61,6 @@ export default function FamilyManageTabs({
   const apiCall = useMemo(() => new usersService(), []);
   // function for manage family
   const familyManageHandler = useCallback(async () => {
-    setManageLoader(true);
     try {
       let { family_uid } = accountDetails;
       let reqData = { family_uid };
@@ -67,7 +68,6 @@ export default function FamilyManageTabs({
       let { data } = await res;
       if (data?.internal_return < 0) return;
       setFamilyDetails(data);
-      setManageLoader(false);
     } catch (error) {
       setErrMsg("An error occurred");
       throw new Error(error);
@@ -78,6 +78,12 @@ export default function FamilyManageTabs({
     familyManageHandler();
   }, [tab]);
 
+  const accountRef = useRef();
+  // to handle printing
+  const useHandlePrint = useReactToPrint({
+    content: () => accountRef.current,
+  });
+
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -85,11 +91,13 @@ export default function FamilyManageTabs({
       }`}
     >
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
-        {loader ? (
-          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
-            <LoadingSpinner size="16" color="sky-blue" />
-          </div>
-        ) : (
+        <Suspense
+          fallback={
+            <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          }
+        >
           <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]">
             <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full">
               <ProfileInfo
@@ -127,22 +135,17 @@ export default function FamilyManageTabs({
                         } h-full p-4 border border-[#dbd9d9]`}
                         key={id}
                       >
-                        {manageLoader ? (
-                          <LoadingSpinner size="8" color="sky-blue" />
-                        ) : (
-                          <>
-                            {name === "Tasks" && (
-                              <FamilyTasks
-                                className={className}
-                                loader={loader}
-                              />
-                            )}
-                            {name === "Account" && (
-                              <Account familyDetails={familyDetails} />
-                            )}
-                            {name === "Profile" && <Profile />}
-                          </>
+                        {name === "Tasks" && (
+                          <FamilyTasks className={className} loader={loader} />
                         )}
+                        {name === "Account" && (
+                          <Account
+                            familyDetails={familyDetails}
+                            myRef={accountRef}
+                            handlePrint={useHandlePrint}
+                          />
+                        )}
+                        {name === "Profile" && <Profile />}
                       </div>
                     );
                   })}
@@ -150,7 +153,7 @@ export default function FamilyManageTabs({
               </div>
             </div>
           </div>
-        )}
+        </Suspense>
       </div>
     </div>
   );
@@ -217,49 +220,28 @@ function ProfileInfo({
   );
 }
 
-function Account({ familyDetails }) {
-  const handlePrint = () => {
-    const printableContent = `
-      <html>
-        <head>
-          <style>
-            /* Add your desired styles here */
-          </style>
-        </head>
-        <body>
-        <div class"update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow"></div>
-          <h1>Family member details</h1>
-          <p>Username: ${familyDetails?.username}</p>
-          <p>Password: ${familyDetails?.pin}</p>
-          <img src="${qrSample}" alt="QR Code" />
-        </body>
-      </html>
-    `;
-
-    const printWindow = window.open('', '', 'width=800,height=700');
-    printWindow.document.open();
-    printWindow.document.write(printableContent);
-    printWindow.document.close();
-
-    printWindow.onload = () => {
-      printWindow.print();
-    };
-  };
-
+const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
   return (
-    <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
+    <div
+      className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
+      ref={myRef}
+    >
       <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
         <div className="flex items-center justify-around h-[380px]">
           <div className="flex flex-col">
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Username:{" "}
               <span className="ml-2 normal-case">
-                {familyDetails?.username}
+                {familyDetails?.username
+                  ? familyDetails?.username
+                  : "please wait..."}
               </span>
             </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Pin:{" "}
-              <span className="ml-2 normal-case">{familyDetails?.pin}</span>
+              <span className="ml-2 normal-case">
+                {familyDetails?.pin ? familyDetails?.pin : "please wait..."}
+              </span>
             </h2>
           </div>
 
@@ -271,22 +253,26 @@ function Account({ familyDetails }) {
             <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
               Scan the code from mobile app
             </p>
-            <img
-              src={qrSample}
-              alt="qr-sample"
-              className="h-[200px] w-[200px]"
+            <QRCode
+              size={256}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+              value={`https://www.google.com`}
+              viewBox={`0 0 256 256`}
             />
           </div>
         </div>
         <div className="h-[50px] w-full flex justify-center items-center">
-          <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center" onClick={handlePrint}>
+          <button
+            className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+            onClick={handlePrint}
+          >
             Print
           </button>
         </div>
       </div>
     </div>
   );
-}
+});
 
 function Profile() {
   return <>Profile</>;

src/components/Home/HomeSliders.jsx

@@ -19,9 +19,9 @@ export default function HomeSliders(props) {
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider2} alt="slider" className="w-full h-full" />
                         </div>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                            <img src={slider3} alt="slider" className="w-full h-full" />
-                        </div>
+                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
+                        {/*    <img src={slider3} alt="slider" className="w-full h-full" />*/}
+                        {/*</div>*/}
                         {props.bannerList.map((item, index) => (
                             <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                                 <HomeBannerOffersCard

src/components/MyTasks/MyOffersTable.jsx

@@ -51,9 +51,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
         // }
     };
 
-   if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
-       return(''); // want blank or no appear when no items
-   }
+//    if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
+//        return(''); // want blank or no appear when no items
+//    }
 
     return (
         <>

src/components/MyTasks/index.jsx

@@ -6,7 +6,11 @@ import CommonHead from "../UserHeader/CommonHead";
 import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
 import MyOffersTable from "./MyOffersTable";
 
-export default function MyTasks({MyActiveOffersList, ActiveJobList, commonHeadData}) {
+export default function MyTasks({
+  MyActiveOffersList,
+  ActiveJobList,
+  commonHeadData,
+}) {
   const [selectTab, setValue] = useState("today");
   const filterHandler = (value) => {
     setValue(value);
@@ -34,9 +38,13 @@ export default function MyTasks({MyActiveOffersList, ActiveJobList, commonHeadDa
               ></div>
             </div>
           </div>
-          <MyOffersTable
-              MyActiveOffersList={MyActiveOffersList}
-              className="mb-10" />
+          {MyActiveOffersList &&
+            MyActiveOffersList?.result_list?.length >= 0 && (
+              <MyOffersTable
+                MyActiveOffersList={MyActiveOffersList}
+                className="mb-10"
+              />
+            )}
           <MyJobTable ActiveJobList={ActiveJobList} />
         </div>
       </div>

src/components/Partials/Sidebar.jsx

@@ -12,7 +12,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
-  console.log('user-details for job',userDetails);
   //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;

src/index.css

@@ -9,7 +9,18 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
-
+.siderCardHeader{
+  margin: 40px 40px 10px 40px;
+}
+.siderCardDescription{
+  margin: 30px;
+  font-size: 24px;
+}
+.siderCardButton{
+  margin-top: 10px;
+  width: 100%;
+  text-align: center;
+}
 .offer-slide-item{
   background: rgb(2,0,36);
   background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);

src/views/MyTaskPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext,useState, useEffect } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import MyTasks from "../components/MyTasks";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
@@ -6,46 +6,54 @@ import usersService from "../services/UsersService";
 import { useSelector } from "react-redux";
 
 export default function MyTaskPage() {
-    const {myTaskTable} = useSelector((state) => state.tableReload)
+  const { myTaskTable } = useSelector((state) => state.tableReload);
 
-    const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]});
-    const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
-    const api = new usersService();
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
+  const [MyActiveJobList, setMyActiveJobList] = useState({
+    loading: true,
+    status: false,
+    data: [],
+  });
+  const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
+  const api = new usersService();
+  const commonHeadData = () => {
+    console.log("COMMON HEAD DATA ----------------=====---------------------");
     return 0;
+  };
+  const getMyActiveJobList = async () => {
+    setMyActiveJobList({ loading: true, status: false, data: [] });
+    try {
+      const res = await api.getMyActiveTaskList();
+      setMyActiveJobList({
+        loading: false,
+        status: true,
+        data: res.data.result_list,
+      });
+    } catch (error) {
+      setMyActiveJobList({ loading: false, status: false, data: [] });
+      console.log("Error getting tasks");
     }
-    const getMyActiveJobList = async () => {
-        setMyActiveJobList({loading: true, status:false, data:[]});
-        try {
-            const res = await api.getMyActiveTaskList();
-            setMyActiveJobList({loading: false, status:true, data:res.data.result_list});
-        } catch (error) {
-            setMyActiveJobList({loading: false, status:false, data:[]});
-            console.log("Error getting tasks");
-        }
-    };
-    const getMyActiveOffersList = async () => {
-        // setMyActiveOffersList({loading: true, status:false, data:[]});
-        try {
-            const res = await api.getOffersList();
-            setMyActiveOffersList(res.data);
-        } catch (error) {
-            // setMyActiveOffersList({loading: false, status:false, data:[]});
-            console.log("Error getting offers");
-        }
-    };
-    useEffect(() => {
-        getMyActiveJobList();
-        getMyActiveOffersList();
-    }, [myTaskTable]);
+  };
+  const getMyActiveOffersList = async () => {
+    // setMyActiveOffersList({loading: true, status:false, data:[]});
+    try {
+      const res = await api.getOffersList();
+      setMyActiveOffersList(res.data);
+    } catch (error) {
+      // setMyActiveOffersList({loading: false, status:false, data:[]});
+      console.log("Error getting offers");
+    }
+  };
+  useEffect(() => {
+    getMyActiveJobList();
+    getMyActiveOffersList();
+  }, [myTaskTable]);
 
-    //debugger;
-    return (
-        <>
-            <MyTasks ActiveJobList={MyActiveJobList}
-                     MyActiveOffersList={MyActiveOffersList}
-                     commonHeadData={commonHeadData}/>
-        </>
-    );
+  //debugger;
+  return (
+    <MyTasks
+      ActiveJobList={MyActiveJobList}
+      MyActiveOffersList={MyActiveOffersList}
+      commonHeadData={commonHeadData}
+    />
+  );
 }