made interest stats reloads when interest offer list changes

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -13,6 +13,8 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
 export default function ManageInterestOffer(props) {
 
     const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+    let { othersInterestedTable } = useSelector((state) => state.tableReload); // FOR OTHERS INTERESTED TABLE RELOAD
     
     let walletBal = walletDetails?.data?.filter(wallet => wallet.code == props?.offerDetails?.currency_code) // USER WALLET BALANCE FOR CORRESPONDING TASK CURRENCY
 
@@ -143,7 +145,7 @@ export default function ManageInterestOffer(props) {
             setInterestStats(prev => ({...prev, loading: false}))
             console.log('Failed', err)
         })
-    },[])
+    },[othersInterestedTable])
     return (
         <Layout>
             <CommonHead
@@ -230,15 +232,15 @@ export default function ManageInterestOffer(props) {
                                     <div className="info-details w-full border-t">
                                         <div className="my-0 md:my-3 block md:flex items-center gap-10">
                                             <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
+                                                <p className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</p>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</p>
                                             </div>
                                             <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
+                                                <p className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</p>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">
+                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">
                                                     {clientAdded.getFullYear()}{" - "}
                                                     {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
-                                                </span>
+                                                </p>
                                             </div>
                                         </div>
                                         <>
@@ -246,36 +248,66 @@ export default function ManageInterestOffer(props) {
                                             <LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
                                             :
                                             <>
-                                                <div className="my-0 md:my-3 block md:flex items-center gap-10">
+                                                <div className='flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl'>
-                                                    <div className='my-3 md:my-0 flex items-center gap-1'>  
+                                                    <div className='contents md:flex flex-col gap-3'>
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
+                                                        <div className='flex items-center gap-4'>  
-                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</span>
+                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Active:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">% Completion:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
+                                                        </div>
                                                     </div>
-                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                    <div className='contents md:flex flex-col gap-3'>
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Last Job completed</span>
+                                                        <div className="flex items-center gap-4">
-                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</span>
+                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Last Completed:</p>
+                                                            <p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Uncompleted:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                                <div className="my-0 md:my-3 block md:flex items-center gap-10">
+                                                {/* <div className="my-0 md:my-3 block md:flex items-center gap-5">
-                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                    <div className='my-3 md:my-0 flex items-center gap-4'>  
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs active</span>
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
-                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</span>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
                                                     </div>
-                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs uncompleted</span>
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
-                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</span>
+                                                        <p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
                                                     </div>
-                                                </div>
+                                                </div> */}
-                                                <div className="block md:flex items-center gap-10">
+                                                {/* <div className="my-0 md:my-3 block md:flex items-center gap-10">
-                                                    <div className="my-3 md:my-0 flex items-center gap-1">
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">% completion</span>
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Active:</p>
-                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</span>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
                                                     </div>
-                                                    <div className="flex items-center gap-1">
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Uncompleted:</p>
-                                                        <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</span>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
                                                     </div>
-                                                </div>
+                                                </div> */}
+                                                {/* <div className="block md:flex items-center gap-10">
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">% Completion:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
+                                                    </div>
+                                                    <div className="flex items-center gap-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
+                                                    </div>
+                                                </div> */}
                                             </>
                                         }
                                         </>
@@ -360,7 +392,7 @@ export default function ManageInterestOffer(props) {
                                 <div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
                                     <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
                                         <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
-                                        <span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                        <span className="font-medium text-dark-gray dark:text-white">{ walletDetails?.loading ? 'loading...' : PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
                                     </div>
                                     <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
                                         <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Reward:</p>