src/components/Cards/OfferCard.jsx

@@ -1,7 +1,10 @@
+import { Suspense, lazy } from "react";
 import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
+const VideoElement = lazy(() => import("../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
+
 export default function OfferCard({
   datas,
   hidden = false,
@@ -19,9 +22,13 @@ export default function OfferCard({
   return (
     <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
       <div className="content">
-        {/* thumbnail */}
         <div className="w-full h-40">
-          {/* thumbnail image */}
+          {/* thumbnail image/video */}
+          {datas.job_type == "MEDIA" ?
+          <Suspense fallback={<p>Loading...</p>}>
+            <VideoElement videoId={datas?.media_uid} />
+          </Suspense>
+          :
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
@@ -30,6 +37,7 @@ export default function OfferCard({
           >
             {hidden && <div className="flex justify-center"></div>}
           </div>
+          }
         </div>
         {/* details */}
         <div className="details">

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -195,6 +195,7 @@ export default function FamilyManageTabs({
         familyData={details.familyPending.data}
         accountDetails={accountDetails}
         loader={details.familyPending.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Account: (

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -9,6 +9,7 @@ export default function FamilyPending({
   className,
   accountDetails,
   loader,
+  setUpdatePage,
 }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
@@ -151,6 +152,7 @@ export default function FamilyPending({
           details={jobPopout.data}
           onClose={() => {
             setJobPopout({ show: false, data: {} });
+            setUpdatePage(prev => !prev);
           }}
           situation={jobPopout.show}
         />

src/components/jobPopout/PendingJobsPopout.jsx

@@ -71,7 +71,9 @@ function PendingJobsPopout({ details, onClose, situation }) {
         .pendingJobSendTome(reqData)
         .then((res) => {
           setRequestMessage({ status: true, message: res.data.status });
+          dispatch(tableReload({ type: "PENDINGTABLE" }));
           setTimeout(() => {
+            onClose()
             setPendingJobLoader({ extend: false, offer: false });
             setRequestMessage({ status: false, message: "" });
           }, 4000);