fixed typo

.env

@@ -17,7 +17,8 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
-REACT_APP_SESSION_EXPIRE_MINUTES=5
+REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 

src/components/AuthPages/SignUp/index.jsx

@@ -113,7 +113,7 @@ export default function SignUp() {
   return (
     <>
       <div className="layout-wrapper login">
-        <div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12">
+        <div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
           <div className=" h-full">
             <div className="flex-1 flex justify-center items-center">
               <div className="w-full">
@@ -122,7 +122,7 @@ export default function SignUp() {
                     <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
                   </Link>
                 </div>
-                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-7">
                   <div>
                     <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                       <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{

src/components/Cards/ActiveJobsCard.jsx

@@ -77,26 +77,27 @@ export default function ActiveJobsCard({
                 </div>
                 <div className="details-area">
                     <div className="product-two-options flex justify-between mb-5 relative">
-                        <div className="status">
-                            {datas.isActive && (
-                                <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
-                    Active
-                  </span>
-                            )}
-                        </div>
+
+                  {/*      <div className="status">*/}
+                  {/*          {datas.isActive && (*/}
+                  {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+                  {/*  Active*/}
+                  {/*</span>*/}
+                  {/*          )}*/}
+                  {/*      </div>*/}
 
 
-                        <div className=" review flex space-x-2">
-                            <button
-                                onClick={favoriteHandler}
-                                type="button"
-                                className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${
-                                    addFavorite ? "text-red-500" : "text-thin-light-gray"
-                                }`}
-                            >
-                                <Icons name="star" />
-                            </button>
-                        </div>
+                        {/*<div className=" review flex space-x-2">*/}
+                        {/*    <button*/}
+                        {/*        onClick={favoriteHandler}*/}
+                        {/*        type="button"*/}
+                        {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+                        {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+                        {/*        }`}*/}
+                        {/*    >*/}
+                        {/*        <Icons name="star" />*/}
+                        {/*    </button>*/}
+                        {/*</div>*/}
                     </div>
 
                     <div className="flex justify-between">

src/components/Cards/AvailableJobsCard.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";
+
+export default function AvailableJobsCard({
+                                           className,
+                                           datas,
+                                           hidden = false,
+                                       }) {
+    //debugger;
+    const [addFavorite, setValue] = useState(datas.whishlisted);
+    const [options, setOption] = useState(false);
+    const favoriteHandler = () => {
+        if (!addFavorite) {
+            setValue(true);
+            toast.success("Added to Favorite List");
+        } else {
+            setValue(false);
+            toast.warn("Remove to Favorite List");
+        }
+    };
+    return (
+        <div
+            className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+                className || ""
+            }`}
+        >
+            <div className="flex flex-col justify-between w-full h-full">
+                <Link to="/shop-details" className="mb-2.5">
+                    <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+                        {datas.title}
+                    </h1>
+                </Link>
+
+                <div className="card-two-info flex justify-between items-center">
+                    <div className="owned-by flex space-x-2 items-center">
+                        <div>
+                            <p className="text-thin-light-gray text-sm leading-3">Added</p>
+                            <p className="text-base   text-dark-gray dark:text-white">
+                                {datas.offer_added}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+                    <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                        <div>
+                            <p className="text-thin-light-gray text-sm leading-3 text-right">
+                                Expires
+                            </p>
+                            <p className="text-base text-dark-gray dark:text-white text-right">
+                                {datas.expire}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div className="thumbnail-area w-full">
+                    <div
+                        className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+                        style={{
+                            background: `url(${localImgLoad(
+                                `images/${datas.thumbnil}`
+                            )}) 0% 0% / cover no-repeat`,
+                        }}
+                    >
+                        <div className="flex justify-center">
+                            {datas.description}
+                        </div>
+
+
+
+
+
+                    </div>
+
+                </div>
+                <div className="details-area">
+                    <div className="product-two-options flex justify-between mb-5 relative">
+
+                        {/*      <div className="status">*/}
+                        {/*          {datas.isActive && (*/}
+                        {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+                        {/*  Active*/}
+                        {/*</span>*/}
+                        {/*          )}*/}
+                        {/*      </div>*/}
+
+
+                        {/*<div className=" review flex space-x-2">*/}
+                        {/*    <button*/}
+                        {/*        onClick={favoriteHandler}*/}
+                        {/*        type="button"*/}
+                        {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+                        {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+                        {/*        }`}*/}
+                        {/*    >*/}
+                        {/*        <Icons name="star" />*/}
+                        {/*    </button>*/}
+                        {/*</div>*/}
+                    </div>
+
+                    <div className="flex justify-between">
+                        <div className="flex items-center space-x-2">
+                            <div>
+                                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                                    {datas.price*0.01}{datas.currency} | {datas.timeline_days} day(s)
+                                </p>
+                                <p className="text-sm text-lighter-gray">
+                                    ( {datas.offer_code})
+                                </p>
+                            </div>
+                        </div>
+                        <div>
+                            <button
+                                type="button"
+                                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                            >
+                                View
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/MarketPlace/MainSection.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 //import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
 import DataIteration from "../Helpers/DataIteration";
-import SearchCom from "../Helpers/SearchCom";
-import ActiveJobsCard from "../Cards/ActiveJobsCard";
+// import SearchCom from "../Helpers/SearchCom";
+// import ActiveJobsCard from "../Cards/ActiveJobsCard";
+import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
 export default function MainSection({ className, marketPlaceProduct }) {
   const [tab, setTab] = useState("explore");
@@ -98,7 +99,7 @@ export default function MainSection({ className, marketPlaceProduct }) {
               endLength={products?.length}
             >
               {({ datas }) => (
-                <ActiveJobsCard key={datas.id} datas={datas} />
+                <AvailableJobsCard key={datas.id} datas={datas} />
               )}
             </DataIteration>
           </div>

src/middleware/AuthRoute.jsx

@@ -1,7 +1,55 @@
-import { Navigate, Outlet } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
+  const [lastActivityTime, setLastActivityTime] = useState(Date.now());
   const isLogin = localStorage.getItem("email");
+
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+
+  //Removing Data stored at localStorage after session expires
+  const expireSession = () => {
+    localStorage.removeItem("email");
+    localStorage.removeItem('session_token');
+    localStorage.removeItem('firstname');
+    localStorage.removeItem('member_id');
+    localStorage.removeItem('lastname');
+    localStorage.removeItem('state');
+    localStorage.removeItem('last_login');
+    localStorage.removeItem('uid');
+    localStorage.removeItem('session');
+    localStorage.removeItem('city');
+    localStorage.removeItem('country');
+    localStorage.removeItem('loglevel');
+    localStorage.removeItem('zip_code');
+    localStorage.removeItem('added');
+    navigate("/login", { replace: true }); // redirects user to login page after session expires
+  };
+
+  const checkInactivity = setInterval(() => {
+    if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) {
+      expireSession()
+    }
+  }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute
+
+  // Reset last activity time on user input
+  const resetTime = () => {
+    setLastActivityTime(Date.now());
+  }
+  window.addEventListener('mousemove', resetTime)
+  window.addEventListener('keydown', resetTime)
+
+  useEffect(() => {
+    // cleaning up listeners
+    return () => {
+      clearInterval(checkInactivity)
+      window.removeEventListener('mousemove', resetTime)
+      window.removeEventListener('keydown', resetTime)
+    }
+  }, [pathname, lastActivityTime])
+
   if (!isLogin) {
     return <Navigate to={redirectPath} replace />;
   }