Merge branch 'market-item-view-popup' of WrenchBoard/Users-Wrench into master

src/components/FamilyAcc/FamilyManage.jsx

@@ -1,44 +1,59 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Layout from "../Partials/Layout";
 import FamilyManageTabs from "./Tabs/FamilyManageTabs";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function FamilyManage() {
   const [selectTab, setValue] = useState("today");
+  let [pageLoading, setPageLoading] = useState(true);
 
   let location = useLocation();
-  let accountDetails = location?.state
+  let navigate = useNavigate();
+  let accountDetails = location?.state;
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);
   };
 
+  useEffect(() => {
+    if (!accountDetails) {
+      navigate("/acc-family", { replace: true });
+    } else {
+      setPageLoading(false);
+    }
+  }, []);
+
   return (
     <Layout>
       {/*<CommonHead />*/}
-      <div className="notification-page w-full mb-10">
+      {pageLoading ? (
-        <div className="notification-wrapper w-full">
+        <LoadingSpinner size={8} color="sky-blue" />
-          {/* heading */}
+      ) : (
-          <div className="sm:flex justify-between items-center mb-6">
+        <div className="notification-page w-full mb-10">
-            <div className="mb-5 sm:mb-0">
+          <div className="notification-wrapper w-full">
-              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+            {/* heading */}
-                <span
+            <div className="sm:flex justify-between items-center mb-6">
-                  className={`${selectTab === "today" ? "block" : "hidden"}`}
+              <div className="mb-5 sm:mb-0">
-                >
+                <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                  Manage Family
+                  <span
-                </span>
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-              </h1>
+                  >
-            </div>
+                    Manage Family
-            <div className="slider-btns flex space-x-4">
+                  </span>
-              <div
+                </h1>
-                onClick={() => filterHandler("today")}
+              </div>
-                className="relative"
+              <div className="slider-btns flex space-x-4">
-              ></div>
+                <div
+                  onClick={() => filterHandler("today")}
+                  className="relative"
+                ></div>
+              </div>
             </div>
+            <FamilyManageTabs accountDetails={accountDetails} />
           </div>
-          <FamilyManageTabs accountDetails={accountDetails} />
         </div>
-      </div>
+      )}
     </Layout>
   );
