Family page Tasks

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -117,7 +117,7 @@ export default function FamilyManageTabs({
 
   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] ${
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
         className || ""
       }`}
     >

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -5,16 +5,12 @@ import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Icons from "../../Helpers/Icons";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
 
 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);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -24,10 +20,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
     indexOfLastItem
   );
 
-
-  const handlePagination = (e) => {
-    handlePagingFunc(e, setCurrentPage);
-  };
+  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
   return (
     <div
@@ -52,8 +45,14 @@ export default function FamilyTasks({ familyData, className, loader }) {
                         familyData?.result_list &&
                         familyData.result_list.length > 0 &&
                         currentTask.map((value, index) => {
-  // find due date
-  const dueDate = value?.delivery_date.split(" ")[0]
+                          // find due date
+                          const dueDate = value?.delivery_date.split(" ")[0];
+                          // the price
+                          let thePrice = PriceFormatter(
+                            value?.price * 0.01,
+                            value?.currency_code,
+                            value?.currency
+                          );
                           return (
                             <tr
                               key={index}
@@ -73,37 +72,42 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       {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 className="text-sm text-thin-light-gray">
+                                        Price:{" "}
+                                        <span className="text-purple">
+                                          {thePrice}
+                                        </span>
                                       </span>
-                                    </span>
-                                    <span className="text-sm text-thin-light-gray">
-                                      Duration:{" "}
-                                      <span className="text-purple">
-                                        {" "}
-                                        {value.timeline_days} day(s)
+                                      <span className="text-sm text-thin-light-gray">
+                                        Duration:{" "}
+                                        <span className="text-purple">
+                                          {" "}
+                                          {value.timeline_days} day(s)
+                                        </span>
                                       </span>
-                                    </span>
-                                    <span className="text-sm text-thin-light-gray">
-                                      Due Date:{" "}
-                                      <span className="text-purple">
-                                        {" "}
-                                        {dueDate}
+                                      <span className="text-sm text-thin-light-gray">
+                                        Due Date:{" "}
+                                        <span className="text-purple">
+                                          {" "}
+                                          {dueDate}
+                                        </span>
                                       </span>
-                                    </span>
                                     </div>
                                   </div>
                                 </div>
                               </td>
-  
+
                               <td className="text-right py-4 px-2">
                                 <button
                                   type="button"
                                   onClick={() => {
                                     navigate("/manage-active-job", {
-                                      state: { ...value, pathname },
+                                      state: {
+                                        ...value,
+                                        pathname,
+                                        dueDate,
+                                        thePrice,
+                                      },
                                     });
                                   }}
                                   className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -112,7 +116,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                 </button>
                               </td>
                             </tr>
-                          )
+                          );
                         })}
                     </>
                   }