.

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/AddJob/AddJob.jsx

@@ -4,9 +4,11 @@ import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
-import { Form, Formik } from "formik";
+import { tableReload } from '../../store/TableReloads'
+
+import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
@@ -36,21 +38,13 @@ const validationSchema = Yup.object().shape({
     .required("Timeline is required"),
 });
 
-// let initialValues = {
-//   // initial values for formik
-//   country: "NG",
-//   price: 0,
-//   title: "",
-//   description: "",
-//   job_detail: "",
-//   timeline_days: "",
-// };
-
 function AddJob() {
   const ApiCall = new usersService();
   const navigate = useNavigate();
 
-  let {userDetails} = useSelector((state)=> state.userDetails)
+  let dispatch = useDispatch()
+
+  let { userDetails } = useSelector((state) => state.userDetails);
 
   let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting
 
@@ -115,6 +109,7 @@ function AddJob() {
           message: "Job Added Successfully",
         });
         setTimeout(() => {
+          dispatch(tableReload({type:'JOBTABLE'}))
           navigate("/myjobs", { replace: true });
         }, 1000);
       })
@@ -199,7 +194,7 @@ function AddJob() {
                               Select...
                             </option>
                             {country.data.map((item, index) => {
-                              if(item[0] == userDetails.country){
+                              if (item[0] == userDetails.country) {
                                 return (
                                   <option
                                     key={index}
@@ -208,7 +203,7 @@ function AddJob() {
                                   >
                                     {item[1]}
                                   </option>
-                                )
+                                );
                               }
                             })}
                           </>
@@ -316,19 +311,34 @@ function AddJob() {
                   </div>
 
                   <div className="field w-full mb-6">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Timeline"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      type="text"
+                    <div className={`flex items-center justify-between mb-2.5`}>
+                      <label
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        htmlFor="timeline_days"
+                      >
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
                       name="timeline_days"
-                      spanTag=" - Expected duration of this task"
-                      // placeholder="Please Enter Detail Description of Job"
+                      className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
                       value={props.values.timeline_days}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
                     {props.errors.timeline_days &&
                       props.touched.timeline_days && (
                         <p className="text-sm text-red-500">
@@ -396,3 +406,16 @@ function AddJob() {
 }
 
 export default AddJob;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

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,11 +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 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,
@@ -34,7 +38,6 @@ export default function FamilyManageTabs({
     },
   ];
   const [tab, setTab] = useState(tabs[0].name);
-  const [manageLoader, setManageLoader] = useState(false);
   const tabHandler = (value) => {
     setTab(value);
   };
@@ -58,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 };
@@ -66,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);
@@ -77,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] ${
@@ -84,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
@@ -99,7 +108,7 @@ export default function FamilyManageTabs({
                 accountDetails={accountDetails}
               />
             </div>
-            <div className="col-span-3 p-6 h-full w-full">
+            <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
                 <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
                   {tabs.map(({ name, id }) => (
@@ -126,17 +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>
                     );
                   })}
@@ -144,7 +153,7 @@ export default function FamilyManageTabs({
               </div>
             </div>
           </div>
-        )}
+        </Suspense>
       </div>
     </div>
   );
@@ -211,20 +220,59 @@ function ProfileInfo({
   );
 }
 
-function Account({ familyDetails }) {
+const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
   return (
-    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
-      <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}</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>
-        </h2>
+    <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
+                  : "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 ? familyDetails?.pin : "please wait..."}
+              </span>
+            </h2>
+          </div>
+
+          <span className="text-5xl text-gray-400 opacity-20 font-bold">
+            or
+          </span>
+
+          <div className="max-w-[200px]">
+            <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>
+            <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}
+          >
+            Print
+          </button>
+        </div>
       </div>
     </div>
   );
-}
+});
 
 function Profile() {
   return <>Profile</>;

src/components/FamilyAcc/FamilyTasks.jsx

@@ -1,31 +1,127 @@
 import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
+import dataImage3 from "../../assets/images/data-table-user-3.png";
+import dataImage4 from "../../assets/images/data-table-user-4.png";
+import SelectBox from "../Helpers/SelectBox";
+
+import PaginatedList from "../Pagination/PaginatedList";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+
+export default function FamilyTasks({ className }) {
+    const filterCategories = ["All Categories", "Explore", "Featured"];
+    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+
+    let data = ['1', '2', '3', '4', '5', '6'] // to be replaced later by result from API CALL
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentTask = data.slice(indexOfFirstItem, indexOfLastItem);
+
+    const handlePagination = (e) => {
+        handlePagingFunc(e,setCurrentPage)
+    }
 
-export default function FamilyTasks({ className, loader }) {
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                 className || ""
             }`}
         >
-            <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>
-                ) : (
-                    <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
-
-                        <tr>
-                            <td> Yes This are my tasks </td>
+            {data.length &&
+                <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                    <table className="table-auto w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                        <tbody>
+                        <tr className="text-base text-thin-light-gray border-b default-border-b dark:border-[#5356fb29] ottom ">
+                            <td className="py-4">All Product</td>
+                            <td className="py-4 text-center">Value</td>
+                            <td className="py-4 text-center">USD</td>
+                            <td className="py-4 text-right">Status</td>
                         </tr>
+                        {
+                            currentTask.map((item,index)=>(
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                    <td className=" py-4">
+                                    <div className="flex space-x-2 items-center">
+                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                    <img
+                                    src={dataImage3}
+                                    alt="data"
+                                    className="w-full h-full"
+                                    />
+                                    </div>
+                                    <div className="flex flex-col">
+                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                    Mullican Computer Joy
+                                    </h1>
+                                    <span className="text-sm text-thin-light-gray">
+                                    Owned by <span className="text-purple">Xoeyam</span>
+                                    </span>
+                                    </div>
+                                    </div>
+                                    </td>
+                                    <td className="text-center py-4 px-2">
+                                    <div className="flex space-x-1 items-center justify-center">
 
+                                        <span className="text-base text-dark-gray dark:text-white font-medium">
+                                        7473 ETH
+                                        </span>
+                                    </div>
+                                    </td>
+                                    <td className="text-center py-4 px-2">
+                                    <div className="flex space-x-1 items-center justify-center">
+                                    <span>
+                                    <svg
+                                    width="16"
+                                    height="16"
+                                    viewBox="0 0 16 16"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                    <path
+                                    d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
+                                    fill="#59BE59"
+                                    />
+                                    <path
+                                    d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
+                                    fill="#FEFEFE"
+                                    />
+                                    <path
+                                    d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
+                                    fill="#59BE59"
+                                    />
+                                    <path
+                                    d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
+                                    fill="#59BE59"
+                                    />
+                                    </svg>
+                                    </span>
+                                    <span className="text-base text-dark-gray dark:text-white font-medium">
+                                    6392.99$
+                                    </span>
+                                    </div>
+                                    </td>
+                                    <td className="text-right py-4 px-2">
+                                    <button
+                                    type="button"
+                                    className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
+                                    >
+                                    Active
+                                    </button>
+                                    </td>
+                                </tr>
+                            ))
+                        }
 
+                        </tbody>
                     </table>
-                )}
-            </div>
+
+                    {/* PAGINATION BUTTON */}
+                    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} />
+                    {/* END OF PAGINATION BUTTON */}
+                </div>
+            }
         </div>
     );
 }

src/components/History/HistoryTable.jsx

@@ -51,8 +51,6 @@ export default function HistoryTable({ className }) {
               <td className="py-4 text-center">Value</td>
               <td className="py-4 text-center">USD</td>
               <td className="py-4 text-center">24H%</td>
-              <td className="py-4 text-center">Bits</td>
-              <td className="py-4 text-center">Time</td>
               <td className="py-4 text-right">Status</td>
             </tr>
 
@@ -165,16 +163,6 @@ export default function HistoryTable({ className }) {
                       -24.75 (11.5%)
                     </span>
                   </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-dark-gray dark:text-white font-medium">
-                      343
-                    </span>
-                  </td>
-                  <td className="text-right py-4 px-2">
-                    <span className="text-base text-thin-light-gray">
-                      2 Hours 1 min 30s
-                    </span>
-                  </td>
                   <td className="text-right py-4 px-2">
                     <button
                       type="button"

src/components/History/index.jsx

@@ -217,7 +217,7 @@ export default function History() {
                 {/* PURCHASE SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                        <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Purchases</h2>
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1>
                         {purchaseHistory.loading ? 
                         <LoadingSpinner size='16' color='sky-blue' />
                         :
@@ -230,7 +230,7 @@ export default function History() {
                 {/* RECENT ACTIVITY SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                        <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1>
                         {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                         {paymentHistory.loading ? 
                         <LoadingSpinner size='16' color='sky-blue' />

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/MyActiveJobs/ActiveJobs.jsx

@@ -59,7 +59,7 @@ function ActiveJobs(props) {
               <div className="w-full flex justify-start space-x-3 items-center">
                 <button
                   type="button"
-                  className="text-[#374557] border border-sky-blue p-1 rounded-full"
+                  className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
                   onClick={() => navigate(props.details.pathname, {replace: true})}
                 >
                   <svg

src/components/MyJobs/index.jsx

@@ -44,7 +44,6 @@ export default function MyJobs(props) {
           </div>
           <MyJobTable
               MyJobList={props.MyJobList}
-              reloadJobList={props.reloadJobList}
           />
         </div>
       </div>

src/components/MyTasks/MyOffersTable.jsx

@@ -15,7 +15,7 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
     const settings = {
         arrows: false,
         dots: false,
-        infinite: true,
+        infinite: MyActiveOffersList?.result_list?.length > 4,
         autoplay: true,
         slidesToShow: 4,
         slidesToScroll: 1,
@@ -25,6 +25,7 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                 settings: {
                     slidesToShow: 2,
                     slidesToScroll: 1,
+                    infinite: MyActiveOffersList?.result_list?.length > 2,
                 },
             },
         ],
@@ -113,11 +114,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                             </div>
                             <div className="slider-content">
                                 <SliderCom settings={settings} selector={sellSlider}>
-                                {   MyActiveOffersList.loading ?
-                                        <LoadingSpinner size={16} color='sky-blue' />
-                                    :
-                                    MyActiveOffersList?.data?.length > 0 ?
-                                        MyActiveOffersList.data.map((value, index) => (
+                                {
+                                    MyActiveOffersList && MyActiveOffersList?.result_list?.length > 0 &&
+                                    MyActiveOffersList?.result_list?.map((value, index) => (
                                             <div className="item" key={index}>
                                                 <div className="offer-slide-item flex flex-col justify-between items-center">
                                                     {/* title */}
@@ -155,23 +154,6 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
 
                                             </div>
                                         ))
-                                    :
-                                    MyActiveOffersList.status ?
-                                        (
-                                            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                                <div className="p-2">
-                                                    No Tasks!
-                                                </div>
-                                            </div>
-                                        )
-                                    :
-                                        (
-                                            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                                <p className="p-2">
-                                                Error Occurred! Unable to display Tasks!
-                                                </p>
-                                            </div>
-                                        )
                                 }
 
 

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/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -19,8 +19,7 @@ function PurchasesTable({purchase}) {
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
-            <th className="p-2">Date</th>
-            <th className="p-2">Description</th>
+            <th className="p-4">Trx.</th>
             <th className="p-2">Amount</th>
             <th className="p-2">Fee</th>
             </tr>
@@ -30,8 +29,9 @@ function PurchasesTable({purchase}) {
         <tbody>
             {currentPurchase.map((item, index) => (
             <tr key={index} className='text-slate-500'>
-                <td className="p-2">{item.added_date}</td>
-                <td className="p-2">{item.confirmation}</td>
+                <td className="p-4">{item.added_date}<br />
+                   <b>{item.confirmation} </b>
+                </td>
                 <td className="p-2">{item.amount}</td>
                 <td className="p-2">{item.fee}</td>
             </tr>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -20,9 +20,9 @@ function RecentActivityTable({payment}) {
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
             <th className="p-2">Date</th>
-            <th className="p-2">Recipient</th>
-            <th className="p-2">Amount/Fee</th>
-            <th className="p-2">Conf/Status</th>
+                <th className="p-4">Trx.</th>
+            <th className="p-2">Amnt./Fee</th>
+            <th className="p-2">Status</th>
             </tr>
         </thead>
         {payment.data.length ?
@@ -31,8 +31,8 @@ function RecentActivityTable({payment}) {
             {currentActivity.map((item, index) => (
             <tr key={index} className='text-slate-500'>
                 <td className="p-2">{item.trx_date}</td>
-                <td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
-                <td className="p-2">{item.amount}/{item.fee}</td>
+                <td className="p-4" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
+                <td className="p-2">{item.amount}<br />{item.fee}</td>
                 <td className="p-2">{item.status}</td>
             </tr>
             ))}

src/components/Partials/Layout.jsx

@@ -14,6 +14,7 @@ import usersService from "../../services/UsersService";
 
 export default function Layout({ children }) {
   const { drawer } = useSelector((state) => state.drawer);
+  const {userJobList} = useSelector((state) => state.userJobList)
   const dispatch = useDispatch();
   const [MobileSideBar, setMobileSidebar] = useToggle(false);
   const [logoutModal, setLogoutModal] = useState(false);
@@ -35,29 +36,24 @@ export default function Layout({ children }) {
 
   //---------------------------------------
   /* LET U DEAL WITH JOB LIST - we need to centralize this list  */
-  const {jobListTable} = useSelector((state) => state.tableReload)
-  const [MyJobList, setMyJobList] = useState({loading: true, data:[]});
-  const api = new usersService();
+  // const {jobListTable} = useSelector((state) => state.tableReload)
+  // const [myJobList, setMyJobList] = useState({loading: true, data:[]});
+  // const api = new usersService();
 
-  const getMyJobList = async () => {
-    setMyJobList({loading: true, data:[]})
-    try {
-      const res = await api.getMyJobList();
-      setMyJobList({loading: false, data:res.data})
-      // setMyJobList(res.data);
-    } catch (error) {
-      setMyJobList({loading: false, data:[]})
-      console.log("Error getting mode");
-    }
-  };
-  useEffect(() => {
-    getMyJobList();
-  }, [jobListTable]);
-  // const getJobList = ()=>{
-  //   let  jobLists  = useSelector((state) => state.jobLists);
-  //   return jobLists;
-  // }
-  //---------------------------------------
+  // const getMyJobList = async () => {
+  //   setMyJobList({loading: true, data:[]})
+  //   try {
+  //     const res = await api.getMyJobList();
+  //     setMyJobList({loading: false, data:res.data})
+  //     // setMyJobList(res.data);
+  //   } catch (error) {
+  //     setMyJobList({loading: false, data:[]})
+  //     console.log("Error getting mode");
+  //   }
+  // };
+  // useEffect(() => {
+  //   getMyJobList();
+  // }, [jobListTable]);
 
   return (
     <>
@@ -75,6 +71,7 @@ export default function Layout({ children }) {
               logoutModalHandler={logoutModalHandler}
               sidebar={drawer}
               action={() => dispatch(drawerToggle())}
+              myJobList={userJobList}
             />
           </div>
           {MobileSideBar && (
@@ -92,6 +89,7 @@ export default function Layout({ children }) {
               logoutModalHandler={logoutModalHandler}
               sidebar={MobileSideBar}
               action={() => setMobileSidebar.toggle()}
+              myJobList={userJobList}
             />
           </div>
           {/* end sidebar */}

src/components/Partials/MobileSideBar.jsx

@@ -8,7 +8,7 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
+export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJobList }) {
   let { userDetails } = useSelector((state) => state.userDetails);
   const darkMode = useContext(DarkModeContext);
 
@@ -180,7 +180,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   </div>
                 </div>
               </div>
-            ) : jobLists?.result_list?.length ? (
+            ) : myJobList?.data?.result_list?.length ? (
               <div className="setting-item">
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-purple">
@@ -213,7 +213,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   </ul>
                 </div>
               </div>
-            ) : (
+            ) : !myJobList?.loading && (
               <div className="setting-item">
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-purple">

src/components/Partials/RightSideBar.jsx

@@ -46,6 +46,8 @@ export default function RightSideBar() {
           </div>
 
           <div className="platform-list">
+            {userDetails && userDetails?.account_type !== "FAMILY" && (
+                <>
             <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
@@ -77,8 +79,7 @@ export default function RightSideBar() {
               </div>
               {/* action */}
             </div>
-            {userDetails && userDetails?.account_type !== "FAMILY" && (
-              <>
+
                 <div className="item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 rounded-full">
@@ -122,42 +123,45 @@ export default function RightSideBar() {
                     </p>
                   </div>
                 </div>
-                <div className="item flex space-x-3 items-center mb-4">
-                  {/* image */}
-                  <div className="w-8 h-8 rounded-full">
-                    <svg
-                      width="40"
-                      height="41"
-                      viewBox="0 0 40 41"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <ellipse
-                        cx="20"
-                        cy="20.2341"
-                        rx="20"
-                        ry="19.9392"
-                        fill="#5165FF"
-                      />
-                      <path
-                        d="M26.1647 27.2085C22.5316 27.2448 19.3317 24.2111 19.3359 20.2195C19.3402 16.4128 22.3393 13.2525 26.1704 13.2554C30.0813 13.2583 33.012 16.5264 33.0006 20.2501C32.9892 24.1456 29.8505 27.2492 26.1647 27.2085Z"
-                        fill="white"
-                      />
-                      <path
-                        d="M20.5815 27.1983C20.5217 27.2245 20.4405 27.207 20.3607 27.207C16.0039 27.2085 11.647 27.2085 7.29019 27.2085C7.25742 27.2085 7.22465 27.2099 7.1933 27.2085C7.01094 27.2026 7.00951 27.2026 7.00381 27.0076C7.00239 26.9581 7.00381 26.9086 7.00381 26.8576C7.00381 22.4395 7.00381 18.0214 7.00381 13.6033C7.00381 13.5072 6.99099 13.4082 7.01236 13.334C11.5373 17.9559 16.0566 22.5749 20.5815 27.1983Z"
-                        fill="white"
-                      />
-                    </svg>
-                  </div>
-                  {/* name */}
-                  <div>
-                    <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/resources">Resources</NavLink>
-                    </p>
-                  </div>
-                </div>
+
               </>
             )}
+
+            <div className="item flex space-x-3 items-center mb-4">
+              {/* image */}
+              <div className="w-8 h-8 rounded-full">
+                <svg
+                    width="40"
+                    height="41"
+                    viewBox="0 0 40 41"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                  <ellipse
+                      cx="20"
+                      cy="20.2341"
+                      rx="20"
+                      ry="19.9392"
+                      fill="#5165FF"
+                  />
+                  <path
+                      d="M26.1647 27.2085C22.5316 27.2448 19.3317 24.2111 19.3359 20.2195C19.3402 16.4128 22.3393 13.2525 26.1704 13.2554C30.0813 13.2583 33.012 16.5264 33.0006 20.2501C32.9892 24.1456 29.8505 27.2492 26.1647 27.2085Z"
+                      fill="white"
+                  />
+                  <path
+                      d="M20.5815 27.1983C20.5217 27.2245 20.4405 27.207 20.3607 27.207C16.0039 27.2085 11.647 27.2085 7.29019 27.2085C7.25742 27.2085 7.22465 27.2099 7.1933 27.2085C7.01094 27.2026 7.00951 27.2026 7.00381 27.0076C7.00239 26.9581 7.00381 26.9086 7.00381 26.8576C7.00381 22.4395 7.00381 18.0214 7.00381 13.6033C7.00381 13.5072 6.99099 13.4082 7.01236 13.334C11.5373 17.9559 16.0566 22.5749 20.5815 27.1983Z"
+                      fill="white"
+                  />
+                </svg>
+              </div>
+              {/* name */}
+              <div>
+                <p className="text-thin-light-gray text-base font-medium">
+                  <NavLink to="/resources">Resources</NavLink>
+                </p>
+              </div>
+            </div>
+
           </div>
         </div>
         {/*<SideStatistics />*/}

src/components/Partials/Sidebar.jsx

@@ -8,11 +8,10 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function Sidebar({ sidebar, action, logoutModalHandler }) {
+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;
@@ -200,7 +199,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </div>
                 </div>
               </div>
-            ) : jobLists?.result_list?.length ? (
+            ) : myJobList?.data?.result_list?.length ? (
               <>
                 <div className="setting-item">
                   <div className="heading mb-5">
@@ -239,7 +238,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </div>
                 </div>
               </>
-            ) : (
+            ) : !myJobList?.loading && (
               <div className="setting-item">
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-purple">

src/components/jobPopout/EditJobPopout.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
+import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -245,20 +245,34 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                     </div>
 
                     <div className="field w-full mb-6">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Timeline"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-[#dce4e9]"
-                        type="text"
-                        name="timeline_days"
-                        spanTag=" - Expected duration of this task"
-                        // placeholder="Please Enter Detail Description of Job"
-                        value={props.values.timeline_days}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                      />
+                    <div className={`flex items-center justify-between mb-2.5`}>
+                      <label
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        htmlFor="timeline_days"
+                      >
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
+                      name="timeline_days"
+                      className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
+                      value={props.values.timeline_days}
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
                       {props.errors.timeline_days &&
                         props.touched.timeline_days && (
                           <p className="text-sm text-red-500">
@@ -316,3 +330,16 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
 };
 
 export default EditJobPopOut;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/components/jobPopout/JobListPopout.jsx

@@ -3,12 +3,12 @@ import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import SiteService from "../../services/SiteService";
-import { Form, Formik, Field } from "formik";
+import { Form, Formik, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 const validationSchema = Yup.object().shape({
-  family: Yup.string().required("THis is required "),
+  family: Yup.string().required("This is required "),
   public: Yup.string(),
   individual: Yup.string()
     .email("Invalid email format")
@@ -68,18 +68,50 @@ function JobListPopout({ details, onClose, situation }) {
     group: "",
   };
 
-  let [inputs, setInputs] = useState({});
+  let [textArea, setTextArea] = useState(details?.job_detail);
+  const [errMsg, setErrMsg] = useState({
+    deliveryDetail: "",
+    jobFields: {
+      family: "",
+      public: "",
+      individual: "",
+      group: "",
+    },
+  });
 
-  const handleInputChange = ({ target: { name, value } }) => {
-    setInputs((prev) => ({ ...prev, [name]: value }));
+  const handleInputChange = ({ target: { value } }) => {
+    setTextArea(value);
+  };
+
+  const errorHandler = ({ target: { name } }) => {
+    try {
+      if (name === "family")
+        setErrMsg({ jobFields: { family: "please select a family member" } });
+      else if (name === "public")
+        setErrMsg({ jobFields: { public: "please select duration" } });
+      else if (name === "individual")
+        setErrMsg({ jobFields: { individual: "please enter email" } });
+      else if (name === "group")
+        setErrMsg({ jobFields: { group: "please select a family member" } });
+    } finally {
+      setTimeout(() => {
+        setErrMsg({ jobFields: "" });
+      }, 3000);
+    }
   };
 
   const jobFieldHandler = async (values, helpers) => {
-    let { job_id, job_uid, job_detail } = details;
+    let { job_id, job_uid } = details;
+
+    if (!textArea) {
+      setErrMsg({ deliveryDetail: "delivery detail is required!" });
+      return;
+    }
+
     let jobReq = {
       job_id,
       job_uid,
-      job_description: job_detail
+      job_description: textArea,
     };
     let reqData;
 
@@ -119,22 +151,24 @@ function JobListPopout({ details, onClose, situation }) {
         assign_mode: 110033,
       };
       setLoader({ jobFields: { group: true } });
+    } else {
+      return;
     }
 
     try {
       const res = await apiCall.assignJobTask(reqData);
       let { data } = await res;
-      setLoader({ member: false, jobFields: false });
+      setLoader({ jobFields: false });
       onClose();
       throw new Response(data);
     } catch (error) {
-      setLoader({ member: false, jobFields: false });
+      setLoader({ jobFields: false });
       throw new Error(error);
     }
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
+    <ModalCom action={onClose} situation={situation} className="job-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
@@ -200,11 +234,11 @@ function JobListPopout({ details, onClose, situation }) {
               <textarea
                 className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
                 rows="5"
-                name="details"
                 style={{ resize: "none" }}
-                value={details.job_detail}
+                value={textArea}
                 onChange={handleInputChange}
               />
+              <p>{errMsg.deliveryDetail}</p>
             </div>
           </div>
 
@@ -217,7 +251,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Assign to Family */}
                     <JobFieldInput
                       label="Assign to family"
@@ -226,9 +260,16 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.family}
                       data={familyList}
                       btnText="Assign to family"
-                      optionText="select family"
+                      optionText="Select Family"
                       loader={loader?.jobFields.family}
+                      errorHandler={errorHandler}
                     />
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.family === "" && (
+                        <span>{errMsg.jobFields.family}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -241,7 +282,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to public input */}
                     <JobFieldInput
                       label="Offer this job to public"
@@ -250,9 +291,16 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.public}
                       data={publicArray}
                       btnText="Show Task to Public"
-                      optionText="select duration"
+                      optionText="Select Duration"
                       loader={loader?.jobFields.public}
+                      errorHandler={errorHandler}
                     />
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.public === "" && (
+                        <span>{errMsg.jobFields.public}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -265,7 +313,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to individual input */}
                     <JobFieldInput
                       label="Offer this job to individual"
@@ -276,7 +324,14 @@ function JobListPopout({ details, onClose, situation }) {
                       inputHandler={props?.handleChange}
                       btnText="Send Offer to Individual"
                       loader={loader?.jobFields.individual}
+                      errorHandler={errorHandler}
                     />
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.individual === "" && (
+                        <span>{errMsg.jobFields.individual}</span>
+                      )}
+                    </p>{" "}
                   </Form>
                 );
               }}
@@ -289,7 +344,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to your group input */}
                     <JobFieldInput
                       label="Offer this job to your Group"
@@ -299,7 +354,14 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Send Order to Group"
                       optionText="Group"
                       loader={loader?.jobFields.group}
+                      errorHandler={errorHandler}
                     />
+                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                      {" "}
+                      {props?.values.group === "" && (
+                        <span>{errMsg.jobFields.group}</span>
+                      )}
+                    </p>
                   </Form>
                 );
               }}
@@ -327,11 +389,12 @@ const JobFieldInput = ({
   btnText,
   parentClass,
   optionText,
+  errorHandler,
   loader,
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
+    <div className="field w-full p-3 mb-2 bg-red-50 rounded-md">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -388,7 +451,7 @@ const JobFieldInput = ({
           fieldClass="px-6"
           label={label}
           labelClass="tracking-wide"
-          type="text"
+          type="email"
           name={inputName}
           placeholder={placeholder}
           value={value}
@@ -402,6 +465,7 @@ const JobFieldInput = ({
         <button
           type="submit"
           name={inputName}
+          onClick={errorHandler}
           className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md"
         >
           {loader ? <LoadingSpinner size={5} /> : btnText}

src/components/jobPopout/OfferJobPopout.jsx

@@ -33,10 +33,6 @@ function OfferJobPopout({details, onClose, situation}) {
       setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
       reqData.offer_result = 333
     }
-    if(name == 'cancel'){
-      setRequestStatus({loading: true, status: false, message: '', trigger: 'cancel'})
-      reqData.offer_result = 222
-    }
 
     // API CALL
     apiUrl.offersResponse(reqData).then(response => {
@@ -47,7 +43,7 @@ function OfferJobPopout({details, onClose, situation}) {
       setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
       setTimeout(()=>{
         onClose()
-        dispatch(tableReload({type:'JOBTABLE'}))
+        dispatch(tableReload({type:'MYTASKTABLE'}))
         navigate('/mytask', {replace:true})
         setRequestStatus({loading: false, status: false, message: '', trigger: ''})
       },2000)
@@ -95,7 +91,7 @@ function OfferJobPopout({details, onClose, situation}) {
         </div>
         <div className='md:flex bg-white rounded-lg shadow-lg'>
           <div className='p-4 w-full md:w-3/4 md:border-r-2'>
-            <p className='text-lg my-5 font-semibold text-slate-900 tracking-wide'>Opportunity to make some money by introducing 10 of our recent stories from our</p>
+            <p className='text-lg my-5 font-semibold text-slate-900 tracking-wide'>{details.title}</p>
   
             {/* INPUT SECTION */}
             <div className='my-2 md:flex'>
@@ -152,7 +148,7 @@ function OfferJobPopout({details, onClose, situation}) {
                   name='accept' 
                   onClick={handleOffer} 
                   disabled={requestStatus.loading}
-                  className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>
+                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
                     Accept Offer
                 </button>
               }
@@ -166,7 +162,7 @@ function OfferJobPopout({details, onClose, situation}) {
                   name='reject' 
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className='px-2 py-1 text-sm text-white bg-red-500 hover:opacity-90 rounded-md'>
+                  className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
                     Reject Offer
                 </button>
               }
@@ -191,19 +187,14 @@ function OfferJobPopout({details, onClose, situation}) {
 
         {/* close button */} 
         <div className="p-6 flex justify-end">
-          {requestStatus.loading && requestStatus.trigger == 'cancel' ?
-            <LoadingSpinner size={8} color='sky-blue' />
-            :
-            <button
-              onClick={handleOffer}
+          <button
+              onClick={onClose}
               disabled={requestStatus.loading}
               type="button"
-              name='cancel'
-              className="border border-red-500 text-red-500 text-18 tracking-wide px-2 py-2 rounded-full"
+              className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
             >
-              Cancel
+              <span className="text-gradient">Cancel</span>
             </button>
-          }
         </div>
         {/* end of close button */}
     </div>

src/components/jobPopout/PendingJobsPopout.jsx

@@ -39,7 +39,7 @@ function PendingJobsPopout({details, onClose, situation}) {
         </div>
         <div className='md:flex bg-white rounded-lg shadow-lg'>
           <div className='p-4 w-full md:w-3/4 md:border-r-2'>
-            <p className='text-base font-semibold text-slate-900 tracking-wide'>Opportunity to make some money by introducing 10 of our recent stories from our</p>
+            <p className='text-base font-semibold text-slate-900 tracking-wide'>{details.title}</p>
             <div className='my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300'>
               <span className='w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100'>!</span>
               <div className=''>
@@ -110,15 +110,15 @@ function PendingJobsPopout({details, onClose, situation}) {
             </div>
   
             <div className='my-3'>
-              <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Extend by a week</button>
+              <button className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>Extend by a week</button>
             </div>
   
             <div className='my-3'>
-              <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send to me</button>
+              <button className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>Send to me</button>
             </div>
   
             <div className='mt-10 md:mt-32 md:flex md:justify-center'>
-              <button className='px-2 py-1 text-sm text-white bg-red-500 hover:opacity-90 rounded-md'>Cancel Offer</button>
+              <button className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>Cancel Offer</button>
             </div>
           </div>
         </div>

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%);
@@ -787,4 +798,8 @@ TODO: Responsive ===========================
 
 .edit-popup{
   top: 75px;
+}
+
+.job-popup{
+  top: 55px;
 }

src/middleware/AuthRoute.jsx

@@ -5,6 +5,7 @@ import LoadingSpinner from "../components/Spinners/LoadingSpinner";
 import { useDispatch, useSelector } from "react-redux";
 import { updateUserDetails } from "../store/UserDetails";
 import { updateJobs } from "../store/jobLists";
+import { updateUserJobList } from "../store/userJobList";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -12,6 +13,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
   const [isLogin, setIsLogin] = useState({ loading: true, status: false });
   const navigate = useNavigate();
+
+  const {jobListTable} = useSelector((state) => state.tableReload)
   
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
@@ -73,6 +76,23 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
+  useEffect(()=>{
+    const getMyJobList = async () => {
+      dispatch(updateUserJobList({loading: true, data:[]}))
+      try {
+        const res = await apiCall.getMyJobList();
+        // setMyJobList({loading: false, data:res.data})
+        // setMyJobList(res.data);
+        dispatch(updateUserJobList({loading: false, data:res.data}))
+      } catch (error) {
+        dispatch(updateUserJobList({loading: false, data:[]}))
+        // setMyJobList({loading: false, data:[]})
+        console.log("Error getting mode");
+      }
+    };
+    getMyJobList()
+  },[jobListTable])
+
   useEffect(() => {
     // Getting market data
     const getMarketActiveJobList = async () => {

src/store/TableReloads.js

@@ -2,7 +2,8 @@ import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
   jobListTable: false,
-  pendingListTable: false
+  pendingListTable: false,
+  myTaskTable: false
 };
 
 export const tableReloadSlice = createSlice({
@@ -17,6 +18,9 @@ export const tableReloadSlice = createSlice({
         case 'PENDINGTABLE' :
           state.pendingListTable = !state.pendingListTable;
           return
+        case 'MYTASKTABLE' :
+          state.myTaskTable = !state.myTaskTable;
+          return
         default:
           return state
       }

src/store/store.js

@@ -4,12 +4,14 @@ import drawerReducer from "./drawer";
 import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
 import tableReloadReducer from "./TableReloads";
+import userJobListReducer from './userJobList'
 
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
     userDetails: userDetailReducer,
     jobLists: jobReducer,
-    tableReload: tableReloadReducer
+    tableReload: tableReloadReducer,
+    userJobList: userJobListReducer
   },
 });

src/store/userJobList.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  userJobList: {loading: true, data: []}
+};
+
+export const userSlice = createSlice({
+  name: "userJobList",
+  initialState,
+  reducers: {
+    updateUserJobList: (state,action) => {
+      state.userJobList = {...action.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { updateUserJobList } = userSlice.actions;
+
+export default userSlice.reducer;

src/views/MyJobsPage.jsx

@@ -12,32 +12,33 @@ export default function MyJobsPage() {
     return 0;
   };
 
-  const { jobListTable } = useSelector((state) => state.tableReload);
-
+  const {userJobList} = useSelector((state) => state.userJobList)
+  
+  // const { jobListTable } = useSelector((state) => state.tableReload);
   // const userApi = new usersService();
   // const activeJobList  = userApi.getMyJobList();
-  const [MyJobList, setMyJobList] = useState({ loading: true, data: [] });
-  const api = new usersService();
+  // const [myJobList, setMyJobList] = useState({ loading: true, data: [] });
+  // const api = new usersService();
 
-  const getMyJobList = async () => {
-    setMyJobList({ loading: true, data: [] });
-    try {
-      const res = await api.getMyJobList();
-      setMyJobList({ loading: false, data: res.data });
-      // setMyJobList(res.data);
-    } catch (error) {
-      setMyJobList({ loading: false, data: [] });
-      console.log("Error getting mode");
-    }
-  };
-  useEffect(() => {
-    getMyJobList();
-  }, [jobListTable]);
+  // const getMyJobList = async () => {
+  //   setMyJobList({ loading: true, data: [] });
+  //   try {
+  //     const res = await api.getMyJobList();
+  //     setMyJobList({ loading: false, data: res.data });
+  //     // setMyJobList(res.data);
+  //   } catch (error) {
+  //     setMyJobList({ loading: false, data: [] });
+  //     console.log("Error getting mode");
+  //   }
+  // };
+  // useEffect(() => {
+  //   getMyJobList();
+  // }, [jobListTable]);
 
   // debugger;
   return (
     <>
-      <MyJobs MyJobList={MyJobList} commonHeadData={commonHeadData} />
+      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadData} />
     </>
   );
 }

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 {jobListTable} = useSelector((state) => state.tableReload)
+  const { myTaskTable } = useSelector((state) => state.tableReload);
 
-    const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]});
-    const [MyActiveOffersList, setMyActiveOffersList] = useState({loading: true, status:false, data:[]});
-    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({loading: false, status:true, data:res.data.result_list});
-        } catch (error) {
-            setMyActiveOffersList({loading: false, status:false, data:[]});
-            console.log("Error getting offers");
-        }
-    };
-    useEffect(() => {
-        getMyActiveJobList();
-        getMyActiveOffersList();
-    }, [jobListTable]);
+  };
+  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}
+    />
+  );
 }