-}
+}

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -200,7 +200,6 @@ function ProfileInfo({
   browseProfileImg,
   accountDetails,
 }) {
-  let { firstname, lastname, age } = accountDetails;
   return (
     <div className="flex flex-col items-center gap-6">
       <div className="flex justify-center">
@@ -241,13 +240,13 @@ function ProfileInfo({
       </div>
       <div className="flex flex-col justify-center gap-3 items-center">
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          {firstname}
+          {accountDetails?.firstname}
         </h1>
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          {lastname}
+          {accountDetails?.lastname}
         </h1>
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-          {age}
+          {accountDetails?.age}
         </h1>
       </div>
     </div>

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -1,14 +1,18 @@
 import React, { useState } from "react";
 import dataImage2 from "../../../assets/images/data-table-user-2.png";
-
+import { useNavigate, useLocation } from "react-router-dom";
 import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import Icons from "../../Helpers/Icons";
 
 export default function FamilyTasks({ familyData, className, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
+  let navigate = useNavigate();
+  let { pathname } = useLocation();
+
   let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -20,6 +24,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
     indexOfLastItem
   );
 
+
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -46,69 +51,69 @@ export default function FamilyTasks({ familyData, className, loader }) {
                       {familyData &&
                         familyData?.result_list &&
                         familyData.result_list.length > 0 &&
-                        currentTask.map((value, index) => (
+                        currentTask.map((value, index) => {
-                          <tr
+  // find due date
-                            key={index}
+  const dueDate = value?.delivery_date.split(" ")[0]
-                            className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                          return (
-                          >
+                            <tr
-                            <td className=" py-4">
+                              key={index}
-                              <div className="flex space-x-2 items-center w-full">
+                              className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
-                                <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]">
+                            >
-                                  <img
+                              <td className=" py-4">
-                                    src={dataImage2}
+                                <div className="flex space-x-2 items-center w-full">
-                                    alt="data"
+                                  <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]">
-                                    className="w-full h-full"
+                                    <img
-                                  />
+                                      src={dataImage2}
+                                      alt="data"
+                                      className="w-full h-full"
+                                    />
+                                  </div>
+                                  <div className="flex flex-col flex-[0.9]">
+                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                      {value.title}
+                                    </h1>
+                                    <div className="flex gap-4 items-center">
+                                    <span className="text-sm text-thin-light-gray">
+                                      Price:{" "}
+                                      <span className="text-purple">
+                                        {value.price * 0.01}
+                                      </span>
+                                    </span>
+                                    <span className="text-sm text-thin-light-gray">
+                                      Duration:{" "}
+                                      <span className="text-purple">
+                                        {" "}
+                                        {value.timeline_days} day(s)
+                                      </span>
+                                    </span>
+                                    <span className="text-sm text-thin-light-gray">
+                                      Due Date:{" "}
+                                      <span className="text-purple">
+                                        {" "}
+                                        {dueDate}
+                                      </span>
+                                    </span>
+                                    </div>
+                                  </div>
                                 </div>
-                                <div className="flex flex-col flex-[0.9]">
+                              </td>
-                                  <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+  
-                                    {value.title}
+                              <td className="text-right py-4 px-2">
-                                  </h1>
+                                <button
-                                  <div>{value.description}</div>
+                                  type="button"
-                                  <span className="text-sm text-thin-light-gray">
+                                  onClick={() => {
-                                    Price:{" "}
+                                    navigate("/manage-active-job", {
-                                    <span className="text-purple">
+                                      state: { ...value, pathname },
-                                      {value.price * 0.01}
+                                    });
-                                    </span>
+                                  }}
-                                  </span>
+                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                  <span className="text-sm text-thin-light-gray">
+                                >
-                                    Duration:{" "}
+                                  <Icons name="right-arrow" />
-                                    <span className="text-purple">
+                                </button>
-                                      {" "}
+                              </td>
-                                      {value.timeline_days} day(s)
+                            </tr>
-                                    </span>
+                          )
-                                  </span>
+                        })}
-                                  <span className="text-sm text-thin-light-gray">
-                                    Expire:{" "}
-                                    <span className="text-purple">
-                                      {" "}
-                                      {value.expire}
-                                    </span>
-                                  </span>
-                                  <span className="text-sm text-thin-light-gray">
-                                    Send to:{" "}
-                                    <span className="text-purple">
-                                      {" "}
-                                      {value.job_to}
-                                    </span>
-                                  </span>
-                                </div>
-                              </div>
-                            </td>
-
-                            <td className="text-right py-4 px-2">
-                              <button
-                                type="button"
-                                onClick={() => {
-                                  // setJobPopout({ show: true, data: value });
-                                }}
-                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                              >
-                                View
-                              </button>
-                            </td>
-                          </tr>
-                        ))}
                     </>
                   }
                 </tbody>

src/components/Helpers/Icons.jsx

@@ -468,6 +468,21 @@ export default function Icons({ name }) {
         >
           <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
         </svg>
+      ) : name === "right-arrow" ? (
+        <svg
+          width="24"
+          height="24"
+          xmlns="http://www.w3.org/2000/svg"
+          // enableBackground="new 0 0 24 24"
+          viewBox="0 0 24 24"
+          className="fill-black dark:fill-white"
+          id="right-arrow"
+        >
+          <path
+            d="M15.5,11.3L9.9,5.6c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l4.9,4.9l-4.9,4.9c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.6,0.4,1,1,1
+      c0.3,0,0.5-0.1,0.7-0.3l5.7-5.7c0,0,0,0,0,0C15.9,12.3,15.9,11.7,15.5,11.3z"
+          ></path>
+        </svg>
       ) : (
         ""
       )}

src/middleware/AuthRoute.jsx

@@ -26,7 +26,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
 
-    console.log(loadProfileDetails);
     const checkInactivity = setInterval(() => {
       let { account_type } = loadProfileDetails;
       if (account_type === "FAMILY") {