added footer style to modal

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -453,7 +453,7 @@ const AssignTaskPopout = ({
               </div>
 
               {/* BTN */}
-              <div className="py-2 px-4 border-t-2 flex justify-between items-center">
+              <div className="modal-footer-wrapper">
                 {/* error or success display */}
                 <div className="w-auto h-auto flex items-center">
                   {requestStatus.message != "" &&
@@ -480,7 +480,7 @@ const AssignTaskPopout = ({
                     disabled={requestStatus.loading}
                     onClick={action}
                     type="button"
-                    className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
+                    className="custom-btn border-gradient"
                   >
                     <span className="text-gradient">Close</span>
                   </button>
@@ -492,7 +492,7 @@ const AssignTaskPopout = ({
                         type="button"
                         disabled={requestStatus.loading}
                         onClick={assignFamilyTask}
-                        className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        className="custom-btn btn-gradient text-white"
                       >
                         Assign
                       </button>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -118,7 +118,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper w-11/12 md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="w-11/12 md:w-[650px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             {details.offer_code}
@@ -128,7 +128,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
         <div className="md:flex 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="max-h-[240px] h-full">
+            <div className="min-h-[240px]">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
@@ -218,7 +218,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   {errMsg.market && "Something went wrong"}
                 </span>
                 <button
-                  className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
+                  className="custom-btn self-end bg-yellow-500 text-white"
                   name="market-message"
                   onClick={MarketDetail}
                 >
@@ -279,16 +279,18 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </p>
               </div>
             </div>
-            <button
-              className="self-center w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500 mx-auto"
-              name="cancel"
-              onClick={onClose}
-            >
-              Cancel
-            </button>
           </div>
           {/* END OF ACTION SECTION */}
         </div>
+        <div className="modal-footer-wrapper">
+          <button
+            className="custom-btn bg-transparent border border-red-500 text-red-500 ml-auto"
+            name="cancel"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+        </div>
       </div>
     </ModalCom>
   );

src/components/MyJobs/index.jsx

@@ -4,6 +4,7 @@ import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 import AddJobPage from "../../views/AddJobPage";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function MyJobs(props) {
   let { state } = useLocation();
@@ -32,8 +33,8 @@ export default function MyJobs(props) {
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
-          <div className="sm:flex items-center mb-6">
-            <div className="mb-5 sm:mb-0">
+          <div className="sm:flex items-center mb-2">
+            <div className="w-full">
               <h1 className="text-26 font-bold flex items-center space-x-1  text-dark-gray dark:text-white gap-2">
                 <span>My Jobs</span>
 
@@ -46,6 +47,17 @@ export default function MyJobs(props) {
               </h1>
             </div>
           </div>
+          <div className="mb-5">
+              <CustomBreadcrumb 
+              // title = 'My Jobs'
+              breadcrumb={
+                  [
+                  { link: "/", title: "Home" },
+                  { link: "/myjobs", title: "My Jobs", active: true},
+                  ]
+              }
+              />
+          </div>
           <MyJobTable MyJobList={props.MyJobList} />
         </div>
       </div>

src/components/OffersInterest/OffersInterestTable.jsx

@@ -28,6 +28,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
         handlePagingFunc(e, setCurrentPage);
     };
 
+    let imgServer = offerInterestList?.imgServer // FOR RENDERING IMAGE FROM SERVER
     return (
         <div
             className={`update-table w-full my-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
@@ -54,14 +55,19 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </thead>
                             <tbody className="h-full">
                             {currentOfferInterestList?.map((item, index) => {
-                                let image = item.banner ? item.banner : 'default.jpg'
+                                // let image = item.banner ? item.banner : 'default.jpg'
+                                const image = localStorage.getItem("session_token")
+                                ? `${imgServer}${localStorage.getItem("session_token")}/job/${
+                                    item.job_uid
+                                  }`
+                                : "";
                                 return (
                                 <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
-                                            <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
+                                            <div className="min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                                 <img
-                                                    src={localImgLoad(`images/taskbanners/${image}`)}
+                                                    src={`${image}`}
                                                     alt="data"
                                                     className="w-full h-full rounded-full"
                                                 />
@@ -90,7 +96,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
                                         <button
                                             onClick={() => {
                                                 navigate("/manage-offer", {
-                                                    state: { ...item, pathname },
+                                                    state: { ...item, pathname, jobImage:image },
                                                 });
                                             }}
                                             type="button"

src/components/OffersInterest/index.jsx

@@ -9,6 +9,7 @@ export default function OffersInterest(props) {
     const filterHandler = (value) => {
         setValue(value);
     };
+    
     return (
         <Layout>
             <CommonHead

src/components/Partials/MobileSideBar.jsx

@@ -89,7 +89,9 @@ export default function MobileSidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title= {userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
+                title={
+                  userDetails?.account_type == "FULL" ? "Dashboard" : "Home"
+                }
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"
@@ -190,17 +192,21 @@ export default function MobileSidebar({
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
                     {[
-                      { name: "List", path: "/myjobs", iconName: "job-list" },
+                      {
+                        name: "List",
+                        path: "/myjobs",
+                        iconName: "job-list",
+                      },
+                      // {
+                      //   name: "Waiting",
+                      //   path: "/pend-interest",
+                      //   iconName: "pending-job",
+                      // },
                       {
                         name: "Offers",
                         path: "/my-offers",
                         iconName: "pending-job",
                       },
-                      {
-                        name: "Waiting",
-                        path: "/pend-interest",
-                        iconName: "pending-job",
-                      },
                       {
                         name: "Active",
                         path: "/my-active-jobs",

src/components/Partials/RightSideBar.jsx

@@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
 //import SideStatistics from "./SideStatistics";
 import { localImgLoad } from "../../lib";
 import DarkModeContext from "../Contexts/DarkModeContext";
+import Icons from "../Helpers/Icons";
 
 export default function RightSideBar({ myJobList }) {
   const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
@@ -81,6 +82,19 @@ export default function RightSideBar({ myJobList }) {
                   {/* action */}
                 </div>
 
+                <div className="item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 rounded-full flex items-center justify-center">
+                    <Icons name="pending-job" />
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/pend-interest">Waiting</NavLink>
+                    </p>
+                  </div>
+                  {/* action */}
+                </div>
                 <div className="item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 rounded-full">
@@ -235,6 +249,7 @@ export default function RightSideBar({ myJobList }) {
                     />
                   </svg>
                 )}
+
               </span>
               <p className="text-thin-light-gray text-base font-medium">
                 {darkMode.theme === "light" ? "Dark" : "Light"} Mode
@@ -274,6 +289,24 @@ export default function RightSideBar({ myJobList }) {
                   {/* action */}
                 </div>
 
+                <div className="px-8 item flex space-x-3 items-center mb-4">
+                  {/* image */}
+                  <div className="w-8 h-8 p-[4px] rounded-full">
+                    <img
+                      src={localImgLoad("images/icons/job_active.svg")}
+                      className="w-full h-full"
+                      alt="Active Task"
+                    />
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/offer-interest">Offers Interest</NavLink>
+                    </p>
+                  </div>
+                  {/* action */}
+                </div>
+
                 <div className="px-8 item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 p-[4px] rounded-full">

src/components/Partials/Sidebar.jsx

@@ -216,11 +216,11 @@ export default function Sidebar({
                         path: "/myjobs",
                         iconName: "job-list",
                       },
-                      {
-                        name: "Waiting",
-                        path: "/pend-interest",
-                        iconName: "pending-job",
-                      },
+                      // {
+                      //   name: "Waiting",
+                      //   path: "/pend-interest",
+                      //   iconName: "pending-job",
+                      // },
                       {
                         name: "Offers",
                         path: "/my-offers",

src/index.css

@@ -160,7 +160,8 @@
     @apply flex items-center gap-2
   }
 
-  /* style for all modal header */
+  /* STYLES FOR MODAL */
+  /* Modal Header */
   .modal-header-con{
     @apply w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29]  border-light-purple
   }
@@ -170,7 +171,17 @@
   .modal-close-btn{
     @apply text-[#000] dark:text-red-500
   }
-  /* end of style for all modal header */
+
+  /* modal footer */
+  .modal-footer-wrapper{
+    @apply py-2 px-4 border-t-2 flex justify-between items-center
+  }
+  /* END OF STYLES FOR MODAL BOX */
+
+  /* STYLES FOR BUTTON */
+  .custom-btn {
+    @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
+  }
 }
 
 /* =====================  EXTRA ===================== */

src/views/OffersInterestPage.jsx

@@ -10,13 +10,13 @@ export default function OffersInterestPage() {
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
-    let [offerInterestList, setOfferInterestList] = useState({loading: true, data: []})
+    let [offerInterestList, setOfferInterestList] = useState({loading: true, data: [], imgServer:''})
 
     useEffect(()=>{
         apiCall.offersInterestList().then(res => {
-            setOfferInterestList({loading: false, data: res.data.result_list})
+            setOfferInterestList({loading: false, data: res.data.result_list, imgServer:res.data.session_image_server})
         }).catch(err => {
-            setOfferInterestList({loading: false, data: []})
+            setOfferInterestList({loading: false, data: [], imgServer:''})
             console.log('Error: ', err)
         })
     },[])