user currect task due time implementation

src/components/Home/FullAccountDash.jsx

@@ -15,9 +15,8 @@ export default function FullAccountDash(props) {
 
     const trending = datas.datas;
     const jobData =  datas.datas; // api calls or cache
-    //getHomeDate
+    
     const userApi = new usersService();
-    const homeData = userApi.getHomeDate();
 
     const {userDetails} = useSelector((state) => state?.userDetails)
 
@@ -27,6 +26,7 @@ export default function FullAccountDash(props) {
                 <Hero className="mb-10"
                       data={userDetails}
                       bannerList={props.bannerList}
+                      nextDueTask={props.nextDueTask}
                 />
                 <HomeActivities className="mb-10"/>
                 {/*<UpdateTable className="mb-10"/>*/}

src/components/Home/Hero.jsx

@@ -11,7 +11,7 @@ import SliderCom from "../Helpers/SliderCom";
 import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function Hero({ className,bannerList }) {
+export default function Hero({ className, bannerList, nextDueTask }) {
   const settings = {
     autoplay: true,
     dots: true,
@@ -71,27 +71,32 @@ export default function Hero({ className,bannerList }) {
           </div>
         </div>
         {/* countdown */}
-        <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
+        { nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length &&
-          <div className="flex flex-col justify-between">
+          (
-            <p className="text-base text-white tracking-wide">Current Task</p>
+            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
-            <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+              <div className="flex flex-col justify-between">
-              ABCDEFGH01
+                <p className="text-base text-white tracking-wide">Current Task</p>
-            </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-            <p className="text-base text-white tracking-wide">773.69 USD</p>
+                  {nextDueTask.next_due.item_code}
-          </div>
+                </p>
-          <div className="w-[1px] h-full bg-white-opacity"></div>
+                <p className="text-base text-white tracking-wide">{nextDueTask.next_due.price} Naira</p>
-          <div className="flex flex-col justify-between">
+              </div>
-            <p className="text-base text-white tracking-wide">Next due in</p>
+              <div className="w-[1px] h-full bg-white-opacity"></div>
-            <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
+              <div className="flex flex-col justify-between">
-              <CountDown lastDate="2023-04-26 4:00:00" />
+                <p className="text-base text-white tracking-wide">Next due in</p>
-            </p>
+                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-            <div className="text-base text-white tracking-wide flex gap-[23px]">
+                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-              <span>Hrs</span>
+                  <CountDown lastDate={nextDueTask.next_due.due_date} />
-              <span>Min</span>
+                </p>
-              <span>Sec</span>
+                <div className="text-base text-white tracking-wide flex gap-[23px]">
+                  <span>Hrs</span>
+                  <span>Min</span>
+                  <span>Sec</span>
+                </div>
+              </div>
             </div>
-          </div>
+          )
-        </div>
+        }
         {/* action */}
         <div className="flex lg:space-x-3 space-x-1 items-center">
           <Link

src/components/Home/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
@@ -11,10 +11,10 @@ export default function Home(props) {
 
     console.log("PROPS IN HOME->",props);
 
-//    const trending = datas.datas;
+    let [nextDueTask, setNextDueTask] = useState({})
-//    const jobData =  datas.datas; // api calls or cache
+
     const userApi = new usersService();
-//    const homeData = userApi.getHomeDate();
+
     const {userDetails} = useSelector((state) => state?.userDetails)
 
     const commonHeadData =()=>{
@@ -22,6 +22,22 @@ export default function Home(props) {
         return 0;
     }
 
+    // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
+    const getHomeDate = () => {
+        userApi.getHomeDate().then(res => {
+            if(res.status != 200 || res.internal_return < 0){
+                return
+            }
+            setNextDueTask(res.data)
+        }).catch(error => {
+            console.log(error)
+        })
+    }
+
+    useEffect(()=>{
+        getHomeDate()
+    },[])
+
     return (
         <Layout>
             <div className="home-page-wrapper">
@@ -29,7 +45,7 @@ export default function Home(props) {
                     <FamilyDash commonHeadData={commonHeadData} />
                 )}
                 {userDetails && userDetails?.account_type == "FULL" && (
-                    <FullAccountDash   bannerList={props.bannerList} />
+                    <FullAccountDash  nextDueTask={nextDueTask} bannerList={props.bannerList} />
 
                 )}
             </div>

src/services/UsersService.js

@@ -16,9 +16,10 @@ class usersService {
     return this.postAuxEnd("/completesignuplink", reqData);
   }
 
+  // FUNCTION TO GET USER CURRENT TASK DUE TIME
   getHomeDate() {
     var postData = {
-      uuid: localStorage.getItem("uid"),
+      // uuid: localStorage.getItem("uid"),
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),