Moved Offer Table to Dash

src/components/MyTasks/MyJobTable.jsx

@@ -7,6 +7,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 const noTasksBg = require("../../assets/images/no-task-background.jpg");
+const noFamilyTasksBg = require("../../assets/images/family-no-task-background.jpg");
 
 export default function MyJobTable({ className, ActiveJobList, Account }) {
   let navigate = useNavigate();
@@ -25,14 +26,17 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
     handlePagingFunc(e, setCurrentPage);
   };
 
+  let accountType = Account?.account_type == "FULL"
+
   // To navigate to task
   const [btnLoader, setBtnLoader] = useState(false);
   const navigateMarket = () => {
     setBtnLoader(true);
-    setTimeout(() => {
-      navigate(Account == "FULL" ? "/market" : "/", { replace: true });
+    const timeoutId = setTimeout(() => {
+      navigate(accountType ? "/market" : "/", { replace: true });
       setBtnLoader(false);
     }, 2500);
+    return () => clearTimeout(timeoutId);
   };
 
   return (
@@ -42,12 +46,12 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
       } bg-cover bg-center`}
       style={{
         backgroundImage: !ActiveJobList?.data.length
-          ? `url('${noTasksBg}')`
+          ? `url('${accountType ? noTasksBg : noFamilyTasksBg}')`
           : "none",
       }}
     >
       {/* Adding this dark overlay in order to see the texts properly */}
-      {!ActiveJobList?.data.length && (
+      {!ActiveJobList?.data.length && accountType && (
         <div class="absolute inset-0 bg-black opacity-30"></div>
       )}
       {ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
@@ -134,20 +138,41 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
             })}
 
           {ActiveJobList?.data?.length <= 0 && (
-            <div className="flex flex-col items-center justify-center gap-9 my-5">
-              <div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
-                You currently have "0" task
-              </div>
-              <button
-                className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={navigateMarket}
+            <div
+              className={`flex flex-col ${
+                accountType ? "items-center" : "items-end"
+              } justify-center gap-9 my-5`}
+            >
+              <div
+                className={`p-2 font-bold text-3xl ${
+                  accountType ? "text-white" : "text-purple"
+                } whitespace-nowrap`}
               >
-                {btnLoader ? (
-                  <div className="signup btn-loader"></div>
-                ) : (
-                  "Find Task"
-                )}
-              </button>
+                You currently have {accountType ? '"0"' : "no"} task
+              </div>
+              <div
+                className={
+                  !accountType &&
+                  "bg-black opacity-30 h-[17rem] p-5 rounded-md -translate-x-20"
+                }
+              >
+                <button
+                  className={`${
+                    !accountType
+                      ? "w-[130px] h-20 bg-[#19a706] text-lg font-semibold rounded-md py-2 px-4"
+                      : "w-[115px] h-11 btn-gradient rounded-full"
+                  } flex justify-center items-center text-base text-white`}
+                  onClick={navigateMarket}
+                >
+                  {btnLoader ? (
+                    <div className="signup btn-loader"></div>
+                  ) : accountType ? (
+                    "Find Task"
+                  ) : (
+                    "Ask Parent For New Task"
+                  )}
+                </button>
+              </div>
             </div>
           )}
           {ActiveJobList?.internal_return < 0 && (