updated message for account with no recipient yet

src/components/History/JobsCompleted.jsx

@@ -7,7 +7,8 @@ import PaginatedList from '../../components/Pagination/PaginatedList';
 
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 
-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { AmountTo2DP, PriceFormatter } from '../Helpers/PriceFormatter';
+import {NewDateTimeFormatter} from '../../lib/NewDateTimeFormatter'
 
 function JobsCompleted() {
 
@@ -47,7 +48,7 @@ function JobsCompleted() {
       }, [])
 
   return (
-    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
     {jobHistory?.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : jobHistory?.data?.length ?
@@ -71,10 +72,12 @@ function JobsCompleted() {
                                 <div className='flex flex-col'>
                                     <h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
                                     <p className='text-sm line-clamp-2'>{item?.description}</p>
+                                    <p className='text-sm line-clamp-2'>{NewDateTimeFormatter(item?.delivery_date)}</p>
                                 </div>
                             </div>
                         </td>
-                        <td className="p-4 text-right">{AmountTo2DP(item?.price*0.01)} {item?.currency}</td>
+                        <td className="p-4 flex text-right justify-end items-center">{AmountTo2DP(item?.price*0.01)} {item?.currency_code}</td>
+                        {/* <td className="p-4 text-right">{PriceFormatter(item?.price*0.01, item?.currency_code)}</td> */}
                         {/* <td className="p-4">{date}</td>
                         <td className="p-4">{item?.contract}</td> */}
                     </tr>

src/components/History/RewardsTable.jsx

@@ -47,7 +47,7 @@ export const RewardsTable = memo(() => {
       }, [])
 
   return (
-    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
@@ -65,10 +65,10 @@ export const RewardsTable = memo(() => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
                     <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
-                        <td className="p-4">
+                        <td className="p-4 min-w-[350px] max-w-[400px]">
-                            <div className='flex items-center gap-2'>
+                            <div className='flex w-full items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
-                                <div className='flex flex-col'>
+                                <div className='flex flex-col w-full'>
                                     <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
                                     <p className='text-sm'>{item.description}</p>
                                 </div>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -6,11 +6,13 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
 
 import usersService from '../../../services/UsersService'
 
+import {NewDateTimeFormatter }from '../../../lib/NewDateTimeFormatter'
+
 function CurrentTaskAction({jobDetails}) {
 
     const currTime = new Date().getTime() / (1000*60*60)
     const minDueTime = new Date(jobDetails?.minimum_due).getTime() / (1000*60*60)
-    const canSendForReview = jobDetails.strict_timeline ? currTime >= minDueTime : true // calculation to determine when send for review button will be active
+    const canSendForReview = Number(jobDetails.strict_timeline) ? currTime >= minDueTime : true // calculation to determine when send for review button will be active
 
     const apiCall = new usersService()
     const navigate = useNavigate()
@@ -69,7 +71,7 @@ function CurrentTaskAction({jobDetails}) {
           <div className="h-full w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
             <div className="h-full flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
+                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white px-5 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>
@@ -82,7 +84,7 @@ function CurrentTaskAction({jobDetails}) {
                 </div>
 
                 <div className="flex justify-center items-center">
-                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient px-5 py-2 text-white">
                         Send for Review
                     </button>
                 </div>
@@ -124,7 +126,18 @@ function CurrentTaskAction({jobDetails}) {
                         </button>
                     </div>
                     <div className="job-action-modal-body w-full px-10 py-8 gap-4">
-                        <div className="w-full flex flex-col gap-8 items-center">
+                        <div className="w-full flex flex-col min-h-[150px] gap-8 items-center">
+                            {!canSendForReview ?
+                            <>
+                                <h1 
+                                    // className='font-bold text-base tracking-wide text-dark-gray dark:text-white'
+                                    className='font-bold text-xl tracking-wide text-red-500 text-center'
+                                >
+                                    This task can be marked completed after {NewDateTimeFormatter(jobDetails?.minimum_due)}
+                                </h1>
+
+                            </>
+                            :
                             <>
                                 <div className="flex justify-center items-center gap-2">
                                     <input 
@@ -132,7 +145,6 @@ function CurrentTaskAction({jobDetails}) {
                                         checked={checked} 
                                         onChange={()=>{setChecked(prev => !prev)}} 
                                         className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
-                                        disabled={!canSendForReview}
                                     />
                                     <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>If you have completed this task</p>
                                 </div>
@@ -163,18 +175,8 @@ function CurrentTaskAction({jobDetails}) {
                                 }
                                 {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
                             
-                                {!canSendForReview &&
-                                <>
-                                    <h1 
-                                        // className='font-bold text-base tracking-wide text-dark-gray dark:text-white'
-                                        className='font-bold text-xl tracking-wide text-red-500 text-center'
-                                    >
-                                        This task requires you use about 80% of the time allocated
-                                    </h1>
-
-                                </>
-                                }
                             </>
+                            }
                         </div> 
                     </div> 
                     {/* cancel btn */}

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
                         <button 
                             type="button" 
                             onClick={popUpHandler} 
-                            className="custom-btn btn-gradient text-base text-white"
+                            className="custom-btn btn-gradient px-5 py-2 text-base text-white"
                         >
                             Cancel or Extend Timeline
                         </button>

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -129,7 +129,7 @@ function PastDueTaskAction({jobDetails}) {
                         <button 
                             type="button" 
                             onClick={popUpHandler} 
-                            className="custom-btn btn-gradient text-base text-white"
+                            className="custom-btn btn-gradient px-5 py-2 text-base text-white"
                         >
                             Request Extension
                         </button>

src/components/MyActiveJobs/JobDetailPopout.jsx

@@ -36,7 +36,21 @@ export default function JobDetailPopout({action, situation, jobDetail}) {
                     </button>
                 </div>
                 <div className="modal-body-wrapper">
-                    <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p>
+                    {/* <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p> */}
+                    {/* <div 
+                        className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'
+                        dangerouslySetInnerHTML={{__html: jobDetail}}
+                    >
+                    </div> */}
+                    <textarea
+                        id="Job Delivery Details"
+                        readOnly
+                        // rows="5"
+                        className={`w-full h-full overflow-y-auto text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white`}
+                        style={{ resize: "none" }}
+                        name="job_detail"
+                        value={jobDetail}
+                    />
                 </div>
                 <div className="modal-footer-wrapper justify-end">
                     <button

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -15,7 +15,7 @@ function PurchasesTable({purchase}) {
     }
 
   return (
-    <div className='p-4 flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
         {purchase.data.length ?
         <table className="wallet-activity w-full table-auto border-collapse text-left">
             <thead className='w-full'>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -18,7 +18,7 @@ function RecentActivityTable({ payment }) {
   };
 
   return (
-    <div className="p-4 flex flex-col justify-between min-h-[500px]">
+    <div className="py-4 flex flex-col justify-between min-h-[500px]">
       {payment?.data?.length > 0 ? 
         <table className="wallet-activity w-full table-auto border-collapse text-left">
           <thead className="w-full">

src/components/Settings/Tabs/RecipientAccountTab.jsx

@@ -80,7 +80,7 @@ export default function RecipientAccountTab({
               })
             ) : (
               <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                No Cards Found
+                No Recipient on this account yet.
               </h1>
             )}
           </ul>

src/components/jobPopout/PendingJobsPopout.jsx

@@ -5,6 +5,7 @@ import usersService from "../../services/UsersService";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import {PriceFormatter} from '../Helpers/PriceFormatter'
 
 import { useDispatch } from "react-redux";
 import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";

src/index.css

@@ -53,7 +53,7 @@
 .job-action {
   background-color: #4687ba;
   border-radius: 15px;
-  padding: 3px;
+  padding: 10px;
 }
 
 .msg_box {