.

src/Routers.jsx

@@ -89,7 +89,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
-          <Route exact path="/add-job" element={<AddJobPage />} />
+          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
           <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />

src/components/AddJob/AddJob.jsx

@@ -127,7 +127,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCountry();
   }, []);
 
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -237,7 +236,9 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.description && props.touched.description}
+                      errorBorder={
+                        props.errors.description && props.touched.description
+                      }
                     />
                   </div>
 
@@ -276,7 +277,10 @@ function AddJob({ popUpHandler, categories }) {
                         aria-labelledby="checked-group"
                       >
                         {Object.entries(categories).map(([key, value]) => (
-                          <label key={key} className="flex gap-1 w-full items-center">
+                          <label
+                            key={key}
+                            className="flex gap-1 w-full items-center"
+                          >
                             <Field
                               type="checkbox"
                               name="category"
@@ -354,8 +358,8 @@ function AddJob({ popUpHandler, categories }) {
 
                 <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    <Link
-                      to="/myjobs"
+                    <button
+                      type="button"
                       className="text-18 text-light-red tracking-wide "
                     >
                       <span
@@ -365,7 +369,7 @@ function AddJob({ popUpHandler, categories }) {
                         {" "}
                         Cancel
                       </span>
-                    </Link>
+                    </button>
 
                     {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />

src/components/AuthPages/Login/index.jsx

@@ -18,6 +18,9 @@ export default function Login() {
   const dispatch = useDispatch();
 
   let [loginType, setLoginType] = useState({ full: true, family: false });
+  const [selectedLoginType, setSelectedLoginType] = useState(
+    document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
+  );
 
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
@@ -77,6 +80,10 @@ export default function Login() {
         login_mode: 1100,
         action: 11025,
       };
+
+      // Clear the loginType cookie if the user switches to loginfull
+      document.cookie =
+        "loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
     } else if (name == "loginfamily") {
       // Post Data Info for family Login
       postData = {
@@ -86,6 +93,8 @@ export default function Login() {
         login_mode: 1105,
         action: 11025,
       };
+      // Set the loginType cookie to remember the user's selection
+      document.cookie = "loginType=family; expires=Session; path=/;";
     } else {
       setLoginLoading(false);
       setMsgError("Invalid Login Type. Consider refreshing the page");
@@ -127,15 +136,24 @@ export default function Login() {
   };
 
   const googleLogin = useGoogleLogin({
-    flow: 'auth-code',
-    ux_mode:'redirect',
+    flow: "auth-code",
+    ux_mode: "redirect",
     redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
     onSuccess: async (codeResponse) => {
-      console.log("GOOGLE LOGIN GOOD --- ",codeResponse);
+      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
     },
     onError: (errorResponse) => console.log(errorResponse),
   });
 
+  // In order to update the selected login type whenever the component renders
+  useEffect(() => {
+    setSelectedLoginType(
+      document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
+    );
+  }, []);
+
+  console.log("Looking for the cookies >>", selectedLoginType)
+
   useEffect(() => {
     setMail("");
     setPassword("");

src/components/Cards/AvailableJobsCard.jsx

@@ -187,7 +187,7 @@ export default function AvailableJobsCard({
               </div>
             </div> */}
             <div className="block sm:flex flex-wrap gap-4">
-              <p className="text-sm text-thin-light-gray">
+              <p className="text-sm text-thin-light-gray flex flext-start gap-1">
                 Price: <span className="text-purple">{thePrice}</span>
               </p>
               <p className="text-sm text-thin-light-gray">

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -72,7 +72,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       {value.title}
                                     </h1>
                                     <div className="flex gap-4 items-center">
-                                      <span className="text-sm text-thin-light-gray">
+                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
                                         Price:{" "}
                                         <span className="text-purple">
                                           {thePrice}

src/components/Helpers/PriceFormatter.jsx

@@ -1,16 +1,48 @@
-export const PriceFormatter = (price, currency, currencyName) => {
-  const supportedCurrencies = ["USD", "EUR", "GBP"];
-  const symbolFormatter = supportedCurrencies.includes(currency)
-    ? currency
-    : undefined;
+import React from 'react'
 
-  const formatter = new Intl.NumberFormat("en", {
-    style: symbolFormatter,
-    currencyDisplay: "symbol",
-    minimumFractionDigits: 2,
-  });
+// export const PriceFormatter = (price, currency, currencyName) => {
+//   const supportedCurrencies = ["USD", "EUR", "GBP"];
+//   const symbolFormatter = supportedCurrencies.includes(currency)
+//     ? currency
+//     : undefined;
 
-  const displayCurrencyName = symbolFormatter ? "" : currencyName;
+//   const formatter = new Intl.NumberFormat("en", {
+//     style: symbolFormatter,
+//     currencyDisplay: "symbol",
+//     minimumFractionDigits: 2,
+//   });
 
-  return `${formatter.format(price)} ${displayCurrencyName}`;
-};
+//   const displayCurrencyName = symbolFormatter ? "" : currencyName;
+
+//   return `${formatter.format(price)} ${displayCurrencyName}`;
+// };
+
+
+export const PriceFormatter = (price='00', currency='', currencyName='') => {
+  // Convert the number to a string
+let numStr = String(price);
+
+// Split the string into integer and decimal parts
+let parts = numStr.split('.');
+let integerPart = parts[0];
+let decimalPart = parts[1] || '';
+
+// Add thousands separators to the integer part
+// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+let formattedInteger = integerPart;
+
+// Truncate or pad the decimal part to two decimal points
+let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+
+// Combine the formatted integer and decimal parts
+// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+// return formattedNumber;
+  return (
+    <span className='text-sm flex items-center'>
+      <sup>{currency || currencyName || ''}</sup>
+      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
+      <sup>{formattedDecimal}</sup>
+    </span>
+  )
+}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -4,6 +4,7 @@ import { toast } from "react-toastify";
 import { Form, Formik } from "formik";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   const [marketMsg, setMarketMsg] = useState({
@@ -96,14 +97,18 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     [apiCall, details, onClose, textValue]
   );
 
-  console.log('Checking my mangeInt',manageInt)
+  let thePrice = PriceFormatter(
+    details?.price * 0.01,
+    details?.currency_code,
+    details?.currency
+  );
 
   // let addedIntDate = marketInt?.added?.split(" ")[0];
   let expireIntDate = marketInt?.expire?.split(" ")[0];
 
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[750px] md:h-[700px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}
@@ -112,8 +117,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
         </div>
 
         <div className="md:flex bg-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-1">
-            <div className="min-h-[290px]">
+          <div className="p-4 w-full md:w-[75%] md:border-r-1">
+            <div className="min-h-[263px]">
               <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
                 {details?.title}
               </h2>
@@ -128,7 +133,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   name: "",
                   content: {
                     text: `Timeline: ${details.timeline_days} day(s) -- `,
-                    bold: `Budget: ${details.price} naira`,
+                    bold: `Budget: ${thePrice}`,
                   },
                 },
                 {
@@ -138,7 +143,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 },
               ].map(({ name, content, danger }, idx) => (
                 <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="w-full md:w-1/4 text-slate-900 tracking-wide font-semibold">
+                  <label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
                     {name}
                   </label>
                   <div
@@ -156,15 +161,19 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                         }}
                       />
                     ) : (
-                      <p className={`w-full md:w-3/4 text-slate-900`}>
+                      <p className={`w-full text-slate-900`}>
                         {name !== "Delivery Detail" ? (
                           <>
                             {typeof content !== "object" ? content : null}
                             {typeof content === "object" && (
-                              <span className="flex items-center gap-2">
-                                {content?.text}
-                                <strong>{content?.bold}</strong>
-                              </span>
+                              <>
+                                <hr className="mb-1" />
+                                <span className="flex items-center gap-2">
+                                  {content?.text}
+                                  <strong>{thePrice}</strong>
+                                </span>
+                                <hr className="mt-1" />
+                              </>
                             )}
                           </>
                         ) : (
@@ -207,15 +216,15 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </div>
           </div>
 
-          <div className="w-full md:w-1/4 h-full ">
-            <div className="w-[90%] mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[550px] flex flex-col justify-between">
+          <div className="w-full md:w-[23%] h-full ">
+            <div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center py-4 gap-2">
                 <p className="w-full text-slate-900 tracking-wide my-1">
                   Interested in the task?
                 </p>
                 <hr />
                 <button
-                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex flex-col items-center justify-center"
+                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
                   name="market-interest"
                   onClick={marketCalls}
                 >
@@ -251,6 +260,13 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 <p className="my-1">Expire: {expireIntDate}</p>
               </div>
             </div>
+            <button
+              className="self-end w-[150px] mt-2 h-[52px] rounded-md 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>

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -68,7 +68,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                   {value.title}
                                 </h1>
                                 <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
+                                <span className="text-sm text-thin-light-gray flex flext-start gap-1">
                                   Price:{" "}
                                   <span className="text-purple">
                                     {thePrice}

src/components/MyJobs/MyJobTable.jsx

@@ -119,7 +119,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   {value.title}
                 </h1>
                 <div>{value.description}</div>
-                <span className="text-sm text-thin-light-gray">
+                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                   Price: <span className="text-purple">{thePrice}</span>
                 </span>
                 <span className="text-sm text-thin-light-gray">
@@ -186,9 +186,9 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       <div className="header w-full flex justify-between items-center mb-5">
         <div className="flex space-x-2 items-center">
           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-            All Jobs
+            {filterCategories[selectedCategory]} Jobs
           </h1>
-        </div>
+        </div>  
         <SelectBox
           action={handleSetCategory}
           datas={Object.values(filterCategories)}

src/components/MyJobs/index.jsx

@@ -1,17 +1,32 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 import AddJobPage from "../../views/AddJobPage";
 
 export default function MyJobs(props) {
+  let { state } = useLocation();
+  const navigate = useNavigate();
   const [popUp, setPopUp] = useState(false);
+
+  console.log(state)
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
+
+    if (state?.popup) navigate("/", { replace: true });
   };
 
   const categoryOptions = props.MyJobList?.data?.categories;
 
+  useEffect(() => {
+    if (!state?.popup) {
+      setPopUp(false);
+    } else {
+      setPopUp(true);
+    }
+  }, [state?.popup]);
+
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -67,7 +67,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                   {value.title}
                                 </h1>
                                 <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
+                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
                                   Price:{" "}
                                   <span className="text-purple">
                                     {thePrice}

src/components/MyTasks/MyJobTable.jsx

@@ -86,7 +86,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                         <span className="text-base text-gray-600">
                           {task?.description}
                         </span>
-                        <span className="text-sm text-thin-light-gray">
+                        <span className="text-sm text-thin-light-gray flex flext-start gap-1">
                           Price:
                           <span className="text-purple ml-1">{thePrice}</span>
                         </span>

src/components/MyWallet/Balance.jsx

@@ -4,6 +4,7 @@ import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import PurchasesTable from './WalletComponent/PurchasesTable'
 import CouponTable from './WalletComponent/CouponTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import { PriceFormatter } from '../Helpers/PriceFormatter'
 
 function Balance({wallet, coupon}) {
     return (
@@ -42,11 +43,11 @@ function Balance({wallet, coupon}) {
                                     </div>
                                     <div className='balance-info'>
                                         <p className='py-2'>Balance</p>
-                                        <span className='py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
+                                        <span className='py-1 px-2 bg-green-100 text-green-500 rounded-lg flex flex-start gap-1'>{PriceFormatter(item.amount * 0.01, item.code)}</span>
                                     </div>
                                     <div className='balance-info'>
                                         <p className='py-2'>Escrow</p>
-                                        <span className='py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
+                                        <span className='py-1 px-2 bg-red-100 text-red-500 rounded-lg flex flex-start gap-1'>{PriceFormatter(item.escrow * 0.01, item.code)}</span>
                                     </div>
                                 </div>
 

src/components/MyWallet/WalletHeader.jsx

@@ -5,6 +5,7 @@ import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
 import Accordion from "../Helpers/Accordion";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function WalletHeader(props) {
   //  debugger;
@@ -58,10 +59,7 @@ export default function WalletHeader(props) {
                       </div>
                       <div>
                         <p className="eth text-xl font-bold text-purple">
-                          {(value.amount * 0.01).toFixed(2)} {value.code}
-                        </p>
-                        <p className="usd text-base text-thin-light-gray text-right">
-                          {/*(773.69 USD)*/}
+                          {PriceFormatter(value.amount * 0.01, value.code)}
                         </p>
                       </div>
                     </div>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -4,8 +4,8 @@ import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 
 import usersService from "../../services/UsersService";
-import { handlePagingFunc } from "../Pagination/HandlePagination";
-import PaginatedList from "../Pagination/PaginatedList";
+// import { handlePagingFunc } from "../Pagination/HandlePagination";
+// import PaginatedList from "../Pagination/PaginatedList";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
 
@@ -15,25 +15,72 @@ export default function ManageInterestOffer(props) {
 
     let [redirectTime, setRedirectTime] = useState(5)
 
+    let [messageToSend, setMessageToSend] = useState('')
+
     let [tab, setTab] = useState("info"); //message STATE FOR SWITCHING BETWEEN TABS
 
     let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', processType: ''})
 
-    const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    let [messageListReload, setMessageListReload] = useState(false) // STATE TO DETERMINE WHEN MESSAGE LIST WILL RELOAD
 
-    const handlePagination = (e) => {
-        handlePagingFunc(e, setCurrentPage);
-    };
+    const [messageList, setMessageList] = useState({loading: true, data: [1,2,3,4,5,6,7,8,95,6,7,8,9]}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
+    // const [currentPage, setCurrentPage] = useState(0);
+    // const indexOfFirstItem = Number(currentPage);
+    // const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    // const currentMessageList = messageList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+    // const handlePagination = (e) => {
+    //     handlePagingFunc(e, setCurrentPage);
+    // };
 
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
     };
 
+    //FUNCTION TO HANDLE ON CHANGE MESSAGE IN TEXTAREA
+    const onMessageChange = ({target:{value}}) => {
+        if(messageToSend.length > 149){
+            setRequestStatus({loading: false, status: false, message: 'max of 150 characters', processType: 'sendmessage'})
+        }else{
+            setRequestStatus({loading: false, status: false, message: '', processType: 'sendmessage'})
+        }
+        setMessageToSend(value)
+    }
+
+    //FUNCTION TO SEND MESSAGE TO CLIENT
+    const sendMessage = () => {
+        let reqData = { // API PAYLOADS
+            msg_type: 'MRKTINT',
+            yourmessage: messageToSend,
+            offer_uid: props.offerDetails.offer_uid,
+            interest_uid: props.offerDetails.interest_uid
+        }
+        setRequestStatus(prev => ({...prev, loading: true, processType: 'sendmessage'}))
+        if(!messageToSend){
+            setRequestStatus({loading: false, status: false, message: 'Please enter message to send', processType: 'sendmessage'})
+            return
+        }
+        if(messageToSend.length > 149){
+            return
+        }
+        apiCall.offerInterestMsg(reqData).then(res=>{
+            if(res.status != 200 || res.data.internal_return < 0){
+                setRequestStatus({loading: false, status: false, message: 'message not sent, try again', processType: 'sendmessage'})
+                return
+            }
+            setRequestStatus({loading: false, status: true, message: 'message sent', processType: 'sendmessage'})
+            setMessageToSend('') // sets message to empty strings
+            setMessageListReload(prev => !prev) //A FUNCTION TO MAKE MESSAGE LIST RELOAD
+        }).catch(error => {
+            setRequestStatus({loading: false, status: false, message: 'Opps, an error occured', processType: 'sendmessage'})
+        }).finally(()=>{
+            setTimeout(() => {
+                setRequestStatus({loading: false, status: false, message: '', processType: ''})
+            }, 5000);
+        })
+    }
+
     //FUNCTION TO ACCEPT/REJECT OFFER INTEREST
     const interestOfferProcess = ({target:{name}}) => {
         setRequestStatus(prev => ({...prev, loading: true, processType: name}))
@@ -66,8 +113,16 @@ export default function ManageInterestOffer(props) {
     }
 
     useEffect(()=>{
-        // run API to get message to replace message array above, add reload variable as dependence array
-    },[])
+        // run API to get message to replace message array above, add reload variable as dependence array. CODE IS DUMMY FOR NOW
+        setMessageList({loading: true, data: []})
+        apiCall.offerInterestMsg().then(res=>{
+            console.log('Data', res.data)
+            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
+        }).catch(err => {
+            setMessageList({loading: false, data:[1,2,3,6,7,8,9]})
+            console.log('Failed', err)
+        })
+    },[messageListReload])
     return (
         <Layout>
             <CommonHead
@@ -143,13 +198,15 @@ export default function ManageInterestOffer(props) {
                                     {/* info tab */}
                                     {tab == 'info' ?
                                     <div className="info-details w-full border-t">
-                                        <div className="my-3 flex items-center gap-1">
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
-                                        </div>
-                                        <div className="my-3 flex items-center gap-1">
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                        <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>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                            </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>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                            </div>
                                         </div>
                                         <div className="my-3 flex items-center gap-1">
                                             <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
@@ -178,32 +235,76 @@ export default function ManageInterestOffer(props) {
                                     </div>
                                     :
                                     <div className="message-details w-full border-t">
-                                        <div className="my-0 w-full flex items-center gap-5">
-                                            <div className="w-3/4">
-                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">Message to dummy name</p>
-                                                <textarea rows={2} autoFocus={true} className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" />
+                                        <p className="my-1 text-base text-dark-gray dark:text-white tracking-wide">To: <span className="font-bold">{props.offerDetails?.client_name}</span></p>
+                                        <div className="w-full flex items-center gap-5">
+                                            <div className="w-full">
+                                                <textarea 
+                                                    value={messageToSend}
+                                                    onChange={onMessageChange} 
+                                                    rows={2} autoFocus={true} 
+                                                    className="p-2 text-base font-bold text-dark-gray dark:text-white dark:bg-dark-gray border tracking-wide w-full resize-none rounded-md outline-none" 
+                                                />
                                             </div>
-                                            <div className="w-1/4 flex flex-col justify-center items-center">
-                                                <button
-                                                    type="button"
-                                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                                >
-                                                    <span className="text-white">Send</span>
-                                                </button>
+                                            <div className="flex justify-end items-center">
+                                                {requestStatus.loading && requestStatus.processType == 'sendmessage' ?
+                                                    <LoadingSpinner color='sky-blue' size='10' />
+                                                :
+                                                    <button
+                                                        type="button"
+                                                        onClick={sendMessage}
+                                                        disabled={requestStatus.loading}
+                                                        // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                        className="w-[100px] h-[50px] bg-sky-blue text-center text-lg font-semibold text-white rounded-md shadow-md flex justify-center items-center"
+                                                    >
+                                                    Send
+                                                    </button>
+                                                }
                                             </div>
                                         </div>
+
+                                        {/* ERROR DISPLAY FOR MESSAGE SENDING */}
+                                        <div className="w-full">
+                                        {/* error or success display */}
+                                        {requestStatus.message != "" && requestStatus.processType == 'sendmessage' &&
+                                            (!requestStatus.status ? (
+                                            <div
+                                                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                            >
+                                                {requestStatus.message}
+                                            </div>
+                                            ) : (
+                                            requestStatus.status && (
+                                                <div
+                                                className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                                >
+                                                {requestStatus.message}
+                                                </div>
+                                            )
+                                            ))}
+                                        </div>
+                                        {/* END OF ERROR DISPLAY FOR MESSAGE SENDING */}
+
                                         {/* message list */}
-                                        <div className="min-h-[100px] max-h-[200px] overflow-y-auto">
-                                        {currentMessageList.map((item, index)=>(
+                                        <div className="my-1 min-h-[100px] max-h-[200px] border-t overflow-y-scroll">
+                                        { messageList.loading ?
+                                        <LoadingSpinner color='sky-blue' size='16' />
+                                        : messageList.data.map((item, index)=>(
                                             <div key={index} className="my-2 w-full flex items-center gap-1">
                                                 <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
                                                 <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
                                             </div>
-                                        ))}
+                                            ))
+                                        }
+                                        {/* {messageList.data.map((item, index)=>(
+                                            <div key={index} className="my-2 w-full flex items-center gap-1">
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
+                                                <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
+                                            </div>
+                                        ))} */}
                                         </div>
 
                                         {/* PAGINATION BUTTON */}
-                                        <PaginatedList
+                                        {/* <PaginatedList
                                             onClick={handlePagination}
                                             prev={currentPage == 0 ? true : false}
                                             next={
@@ -215,7 +316,7 @@ export default function ManageInterestOffer(props) {
                                             data={messageList?.data}
                                             start={indexOfFirstItem}
                                             stop={indexOfLastItem}
-                                        />
+                                        /> */}
                                         {/* END OF PAGINATION BUTTON */}
                                     </div>
                                     }
@@ -226,7 +327,7 @@ export default function ManageInterestOffer(props) {
                             {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
                                 <div className="w-full h-full">
-                                    <div className="mt-0 sm:mt-10 flex sm:flex-col justify-center items-center gap-10">
+                                    <div className="h-full flex sm:flex-col justify-center items-center gap-10">
                                         {requestStatus.loading && requestStatus.processType == 'accept' ?
                                             <LoadingSpinner color='sky-blue' size='10' />
                                         :    
@@ -235,9 +336,10 @@ export default function ManageInterestOffer(props) {
                                                 name='accept'
                                                 disabled={requestStatus.loading}
                                                 onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                className='max-w-[150px] h-[100px] bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md shadow-md'
                                             >
-                                            Accept
+                                            Accept this Interest
                                             </button>
                                         }
 
@@ -249,9 +351,10 @@ export default function ManageInterestOffer(props) {
                                                 name='reject'
                                                 disabled={requestStatus.loading}
                                                 onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                                // className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                                className='max-w-[150px] h-[100px] bg-red-300 text-center text-lg font-semibold text-white py-2 px-4 rounded-md shadow-md'
                                             >
-                                            Reject
+                                            Reject this Interest
                                             </button>
                                         }
                                     </div>
@@ -259,7 +362,7 @@ export default function ManageInterestOffer(props) {
                                     {/* ERROR DISPLAY */}
                                     <div className="w-full">
                                     {/* error or success display */}
-                                    {requestStatus.message != "" && requestStatus.processType != 'sendmeassge' &&
+                                    {requestStatus.message != "" && requestStatus.processType != 'sendmessage' &&
                                         (!requestStatus.status ? (
                                         <div
                                             className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}

src/components/Partials/MobileSideBar.jsx

@@ -225,9 +225,10 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
                   <ul className="flex flex-col space-y-6">
                     <ListItem
                       title="Add Job"
-                      route="/add-job"
+                      route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
+                      state={true}
                     />
                   </ul>
                 </div>
@@ -301,11 +302,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble }) => {
+const ListItem = ({ sidebar, route, title, bubble, popup }) => {
   return (
     <li className="item group">
       <NavLink
         to={route}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Partials/Sidebar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function Sidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -131,27 +136,25 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-            <div
-              className={`menu-item transition-all duration-300 ease-in-out ${
-                sidebar ? "my-5" : ""
-              }`}
-            >
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">
-                  Family
-                </h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <ListItem
-                    title="Family Corner"
-                    route="/acc-family"
-                    iconName="people-two"
-                    sidebar={sidebar}
-                  />
-                </ul>
-              </div>
+          <div
+            className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "my-5" : ""
+            }`}
+          >
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">Family</h1>
             </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <ListItem
+                  title="Family Corner"
+                  route="/acc-family"
+                  iconName="people-two"
+                  sidebar={sidebar}
+                />
+              </ul>
+            </div>
+          </div>
         )}
         {userDetails?.account_type !== "FAMILY" && (
           <>
@@ -249,9 +252,10 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
                   <ul className="flex flex-col space-y-6">
                     <ListItem
                       title="Add Job"
-                      route="/add-job"
+                      route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
+                      popup={true}
                     />
                   </ul>
                 </div>
@@ -325,11 +329,12 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, iconName }) => {
+const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
   return (
     <li className={`item group`}>
       <NavLink
         to={route}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Settings/Tabs/TermsConditionTab.jsx

@@ -4,77 +4,231 @@ export default function TermsConditionTab() {
   return (
     <div className="terms-conditon-tab w-full">
       <div className="terms-condition-wrappr w-full">
-        <div className="mb-8">
-          <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            1. Definitions
+        <div className="mb-6">
+          <h1 className="text-3xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            Terms of use
           </h1>
           <p className="text-base text-thin-light-gray leading-[28px] ">
-            What you do own when you buy an NFT are the keys to a non-fungible –
-            perhaps unique – token. That token is yours to trade or hold or
-            display in Decentraland. But the digital file associated with an NFT
-            is just as easy to copy and paste and download as any other – the
-            Finally, players lose their NFTs sometimes according to the rules
-            and regulations of the NFT game.
+            These Website Terms & Conditions (“T&Cs”) apply to your access and
+            use of www.wrenchboard.com,dashboard.wrenchboard.com (the “Site”),
+            including all software, data, reports, text, images, sounds, video,
+            and all contents made available through any portion of the Site
+            (collectively, the “Content”). Content includes all such elements as
+            a whole, as well as individual elements and portions thereof.
           </p>
         </div>
-        <div className="mb-8">
-          <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            2. Acceptance
+        <hr />
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            Acceptance of Terms
           </h1>
           <p className="text-base text-thin-light-gray leading-[28px] ">
-            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
-            sint. Velit officia consequat duis enim velit mollit. Exercitation
-            veniam consequat sunt nostrud amet.Capacity. You confirm that you
-            have the legal capacity to receive and hold and make use of the NFT
-            under French jurisdiction and any other relevant
-            jurisdiction.Acceptance. By participating in the Sale, You accept
-            and agree to these Terms and Conditions without any condition or
-            restriction. If You do not agree to this Contract, You shall not
-            participate in the Sale made by the Company Exercitation veniam
-            consequat sunt nostrud amet.Capacity. You confirm that you have the
-            legal capacity to receive and hold find to end.Contract, You shall
-            not participate in the Sale made by the Company Exercitation venia
+            WRENCHBOARD permits you (“User” or “you” or “your”) to access and
+            use the Site and Content, subject to these T&Cs. By accessing or
+            using any portion of the Site, you acknowledge that you have read,
+            understood, and agree to be bound by these T&Cs. If you do not agree
+            with these T&Cs, you must not accept these T&Cs or access or use the
+            site or content.
           </p>
         </div>
-        <div className="mb-8 bg-purple p-[23px] text-white rounded-lg">
-          <p className="text-[18px]">
-            These Terms and Conditions are related to the sale of NFTs by the
-            Company (the “Company”) on its Website. It solely governs the
-            contractual relationship between You and the Company regarding the
-            Sale and any related contract.
-          </p>
-        </div>
-        <div className="mb-8">
-          <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            3. The Sale
+        <hr />
+
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            General Conditions of Use
           </h1>
           <p className="text-base text-thin-light-gray leading-[28px] ">
-            The Company offers NFTs featuring the Betonyou universe. The holders
-            of one or more NFTs will be able to win cryptos while playing video
-            games. In the future, the Company plans to develop its own games and
-            Metaverse around the Betonyou universe (“Project”). <br />
+            <b> Authorization to Access and Use Site and Content.</b> Subject to
+            your compliance with these T&Cs and the provisions hereof, you may
+            access or use the Site and Content solely for the purpose of your
+            evaluation of WRENCHBOARD and WRENCHBOARD’s products and services.
+            You may only link to the Site or Content, or any portion thereof, as
+            expressly permitted by WRENCHBOARD.
             <br />
-            To release the NFTs and fund the project, the Company offers NFTs
-            from a dedicated website("Sale"). The web address of this website
-            will be given at the time of the mint. The NFT acquisition does not
-            confer any rights on the Company or in the future development.
+            <b> Ownership and Restrictions.</b> All rights, title, and interest
+            in and to the Site and Content will remain with and belong
+            exclusively to WRENCHBOARD. You will not (a) sublicense, resell,
+            rent, lease, transfer, assign, time share or otherwise commercially
+            exploit or make the Site and any Content available to any third
+            party, (b) use the Site and Content in any unlawful manner
+            (including without limitation in violation of any data, privacy or
+            export control laws) or in any manner that interferes with or
+            disrupts the integrity or performance of the Site and Content or
+            their related components, or (c) modify, adapt or hack the Site and
+            Content to, or try to, gain unauthorized access to the restricted
+            portions of the Site and Content or related systems or networks
+            (i.e., circumvent any encryption or other security measures, gain
+            access to any source code or any other underlying form of technology
+            or information, and gain access to any part of the Site and Content,
+            or any other products or services of WRENCHBOARD that are not
+            readily made available to the general public). You are not permitted
+            to copy, modify, frame, repost, publicly perform or display, sell,
+            reproduce, distribute, or create derivative works of the Site and
+            Content, except that you may download, display, and print one copy
+            of the publicly available materials (i.e., the Content that does not
+            require an Account name or password to access) on any single
+            computer solely for your personal, non-commercial use, provided that
+            you do not modify the material in any way and you keep intact all
+            copyright, trademark, and other proprietary notices. You agree not
+            to access the Site or Content by any means other than through the
+            interface that is provided by WRENCHBOARD to access the same. You
+            may not use any “page-scrape,” “deep-link,” “spider,” or “robot or
+            other automatic program, device, algorithm or methodology, or any
+            similar manual process, to access, copy, acquire, or monitor any
+            portion of the Site or any Content, or in any way reproduce or
+            circumvent the presentation or navigational structure of the Site or
+            any Content, to obtain or attempt to obtain any Content or other
+            information through any means not made generally available through
+            the Site by WRENCHBOARD. WRENCHBOARD reserves the right to take any
+            lawful measures to prevent any such activity. You may not forge
+            headers or otherwise manipulate identifiers in order to disguise the
+            origin of any message or transmittal you send to WRENCHBOARD on or
+            through the Site or any service offered on or through the Site. You
+            may not pretend that you are, or that you represent, someone else,
+            or impersonate any other individual or entity.
+            <b> Responsibility for Your Data.</b> You are solely responsible for
+            all data, information, and other content, that you upload, post, or
+            otherwise provide or store (hereafter “post(ing)”) in connection
+            with or relating to the Site.
           </p>
         </div>
-        <div className="mb-8">
-          <h1 className="text-xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
-            4. Purchaser’s obligations
+        <hr />
+
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            Use of Intellectual Property.
           </h1>
           <p className="text-base text-thin-light-gray leading-[28px] ">
-            To the fullest extent permitted by applicable law, You undertake to
-            indemnify, defend and hold harmless the Company from and against all
-            claims, demands, actions, damages, losses, costs and expenses
-            (including attorneys’ fees) that arise from or relate to (i) your
-            Subscription or use of the NFTs; (ii) your responsibilities or
-            obligations under this Contract; and (iii) your breach of this
-            Contract. <br /> <br /> Company undertakes to act with the care
-            normally expected from a professional in his field and to comply
-            with the best practice in force. The best endeavor obligation only
-            binds the Company.
+            <b> Rights in User Content.</b> By posting your information and
+            other content (“User Content”) on or through the Site and Content,
+            you grant WRENCHBOARD a worldwide, non-exclusive, perpetual,
+            irrevocable, royalty-free, fully paid, sublicensable and
+            transferable license to use, modify, reproduce, distribute, display,
+            publish and perform User Content in connection with the Site and
+            Content. WRENCHBOARD has the right, but not the obligation, to
+            monitor the Site and Content and User Content. WRENCHBOARD may
+            remove or disable any User Content at any time for any reason, or
+            for no reason at all. You, the user, acknowledge that you bear sole
+            responsibility for adequate security, protection, and backup of User
+            Content. WRENCHBOARD will have no liability to you for any
+            unauthorized access or use of any of User Content, or any
+            corruption, deletion, destruction, or loss of any of User Content.
+          </p>
+        </div>
+        <hr />
+
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            Feedback
+          </h1>
+          <p className="text-base text-thin-light-gray leading-[28px] ">
+            You may submit ideas, suggestions, or comments (“Feedback”)
+            regarding the Site and Content or WRENCHBOARD’s business, products,
+            or services. By submitting any Feedback, you acknowledge and agree
+            that (a) your Feedback is provided by you voluntarily and
+            WRENCHBOARD may, without any obligations or limitation, use and
+            exploit such Feedback in any manner and for any purpose, (b) you
+            will not seek and are not entitled to any money or other form of
+            compensation, consideration, or attribution with respect to your
+            Feedback regardless of whether WRENCHBOARD considered or used your
+            Feedback in any manner, and (c) your Feedback is not the
+            confidential or proprietary information of you or any third party.
+          </p>
+        </div>
+        <hr />
+
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            Termination of Access Due to Violations
+          </h1>
+          <p className="text-base text-thin-light-gray leading-[28px] ">
+            WRENCHBOARD may, in its sole discretion and without prior notice,
+            terminate your access to the Site and/or block your future access to
+            the Site if we determine that you have violated these T&Cs or other
+            agreements or guidelines which may be associated with your use of
+            the Site. You also agree that any violation by you of these T&Cs
+            will cause irreparable harm to WRENCHBOARD, for which monetary
+            damages would be inadequate, and you consent to WRENCHBOARD
+            obtaining any injunctive or equitable relief that WRENCHBOARD deems
+            necessary or appropriate in such circumstances, without limiting
+            WRENCHBOARD’s other available remedies. Further, WRENCHBOARD may, in
+            its sole discretion and without prior notice, terminate your access
+            to the Site, for cause, which includes (but is not limited to) (1)
+            requests by law enforcement or other government agencies, (2)
+            discontinuance or material modification of the Site or any service
+            offered on or through the Site, or (3) unexpected technical issues
+            or problems.
+          </p>
+        </div>
+        <hr />
+
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            T&Cs Updates
+          </h1>
+          <p className="text-base text-thin-light-gray leading-[28px] ">
+            WRENCHBOARD reserves the right, at its sole discretion, to change or
+            modify portions of these T&Cs at any time. WRENCHBOARD will post the
+            changes to these T&Cs on the Site and will indicate at the top of
+            this page the date these terms were last revised. It is your
+            responsibility to check the T&Cs periodically for changes. Your
+            continued use of the Site and Content after the date any such
+            changes become effective constitutes your acceptance of the new or
+            revised T&Cs.
+          </p>
+        </div>
+        <hr />
+
+        <div className="my-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD
+          </h1>
+          <p className="text-base text-thin-light-gray leading-[28px] ">
+            THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE
+            PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND
+            DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD
+            EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING
+            ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY,
+            FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY
+            REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE
+            OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD
+            DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND
+            CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE OR
+            VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE
+            RESULTS THAT MAY BE OBTAINED FROM USE OF THE SITE AND CONTENT. NO
+            INFORMATION, ADVICE OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD OR
+            THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN
+            THESE TERMS and CONDITIONS AND YOU SHOULD NOT RELY ON THE SITE AND
+            THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.
+          </p>
+        </div>
+        <hr />
+
+        <div className="my-8">
+          <p className="text-base text-thin-light-gray leading-[28px] ">
+            WRENCHBOARD reserves the right to do any of the following, at any
+            time, without notice: (1) to modify, suspend or terminate operation
+            of or access to the Site, or any portion of the Site, for any
+            reason; (2) to modify or change the Site, or any portion of the
+            Site, for any reason; and (3) to interrupt the operation of the
+            Site, or any portion of the Site, as necessary to perform routine or
+            non-routine maintenance, error correction, or other changes..
+          </p>
+        </div>
+        <hr />
+
+        <div className="mt-8">
+          <h1 className="text-2xl tracking-wide font-bold text-dark-gray dark:text-white mb-4">
+            Changes To the Policy
+          </h1>
+          <p className="text-base text-thin-light-gray leading-[28px] ">
+            We reserve the rights to update and make changes to this Privacy
+            policy at anytime. Changes will become effective once posted.
+            However, we will notify you by email or when you log on to the
+            service or website about any changes that fundamentally affect how
+            we manage your personal information. Contacting Us: You may contact
+            us about this policy through our email address anytime :
+            support@wrenchboard.com
           </p>
         </div>
       </div>

src/components/jobPopout/DeleteJobPopout.jsx

@@ -118,7 +118,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
             <p className="text-xl tracking-wide text-dark-gray dark:text-white">
               {details.title}
             </p>
-            <p className="text-lg tracking-wide text-dark-gray dark:text-white">
+            <p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
               Price: {details.thePrice}
             </p>
             <p className="text-lg tracking-wide text-dark-gray dark:text-white">

src/components/jobPopout/EditJobPopout.jsx

@@ -59,11 +59,9 @@ const EditJobPopOut = ({
     description: details?.description,
     job_detail: details?.job_detail,
     timeline_days: details?.timeline_days,
-    category: details?.category
+    category: details?.category,
   };
 
-  console.log("This is the init values for edit job",initialValues)
-
   const jobApi = useMemo(() => new usersService(), []);
   const navigate = useNavigate();
 

src/components/jobPopout/JobListPopout.jsx

@@ -167,6 +167,8 @@ function JobListPopout({ details, onClose, situation }) {
     }
   };
 
+  // console.log("Job List P >> ", details)
+
   return (
     <ModalCom action={onClose} situation={situation} className="job-popup">
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">

src/components/jobPopout/PendingJobsPopout.jsx

@@ -4,6 +4,7 @@ import ModalCom from "../Helpers/ModalCom";
 import usersService from "../../services/UsersService";
 import { toast } from "react-toastify";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 const showSuccessToast = (message) => {
   toast.success(message, {
@@ -133,7 +134,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
             <div className="my-2 md:flex">
               <Detail
                 label="Price"
-                value={`${details.price * 0.01} ${details.currency}`}
+                // value={`${details.price * 0.01} ${details.currency}`}
+                value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
               />
             </div>
 

src/services/UsersService.js

@@ -729,6 +729,18 @@ class usersService {
     };
     return this.postAuxEnd("/paylistcard", postData);
   }
+
+    // END POINT TO SEND AND GET OFFER INTEREST MESSAGE
+    offerInterestMsg(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 13037,
+        ...reqData
+      };
+      return this.postAuxEnd("/offerinterestmsg", postData);
+    }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)