From db03242886065eb88be49fda1144cae9e5137ba4 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 6 Jun 2023 15:51:36 +0100
Subject: [PATCH] active task header count down added

---
 src/components/MyActiveJobs/ActiveJobs.jsx | 74 +++++++++-------------
 1 file changed, 30 insertions(+), 44 deletions(-)

diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index b46ad91..e1c365f 100644
--- a/src/components/MyActiveJobs/ActiveJobs.jsx
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -5,6 +5,8 @@ import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
+import CountDown from "../Helpers/CountDown";
+
 import usersService from "../../services/UsersService";
 
 function ActiveJobs(props) {
@@ -148,7 +150,7 @@ function ActiveJobs(props) {
   return (
     <Layout>
 
-        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start space-y-4 md:space-x-4 md:space-y-0">
+        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-8">
             {/* job title */}
             <div className="w-full md:w-8/12">
               <div className="w-full flex justify-start space-x-3 items-start">
@@ -172,20 +174,14 @@ function ActiveJobs(props) {
                 </h1>
               </div>
 
-              <div className="w-full my-4">
-                <div className="pb-2 w-full flex items-center">
-                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
-                    {props.details?.contract && props.details.contract}
-                  </p>
-                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
-                    {userDetails.firstname && userDetails.firstname}
-                  </p>
-                </div>
-                
-                <p className="text-base text-slate-700 dark:text-black">
-                  <span className="font-semibold">Description: </span>
-                  {props.details?.description && props.details.description}
+              <div className="w-full my-2">
+                <p className="w-full text-base text-right text-sky-blue">
+                  {userDetails.firstname && userDetails.firstname}
                 </p>
+                <div className="text-base text-slate-700 dark:text-black tracking-wide">
+                    <p className="font-semibold text-black">Description: </p>
+                    <p className="p-2 border border-sky-blue">{props.details?.description && props.details.description}</p>
+                </div>
               </div>
             </div>
             {/* end of job title */}
@@ -193,19 +189,27 @@ function ActiveJobs(props) {
             {/* job details */}
             <div className="w-full md:w-4/12">
               <p className="text-base text-sky-blue">Delivery Detail</p>
-              <div className="mt-2">
-                  <p className="text-base text-slate-700 dark:text-black">
-                    <span className="font-semibold">Due: </span>
-                    {props.details?.delivery_date &&
-                      props.details.delivery_date.split(" ")[0]}
-                  </p>
-                  <p className="py-2 text-base text-slate-700 dark:text-black">
-                    {props.details?.delivery_date &&
-                      props.details.delivery_date.split(" ")[1]}
-                  </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    {props.details?.timeline_days && props.details.timeline_days} day(s)
+              <div className="my-1 flex items-start gap-3">
+                <p className="font-semibold">Due: </p>
+                <div className="flex flex-col justify-between">
+                  <p className="text-base text-slate-700 dark:text-black tracking-wide">
+                    <CountDown lastDate={props.details.delivery_date} />
                   </p>
+                  <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
+                    <span>Hrs</span>
+                    <span>Min</span>
+                    <span>Sec</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">Duration: </span>
+                <span className="">{props.details?.timeline_days && props.details.timeline_days} day(s)</span>
+              </div>
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">No: </span>
+                <span className="">{props.details?.contract && props.details.contract}</span>
               </div>
             </div>
             {/* end of job details */}
@@ -293,24 +297,6 @@ function ActiveJobs(props) {
 
                 {/* Buttons Sections */}
                 <div className="py-2 sm:flex sm:justify-end sm:items-center">
-                  {/* <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
-                    {tab == 'files' && 
-                      (
-                        <button
-                          onClick={()=>{console.log('working')}}
-                          type="button"
-                          className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                          </svg>
-
-                          <span className="text-white">Upload Files</span>
-                        </button>
-                      )
-                    }
-                  </div> */}
-
                   <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
                     <button
                         type="button"