added rounded edges

src/components/Cards/AvailableJobsCard.jsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import { useSelector } from "react-redux";
+import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 
 export default function AvailableJobsCard({
   className,
@@ -11,8 +13,15 @@ export default function AvailableJobsCard({
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
+  const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
+  
   const [imageUrl, setImageUrl] = useState("");
 
+  const {
+    userDetails: { uid },
+  } = useSelector((state) => state?.userDetails); // GETS USER DETAILS
+
+
   let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
@@ -40,7 +49,7 @@ export default function AvailableJobsCard({
         >
           <div
             onClick={() => {
-              setMarketPopUp({ show: true, data: datas });
+              datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
             }}
             className="flex flex-col gap-2 justify-between w-full h-full"
           >
@@ -80,7 +89,7 @@ export default function AvailableJobsCard({
             </div>
             <div className="thumbnail-area w-full">
               <div
-                className="w-full h-[236px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
+                className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
                 // style={{
                 //   backgroundImage: `url('${image}')`,
                 // }}
@@ -108,15 +117,27 @@ export default function AvailableJobsCard({
                   </div>
                 </div>
                 <div>
-                  <button
+                  {datas.market_uid != uid ?
+                    <button
                     type="button"
-                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                      className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                      onClick={() => {
+                        setMarketPopUp({ show: true, data: datas });
+                      }}
+                    >
+                      View
+                    </button>
+                    :
+                    <button
+                    type="button"
+                    className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
                     onClick={() => {
-                      setMarketPopUp({ show: true, data: datas });
+                      setJobPopout({ show: true, data: datas });
                     }}
-                  >
+                    >
-                    View
+                      Manage
-                  </button>
+                    </button>
+                  }
                 </div>
               </div>
             </div>
@@ -131,7 +152,7 @@ export default function AvailableJobsCard({
             <div className="flex flex-col flex-[0.9]">
               <h1
                 onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
+                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
                 }}
                 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
               >
@@ -140,7 +161,7 @@ export default function AvailableJobsCard({
 
               <div
                 onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
+                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
                 }}
                 className="my-2"
               >
@@ -168,8 +189,9 @@ export default function AvailableJobsCard({
             </div>
           </div>
           <div className="">
+            {datas.market_uid != uid ?
             <button
-              type="button"
+            type="button"
               className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
               onClick={() => {
                 setMarketPopUp({ show: true, data: datas });
@@ -177,6 +199,17 @@ export default function AvailableJobsCard({
             >
               View
             </button>
+            :
+            <button
+            type="button"
+            className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
+            onClick={() => {
+              setJobPopout({ show: true, data: datas });
+            }}
+            >
+              Manage
+            </button>
+            }
           </div>
         </div>
       )}
@@ -189,6 +222,18 @@ export default function AvailableJobsCard({
           situation={marketPopUp.show}
         />
       )}
+
+      {/* Active Job Popout */}
+      {jobPopout.show && (
+        <PendingJobsPopout
+          details={datas}
+          onClose={() => {
+            setJobPopout({ show: false, data: {} });
+          }}
+          situation={jobPopout.show}
+        />
+      )}
+      {/* End of Active Job Popout */}
     </>
   );
 }

src/components/History/JobsCompleted.jsx

@@ -53,7 +53,7 @@ function JobsCompleted() {
     <div className='flex flex-col justify-between min-h-[500px]'>
     {jobHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : jobHistory.data.length ?
+    : jobHistory?.data?.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='w-full'>
             <tr className='text-slate-600 dark:text-white'>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -142,8 +142,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           <CloseIcon onClose={onClose} />
         </div>
 
-        <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
+        <div className="md:grid md:grid-cols-4 bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
-          <div className="p-4 w-full md:w-[75%] md:border-r-1">
+          <div className="p-4 w-full md:col-span-3 md:border-r-1">
             <div className="min-h-[240px]">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
@@ -173,11 +173,12 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                     {name}
                   </label>
                   <div
-                    className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
+                    className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
-                      name !== "Delivery Detail"
+                      name == "Description"
-                        ? " h-full flex items-center"
+                        ? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words"
-                        : " overflow-y-auto max-h-[80px]"
+                        : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[100px] max-h-[100px]"
-                    }  ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
+                        : "h-full flex items-center"
+                    }`}
                   >
                     {danger ? (
                       <p
@@ -193,12 +194,14 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                             {typeof content !== "object" ? content : null}
                             {typeof content === "object" && (
                               <>
-                                <hr className="mb-1" />
+                                {/* <hr className="mb-1" /> */}
+                                <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
                                 <span className="flex items-center gap-2 dark:text-white">
                                   {content?.text}
                                   <strong>{thePrice}</strong>
                                 </span>
-                                <hr className="mt-1" />
+                                <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
+                                {/* <hr className="mt-1" /> */}
                               </>
                             )}
                           </>
@@ -211,7 +214,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </div>
               ))}
             </div>
-            <hr />
+            <hr className='my-1' />
             <div className="w-full flex flex-col gap-3">
               <div className="w-full">
                 <label className="job-label w-full">
@@ -248,8 +251,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </div>
           </div>
 
-          <div className="w-full md:w-[23%] h-full flex flex-col">
+          <div className="py-2 w-full md:col-span-1 h-full flex flex-col">
-            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center pb-4 gap-2">
                 <p className="job-label w-full">
                   Interested?
@@ -261,7 +264,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   onClick={ManageInterest}
                 >
                   {" "}
-                  <div className="w-full flex flex-col justify-between gap-2">
+                  <div className="flex md:flex-col justify-center gap-2">
                     <span>Notify</span>
                     <span>Owner</span>
                   </div>

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-black 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-black 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,69 @@ 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='w-full'>
-                                                    <div className='my-3 md:my-0 flex items-center gap-1'>  
+                                                    <h1 className="text-xl font-extrabold text-black dark:text-white tracking-wide">Previous Job Statistics</h1>
-                                                        <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
+                                                </div>
-                                                        <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>
+                                                <div className='p-2 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl rounded-2xl bg-sky-100'>
+                                                    <div className='contents md:flex flex-col gap-3'>
+                                                        <div className='flex items-center gap-4'>  
+                                                            <p className="min-w-[150px] text-lg font-bold text-black 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-black 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-black 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-black 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-black 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-black 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> */}
                                             </>
                                         }
                                         </>
@@ -355,12 +390,12 @@ export default function ManageInterestOffer(props) {
                             </div>
                             {/* END OF Detail section */}
 
-                            <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
+                            <div className="p-4 w-full min-h-full bg-sky-100 rounded-2xl dark:bg-dark-gray col-span-1">
                                 {/* Wallet balance and reward */}
                                 <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>

src/components/jobPopout/PendingJobsPopout.jsx

@@ -99,6 +99,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
             onClose();
             dispatch(tableReload({ type: "PENDINGTABLE" }));
             dispatch(tableReload({ type: "JOBTABLE" }));
+            dispatch(tableReload({ type: "MARKETTABLELIST" }));
           }, 4000);
         })
         .catch((error) => {

src/middleware/AuthRoute.jsx

@@ -217,6 +217,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
     // Getting market data
     const getMarketActiveJobList = async () => {
+      dispatch(updateJobs({loading: true}));
       try {
         const res = await apiCall.getActiveJobList();
         dispatch(updateJobs({loading: false, ...res.data}));