server icon fix

src/components/AddJob/AddJob.jsx

@@ -167,7 +167,7 @@ function AddJob({ popUpHandler, categories }) {
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
-                        {walletDetails.loading ? (
+                        {walletDetails?.loading ? (
                           <option className="text-slate-500 text-lg" value="">
                             Loading...
                           </option>
@@ -400,7 +400,7 @@ function AddJob({ popUpHandler, categories }) {
                       </span>
                     </button>
 
-                    {requestStatus.loading ? (
+                    {requestStatus?.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />
                     ) : (
                       <button

src/components/AuthPages/Login/index.jsx

@@ -17,14 +17,14 @@ import { updateUserDetails } from "../../../store/UserDetails";
 import ReCAPTCHA from "react-google-recaptcha";
 
 export default function Login() {
-
+  // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
-  const sessionExpired = queryParams.get("sessionExpired")
+  const sessionExpired = queryParams.get("sessionExpired");
 
   const dispatch = useDispatch();
   const { state } = useLocation();
 
-  const [validCaptcha, setValidCaptcha] = useState({show: false, valid:''}); // FOR CAPTCHA
+  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
 
   let [loginType, setLoginType] = useState("");
 
@@ -115,7 +115,8 @@ export default function Login() {
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       return;
     }
-    if(name == "full" && !validCaptcha.valid && validCaptcha.show){ // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
+      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
       setMsgError("Please Verify Captcha");
       setLoginLoading(false);
       setTimeout(() => {
@@ -136,12 +137,15 @@ export default function Login() {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
-          setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
+          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
           return;
         }
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
+        if (name === "family") {
+          sessionStorage.setItem("family_uid", res.data?.family_uid);
+        }
         // localStorage.setItem("session", `${res.data.session}`);
         dispatch(updateUserDetails({ ...res.data }));
         setTimeout(() => {
@@ -152,7 +156,7 @@ export default function Login() {
       .catch((error) => {
         setMsgError("Unable to login, try again");
         setLoginLoading(false);
-        setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
+        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
       })
       .finally(() => {
         setTimeout(() => {
@@ -163,11 +167,12 @@ export default function Login() {
       });
   };
 
-  function captchaChecker(value) { // FUNCTION TO VALIDATE CAPTCHA
+  function captchaChecker(value) {
-    if(value){
+    // FUNCTION TO VALIDATE CAPTCHA
-      setValidCaptcha({show: true, valid:value})
+    if (value) {
-    }else{
+      setValidCaptcha({ show: true, valid: value });
-      setValidCaptcha({show: true, valid:''})
+    } else {
+      setValidCaptcha({ show: true, valid: "" });
     }
   }
 
@@ -245,31 +250,32 @@ export default function Login() {
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
-              
               {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired != 'true' &&
+              {sessionExpired != "true" && (
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1> */}
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  New Here?{" "}
+                    New Here?{" "}
-                  <Link
+                    <Link
-                    to="/signup"
+                      to="/signup"
-                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                  >
+                    >
-                    Create an Account
+                      Create an Account
-                  </Link>
+                    </Link>
-                </span>
+                  </span>
-              </div>
+                </div>
-              }
+              )}
 
               {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired == 'true' &&
+              {sessionExpired == "true" && (
-              <div className="w-full p-1 mb-7">
+                <div className="w-full p-1 mb-7">
-                <p className="text-red-500 text-base text-center">Your session expired and will need to login again</p>
+                  <p className="text-red-500 text-base text-center">
-              </div>
+                    Your session expired and will need to login again
-              }
+                  </p>
+                </div>
+              )}
 
               {/* switch login component */}
               <div className="ml-7 flex justify-start items-center gap-3">
@@ -335,14 +341,16 @@ export default function Login() {
                     </div>
 
                     {/* hCaptha clone for the time being */}
-                    {validCaptcha.show &&
+                    {validCaptcha.show && (
-                    <div className="mb-5 flex justify-center w-full">
+                      <div className="mb-5 flex justify-center w-full">
-                      <ReCAPTCHA
+                        <ReCAPTCHA
-                        sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                          sitekey={
-                        onChange={captchaChecker}
+                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
+                          }
+                          onChange={captchaChecker}
                         />
-                    </div>
+                      </div>
-                    }
+                    )}
 
                     {loginError && (
                       <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
@@ -499,7 +507,8 @@ export default function Login() {
 
               {loginType == "full" && (
                 <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                  This site is protected by a Captcha. Our Privacy Policy and Terms of Service apply.
+                  This site is protected by a Captcha. Our Privacy Policy and
+                  Terms of Service apply.
                 </div>
               )}
             </div>

src/components/Blogs/index.jsx

@@ -47,7 +47,7 @@ export default function BlogItem(props) {
                     </h1>
                 </div>
                 <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
-                    {blogdata.loading ? 
+                    {blogdata?.loading ? 
                         <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
                     :
                         blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?

src/components/Cards/AvailableJobsCard.jsx

@@ -24,9 +24,11 @@ export default function AvailableJobsCard({
     setImageUrl(imagePath);
   }, []);
 
-  const image = `${image_server}${localStorage.getItem(
+  const image = localStorage.getItem("session_token")
-    "session_token"
+    ? `${image_server}${localStorage.getItem("session_token")}/job/${
-  )}/job/${datas.job_uid}`;
+        datas.job_uid
+      }`
+    : "";
 
   return (
     <>

src/components/Cards/FamilyActiveJobsCard.jsx

@@ -5,7 +5,7 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
 
-export default function FamilyActiveJobsCard({ datas, hidden = false }) {
+export default function FamilyActiveJobsCard({ datas, hidden = false, image_server }) {
 
     let { pathname } = useLocation();
 
@@ -22,7 +22,8 @@ export default function FamilyActiveJobsCard({ datas, hidden = false }) {
         }
     };
 //debugger;
-    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
+    // const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
+    let image = `${image_server}${localStorage.getItem('session_token')}/job/${datas.origin_job_uid}`
     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">
@@ -31,10 +32,13 @@ export default function FamilyActiveJobsCard({ datas, hidden = false }) {
                     {/* thumbnail image */}
                     <div
                         className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+                        // style={{
+                        //     background: `url(${localImgLoad(
+                        //         `images/taskbanners/${bannerName}`
+                        //     )}) center / contain no-repeat`,
+                        // }}
                         style={{
-                            background: `url(${localImgLoad(
+                            background: `url(${image}) center / contain no-repeat`,
-                                `images/taskbanners/${bannerName}`
-                            )}) center / contain no-repeat`,
                         }}
                     >
               {/*          <div className="product-options flex justify-between relative">*/}

src/components/Cards/OfferCard.jsx

@@ -2,13 +2,20 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
-export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
+export default function OfferCard({
+  datas,
+  hidden = false,
+  setOfferPopout,
+  image_server,
+}) {
   let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
     datas?.currency
   );
 
+  let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`
+
   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">
@@ -18,9 +25,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
-              background: `url(${localImgLoad(
+              background: `url(${image}) center / contain no-repeat`,
-                `images/taskbanners/${datas?.banner || "default.jpg"}`
-              )}) center / contain no-repeat`,
             }}
           >
             {hidden && <div className="flex justify-center"></div>}
@@ -31,26 +36,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
           <h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
             {datas.title}
           </h1>
-          {/* countdown */}
+
-          {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-                        <div className="flex flex-col justify-between">
-                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
-                                Task Code
-                            </p>
-                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
-                                {datas.contract}
-                            </p>
-                        </div>
-                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
-                        <div className="flex flex-col justify-between">
-                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
-                                Remaining Time
-                            </p>
-                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
-                                <CountDown lastDate={datas.expire} />
-                            </p>
-                        </div>
-                    </div> */}
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
             <div className="grid grid-cols-2 gap-2">
               <div className="flex flex-col justify-between items-center border-r-2">
@@ -96,7 +82,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
         <button
           type="button"
           onClick={() =>
-            setOfferPopout({ show: true, data: { ...datas, thePrice } })
+            setOfferPopout({ show: true, data: { ...datas, thePrice, image } })
           }
           className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
         >

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -33,7 +33,7 @@ export default function FamilyManageTabs({
     loading: false,
     data: null,
   };
-console.log('accountDetails',accountDetails)
+// console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
     familyDetails: { ...initialDetailState },

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -201,7 +201,7 @@ const AssignTaskPopout = React.memo(
                 </svg>
               </button>
             </div>
-            {familyTask.loading ? (
+            {familyTask?.loading ? (
               <div className="h-[100px] w-full flex justify-center items-center">
                 <LoadingSpinner color="sky-blue" size="16" />
               </div>

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -69,7 +69,7 @@ export default function NewTasks({ formState, setFormState }) {
               onChange={handleInputChange}
               // onBlur={props.handleBlur}
             >
-              {currency.loading ? (
+              {currency?.loading ? (
                 <option className="text-slate-500 text-[13.975px]" value="">
                   Loading...
                 </option>

src/components/FamilyAcc/FamilyTable.jsx

@@ -87,7 +87,7 @@ export default function FamilyTable({
             </div>
             <div className="flex flex-col flex-[0.9]">
               <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                {`${firstname} ${lastname} (${age})`}
+                {`${firstname} ${lastname} (${age < 10 ? `0${age}` : age})`}
               </h1>
               <span className="text-sm text-thin-light-gray">
                 Added: <span className="text-purple ml-1">{addedDate}</span>

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -54,7 +54,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = value.banner ? value.banner : "default.jpg";
+                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -64,9 +64,7 @@ export default function FamilyPending({
                             <div className="flex space-x-2 items-center w-full">
                               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={localImgLoad(
+                                  src={image}
-                                    `images/taskbanners/${image}`
-                                  )}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -67,9 +67,7 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = value.banner
+                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
-                            ? value.banner
-                            : "default.jpg";
                           return (
                             <tr
                               key={index}
@@ -79,9 +77,7 @@ export default function FamilyTasks({
                                 <div className="flex space-x-2 items-center w-full">
                                   <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                     <img
-                                      src={localImgLoad(
+                                      src={image}
-                                        `images/taskbanners/${image}`
-                                      )}
                                       alt="data"
                                       className="w-full h-full rounded-full"
                                     />

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -67,6 +67,8 @@ const FamilyWaitlist = memo(
                       const selectedImage = require(`../../../assets/images/family/${
                         value?.banner || "default.jpg"
                       }`);
+                      console.log('VALUE', value)
+                      // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"

src/components/FamilyAcc/index.jsx

@@ -151,7 +151,7 @@ export default function FamilyAcc() {
                 >
                   Family Accounts
                 </span>
-                {familyList.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
+                {familyList?.result_list?.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
                   !loader && (
                     <button
                       onClick={popUpHandler}

src/components/Helpers/Icons.jsx

@@ -478,13 +478,13 @@ export default function Icons({ name }) {
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
-          stroke-width="1.5"
+          strokeWidth="1.5"
           stroke="currentColor"
           className="w-4 h-4"
         >
           <path
-            stroke-linecap="round"
+            strokeLinecap="round"
-            stroke-linejoin="round"
+            strokeLinejoin="round"
             d="M8.25 4.5l7.5 7.5-7.5 7.5"
           />
         </svg>

src/components/Home/FamilyActiveLSlde.jsx

@@ -4,7 +4,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import FamilyActiveJobsCard from "../Cards/FamilyActiveJobsCard";
 
-export default function FamilyActiveLSlde({ className, trending }) {
+export default function FamilyActiveLSlde({ className, trending, image_server }) {
     const settings = {
         arrows: false,
         slidesToShow: 3,
@@ -98,7 +98,7 @@ export default function FamilyActiveLSlde({ className, trending }) {
                     {trending &&
                         trending.length > 0 &&
                         trending.map((item) => (
-                            <FamilyActiveJobsCard key={item.id} datas={item} />
+                            <FamilyActiveJobsCard key={item.id} datas={item} image_server={image_server} />
                         ))}
                 </SliderCom>
             </div>

src/components/Home/FamilyDash.jsx

@@ -4,18 +4,22 @@ import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
-  console.log("PROPS IN FAMILY DASH->", familyOffers);
+  // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
 
   const trending = MyActiveJobList;
   return (
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
-        {familyOffers && familyOffers.length > 0 && (
+        {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
-          <MyOffersFamilyTable familyOffers={familyOffers} className="mb-10" />
+          <MyOffersFamilyTable
+            familyOffers={familyOffers?.result_list}
+            image_server={familyOffers?.session_image_server}
+            className="mb-10"
+          />
         )}
         {trending && trending.length > 0 && (
-          <FamilyActiveLSlde trending={trending} className="mb-10" />
+          <FamilyActiveLSlde trending={trending} className="mb-10" image_server={familyOffers?.session_image_server} />
         )}
 
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}

src/components/Home/FullAccountDash.jsx

@@ -34,6 +34,7 @@ export default function FullAccountDash(props) {
             <MyJobTable
               ActiveJobList={props.MyActiveJobList}
               Account={userDetails}
+              imageServer={props.offersList?.data?.session_image_server}
             />
           </>
         ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (

src/components/Home/index.jsx

@@ -75,7 +75,7 @@ export default function Home(props) {
           <FamilyDash
             account={userDetails}
             commonHeadData={props.bannerList}
-            familyOffers={MyOffersList?.data?.result_list}
+            familyOffers={MyOffersList?.data}
             MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (

src/components/MyJobs/MyJobTable.jsx

@@ -108,9 +108,11 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       value?.currency
     );
 
-    const image = `${image_server}${localStorage.getItem(
+    const image = localStorage.getItem("session_token")
-      "session_token"
+      ? `${image_server}${localStorage.getItem("session_token")}/job/${
-    )}/job/${value.job_uid}`;
+          value.job_uid
+        }`
+      : "";
 
     return (
       <tr
@@ -218,7 +220,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
-      {MyJobList.loading ? (
+      {MyJobList?.loading ? (
         <LoadingSpinner size="16" color="sky-blue" />
       ) : (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">

src/components/MyTasks/MyJobTable.jsx

@@ -10,7 +10,7 @@ import localImgLoad from "../../lib/localImgLoad";
 const noTasksBg = require("../../assets/images/no-task-background.jpg");
 const noFamilyTasksBg = require("../../assets/images/family-no-task-background.jpg");
 
-export default function MyJobTable({ className, ActiveJobList, Account }) {
+export default function MyJobTable({ className, ActiveJobList, Account, imageServer }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
@@ -55,7 +55,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
       {!ActiveJobList?.data.length && accountType && (
         <div className="absolute inset-0 bg-black opacity-30"></div>
       )}
-      {ActiveJobList.loading ? 
+      {ActiveJobList?.loading ? 
         <div className="w-full h-[520px] flex items-center justify-center">
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
@@ -71,6 +71,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                 task?.currency_code,
                 task?.currency
               );
+              let image = `${imageServer}${localStorage.getItem('session_token')}/job/${task.origin_job_uid}`
               return (
                 <div
                   className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
@@ -80,7 +81,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                     <div className="flex space-x-2 items-center">
                       <div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                         <img
-                          src={localImgLoad(`images/taskbanners/${task?.banner}`)}
+                          src={image}
                           alt="data"
                           className="w-full h-full"
                         />

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -4,7 +4,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import FamilyOfferJobPopout from "../jobPopout/FamilyOfferJobPopout";
 
-export default function MyOffersFamilyTable({ className, familyOffers }) {
+export default function MyOffersFamilyTable({ className, familyOffers, image_server }) {
   let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
   const settings = {
     arrows: false,
@@ -117,6 +117,7 @@ export default function MyOffersFamilyTable({ className, familyOffers }) {
                       key={item.id}
                       datas={item}
                       setOfferPopout={setOfferPopout}
+                      image_server={image_server}
                     />
                   );
                 })}

src/components/MyTasks/MyOffersTable.jsx

@@ -122,7 +122,7 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
                       MyActiveOffersList?.result_list?.length > 0 &&
                       MyActiveOffersList.result_list.map((item) => {
                         return (
-                          <OfferCard key={item.id} datas={item} setOfferPopout={setOfferPopout} />
+                          <OfferCard key={item.id} datas={item} setOfferPopout={setOfferPopout} image_server={MyActiveOffersList.session_image_server} />
                         )
                       })}
               </SliderCom>

src/components/MyTasks/index.jsx

@@ -94,7 +94,7 @@ export default function MyTasks({
                 </button>
               }
             </div>
-          <MyJobTable ActiveJobList={ActiveJobList} Account={userDetails} />
+          <MyJobTable ActiveJobList={ActiveJobList} Account={userDetails} imageServer={MyActiveOffersList.session_image_server} />
         </div>
       </div>
     </Layout>

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -44,7 +44,7 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.offer_uid}`
+                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -170,9 +170,9 @@ function ConfirmNairaWithdraw({
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="green"
-                        stroke-width="2"
+                        strokeWidth="2"
-                        stroke-linecap="round"
+                        strokeLinecap="round"
-                        stroke-linejoin="round"
+                        strokeLinejoin="round"
                         className="feather feather-check-circle"
                       >
                         <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
@@ -186,9 +186,9 @@ function ConfirmNairaWithdraw({
                         width="100"
                         height="100"
                         stroke="red"
-                        stroke-width="2"
+                        strokeWidth="2"
-                        stroke-linecap="round"
+                        strokeLinecap="round"
-                        stroke-linejoin="round"
+                        strokeLinejoin="round"
                         className="feather feather-x-circle"
                       >
                         <circle cx="12" cy="12" r="10"></circle>

src/components/MyWallet/WalletBox.jsx

@@ -1,5 +1,7 @@
+import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
+import WalletItemCardFamily from "./WalletItemCardFamily";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -7,9 +9,27 @@ import WalletItemCard from "./WalletItemCard";
 export default function WalletBox({ wallet, payment, countries }) {
   const { loading, data } = wallet;
 
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const accountType = userDetails?.account_type === "FAMILY";
+
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
+        {accountType ?
+        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
+          {loading ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          ) : (
+            data.length > 0 && data.map((item) => (
+              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+                <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
+              </div>
+            ))
+          )}
+        </div>
+        :
         <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
@@ -23,6 +43,7 @@ export default function WalletBox({ wallet, payment, countries }) {
             ))
           )}
         </div>
+        }
       </div>
     </div>
   );

src/components/MyWallet/WalletItemCard.jsx

@@ -11,8 +11,7 @@ import WalletAction from "./WalletAction";
  * Renders a card displaying information about a wallet item.
  */
 export default function WalletItemCard({ walletItem, payment, countries }) {
-  const { userDetails } = useSelector((state) => state.userDetails);
+  
-  const accountType = userDetails?.account_type === "FAMILY";
   const dispatch = useDispatch();
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
 
@@ -91,13 +90,11 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
 
         <div className="my-2 w-full h-[1px] bg-white"></div>
 
-        {!accountType && (
+        <WalletAction
-          <WalletAction
+          walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
-            walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
+          payment={payment}
-            payment={payment}
+          openPopUp={openPopUp}
-            openPopUp={openPopUp}
+        />
-          />
-        )}
       </div>
 
       {creditPopup.show && (

src/components/MyWallet/WalletItemCardFamily.jsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
+import localImgLoad from "../../lib/localImgLoad";
+import { tableReload } from "../../store/TableReloads";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CreditPopup from "./Popup/CreditPopup";
+import WalletAction from "./WalletAction";
+
+/**
+ * Renders a card displaying information about a wallet item.
+ */
+export default function WalletItemCardFamily({ walletItem, payment, countries }) {
+
+  const dispatch = useDispatch();
+  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
+
+  /**
+   * Opens the credit popup.
+   * @param {Object} value - The value object.
+   */
+  const openPopUp = (value) => {
+    setCreditPopup({
+      show: true,
+      data: { ...value },
+    });
+  };
+
+  /**
+   * Closes the credit popup and dispatches a table reload action.
+   */
+  const closePopUp = () => {
+    setCreditPopup({ show: false, data: {} });
+    dispatch(tableReload({ type: "WALLETTABLE" }));
+  };
+
+  const currentWalletCurrency = countries
+    .map((country) => country)
+    .filter((country) => country[0] === walletItem.country);
+
+  const image = walletItem.code
+    ? `${walletItem.code.toLowerCase()}.svg`
+    : "default.png";
+
+  return (
+    <>
+      <div
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        style={{
+          background: `url(${background}) 0% 0% / cover no-repeat`,
+        }}
+      >
+        <div className="wallet w-full flex justify-between items-start gap-3">
+          <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[150px] max-h-min md:max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+            <img
+              src={localImgLoad(`images/currency/${image}`)}
+              className="w-full h-full"
+              alt="currency-icon"
+            />
+          </div>
+          <div className="balance w-full mt-2 flex justify-center">
+            <div className="">
+              <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide mb-2 sm:mb-6">
+                Current Balance
+              </p>
+              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
+                {PriceFormatter(
+                  walletItem.amount * 0.01,
+                  walletItem.code,
+                  undefined,
+                  "text-[2rem]"
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
+          HOLDINGS :{" "}
+          <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
+            {PriceFormatter(
+              walletItem.escrow * 0.01,
+              walletItem.code,
+              undefined,
+              "text-[2rem]"
+            )}
+          </span>
+        </p>
+
+        <div className="my-2 w-full h-[1px] bg-white"></div>
+
+           {/* <WalletAction
+             walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}
+             payment={payment}
+             openPopUp={openPopUp}
+           /> */}
+      </div>
+
+      {creditPopup.show && (
+        <CreditPopup
+          details={creditPopup.data}
+          walletItem={walletItem}
+          onClose={closePopUp}
+          situation={openPopUp}
+        />
+      )}
+    </>
+  );
+}

src/components/Partials/Header.jsx

@@ -36,9 +36,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
-  const image = `${userDetails.session_image_server}${localStorage.getItem(
+  const image = localStorage.getItem("session_token")
-    "session_token"
+    ? userDetails.account_type === "FAMILY"
-  )}/profile/${userDetails.uid}`;
+      ? `${userDetails.session_image_server}${localStorage.getItem(
+          "session_token"
+        )}/family/${sessionStorage.getItem("family_uid")}`
+      : `${userDetails.session_image_server}${localStorage.getItem(
+          "session_token"
+        )}/profile/${userDetails.uid}`
+    : "";
+
+  // 9308RDR122
 
   const handlerBalance = () => {
     setbalanceValue.toggle();

src/components/Partials/Layout.jsx

@@ -23,6 +23,7 @@ export default function Layout({ children }) {
     localStorage.removeItem("session_token");
     localStorage.removeItem("member_id");
     localStorage.removeItem("uid");
+    sessionStorage.removeItem("family_uid");
     // localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -49,9 +49,11 @@ export default function PersonalInfoTab({
 }) {
   let { userDetails } = useSelector((state) => state.userDetails);
 
-  const image = `${userDetails.session_image_server}${localStorage.getItem(
+  const image = localStorage.getItem("session_token")
-    "session_token"
+    ? `${userDetails.session_image_server}${localStorage.getItem(
-  )}/profile/${userDetails.uid}`;
+        "session_token"
+      )}/profile/${userDetails.uid}`
+    : "";
 
   const apiCall = new usersService();
 

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -101,6 +101,8 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
       });
   };
 
+  console.log(details)
+
   return (
     <ModalCom action={onClose} situation={situation}>
       <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">
@@ -138,7 +140,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
             <div className="flex gap-2">
                 <div className="image-wrapper w-32">
-                    <img className="w-full h-auto" src={localImgLoad(`images/taskbanners/${details.banner}`)} alt='Banner-Image' />
+                    <img className="w-full h-auto" src={details?.image} alt='banner' />
                 </div>
                 <div className="details-wrapper">
                     <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">

src/middleware/AuthRoute.jsx

@@ -21,10 +21,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable } = useSelector((state) => state.tableReload);
+  const { jobListTable, walletTable } = useSelector(
+    (state) => state.tableReload
+  );
 
   const {
-    userDetails: { username, uid, session },
+    userDetails: { username, uid, session},
   } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
   let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
@@ -35,6 +37,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       localStorage.removeItem("uid");
       localStorage.removeItem("member_id");
       localStorage.removeItem("session_token");
+      sessionStorage.removeItem("family_uid");
       navigate("/login", { replace: true }); // redirects user to login page after session expires
     };
 
@@ -181,13 +184,15 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   useEffect(() => {
     const getMyWalletList = async () => {
-      dispatch(updateWalletDetails({ loading: true, data:[] }));
+      dispatch(updateWalletDetails({ loading: true, data: [] }));
       try {
         const res = await apiCall.getUserWallets();
         console.log("wallet - >", res.data);
-        dispatch(updateWalletDetails({ loading: false, data:res.data?.result_list }));
+        dispatch(
+          updateWalletDetails({ loading: false, data: res.data?.result_list })
+        );
       } catch (error) {
-        dispatch(updateWalletDetails({ loading: false, data:[] }));
+        dispatch(updateWalletDetails({ loading: false, data: [] }));
         console.log("Error getting mode");
       }
     };