manage active job layout changed

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

src/components/Cards/HomeBannerOffersCard.jsx

@@ -3,24 +3,39 @@ 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;
+    var imgUrl = props.itemData.banner; //  ? this.state.nextImgSrc : this.state.song.imgSrc;
+    console.log("IMAGE FOR BANNER->",imgUrl);
+    var divStyle = {
+        backgroundImage: 'url(' + imgUrl + ')'
+    }
+    var linkDivStyle = "item w-full block group banner-630-340 " + divStyle;
+
+
     return (
         <Link
-            to="/my-collection/collection-item"
+            to={link_result}
-            className="item w-full block group banner-630-340"
+            className={linkDivStyle}
         >
             <div className="flex flex-col justify-between h-full">
                 <div className="content flex justify-between items-center mb-5">
-                    <div>
+                    <div className="siderCardHeader">
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                        <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 ? (
+        <Suspense
-          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+          fallback={
-            <LoadingSpinner size="16" color="sky-blue" />
+            <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
-          </div>
+              <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 ? (
+                        {name === "Tasks" && (
-                          <LoadingSpinner size="8" color="sky-blue" />
+                          <FamilyTasks className={className} loader={loader} />
-                        ) : (
-                          <>
-                            {name === "Tasks" && (
-                              <FamilyTasks
-                                className={className}
-                                loader={loader}
-                              />
-                            )}
-                            {name === "Account" && (
-                              <Account familyDetails={familyDetails} />
-                            )}
-                            {name === "Profile" && <Profile />}
-                          </>
                         )}
+                        {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 Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
-  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();
-    };
-  };
-
   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
+            <QRCode
-              src={qrSample}
+              size={256}
-              alt="qr-sample"
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
-              className="h-[200px] w-[200px]"
+              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">
+                        {/*<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" />
+                        {/*    <img src={slider3} alt="slider" className="w-full h-full" />*/}
-                        </div>
+                        {/*</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/MyActiveJobs/ActiveJobMessage.jsx

@@ -48,7 +48,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
         :
         <tbody>
             <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+                <td className="p-2" colSpan={4}>No Message Found!</td>
             </tr>
         </tbody>
         }

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -52,11 +52,10 @@ function ActiveJobs(props) {
   return (
     <Layout>
 
-        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
+        <div className="py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
-          <div className="w-full lg:w-1/2">
+            {/* job title */}
-            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+            <div className="w-full lg:w-1/2">
-              {/* back btn and title */}
+              <div className="w-full flex justify-start space-x-3 items-start">
-              <div className="w-full flex justify-start space-x-3 items-center">
                 <button
                   type="button"
                   className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
@@ -72,143 +71,147 @@ function ActiveJobs(props) {
                     <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
                   </svg>
                 </button>
-                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+                <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
                   {props.details?.title && props.details.title}
                 </h1>
               </div>
-              {/* END of back btn and title */}
 
-              <div className="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
+              <div className="w-full my-4">
-                <div className="w-full lg:w-2/3 my-2 lg:my-0">
+                <div className="pb-2 w-full flex items-center">
-                  <p className="text-base text-slate-700 dark:text-black">
+                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
                     {props.details?.contract && props.details.contract}
                   </p>
-                  <p className="text-base text-slate-700 dark:text-black">
+                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
-                    <span className="font-semibold">Description: </span>
-                    {props.details?.description && props.details.description}
-                  </p>
-                  <p className="text-base text-sky-blue">Delivery Detail</p>
-                  <div className="">
-                    <p className="text-base text-slate-700 dark:text-black">
-                      <span className="font-semibold">Due: </span>
-                      {props.details?.delivery_date &&
-                        props.details.delivery_date.split(" ")[0]}
-                    </p>
-                    <p className="text-base text-slate-700 dark:text-black">
-                      {props.details?.delivery_date &&
-                        props.details.delivery_date.split(" ")[1]}
-                    </p>
-                    <p className="text-base text-slate-700 dark:text-black">
-                      {props.details?.timeline_days && props.details.timeline_days} day(s)
-                    </p>
-                  </div>
-                </div>
-                <div className="w-full lg:w-1/3 lg:text-center">
-                  <p className="text-base text-sky-blue">
                     {userDetails.firstname && userDetails.firstname}
                   </p>
                 </div>
+                
+                <p className="text-base text-slate-700 dark:text-black">
+                  <span className="font-semibold">Description: </span>
+                  {props.details?.description && props.details.description}
+                </p>
               </div>
             </div>
+            {/* end of job title */}
 
-            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+            {/* job details */}
+            <div className="w-full lg:w-1/2">
+              <p className="text-base text-sky-blue">Delivery Detail</p>
+              <div className="mt-2">
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Due: </span>
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[0]}
+                  </p>
+                  <p className="py-2 text-base text-slate-700 dark:text-black">
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[1]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {props.details?.timeline_days && props.details.timeline_days} day(s)
+                  </p>
+              </div>
+            </div>
+            {/* end of job details */}
+        </div>
+
+        <div className="my-4 py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+            <div className="w-full lg:w-1/2">
               <div className="">
-              <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
+                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
-                <textarea
+                <p className="my-3 py-1 text-base">
-                  className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
+                  Waiting for the completion message from the client before you can approve.
-                  rows="10"
+                </p>
-                  style={{ resize: "none" }}
-                  name='message'
-                  onChange={handleMessageChange}
-                  value={messageToSend}
-                />
               </div>
 
-              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+              {/* TEXTAREA SECTION */}
-              <div className="w-full">
+              <div className="mt-3">
-                {/* error or success display */}
+                <div className="">
-                {requestStatus.message != "" &&
+                  <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
-                  (!requestStatus.status ? (
+                  <textarea
-                    <div
+                    className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none"
-                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                    rows="10"
-                    >
+                    style={{ resize: "none" }}
-                      {requestStatus.message}
+                    name='message'
-                    </div>
+                    onChange={handleMessageChange}
-                  ) : (
+                    value={messageToSend}
-                    requestStatus.status && (
+                  />
+                </div>
+
+                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                <div className="w-full">
+                  {/* error or success display */}
+                  {requestStatus.message != "" &&
+                    (!requestStatus.status ? (
                       <div
-                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                       >
                         {requestStatus.message}
                       </div>
-                    )
+                    ) : (
-                  ))}
+                      requestStatus.status && (
-                </div>
+                        <div
-                {/* End of error or success display */}
+                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      )
+                    ))}
+                  </div>
+                  {/* End of error or success display */}
 
-              {/* Buttons Sections */}
+                {/* Buttons Sections */}
-              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
+                <div className="py-2 sm:flex sm:justify-center sm:items-center">
-                <div className="w-full sm:w-2/4 mb-5 sm:mb-0">
+                  <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
-                  <button
+                    <button
-                    onClick={()=>{console.log('working')}}
+                      onClick={()=>{console.log('working')}}
-                    type="button"
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                      <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                    </svg>
-
-                    <span className="text-white">Upload Files</span>
-                  </button>
-                </div>
-
-                <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
-                  <button
                       type="button"
-                      className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
+                      className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
-                  >
+                    >
-                      <span className="text-white">Clear</span>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                  </button>
+                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                  <button
+                      </svg>
-                    onClick={sendTaskMessage}
+
-                      type="button"
+                      <span className="text-white">Upload Files</span>
-                      className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
+                    </button>
-                  >
+                  </div>
-                      {requestStatus.loading ? 
+
-                      <LoadingSpinner size='6' color='sky-blue' />
+                  <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
-                      :
+                    <button
-                      <span className="text-white">Send</span>
+                        type="button"
-                      }
+                        className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
-                  </button>
+                    >
+                        <span className="text-white">Clear</span>
+                    </button>
+                    <button
+                      onClick={sendTaskMessage}
+                        type="button"
+                        className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
+                    >
+                        {requestStatus.loading ? 
+                        <LoadingSpinner size='6' color='sky-blue' />
+                        :
+                        <span className="text-white">Send</span>
+                        }
+                    </button>
+                  </div>
+
                 </div>
-
+                {/* end of Buttons Sections  */}
               </div>
-              {/* end of Buttons Sections  */}
+              {/* END OF TEXTAREA */}
-            </div>
-          </div>
-
-          {/* ACTION SECTION */}
-          <div className="w-full lg:w-1/2 h-full">
-            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
-              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
-
-              <p className="my-3 py-1 text-base">
-                Waiting for the completion message from the client before you can approve.
-              </p>
             </div>
 
-            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+            {/* MESSAGE SECTION */}
-              <div className="">
+            <div className="w-full lg:w-1/2">
-                <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
+              <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
-                {props.activeJobMesList.loading ?
+              {props.activeJobMesList.loading ?
-                <LoadingSpinner size='16' color='sky-blue' />
+              <LoadingSpinner size='16' color='sky-blue' />
-                :
+              :
-                <ActiveJobMessage activeJobMesList={props.activeJobMesList} />
+              <ActiveJobMessage activeJobMesList={props.activeJobMesList} />
-                }
+              }
-              </div>
             </div>
-
+            {/* END OF MESSAGE */}
-          </div>
         </div>
 
     </Layout>

src/components/MyTasks/MyOffersTable.jsx

@@ -51,9 +51,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
         // }
     };
 
-   if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
+//    if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
-       return(''); // want blank or no appear when no items
+//        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={MyActiveOffersList}
+            MyActiveOffersList?.result_list?.length >= 0 && (
-              className="mb-10" />
+              <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,20 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
-
+.siderCardHeader{
+  margin: 40px 40px 10px 40px;
+  font-size: 24px;
+  font-weight: bolder;
+}
+.siderCardDescription{
+  margin: 20px 45px 10px 45px;
+  font-size: 20px;
+}
+.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 [MyActiveJobList, setMyActiveJobList] = useState({
-    const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
+    loading: true,
-    const api = new usersService();
+    status: false,
-    const commonHeadData =()=>{
+    data: [],
-        console.log("COMMON HEAD 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:[]});
+  const getMyActiveOffersList = async () => {
-        try {
+    // setMyActiveOffersList({loading: true, status:false, data:[]});
-            const res = await api.getMyActiveTaskList();
+    try {
-            setMyActiveJobList({loading: false, status:true, data:res.data.result_list});
+      const res = await api.getOffersList();
-        } catch (error) {
+      setMyActiveOffersList(res.data);
-            setMyActiveJobList({loading: false, status:false, data:[]});
+    } catch (error) {
-            console.log("Error getting tasks");
+      // setMyActiveOffersList({loading: false, status:false, data:[]});
-        }
+      console.log("Error getting offers");
-    };
+    }
-    const getMyActiveOffersList = async () => {
+  };
-        // setMyActiveOffersList({loading: true, status:false, data:[]});
+  useEffect(() => {
-        try {
+    getMyActiveJobList();
-            const res = await api.getOffersList();
+    getMyActiveOffersList();
-            setMyActiveOffersList(res.data);
+  }, [myTaskTable]);
-        } catch (error) {
-            // setMyActiveOffersList({loading: false, status:false, data:[]});
-            console.log("Error getting offers");
-        }
-    };
-    useEffect(() => {
-        getMyActiveJobList();
-        getMyActiveOffersList();
-    }, [myTaskTable]);
 
-    //debugger;
+  //debugger;
-    return (
+  return (
-        <>
+    <MyTasks
-            <MyTasks ActiveJobList={MyActiveJobList}
+      ActiveJobList={MyActiveJobList}
-                     MyActiveOffersList={MyActiveOffersList}
+      MyActiveOffersList={MyActiveOffersList}
-                     commonHeadData={commonHeadData}/>
+      commonHeadData={commonHeadData}
-        </>
+    />
-    );
+  );
 }