updated message for account with no recipient yet

src/components/AddJob/settings.js

@@ -51,7 +51,7 @@ const validationSchema = Yup.object().shape({
     .required("Price is required"),
   title: Yup.string()
     .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
     .required("Title is required"),
   description: Yup.string()
     .min(5, "Minimum 5 characters")

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -63,7 +63,7 @@ export default function ForgotPassword() {
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);
-        if (res.status === 200) {
+        if (res.status === 200 && res?.data?.internal_return >= 0) {
           setMsgSuccess(true);
           setMail("");
           setValue(false);

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">
-                            <div className='flex items-center gap-2'>
+                        <td className="p-4 min-w-[350px] max-w-[400px]">
+                            <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,8 +6,14 @@ 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 = 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()
 
@@ -65,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>
@@ -78,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>
@@ -120,36 +126,57 @@ 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 items-center">
-                            <div className="mb-10 flex justify-center items-center gap-2">
-                                <input 
-                                    type='checkbox' 
-                                    checked={checked} 
-                                    onChange={()=>{setChecked(prev => !prev)}} 
-                                    className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
-                                />
-                                <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>If you have completed this task</p>
-                            </div>
-
-                            <div className="mb-10 flex justify-center items-center">
-                                {reqStatus.loading ?
-                                    <LoadingSpinner color='sky-blue' size='10' />
-                                :
-                                    <button type="button" onClick={taskCompletedSubmit} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                                        Send for Review & Acceptance
-                                    </button>
-                                }
-                            </div>
-
-                            {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
-                            <div className="w-full">
-                                <div
-                                    className={`relative p-4 text-center text-md font-light leading-[19.5px] text-[13px] ${reqStatus.status ? 'text-green-700':'text-[#912741]'}`}
+                        <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'
                                 >
-                                    {reqStatus.message}
+                                    This task can be marked completed after {NewDateTimeFormatter(jobDetails?.minimum_due)}
+                                </h1>
+
+                            </>
+                            :
+                            <>
+                                <div className="flex justify-center items-center gap-2">
+                                    <input 
+                                        type='checkbox' 
+                                        checked={checked} 
+                                        onChange={()=>{setChecked(prev => !prev)}} 
+                                        className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
+                                    />
+                                    <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>If you have completed this task</p>
                                 </div>
-                            </div>
-                            {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
+
+                                <div className="flex justify-center items-center">
+                                    {reqStatus.loading ?
+                                        <LoadingSpinner color='sky-blue' size='10' />
+                                    :
+                                        <button 
+                                            type="button" 
+                                            onClick={taskCompletedSubmit} 
+                                            className={`px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white ${!canSendForReview && 'pointer-events-none opacity-50'}`}
+                                        >
+                                            Send for Review & Acceptance
+                                        </button>
+                                    }
+                                </div>
+
+                                {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
+                                {reqStatus.message &&
+                                    <div className="w-full">
+                                        <div
+                                            className={`relative p-4 text-center text-md font-light leading-[19.5px] text-[13px] ${reqStatus.status ? 'text-green-700':'text-[#912741]'}`}
+                                        >
+                                            {reqStatus.message}
+                                        </div>
+                                    </div>
+                                }
+                                {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
+                            
+                            </>
+                            }
                         </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/EditJobPopout.jsx

@@ -27,7 +27,7 @@ const validationSchema = Yup.object().shape({
     .required("Price is required"),
   title: Yup.string()
     .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
     .required("Title is required"),
   description: Yup.string()
     .min(5, "Minimum 5 characters")

src/components/jobPopout/EditJobPopoutNew.jsx

@@ -28,7 +28,7 @@ const validationSchema = Yup.object().shape({
     .required("Price is required"),
   title: Yup.string()
     .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
     .required("Title is required"),
   description: Yup.string()
     .min(5, "Minimum 5 characters")

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 {