added rounded edges

.env

@@ -72,7 +72,8 @@ REACT_APP_APPLE_SOCIAL_LOGIN=0
 REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
 #File Handling
-REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 #Auth Text(s)
@@ -124,4 +125,7 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
+REACT_APP_CUSTOMTIMER=90
+
+#SHOW OR HIDE MY PAGE LINK ROUTE
+REACT_APP_SHOW_USER_PAGE=1

.env.development

@@ -43,7 +43,9 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
-REACT_APP_MAX_FILE_SIZE=1000000
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -92,4 +94,7 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
+REACT_APP_CUSTOMTIMER=90
+
+#SHOW OR HIDE MY PAGE LINK ROUTE
+REACT_APP_SHOW_USER_PAGE=1

.env.production

@@ -50,7 +50,9 @@ REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin
 
 DISABLE_ESLINT_PLUGIN=true
 
-REACT_APP_MAX_FILE_SIZE=1000000
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -98,4 +100,7 @@ REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
+REACT_APP_CUSTOMTIMER=90
+
+#SHOW OR HIDE MY PAGE LINK ROUTE
+REACT_APP_SHOW_USER_PAGE=0

src/Routers.jsx

@@ -67,6 +67,7 @@ import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
 import FamilyWalletPage from "./views/FamilyWalletPage";
 import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
 import FamGamesPage from "./views/FamGamesPage";
+import FamilyRoutesPage from "./views/FamilyRoutesPage";
 
 export default function Routers() {
   return (
@@ -147,11 +148,7 @@ export default function Routers() {
           <Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
           <Route exact path="/fam-games" element={<FamGamesPage />} />
           <Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
-          <Route
-            exact
-            path="/familysettings"
-            element={<FamilySettingsPage />}
-          />
+
           <Route exact path="/pastdue" element={<MyPastDueTasksPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
@@ -170,8 +167,12 @@ export default function Routers() {
             path="/my-review-jobs"
             element={<MyReviewDueJobsPage />}
           />
-          <Route exact path="/acc-family" element={<FamilyAccPage />} />
+
+          {/* <Route exact path='/acc-family' element={<FamilyAccPage />} />
           <Route exact path="/acc-family/activities" element={<FamilyActivitiesPage />} />
+          <Route exact path="/acc-family/familysettings" element={<FamilySettingsPage />} /> */}
+          <Route path='/acc-family/*' element={<FamilyRoutesPage />} />
+
           <Route exact path="/manage-family" element={<FamilyManagePage />} />
           <Route exact path="/start-job" element={<StartJob />} />
           <Route exact path="/yourpage" element={<YourPages />} />

src/components/AddJob/AddJob.jsx

@@ -92,13 +92,13 @@ function AddJob({ popUpHandler, categories }) {
       >
         {(props) => {
           return (
-            <Form>
-              <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
+            <Form className='contents'>
+              <div className="add-job p-5 w-full h-full rounded-md flex flex-col justify-between overflow-y-auto">
                 <div className="flex flex-col-reverse sm:flex-row">
                   <div className="fields w-full">
                     {/* inputs starts here */}
                     <div className="xl:flex xl:space-x-7 mb-[5px]">
-                      <div className="field w-full mb-6 xl:mb-0">
+                      <div className="field w-full mb-[5px] xl:mb-0">
                         <label
                           htmlFor="country"
                           className="job-label job-label-flex"
@@ -114,7 +114,7 @@ function AddJob({ popUpHandler, categories }) {
                           id="country"
                           name="country"
                           value={props.values.country}
-                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
+                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
                           onBlur={props.handleBlur}
                           disabled={walletDetails.data.length == 1}
@@ -159,7 +159,7 @@ function AddJob({ popUpHandler, categories }) {
                       </div>
 
                       {/* Price */}
-                      <div className="field w-full">
+                      <div className="field w-full mb-[5px] xl:mb-0">
                         <InputCom
                           fieldClass="px-6 text-right flex"
                           label="Price"
@@ -177,6 +177,42 @@ function AddJob({ popUpHandler, categories }) {
                           }
                         />
                       </div>
+
+                      {/* Timeline */}
+                      <div className="field w-full mb-[5px] xl:mb-0">
+                        <label
+                            className="job-label job-label-flex"
+                            htmlFor="timeline_days"
+                          >
+                            Timeline
+                            <span className="text-green-700 text-[12px] tracking-wide">
+                              - Duration
+                            </span>
+                          </label>
+
+                        <Field
+                          component="select"
+                          name="timeline_days"
+                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
+                            props.errors.timeline_days &&
+                            props.touched.timeline_days
+                              ? "border-[#ff0a0a63] shadow-red-500 animate-shake"
+                              : "dark:border-[#5e6278]"
+                          }`}
+                          value={props.values.timeline_days}
+                        >
+                          <option value="" className='text-slate-500 text-lg'>Select Duration</option>
+                          {publicArray.map(({ name, duration }, idx) => (
+                            <option
+                              key={idx}
+                              className="text-slate-500 text-lg"
+                              value={duration}
+                            >
+                              {name}
+                            </option>
+                          ))}
+                        </Field>
+                      </div>
                     </div>
 
                     {/* Title  */}
@@ -288,7 +324,7 @@ function AddJob({ popUpHandler, categories }) {
                       </div>
                     </div>
 
-                    <div className="field w-full mb-[5px]">
+                    {/* <div className="field w-full mb-[5px]">
                       <div className={`flex items-center justify-between mb-2.5`}>
                         <label
                           className="job-label"
@@ -323,7 +359,7 @@ function AddJob({ popUpHandler, categories }) {
                           </option>
                         ))}
                       </Field>
-                    </div>
+                    </div> */}
                     {/* inputs ends here */}
                   </div>
                 </div>

src/components/AuthPages/AuthLayout2.jsx

@@ -18,14 +18,14 @@ export default function LoginLayout({ slogan, children }) {
         backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
+      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
         {/* <div 
-            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
         </div> */}
-        <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
-          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 rounded-[0.475rem]">
+        <div className="p-5 sm:p-7 flex place-content-center xl:col-start-2">
+          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}
             </div>

src/components/AuthPages/Login/index2.jsx

@@ -145,6 +145,7 @@ export default function Login() {
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
+        localStorage.setItem("wallet_available_status", `${res.data.wallet_available_status}`);
         if (res.data?.account_type == "FAMILY") {
           sessionStorage.setItem("family_uid", res.data?.family_uid);
           sessionStorage.setItem("parent_uid", res.data?.parent_uid);

src/components/AuthPages/SignUp/index2.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text_new.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
@@ -180,11 +180,11 @@ export default function SignUp() {
                 </span>
               </div>
               <div className="w-full flex items-center gap-2">
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                <div className="border-b border-[#eff2f5] w-[48%]"></div>
+                <span className="text-[#b5b5c3] font-medium text-[0.7rem]">
                   OR
                 </span>
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                <div className="border-b border-[#eff2f5] w-[48%]"></div>
               </div>
               <div className="input-area">
                 <SelectOption
@@ -413,7 +413,7 @@ const SelectOption = ({
           disabled={disable}
           name={name}
           id={name}
-          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          className="px-6 input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-dark-gray bg-[#f5f8fa] dark:bg-[#FAFAFA] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >

src/components/AuthPages/VerifyLink/index2.jsx

@@ -1,12 +1,18 @@
 import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
+import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
+import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function VerifyLink() {
+
+  const dispatch = useDispatch();
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [msgError, setMsgError] = useState("");
@@ -49,12 +55,14 @@ export default function VerifyLink() {
           ) {
             localStorage.setItem("email", `${data?.email}`);
             localStorage.setItem("member_id", `${data?.member_id}`);
+            localStorage.setItem("uid", `${data?.uid}`);
             localStorage.setItem("session_token", `${data?.session}`);
-            localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid);
-
-            navigate("/", { replace: true });
-            setLinkLoader(false);
+            localStorage.setItem("wallet_available_status", `${data?.wallet_available_status}`);
+            dispatch(updateUserDetails({ ...data }));
+            setTimeout(() => {
+              navigate("/", { replace: true });
+              setLinkLoader(false);
+            }, 2000);
           } else {
             setLinkLoader(false);
             setMsgError("Invalid Link or Password Combination");
@@ -119,7 +127,14 @@ export default function VerifyLink() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         {pageLoader ? (
-          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          <div className='flex flex-col justify-center items-center gap-4'>
+            <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            <div className='flex flex-col justify-center items-center'>
+              <LoadingSpinner height='h-40' size='8' />
+              <p>Loading...</p>
+              <p>please do not refresh</p>
+            </div>
+          </div>
         ) : (
           <div className="w-full">
             <div className="mb-12">

src/components/Cards/AvailableJobsCard.jsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import { useSelector } from "react-redux";
+import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 
 export default function AvailableJobsCard({
   className,
@@ -11,8 +13,15 @@ export default function AvailableJobsCard({
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
+  const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
+  
   const [imageUrl, setImageUrl] = useState("");
 
+  const {
+    userDetails: { uid },
+  } = useSelector((state) => state?.userDetails); // GETS USER DETAILS
+
+
   let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
@@ -34,62 +43,68 @@ export default function AvailableJobsCard({
     <>
       {contentDisplay == "grid" ? (
         <div
-          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+          className={`card-style-two w-full p-[10px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
             className || ""
           }`}
         >
           <div
             onClick={() => {
-              setMarketPopUp({ show: true, data: datas });
+              datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
             }}
-            className="flex flex-col justify-between w-full h-full"
+            className="flex flex-col gap-2 justify-between w-full h-full"
           >
-            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-              {datas.title}
-            </h1>
-
-            <div className="card-two-info flex justify-between items-center">
-              <div className="owned-by flex space-x-2 items-center">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3">
-                    Added
-                  </p>
-                  <p className="text-base   text-dark-gray dark:text-white">
-                    {new Date(datas.offer_added).toLocaleDateString()}
-                  </p>
-                </div>
+            <div className='w-full flex items-center gap-4'>
+              <div className='min-w-[60px] min-h-[60px] max-w-[60px] max-h-[60px] rounded-full overflow-hidden'>
+                <img className='w-full h-full object-cover' src={image} alt='Job Image' />
               </div>
-              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                    Expires
-                  </p>
-                  <p className="text-base text-dark-gray dark:text-white text-right">
-                    {new Date(datas.expire).toLocaleDateString()}
-                  </p>
+              <div className='w-full'>
+                <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+                  {datas.title}
+                </h1>
+
+                <div className="card-two-info flex justify-between items-center">
+                  <div className="owned-by flex space-x-2 items-center">
+                    <div>
+                      <p className="text-thin-light-gray text-sm leading-3">
+                        Added
+                      </p>
+                      <p className="text-base   text-dark-gray dark:text-white">
+                        {new Date(datas.offer_added).toLocaleDateString()}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
+                  <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                    <div>
+                      <p className="text-thin-light-gray text-sm leading-3 text-right">
+                        Expires
+                      </p>
+                      <p className="text-base text-dark-gray dark:text-white text-right">
+                        {new Date(datas.expire).toLocaleDateString()}
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
             <div className="thumbnail-area w-full">
               <div
-                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
-                style={{
-                  backgroundImage: `url('${image}')`,
-                }}
+                className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
+                // style={{
+                //   backgroundImage: `url('${image}')`,
+                // }}
               >
-                <div className="flex justify-center bg-slate-100 p-2 rounded-md">
-                  {datas.description}
+                <div className="flex flex-col min-h-full bg-slate-100 p-2 rounded-md">
+                  <p>{datas.description}</p>
                 </div>
               </div>
             </div>
             <div className="details-area">
-              <div className="product-two-options flex justify-between mb-5 relative"></div>
-
+              {/* <div className="product-two-options flex justify-between mb-5 relative"></div> */}
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">
                   <div>
-                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                    <p className="w-full font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                       {/* {thePrice} | {datas.timeline_days} day(s) */}
                       {thePrice}
                     </p>
@@ -102,15 +117,27 @@ export default function AvailableJobsCard({
                   </div>
                 </div>
                 <div>
-                  <button
+                  {datas.market_uid != uid ?
+                    <button
                     type="button"
-                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                      className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                      onClick={() => {
+                        setMarketPopUp({ show: true, data: datas });
+                      }}
+                    >
+                      View
+                    </button>
+                    :
+                    <button
+                    type="button"
+                    className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
                     onClick={() => {
-                      setMarketPopUp({ show: true, data: datas });
+                      setJobPopout({ show: true, data: datas });
                     }}
-                  >
-                    View
-                  </button>
+                    >
+                      Manage
+                    </button>
+                  }
                 </div>
               </div>
             </div>
@@ -125,7 +152,7 @@ export default function AvailableJobsCard({
             <div className="flex flex-col flex-[0.9]">
               <h1
                 onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
+                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
                 }}
                 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
               >
@@ -134,7 +161,7 @@ export default function AvailableJobsCard({
 
               <div
                 onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
+                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
                 }}
                 className="my-2"
               >
@@ -162,8 +189,9 @@ export default function AvailableJobsCard({
             </div>
           </div>
           <div className="">
+            {datas.market_uid != uid ?
             <button
-              type="button"
+            type="button"
               className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
               onClick={() => {
                 setMarketPopUp({ show: true, data: datas });
@@ -171,6 +199,17 @@ export default function AvailableJobsCard({
             >
               View
             </button>
+            :
+            <button
+            type="button"
+            className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
+            onClick={() => {
+              setJobPopout({ show: true, data: datas });
+            }}
+            >
+              Manage
+            </button>
+            }
           </div>
         </div>
       )}
@@ -183,6 +222,18 @@ export default function AvailableJobsCard({
           situation={marketPopUp.show}
         />
       )}
+
+      {/* Active Job Popout */}
+      {jobPopout.show && (
+        <PendingJobsPopout
+          details={datas}
+          onClose={() => {
+            setJobPopout({ show: false, data: {} });
+          }}
+          situation={jobPopout.show}
+        />
+      )}
+      {/* End of Active Job Popout */}
     </>
   );
 }

src/components/Dashboards/AccountDashboard.jsx

@@ -45,7 +45,7 @@ const AccountDashboard = ({ className, bannerList }) => {
         {getLowerBanner?.map((props, idx) => {
           let image = getImage(props);
 
-          let { short_title, short_description, short_button_text, link_path } =
+          let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
             props;
 
           return (
@@ -56,6 +56,8 @@ const AccountDashboard = ({ className, bannerList }) => {
                 title={short_title}
                 desc={short_description}
                 link_path={link_path}
+                card_type={card_type}
+                blog_id={blog_id}
               />
             </div>
           );
@@ -102,24 +104,26 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   );
 };
 
-const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
+const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type, blog_id, key }) => {
+  const newLinkPath = card_type == 'BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path
+
   return (
     <div
       key={key}
       className="flex flex-col bg-white shadow-md h-full rounded-xl dark:border-[#5356fb29] dark:bg-dark-white"
     >
-      <div className="w-full flex justify-between border-b border-slate-300 p-2">
-        <div className="h-[130px] flex justify-between items-center">
+      <div className="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
+        <div className="min-h-[150px] sm:min-h-[130px] flex justify-between items-center">
           <div className="px-2 flex flex-col gap-2 dark:text-white">
-            <Link to={link_path} className="text-lg font-bold">
+            <Link to={newLinkPath} className="text-lg font-bold">
               {title}
             </Link>
-            <p to={link_path} className="text-sm">
+            <p to={newLinkPath} className="text-sm">
               {desc}
             </p>
           </div>
         </div>
-        <Link to={link_path} className="w-[150px] h-[100px]">
+        <Link to={newLinkPath} className="w-[150px] h-[100px]">
           <img
             src={image}
             alt="banner-img"
@@ -129,7 +133,7 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
         </Link>
       </div>
       <div className="flex justify-between w-full px-2 items-center">
-        <Link to={link_path} className="text-slate-300 font-semibold text-sm">
+        <Link to={newLinkPath} className="text-slate-300 font-semibold text-sm">
           {btn}
         </Link>
         <button className="flex items-center justify-center gap-2">

src/components/FamilyAcc/FamilyListSettings.jsx

@@ -0,0 +1,346 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+  } from "react";
+  import { Link, useOutletContext } from "react-router-dom";
+  import usersService from "../../services/UsersService";
+  import Icons from "../Helpers/Icons";
+  import InputCom from "../Helpers/Inputs/InputCom";
+  import ModalCom from "../Helpers/ModalCom";
+  import Layout from "../Partials/Layout";
+  import FamilyTableSettings from "./FamilyTableSettings";
+  import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
+  
+  export default function FamilyListSettings() {
+
+    const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
+
+    // State to store the selected year and month
+    const [selectedYear, setSelectedYear] = useState("");
+    const [selectedMonth, setSelectedMonth] = useState("");
+    // const [familyList, setFamilyList] = useState({});
+    // const [loader, setLoader] = useState(false);
+    const [popUp, setPopUp] = useState(false);
+    // const [listReload, setListReload] = useState(false);
+    const [msgErr, setMsgErr] = useState("");
+    const [formData, setFormData] = useState({
+      first_name: "",
+      last_name: "",
+    });
+  
+    const apiCall = useMemo(() => new usersService(), []);
+  
+    const popUpHandler = () => {
+      setPopUp((prev) => !prev);
+    };
+  
+    // Handle year selection
+    const handleYearChange = (e) => {
+      setSelectedYear(e.target.value);
+    };
+  
+    // Handle month selection
+    const handleMonthChange = (e) => {
+      setSelectedMonth(e.target.value);
+    };
+  
+    const handleInputChange = (event) => {
+      const { name, value } = event?.target;
+      setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
+    };
+  
+    // use the useEffect hook to clear the selected month if the year changes (to ensure consistency)
+    useEffect(() => {
+      if (selectedYear === "" && selectedMonth !== "") {
+        setSelectedMonth("");
+      }
+    }, [selectedYear]);
+  
+    const addMember = async () => {
+      const { first_name, last_name } = formData;
+      setLoader(true);
+      try {
+        if (first_name !== "" && last_name !== "") {
+          const reqData = {
+            firstname: first_name,
+            lastname: last_name,
+            year: +selectedYear,
+            month: +selectedMonth,
+          };
+  
+          const res = await apiCall.addFamily(reqData);
+          const { data } = res;
+  
+          if (data?.internal_return > 0 && data?.status === "OK") {
+            setLoader(false);
+            setListReload((prev) => !prev);
+            popUpHandler();
+          } else {
+            setLoader(false);
+            setMsgErr("Sorry, something went wrong");
+          }
+        } else {
+          setLoader(false);
+          setMsgErr("Please fill in the fields");
+        }
+      } catch (error) {
+        setLoader(false);
+        setMsgErr("An error occurred");
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setMsgErr(null);
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+        setFormData({
+          first_name: "",
+          last_name: "",
+        });
+        setSelectedMonth("");
+        setSelectedYear("");
+      }
+    };
+  
+    // const memberList = useCallback(async () => {
+    //   setLoader(true);
+    //   try {
+    //     const res = await apiCall.familyListings();
+    //     const { data } = res;
+    //     if (data?.internal_return >= 0 && data?.status === "OK") {
+    //       const { result_list, session_image_server } = data;
+    //       setFamilyList({ result_list, session_image_server });
+    //       sessionStorage.setItem("family_list", JSON.stringify(result_list))
+    //       setLoader(false);
+    //     } else {
+    //       return;
+    //     }
+    //   } catch (error) {
+    //     setLoader(false);
+    //     throw new Error(error);
+    //   }
+    // }, [apiCall]);
+  
+    // useEffect(() => {
+    //   let checkMemberList = true;
+    //   if (checkMemberList) {
+    //     memberList();
+    //   }
+    //   return () => {
+    //     checkMemberList = false;
+    //   };
+    // }, [listReload, memberList]);
+  
+    return (
+      <>
+        {/*<CommonHead />*/}
+        <div className="notification-page w-full">
+          <div className="notification-wrapper w-full">
+            <FamilyTableSettings
+            familyList={familyList?.result_list}
+            loader={loader}
+            popUpHandler={popUpHandler}
+            imageServer={familyList?.session_image_server}
+            />
+          </div>
+        </div>
+        {popUp && (
+          <ModalCom action={popUpHandler} situation={popUp}>
+            <FamilyForm
+              popUpHandler={popUpHandler}
+              value={formData}
+              selectedYear={selectedYear}
+              selectedMonth={selectedMonth}
+              monthHandler={handleMonthChange}
+              yearHandler={handleYearChange}
+              inputHandler={handleInputChange}
+              msgErr={msgErr}
+              onClick={addMember}
+              loader={loader}
+            />
+          </ModalCom>
+        )}
+      </>
+    );
+  }
+  
+  const FamilyForm = ({
+    value: { first_name, last_name },
+    ageValue,
+    inputHandler,
+    selectedMonth,
+    selectedYear,
+    monthHandler,
+    yearHandler,
+    msgErr,
+    loader,
+    onClick,
+    popUpHandler,
+  }) => {
+    return (
+      <div className="logout-modal-wrapper w-11/12 lg:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
+            Add Members
+          </h1>
+          <button
+            type="button"
+            className="modal-close-btn"
+            onClick={popUpHandler}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+        <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4">
+          <InputCom
+            placeholder="Firstname"
+            label="First Name:"
+            name="first_name"
+            type="text"
+            parentClass="flex items-center gap-1 w-full"
+            labelClass="flex-[0.4] mb-0"
+            inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
+            fieldClass="px-2"
+            value={first_name}
+            inputHandler={inputHandler}
+          />
+          <InputCom
+            placeholder="Lastname"
+            label="Last Name:"
+            name="last_name"
+            type="text"
+            parentClass="flex items-center gap-1 w-full"
+            labelClass="flex-[0.4] mb-0"
+            inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
+            fieldClass="px-2"
+            value={last_name}
+            inputHandler={inputHandler}
+          />
+          <div className="input-com mb-7 flex flex-col gap-1 w-full">
+            {/* Age dropdown */}
+            <div className="">
+              <label
+                className="job-label"
+                htmlFor="age-selection"
+              >
+                Birthday: (Year/Month)
+              </label>
+            </div>
+            <YearMonthDropdowns
+              handleMonthChange={monthHandler}
+              handleYearChange={yearHandler}
+              selectedMonth={selectedMonth}
+              selectedYear={selectedYear}
+            />
+          </div>
+          {msgErr && (
+            <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-xs font-light leading-[19.5px]">
+              {msgErr}
+            </div>
+          )}
+          <div className="signin-area w-full">
+            <div className="flex justify-center">
+              <button
+                type="button"
+                onClick={onClick}
+                // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+              >
+                {loader ? (
+                  <div className="signup btn-loader"></div>
+                ) : (
+                  <span>Add</span>
+                )}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  };
+  
+  const CloseIcon = () => (
+    <svg
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+      className="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+        fill=""
+        fillOpacity="0.6"
+      />
+      <path
+        d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+        fill="#"
+        fillOpacity="0.6"
+      />
+    </svg>
+  );
+  
+  function YearMonthDropdowns({
+    selectedMonth,
+    selectedYear,
+    handleMonthChange,
+    handleYearChange,
+  }) {
+    // Get the current year
+    const currentYear = new Date().getFullYear();
+  
+    // Generate an array of years from the current year to (currentYear - 19)
+    const years = Array.from({ length: 17 }, (_, index) => currentYear - index);
+  
+    // Array of month names
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+  
+    return (
+      <div className="flex max-w-[330px] w-full self-end gap-4">
+        <select
+          id="yearDropdown"
+          value={selectedYear}
+          onChange={handleYearChange}
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
+          // size="5"
+        >
+          <option value="">Select a Year</option>
+          {years.map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+  
+        <select
+          id="monthDropdown"
+          value={selectedMonth}
+          onChange={handleMonthChange}
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
+          // size="5"
+        >
+          <option value="">Select a Month</option>
+          {months.map((month, index) => (
+            <option key={month} value={index + 1}>
+              {month}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+  

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -176,6 +176,9 @@ export default function FamilyManageTabs({
         familyData={familyWaitList}
         accountDetails={accountDetails}
         setUpdatePage={setUpdatePage}
+        jobList={jobList}
+        setActiveTask={setActiveTask}
+        activeTask={activeTask}
       />
     ),
     Pending: (

src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -85,13 +85,13 @@ export default function AssignMediaTask({
               >
                 {(props) => {
                   return (
-                        <Form>
+                        <Form className='contents'>
                             <>
                                 <div
-                                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
+                                className={`job-action-modal-body w-full h-full overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
-                                    <div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                    <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                                         {commonMedia?.data?.length ? (
                                         commonMedia?.data?.map((item, index) => (
                                             <div
@@ -124,7 +124,7 @@ export default function AssignMediaTask({
                                 {/*Right Hand Side for details && Task Type === select */}
                                     <>
                                     {commonMedia?.data?.length > 0 ? (
-                                        <div className="p-4 py-0 h-full">
+                                        <div className="p-4 py-0 h-auto">
                                         <div className="w-full">
                                             <div className="mb-3 w-full">
                                             <label className="job-label">

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -3,6 +3,7 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
 import { NewTasks } from './forms'
 import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
+import AttachFile from '../../attachmentCom/AttachFile';
 
 export default function AssignPrevNewTask({
     jobList,
@@ -21,7 +22,7 @@ export default function AssignPrevNewTask({
 
 
   let imageSrc = (localStorage.getItem("session_token")
-  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask.data.job_uid}` : ""); // FOR GETTING JOB IMAGE
+  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask?.data?.job_uid}` : ""); // FOR GETTING JOB IMAGE
 
   return (
     <>
@@ -32,7 +33,7 @@ export default function AssignPrevNewTask({
             ) : (
               <>
                 <div
-                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
+                  className={`job-action-modal-body w-full h-full overflow-y-auto md:grid ${
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >
@@ -63,7 +64,7 @@ export default function AssignPrevNewTask({
                     </div>
                     {/* Task Type === select */}
                     {taskType == "select" && (
-                      <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                      <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                         {jobList?.data?.length ? (
                           jobList?.data?.map((item, index) => (
                             <div
@@ -120,68 +121,67 @@ export default function AssignPrevNewTask({
                                 value={activeTask?.data?.description}
                               />
                             </div> */}
-                            <div className="my-3 w-full">
-                              <label className="job-label">
-                                Description
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
-                                {activeTask?.data?.description}
-                              </p>
-                            </div>
-                            <div className="grid grid-cols-2">
-                              <div className="w-full">
-                                <div className="my-3 w-full flex items-center gap-1">
-                                  <label className="job-label">
-                                    Reward
-                                  </label>
-                                  <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                    {PriceFormatter(
-                                      activeTask?.data?.price * 0.01,
-                                      activeTask?.data?.currency,
-                                      activeTask?.data?.curreny_code
-                                    )}
-                                  </p>
-                                </div>
+                            <div className='flex flex-col gap-2'>
+                              <div className="my-1 w-full">
+                                <label className="job-label">
+                                  Description
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
+                                  {activeTask?.data?.description}
+                                </p>
+                              </div>
+                              <div className="w-full grid grid-cols-2">
+                                <div className="w-full">
+                                  <div className="w-full flex items-center gap-1">
+                                    <label className="job-label">
+                                      Reward
+                                    </label>
+                                    <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                      {PriceFormatter(
+                                        activeTask?.data?.price * 0.01,
+                                        activeTask?.data?.currency,
+                                        activeTask?.data?.curreny_code
+                                      )}
+                                    </p>
+                                  </div>
 
-                                <div className="my-3 w-full flex items-center gap-1">
-                                  <label className="job-label">
-                                    Timeline
-                                  </label>
-                                  <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                  <div className="w-full flex items-center gap-1">
+                                    <label className="job-label">
+                                      Timeline
+                                    </label>
+                                    <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                  </div>
+                                </div>
+                                <div className="w-full flex items-center justify-center">
+                                  <div className="mb-1 w-24 max-h-24 rounded-2xl flex items-center justify-center">
+                                      <img 
+                                        className="w-full h-auto"
+                                        loading="lazy"
+                                        src={imageSrc} 
+                                        alt='job image' 
+                                      />
+                                  </div>
                                 </div>
                               </div>
-                              <div className="w-full flex items-center justify-center">
-                                <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
-                                    <img 
-                                      className="w-full h-auto"
-                                      loading="lazy"
-                                      src={imageSrc} 
-                                      alt='job image' 
-                                    />
-                                </div>
+                              
+                              {/* ATTACHMENT SECTION*/}
+                              <div className="w-full max-h-28">
+                                  <AttachFile data={activeTask.data} />
                               </div>
-                            </div>
-                            
-                            {/* Dummy, no value found for created! thus commented*/}
-                            {/* <div className="my-3 sm:flex items-center">
-                              <Detail
-                                label="Created"
-                                value={`Dummy, no value found for created!`}
-                              />
-                            </div> */}
 
-                            <div className="my-3">
-                              <label className="w-full job-label">
-                                Delivery Detail
-                              </label>
-                              <textarea
-                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                                rows="5"
-                                style={{ resize: "none" }}
-                                value={activeTask?.data?.job_detail}
-                                readOnly
-                                // onChange={handleInputChange}
-                              />
+                              <div className="my-3">
+                                <label className="w-full job-label">
+                                  Delivery Detail
+                                </label>
+                                <textarea
+                                  className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                                  rows="5"
+                                  style={{ resize: "none" }}
+                                  value={activeTask?.data?.job_detail}
+                                  readOnly
+                                  // onChange={handleInputChange}
+                                />
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -230,9 +230,9 @@ export default function AssignPrevNewTask({
                       ) : (
                         <button
                           type="button"
-                          disabled={requestStatus.loading}
+                          disabled={requestStatus.loading || requestStatus.status}
                           onClick={assignFamilyTask}
-                          className="custom-btn btn-gradient text-white"
+                          className={`custom-btn btn-gradient text-white ${requestStatus.status && 'opacity-50'}`}
                         >
                           Assign
                         </button>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,6 +1,6 @@
 import React, { Suspense, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useLocation, useOutletContext } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import { tableReload } from "../../../store/TableReloads";
 import ModalCom from "../../Helpers/ModalCom";
@@ -22,8 +22,12 @@ const AssignTaskPopout = ({
   jobList,
   activeTask,
   setActiveTask,
-  setUpdatePage,  
+  setUpdatePage,
+  familyList
 }) => {
+
+  const newJobList = {...jobList, data:jobList?.data?.filter(item => item?.job_mode == 'FAMILY')}
+  
   const {parentAssignJobToKid} = SocketValues()
 
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
@@ -44,9 +48,9 @@ const AssignTaskPopout = ({
 
   const dispatch = useDispatch();
 
-  const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
+  // const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
 
-  const familyList = getFamilySession?.map((member) => (
+  const famList = familyList?.map((member) => (
     <option key={member?.family_uid} value={member?.family_uid}>
       {member?.firstname} {member?.lastname}
     </option>
@@ -311,7 +315,7 @@ const AssignTaskPopout = ({
   return (
     <>
       <ModalCom action={action} situation={situation}>
-        <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-container">
           <div className="modal-header-con">
             <h1 className="modal-title">
               {details ? (
@@ -332,7 +336,7 @@ const AssignTaskPopout = ({
                       <option value="" className="">
                         Select a kid
                       </option>
-                      {familyList}
+                      {famList}
                     </select>
                   </div>
                 </div>
@@ -364,7 +368,7 @@ const AssignTaskPopout = ({
               </svg>
             </button>
           </div>
-          <div className="modal-body">
+          <div className="modal-body-wrapper p-[0!important]">
             <div className="px-4 py-2 w-full flex items-center gap-4">
               <button
                 name='task'
@@ -383,10 +387,10 @@ const AssignTaskPopout = ({
               Media
               </button>
             </div>
-            <div className="">
+            <div className="contents">
               {assignType == 'task' ?
                 <AssignPrevNewTask 
-                  jobList={jobList}
+                  jobList={newJobList}
                   requestStatus={requestStatus}
                   assignFamilyTask={assignFamilyTask}
                   taskType={taskType}

src/components/FamilyAcc/FamilyRoutes.jsx

@@ -0,0 +1,45 @@
+import React, {useState, useEffect} from "react";
+import { Outlet } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import usersService from "../../services/UsersService";
+
+
+export default function FamilyRoutes() {
+
+  const apiCall = new usersService();
+
+  const [loader, setLoader] = useState(false);
+
+  const [familyList, setFamilyList] = useState({});
+
+  const [listReload, setListReload] = useState(false);
+
+  const memberList = async () => {
+    setLoader(true);
+    try {
+      const res = await apiCall.familyListings();
+      const { data } = res;
+      if (data?.internal_return >= 0 && data?.status === "OK") {
+        const { result_list, session_image_server } = data;
+        setFamilyList({ result_list, session_image_server });
+        sessionStorage.setItem("family_list", JSON.stringify(result_list))
+        setLoader(false);
+      } else {
+        return;
+      }
+    } catch (error) {
+      setLoader(false);
+      throw new Error(error);
+    }
+  }
+
+  useEffect(() => {
+    memberList();
+  }, [listReload]);
+
+  return (
+    <>
+      <Outlet context={{loader, setLoader, familyList, setListReload}} />
+    </>
+  );
+}

src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx

@@ -1,8 +1,15 @@
-import React from 'react'
+import React, {Suspense, lazy} from 'react'
+// import FamilyList from '../../FamilyList'
+import LoadingSpinner from '../../../../components/Spinners/LoadingSpinner'
 
 const AddFamily = () => {
+  const FamilyListSettings = lazy(() => import('../../FamilyListSettings'));
   return (
-    <div>Add Family</div>
+    <>
+      <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" height='h-full min-h-[500px]' />}>
+        <FamilyListSettings />
+      </Suspense>
+    </>
   )
 }
 

src/components/FamilyAcc/FamilySettings/Tabs/RelativePopout.jsx

@@ -0,0 +1,122 @@
+import React, { Suspense, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useOutletContext } from "react-router-dom";
+import usersService from "../../../../services/UsersService";
+import ModalCom from '../../../Helpers/ModalCom';
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import localImgLoad from '../../../../lib/localImgLoad'
+
+// import { tableReload } from "../../../store/TableReloads";
+// import { PriceFormatter } from "../../Helpers/PriceFormatter";
+
+
+const RelativePopout = ({
+    relativeSelected,
+    action,
+    situation,
+    familyList
+}) => {
+
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+  const apiCall = new usersService();
+
+  let { pathname, state } = useLocation();
+
+  const dispatch = useDispatch();
+
+  useEffect(()=>{
+  },[])
+
+  return (
+    <>
+      <ModalCom action={action} situation={situation}>
+        <div className="modal-container">
+          <div className="modal-header-con">
+            <h1 className="modal-title">
+                {relativeSelected.firstname && relativeSelected.firstname} {relativeSelected.lastname && relativeSelected.lastname}
+            </h1>
+            <button
+              type="button"
+              className="modal-close-btn"
+              onClick={action}
+            >
+              <svg
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                fill="none"
+                className="fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                  fill=""
+                  fillOpacity="0.6"
+                />
+                <path
+                  d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                  fill="#"
+                  fillOpacity="0.6"
+                />
+              </svg>
+            </button>
+          </div>
+          <div className="modal-body-wrapper">
+            <div className="w-full grid grid-cols-2 gap-2 space-x-2">
+              <div className='col-span-2 md:col-span-1 overflow-y-auto h-[350px]'>
+                {familyList.loader ? 
+                <LoadingSpinner size='10' color='bg-sky-500' height='min-h-40' />
+                : (!familyList.loader && familyList?.familyList?.result_list?.length > 0) ?
+                    familyList?.familyList?.result_list?.map(item => {
+                        const image = localStorage.getItem("session_token") ? `${familyList?.imageServer}${localStorage.getItem("session_token")}/family/${item?.family_uid}` : "";
+                        return (
+                        <div key={item.family_uid || index} className="flex items-center border-b dark:border-[#5356fb29] hover:bg-gray-50">
+                            <div className='p-2 flex justify-center items-center'>
+                                <input type="checkbox" className='w-4 h-4 border-2 border-blue-500 rounded-sm bg-white cursor-pointer' />
+                            </div>
+                            <div className='p-2'>
+                                <div className="flex space-x-2 items-center w-full">
+                                    <div className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full overflow-hidden flex justify-center items-center">
+                                        <img
+                                            src={image || localImgLoad(`images/icons/${banner}`)}
+                                            alt={`Avatar`}
+                                            className="w-full h-full"
+                                        />
+                                    </div>
+                                    <div className="flex flex-col w-full">
+                                        <h1 className="font-bold text-[16px] text-dark-gray dark:text-white whitespace-nowrap">
+                                            {`${item?.firstname} ${item?.lastname}`}
+                                        </h1>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        )
+                    })
+                :
+                <div className='min-h-[100px] w-full flex flex-col justify-center items-center'>No records found!</div>
+                }
+              </div>
+              <div className='col-span-2 md:col-span-1 bg-green-100 min-h-[100px]'>
+                {/* dummy to be filled latter*/}
+              </div>
+            </div>
+          </div>
+          <div className="modal-footer-wrapper justify-end">
+            <button
+                onClick={action}
+                className="custom-btn border-gradient"
+            >
+                <span className='text-gradient'>Close</span>
+            </button>
+        </div>
+        </div>
+      </ModalCom>
+    </>
+  );
+};
+
+export default RelativePopout;

src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx

@@ -2,7 +2,9 @@ import React, { useState } from 'react'
 import { handlePagingFunc } from '../../../Pagination/HandlePagination';
 import PaginatedList  from '../../../Pagination/PaginatedList';
 
-export default function RelativeTable({relativeList}) {
+import RelativePopout from './RelativePopout';
+
+export default function RelativeTable({relativeList, familyList}) {
   
     // Handle Pagination
     const [currentPage, setCurrentPage] = useState(0);
@@ -10,21 +12,36 @@ export default function RelativeTable({relativeList}) {
     const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
 
     const currentRelativeList = relativeList?.slice(indexOfFirstItem, indexOfLastItem);
+
+    const [relativePopout, setRelativePopout] = useState({show:false, data:null})
+
+    const closePopout = () => {
+      setRelativePopout({show:false, data:null})
+    }
   
     const handlePagination = (e) => {
       handlePagingFunc(e, setCurrentPage);
     };
    
     return (
+      <>
         <div className={`w-full overflow-hidden rounded-2xl`}>
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                <thead>
+                  <tr>
+                    <th className='py-4 px-2'></th>
+                    <th className='py-4 px-2'></th>
+                    <th className='py-4 px-2 text-center'>Kids</th>
+                    <th className='py-4 px-2'></th>
+                  </tr>
+                </thead>
                 <tbody>
                   <>
                     {relativeList && relativeList?.length > 0 ? (
                         currentRelativeList.map((value, index) => (
                         <tr key={value.uid || index} className="border-b dark:border-[#5356fb29] hover:bg-gray-50">
-                          <td className='p-2'>
+                          <td className='py-4 px-2'>
                             <div className="flex flex-col">
                               <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                 {value.firstname && value.firstname} {value.lastname && value.lastname}
@@ -34,13 +51,34 @@ export default function RelativeTable({relativeList}) {
                               </span>
                             </div>
                           </td>
-                          <td className='p-2'>
+                          <td className='py-4 px-2'>
                             {/* <span>Family Type</span> */}
                             <span>{value.family_type && value.family_type.toUpperCase()}</span>
                           </td>
-                          <td className='p-2 text-right'>
+                          <td className='py-4 px-2 text-center'>
                             {value.status && value.status}
                           </td>
+                          <td className='py-4 px-2 flex items-center justify-end'>
+                            <button
+                              onClick={() => setRelativePopout({show:true, data:{relativeSelected:value}})}
+                              type="button"
+                              className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 11 20"
+                                id="Arrow"
+                                className="w-[0.7rem]"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                  // fill=""
+                                  className="color000000 svgShape fill-[#fff]"
+                                ></path>
+                              </svg>
+                            </button>
+                          </td>
                         </tr>
                         ))
                     ) : (
@@ -69,5 +107,15 @@ export default function RelativeTable({relativeList}) {
               {/* END OF PAGINATION BUTTON */}
             </div>
         </div>
+
+        {relativePopout.show &&
+          <RelativePopout
+            situation={relativePopout.show}
+            action={closePopout}
+            relativeSelected={relativePopout.data.relativeSelected}
+            familyList={familyList}
+          />
+        }
+      </>
       );
     };

src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx

@@ -4,7 +4,7 @@ import InviteRelative from './InviteRelative'
 import usersService from '../../../../services/UsersService'
 import LoadingSpinner from '../../../Spinners/LoadingSpinner'
 
-const Relatives = () => {
+const Relatives = ({familyList}) => {
 
   const api = new usersService()
 
@@ -47,7 +47,7 @@ const Relatives = () => {
           {relativeList.loading ?
           <LoadingSpinner size='8' height='h-full' />
           :
-          <RelativeTable relativeList={relativeList.result_list} />
+          <RelativeTable relativeList={relativeList.result_list} familyList={familyList} />
           }
         </div>
       </div>

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -1,12 +1,20 @@
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useOutletContext } from "react-router-dom";
 import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
 import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
+
+  const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
+
   let { state } = useLocation();
+
+  const imageServer = state?.imageServer
+
+  let relativeFamilyList = {loader, familyList, imageServer}
+
   const tabs = [
     {
       id: 1,
@@ -44,7 +52,7 @@ const FamilySettings = () => {
 
   const tabComponents = {
     add_family: <AddFamily />,
-    relatives: <Relatives />,
+    relatives: <Relatives familyList={relativeFamilyList} />,
     family_banner: <FamilyBanner imageServer={state.imageServer} />,
   };
 

src/components/FamilyAcc/FamilyTable.jsx

@@ -173,7 +173,7 @@ export default function FamilyTable({
 
   return (
     <div
-      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${
+      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl min-h-[520px] flex flex-col justify-between ${
         className || ""
       }`}
     >

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useOutletContext } from "react-router-dom";
 import { apiConst } from "../../lib/apiConst";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -13,6 +13,8 @@ const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
 export default function FamilyTableNew() {
 
+  const {familyList} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
+
   const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
 
 
@@ -243,6 +245,7 @@ export default function FamilyTableNew() {
           activeTask={activeTask}
           familyDetailsData={''}
           setUpdatePage={setUpdatePage}
+          familyList={familyList?.result_list}
         />
       )}
 

src/components/FamilyAcc/FamilyTableSettings.jsx

@@ -0,0 +1,244 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+import familyImage from "../../assets/images/no-family-side.png";
+import { formatDateString } from "../../lib";
+import localImgLoad from "../../lib/localImgLoad";
+
+/**
+ * Renders a list of family members that can be managed. 
+ * It has its current maximum members at 8 and it comes with pagination and loading spinner functionality.
+
+ * @returns {JSX.Element} - The rendered component.
+ */
+export default function FamilyTableSettings({
+  className,
+  familyList,
+  loader,
+  popUpHandler,
+  imageServer,
+}) {
+  const navigate = useNavigate();
+  const [currentPage, setCurrentPage] = useState(0);
+  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  const handleManageClick = (familyMember) => {
+    navigate("/manage-family", { state: familyMember });
+  };
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  /**
+   * Renders a table row for a family member.
+   * @returns {JSX.Element} - The table row component.
+   */
+  const FamilyRow = ({
+    firstname,
+    lastname,
+    age,
+    added,
+    last_login,
+    task_count,
+    family_uid,
+    banner,
+    enable_traking,
+    profile_picture,
+    imageServer,
+    username,
+  }) => {
+    // Check for valid dates
+    const addedDate = added ? added.split(" ")[0] : "N/A";
+    const loginDate = last_login ? formatDateString(last_login) : "N/A";
+    const key = `family-${family_uid}`; // Assign a unique key
+    const image = localStorage.getItem("session_token")
+      ? `${imageServer}${localStorage.getItem(
+          "session_token"
+        )}/family/${family_uid}`
+      : "";
+
+    const trackingStatus =
+      enable_traking === "0"
+        ? "Stopped"
+        : enable_traking === "100"
+        ? "Active"
+        : "";
+
+    return (
+      <tr
+        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+        key={key}
+      >
+        <td className="py-4">
+          <div className="flex space-x-2 items-center w-full">
+            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+              <img
+                // src={profile_picture}
+                src={
+                  image ||
+                  profile_picture ||
+                  localImgLoad(`images/icons/${banner}`)
+                }
+                alt={`Avatar of ${firstname} ${lastname}`}
+                className="w-full h-full"
+              />
+            </div>
+            <div className="flex flex-col flex-[0.9]">
+              <h1 className="font-bold text-lg text-dark-gray dark:text-white whitespace-nowrap">
+                {`${firstname} ${lastname}`}{" "}
+                <span className="ml-1 text-sm">{`[${username}]`}</span>
+              </h1>
+              <span className="text-sm text-thin-light-gray">
+                Added: <span className="text-purple ml-1">{addedDate}</span>
+              </span>
+              <span className="text-sm text-thin-light-gray">
+                Last Login:{" "}
+                <span className="text-purple ml-1">{loginDate}</span>
+              </span>
+            </div>
+          </div>
+        </td>
+
+        {/* <td className="text-center py-4 px-2">
+          <div className="flex space-x-1 items-center justify-center">
+            <span
+              className={`text-base font-medium whitespace-nowrap ${
+                enable_traking === "0"
+                  ? "text-[#FF0000] dark:text-[#FF6666]"
+                  : enable_traking === "100"
+                  ? "text-[#00A000] dark:text-[#00FF00]"
+                  : "text-dark-gray dark:text-white"
+              }`}
+            >
+              {trackingStatus}
+            </span>
+          </div>
+        </td>
+
+        <td className="text-center py-4 px-2">
+          <div className="flex space-x-1 items-center justify-center">
+            <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+              {task_count}
+            </span>
+          </div>
+        </td> */}
+
+        <td className="text-right py-4 px-2 flex items-center justify-center">
+          <button
+            onClick={() =>
+              handleManageClick({
+                firstname,
+                lastname,
+                age,
+                added,
+                last_login,
+                task_count,
+                family_uid,
+                banner,
+                image,
+              })
+            }
+            type="button"
+            className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 11 20"
+              id="Arrow"
+              className="w-[0.7rem]"
+            >
+              <path
+                fillRule="evenodd"
+                d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                // fill=""
+                className="color000000 svgShape fill-[#fff]"
+              ></path>
+            </svg>
+          </button>
+        </td>
+      </tr>
+    );
+  };
+
+  return (
+    <div
+      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl min-h-[520px] flex flex-col justify-between ${
+        className || ""
+      }`}
+    >
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
+        {loader ? (
+          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+            <LoadingSpinner size="16" color="sky-blue" height='h-full' />
+          </div>
+        ) : (
+          <>
+            {familyList?.length > 0 ? (
+              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+                <thead className="sticky top-0">
+                  <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+                    <th className="py-4">Name</th>
+                    {/* <th className="py-4 text-center">Tracking</th>
+                    <th className="py-4 text-center">No of Tasks</th> */}
+                    <th className="py-4 text-right"></th>
+                  </tr>
+                </thead>
+                <tbody className="h-full">
+                  {currentFamilyList?.map((familyMember, index) => {
+                    return (
+                      <FamilyRow
+                        key={index}
+                        {...familyMember}
+                        imageServer={imageServer}
+                      />
+                    );
+                  })}
+                </tbody>
+              </table>
+            ) : (
+              <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
+                <div className="p-2 w-full md:w-1/2">
+                  <p className="mb-4 p-3 md:p-16">
+                    Add your family, assign tasks, and get the whole team
+                    engaged.
+                  </p>
+                  <button
+                    onClick={popUpHandler}
+                    type="button"
+                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                  >
+                    Add Family
+                  </button>
+                </div>
+                <div className="p-2 w-full md:w-1/2">
+                  <img className="w-full" src={familyImage} alt="Add Family" />
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {/* PAGINATION BUTTON */}
+      <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0}
+        next={currentPage + itemsPerPage >= familyList?.length}
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

@@ -13,6 +13,9 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
       <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
         <div className="flex items-center justify-around h-[380px]">
           <div className="flex flex-col">
+            <h2 className="print:block hidden font-bold text-lg tracking-wide text-dark-gray dark:text-white capitalize mb-10">
+              Firstname: {familyData?.data?.firstname ? familyData?.data?.firstname : "please wait..."}
+            </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Username:{" "}
               <span className="ml-2 normal-case">

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -5,7 +5,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
 const FamilyWaitlist = memo(
-  ({ familyData, className, accountDetails, setUpdatePage }) => {
+  ({ familyData, className, accountDetails, setUpdatePage, jobList, setActiveTask, activeTask }) => {
     const [popUp, setPopUp] = useState({ show: false, data: {} });
     const [continueTaskPopup, setContinueTaskPopup] = useState({
       show: false,
@@ -73,7 +73,7 @@ const FamilyWaitlist = memo(
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                           key={value.uid}
                         >
-                          <td className="py-4">
+                          <td className="px-2 py-4">
                             <div className="w-full flex justify-between items-center">
                               <div className="account-name flex space-x-4 items-center">
                                 <div className="icon w-14 h-14 flex justify-center items-center">
@@ -92,23 +92,40 @@ const FamilyWaitlist = memo(
                                   </p>
                                 </div>
                               </div>
-                              <div className="px-2 flex flex-col items-center justify-center">
+                              {/* <div className="px-2 flex flex-col items-center justify-center">
                                 <p className="text-sm font-bold text-dark-gray dark:text-white">
                                   {addedDate}
                                 </p>
                                 <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
                                   {value.status_text}
                                 </p>
-                              </div>
+                              </div> */}
                             </div>
                           </td>
-                          <td className="text-right py-4 px-2">
-                            <button
-                              onClick={() => openPopUp(value)}
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                              View
-                            </button>
+                          <td className="text-right px-2 py-4">
+                            <div className='w-full flex justify-end items-center gap-4'>
+                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                {value.status_text}
+                              </p>
+                              <button
+                                onClick={() => openPopUp(value)}
+                                className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              >
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 11 20"
+                                  id="Arrow"
+                                  className="w-[0.7rem]"
+                                >
+                                  <path
+                                    fillRule="evenodd"
+                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                    // fill=""
+                                    className="color000000 svgShape fill-[#fff]"
+                                  ></path>
+                                </svg>
+                              </button>
+                            </div>
                           </td>
                         </tr>
                       );
@@ -144,6 +161,9 @@ const FamilyWaitlist = memo(
             action={closeContinueTaskPopup}
             situation={continueTaskPopup.show}
             setUpdatePage={setUpdatePage}
+            jobList={jobList}
+            setActiveTask={setActiveTask}
+            activeTask={activeTask}
           />
         )}
       </div>

src/components/FamilyAcc/index.jsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { Link } from "react-router-dom";
+import { Link, useOutletContext } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
@@ -16,13 +16,16 @@ import FamilyTable from "./FamilyTable";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function FamilyAcc() {
+
+  const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
+ 
   // State to store the selected year and month
   const [selectedYear, setSelectedYear] = useState("");
   const [selectedMonth, setSelectedMonth] = useState("");
-  const [familyList, setFamilyList] = useState({});
-  const [loader, setLoader] = useState(false);
+  // const [familyList, setFamilyList] = useState({});
+  // const [loader, setLoader] = useState(false);
   const [popUp, setPopUp] = useState(false);
-  const [listReload, setListReload] = useState(false);
+  // const [listReload, setListReload] = useState(false);
   const [msgErr, setMsgErr] = useState("");
   const [formData, setFormData] = useState({
     first_name: "",
@@ -101,34 +104,34 @@ export default function FamilyAcc() {
     }
   };
 
-  const memberList = useCallback(async () => {
-    setLoader(true);
-    try {
-      const res = await apiCall.familyListings();
-      const { data } = res;
-      if (data?.internal_return >= 0 && data?.status === "OK") {
-        const { result_list, session_image_server } = data;
-        setFamilyList({ result_list, session_image_server });
-        sessionStorage.setItem("family_list", JSON.stringify(result_list))
-        setLoader(false);
-      } else {
-        return;
-      }
-    } catch (error) {
-      setLoader(false);
-      throw new Error(error);
-    }
-  }, [apiCall]);
+  // const memberList = useCallback(async () => {
+  //   setLoader(true);
+  //   try {
+  //     const res = await apiCall.familyListings();
+  //     const { data } = res;
+  //     if (data?.internal_return >= 0 && data?.status === "OK") {
+  //       const { result_list, session_image_server } = data;
+  //       setFamilyList({ result_list, session_image_server });
+  //       sessionStorage.setItem("family_list", JSON.stringify(result_list))
+  //       setLoader(false);
+  //     } else {
+  //       return;
+  //     }
+  //   } catch (error) {
+  //     setLoader(false);
+  //     throw new Error(error);
+  //   }
+  // }, [apiCall]);
 
-  useEffect(() => {
-    let checkMemberList = true;
-    if (checkMemberList) {
-      memberList();
-    }
-    return () => {
-      checkMemberList = false;
-    };
-  }, [listReload, memberList]);
+  // useEffect(() => {
+  //   let checkMemberList = true;
+  //   if (checkMemberList) {
+  //     memberList();
+  //   }
+  //   return () => {
+  //     checkMemberList = false;
+  //   };
+  // }, [listReload, memberList]);
 
   return (
     <Layout>
@@ -177,7 +180,7 @@ export default function FamilyAcc() {
                 </span>
               </Link>
               <Link
-                to={`/familysettings`}
+                to={`/acc-family/familysettings`}
                 state={{ imageServer: familyList?.session_image_server }}
                 className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white"
               >

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -95,8 +95,7 @@ export default function InputCom({
           value={value}
           onChange={inputHandler}
           className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
-            inputBg ? inputBg : "bg-[#FAFAFA] dark:bg-[#11131F] dark:text-white tracking-wide"
-          } focus:ring-0 focus:outline-none ${fieldClass}`}
+            inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}
           id={name}
           name={name}

src/components/Helpers/ModalCom.jsx

@@ -14,9 +14,9 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
     <div className="modal-com">
       <div
         onClick={action || isOpen}
-        className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
+        className="fixed top-0 left-0 bottom-0 w-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
+      <div className={`fixed h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>

src/components/History/JobsCompleted.jsx

@@ -13,7 +13,7 @@ function JobsCompleted() {
 
     const apiCall = new usersService()
 
-    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+    let [jobHistory, setJobHistory] = useState({ // FOR PURCHASE HISTORY
         loading: true,
         data: [],
         error: false
@@ -22,7 +22,7 @@ function JobsCompleted() {
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const currentReward = jobHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
     const handlePagination = (e) => {
       handlePagingFunc(e,setCurrentPage)
@@ -31,17 +31,17 @@ function JobsCompleted() {
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
     const getJobCompletedHistory = ()=>{
-        // apiCall.getFamilyRewardHx().then((res)=>{
-        //     if(res.data.internal_return < 0){ // success but no data
-        //         setFamilyRewardHistory(prev => ({...prev, loading: false}))
-        //         return
-        //     }
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
-        // }).catch((error)=>{
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
-        // })
+        apiCall.getContractHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setJobHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setJobHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setJobHistory(prev => ({...prev, loading: false, error: true}))
+        })
         setTimeout(()=>{
-            setFamilyRewardHistory(prev => ({...prev, loading: false, error:true}))
+            setJobHistory(prev => ({...prev, loading: false, error:true}))
         },3000)
     }
 
@@ -51,42 +51,42 @@ function JobsCompleted() {
 
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
-    {familyRewardHistory.loading ? 
+    {jobHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : familyRewardHistory.data.length ?
+    : jobHistory?.data?.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4">Title</th>
+            <th className="p-4 text-right">Amount</th>
+            {/* <th className="p-4">Date</th>
+            <th className="p-4">Contract</th> */}
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
-                let date = new Date(item.added).toLocaleDateString()
+                let date = new Date(item?.delivery_date).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4 w-full">
                             <div className='flex items-center gap-2'>
-                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
+                                {/* <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' /> */}
                                 <div className='flex flex-col'>
-                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
-                                    <p className='text-sm'>{item.description}</p>
+                                    <h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
+                                    <p className='text-sm line-clamp-2'>{item?.description}</p>
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4 text-right">{AmountTo2DP(item?.price*0.01)} {item?.currency}</td>
+                        {/* <td className="p-4">{date}</td>
+                        <td className="p-4">{item?.contract}</td> */}
                     </tr>
                 )
             }
             )}
         </tbody>
     </table>
-    :familyRewardHistory.error ?
+    :jobHistory.error ?
     <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
         <span>Opps! an error occurred. Please try again!</span>
     </div>
@@ -97,7 +97,7 @@ function JobsCompleted() {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= jobHistory?.data?.length ? true : false} data={jobHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/RewardsTable.jsx

@@ -52,20 +52,20 @@ export const RewardsTable = memo(() => {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4"></th>
+            <th className="p-4 text-right">Amount</th>
+            <th className="p-4">Date</th>
+            <th className="p-4">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -74,9 +74,9 @@ export const RewardsTable = memo(() => {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4 text-right">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4">{date}</td>
+                        <td className="p-4">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -94,7 +94,7 @@ export const RewardsTable = memo(() => {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/index.jsx

@@ -276,7 +276,7 @@ export default function History() {
                     </button>
                 </div> */}
                 {/* END OF switch button */}
-                <div className="history-tables w-full bg-red-50 overflow-x-auto">
+                <div className="history-tables w-full bg-red-50 dark:bg-dark-white overflow-x-auto">
                     {/* PURCHASE SECTION */}
                     {selectedTab == 'purchases' &&
                         <div className="wallet w-full">

src/components/JobGroups/AddGroup.jsx

@@ -88,7 +88,7 @@ export default function AddGroup({ action, situation, setUpdateList }) {
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             Add Group
@@ -135,28 +135,6 @@ export default function AddGroup({ action, situation, setUpdateList }) {
               />
             </div>
           </div>
-          <div className="w-full flex justify-between items-center gap-4">
-            <button
-              onClick={action}
-              type="button"
-              className="w-[152px] h-[46px] flex justify-center items-center rounded-full text-base text-light-red tracking-wide border border-light-red"
-            >
-              <span className="">
-                Cancel
-              </span>
-            </button>
-            {requestStatus.loading ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => addGroup()}
-                type="button"
-                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-              >
-                Add Group
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -177,6 +155,29 @@ export default function AddGroup({ action, situation, setUpdateList }) {
             ))}
           {/* End of error or success display */}
         </div>
+
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn text-light-red border border-light-red"
+            >
+              <span className="">
+                Cancel
+              </span>
+            </button>
+            {requestStatus.loading ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => addGroup()}
+                type="button"
+                className="custom-btn btn-gradient text-white"
+              >
+                Add Group
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   );

src/components/JobGroups/DeleteGroup.jsx

@@ -20,14 +20,14 @@ export default function DeleteGroup({action, situation, details}) {
         action={action}
         situation={situation}
     >
-      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
             Delete Group
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={action}
           >
             <svg
@@ -76,26 +76,6 @@ export default function DeleteGroup({action, situation, details}) {
               Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={action}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteGroup()}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -116,6 +96,26 @@ export default function DeleteGroup({action, situation, details}) {
             ))}
           {/* End of error or success display */}
         </div>
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteGroup()}
+                type="button"
+                className="custom-btn primary-gradient text-white"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   )

src/components/JobGroups/DeleteMember.jsx

@@ -20,7 +20,7 @@ export default function DeleteMember({action, situation, details}) {
         action={action}
         situation={situation}
     >
-      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             Remove Member
@@ -76,26 +76,6 @@ export default function DeleteMember({action, situation, details}) {
               Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={action}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteMember()}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Remove
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -115,7 +95,27 @@ export default function DeleteMember({action, situation, details}) {
               )
             ))}
           {/* End of error or success display */}
-        </div>
+        </div>          
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteMember()}
+                type="button"
+                className="custom-btn primary-gradient text-white"
+              >
+                Remove
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   )

src/components/MarketPlace/MainSection.jsx

@@ -20,7 +20,7 @@ export default function MainSection({
   );
   const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
 
-  let [contentDisplay, setContentDisplay] = useState("list"); // STATE TO HOLD LIST VIEW STYLE
+  let [contentDisplay, setContentDisplay] = useState("grid"); // STATE TO HOLD LIST VIEW STYLE
 
   // Convert to array in order to map
   const mappedArray = Object.entries(marketCategories).map(([key, value]) => {

src/components/MarketPlace/PopUp/MarketPopUp.jsx

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

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -20,7 +20,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
 
   return (
     <div className='flex flex-col justify-between'>
-    <div className="w-full h-full min-h-[400px] max-h-[400px] overflow-y-auto">
+    <div className="w-full h-full min-h-[250px] max-h-[300px] overflow-y-auto">
         <table className="wallet-activity w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -12,6 +12,10 @@ import IndexJobActions from "./JobActions/IndexJobActions";
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
+import TabButton from "../customTabs/TabButton";
+import AttachFile from "../attachmentCom/AttachFile";
+
+import JobDetailPopout from "./JobDetailPopout";
 
 function ActiveJobs(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -29,7 +33,9 @@ function ActiveJobs(props) {
 
   const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  const [tab, setTab] = useState("message");
+  // const [tab, setTab] = useState("message");
+  const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
+  const [selectedTab, setSelectedTab] = useState(tabs[0]);
 
   const [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -39,6 +45,8 @@ function ActiveJobs(props) {
 
   let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL
 
+  let [jobDetailModal, setJobDetailModal] = useState(false); // STATE FOR JOB DELIVERY DETAIL POPOUT MODAL
+
   const printRef = useRef();
   // to handle printing
   const handlePrint = useReactToPrint({
@@ -50,6 +58,10 @@ function ActiveJobs(props) {
     setPopUp((prev) => !prev);
   };
 
+  const jobDetailModalHandler = () => { // FUNCTION TO CLOSE JOB DELIVERY DETAIL MODAL
+    setJobDetailModal((prev) => !prev);
+  };
+
   // FUNCTION TO HANDLE MESSAGE CHANGE
   const handleMessageChange = ({ target: { value } }) => {
     setMessageToSend(value);
@@ -63,11 +75,23 @@ function ActiveJobs(props) {
       // IF NO FILE SELECTED RETURN
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+    let fileType = files[0].type.split('/')[0].toLowerCase()
+    if (fileType == 'video' && files[0].size > Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)) { // return if video file is more than 30mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
@@ -88,14 +112,15 @@ function ActiveJobs(props) {
       return;
     }
     // INCLUDE FILE IF NO ERROR
-    setFilesToSend((prev) => [...prev, files[0]]);
+    // setFilesToSend((prev) => [...prev, files[0]]); //for sending multiple file if need be
+    setFilesToSend([files[0]])
   };
 
   // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
   const handleClearAll = ({ target: { name } }) => {
-    if (tab == "message") {
+    if (selectedTab == "Send Message") {
       setMessageToSend("");
-    } else if (tab == "files") {
+    } else if (selectedTab == "Send Files") {
       setFilesToSend([]);
     } else {
       return;
@@ -177,61 +202,46 @@ function ActiveJobs(props) {
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 5000);
     }
+    // const fileToBase64 = async () => {
+    //   // Converts file data to base64 string
+    //   try {
+    //     const base64String = await convertFileToBase64(filesToSend[i]);
+    //     return base64String;
+    //   } catch (error) {
+    //     return false;
+    //   }
+    // };
 
-    for (let i = 0; i <= filesToSend.length - 1; i++) {
-      // Loops through files to send array and trigger upload API call
+    let reqData = {
+      // file_name: filesToSend[i].name,
+      // file_size: filesToSend[i].size,
+      // file_type: "image/png",
+      // file_data: await fileToBase64(),
+      msg_type: "FILE",
+      contract: props.details.contract,
+      file: filesToSend[0],
+    };
 
-      const fileToBase64 = async () => {
-        // Converts file data to base64 string
-        try {
-          const base64String = await convertFileToBase64(filesToSend[i]);
-          return base64String;
-        } catch (error) {
-          return false;
+    ApiCall.sendFilesNew(reqData)
+      .then((res) => {
+        if(res.status != 200 || res.data.internal_return < 0){
+          setRequestStatus({loading: false, status: false, message: 'File could not be sent, try again later'})
+          return
         }
-      };
-
-      // if(await !fileToBase64()){
-      //   return
-      // }
-
-      let reqData = {
-        file_name: filesToSend[i].name,
-        file_size: filesToSend[i].size,
-        file_type: "image/png",
-        file_data: await fileToBase64(),
-        msg_type: "FILE",
-        contract: props.details.contract,
-      };
-
-      ApiCall.sendFiles(reqData)
-        .then((res) => {
-          // if(res.status != 200 || res.data.internal_return < 0){
-          //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
-          //   return
-          // }
-          // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
-          // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
-          // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
-        })
-        .catch((error) => {
-          // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
-        })
-        .finally(() => {
-          if (i == filesToSend.length - 1) {
-            setRequestStatus({
-              loading: false,
-              status: true,
-              message: "File(s) Uploaded Successfully",
-            });
-            setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
-            props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
-            setTimeout(() => {
-              setRequestStatus({ loading: false, status: false, message: "" });
-            }, 5000);
-          }
-        });
-    }
+        setRequestStatus({loading: false, status: true, message: 'File Uploaded Successfully'})
+        // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+        // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+      })
+      .catch((error) => {
+        setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+      })
+      .finally(() => {
+          setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+          props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+          setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 5000);
+      });
   };
 
   // FUNCTION TO CHECK IF TASK PASS DUE IS REACHED
@@ -269,10 +279,10 @@ function ActiveJobs(props) {
 
   return (
     <Layout>
-      <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
+      <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-8">
         {/* job title */}
-        <div className="w-full md:w-8/12">
-          <div className="w-full flex justify-start space-x-3 items-start">
+        <div className="w-full">
+          <div className="w-full flex justify-start space-x-3 items-center">
             <button
               type="button"
               className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
@@ -320,8 +330,8 @@ function ActiveJobs(props) {
         {/* end of job title */}
 
         {/* job details */}
-        <div className="w-full md:w-4/12">
-          <p className="text-base text-sky-blue">Delivery Detail</p>
+        <div className="min-w-[150px]">
+          <button className="text-base text-sky-blue" onClick={jobDetailModalHandler}>Delivery Detail</button>
           {passDue ? (
             <div className="my-1">
               <p className="text-base text-slate-700">
@@ -394,78 +404,119 @@ function ActiveJobs(props) {
 
           {/* TEXTAREA SECTION */}
           <div className="mt-5">
-            <div className="">
-              <div
-                className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
-                // className='ml-7 flex justify-start items-center gap-3'
-              >
-                <button
-                  name="message"
-                  onClick={(e) => setTab(e.target.name)}
-                  className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "message"
-                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                      : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                >
-                  Send Message
-                </button>
-                <button
-                  name="files"
-                  onClick={(e) => setTab(e.target.name)}
-                  className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "files"
-                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                      : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                >
-                  Send Files
-                </button>
-              </div>
-              {tab == "message" ? (
-                <textarea
-                  className="p-4 w-full h-[200px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
-                  // rows="10"
-                  style={{ resize: "none" }}
-                  name="message"
-                  onChange={handleMessageChange}
-                  value={messageToSend}
-                  autoFocus
-                />
-              ) : (
-                <div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
-                  <div className="files">
-                    <label
-                      htmlFor="file"
-                      className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
-                    >
-                      Select Files to Upload
-                    </label>
-                    <input
-                      type="file"
-                      id="file"
-                      accept="image/*"
-                      style={{ display: "none" }}
-                      onChange={handleFileChange}
+            <div className="w-full">
+                {/* switch button */}
+                <div className="grid grid-cols-2">
+                {tabs.map((item) => (
+                    <TabButton 
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
                     />
-                  </div>
-                  <div className="selected_file my-2">
-                    {filesToSend.length > 0 &&
-                      filesToSend.map((item, index) => (
-                        <p key={index} className="flex items-center space-x-2">
-                          <span>{item.name}</span>
-                          <button
-                            name="remove"
-                            onClick={() => handleRemoveImage(item)}
-                            className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
-                          >
-                            x
-                          </button>
-                        </p>
-                      ))}
-                  </div>
+                ))}
+                </div>
+                {/* switch button */}
+                <div className="w-full bg-red-50 overflow-x-auto">
+                  {selectedTab == "Send Message" ? (
+                    <div className="p-2 w-full">
+                      <textarea
+                          className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
+                          // rows="10"
+                          style={{ resize: "none" }}
+                          name="message"
+                          onChange={handleMessageChange}
+                          value={messageToSend}
+                          autoFocus
+                      />
+                    </div>
+                  ) : (
+                  <div className="p-2 w-full">
+                    <div className="p-4 mb-2 h-[150px] text-base text-slate-600">
+                        <div className="files flex">
+                        <label
+                            htmlFor="file"
+                            className="custom-btn btn-gradient text-base text-white"
+                        >
+                            Select Files to Upload
+                        </label>
+                        <input
+                            type="file"
+                            id="file"
+                            accept="image/*,video/*"
+                            style={{ display: "none" }}
+                            onChange={handleFileChange}
+                        />
+                        </div>
+                        <div className="selected_file my-2 overflow-y-auto">
+                        {filesToSend.length > 0 &&
+                            filesToSend.map((item, index) => (
+                            <p key={index} className="flex items-center space-x-2">
+                                <span>{item.name}</span>
+                                <button
+                                name="remove"
+                                onClick={() => handleRemoveImage(item)}
+                                className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
+                                >
+                                x
+                                </button>
+                            </p>
+                            ))}
+                        </div>
+                    </div>
+                  </div>
+                  )}
+                  {/* Buttons Sections */}
+                  <div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
+                      <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
+                          <button
+                              type="button"
+                              onClick={handleClearAll}
+                              className="custom-btn border-gradient"
+                          >
+                              <span className="text-gradient">Clear</span>
+                          </button>
+                          {selectedTab == "Send Files" ? (
+                              <button
+                              onClick={sendFile}
+                              type="button"
+                              className="custom-btn btn-gradient text-white"
+                              >
+                              {requestStatus.loading ? (
+                                  <LoadingSpinner size="6" color="sky-blue" />
+                              ) : (
+                                  <>
+                                  <svg
+                                      xmlns="http://www.w3.org/2000/svg"
+                                      viewBox="0 0 24 24"
+                                      width="20"
+                                      height="20"
+                                      fill="white"
+                                  >
+                                      <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
+                                  </svg>
+
+                                  <span className="text-white">Upload Files</span>
+                                  </>
+                              )}
+                              </button>
+                          ) : (
+                              <button
+                              onClick={sendTaskMessage}
+                              type="button"
+                              className="custom-btn btn-gradient text-white"
+                              >
+                              {requestStatus.loading ? (
+                                  <LoadingSpinner size="6" color="sky-blue" />
+                              ) : (
+                                  <span className="text-white">Send</span>
+                              )}
+                              </button>
+                          )}
+                      </div>
+                  </div>
+                  {/* end of Buttons Sections  */}
                 </div>
-              )}
             </div>
 
             {/* ERROR DISPLAY AND SUBMIT BUTTON */}
@@ -489,63 +540,19 @@ function ActiveJobs(props) {
                 ))}
             </div>
             {/* End of error or success display */}
-
-            {/* Buttons Sections */}
-            <div className="py-2 sm:flex sm:justify-end sm:items-center">
-              <div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
-                <button
-                  type="button"
-                  onClick={handleClearAll}
-                  className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
-                >
-                  <span className="text-gradient">Clear</span>
-                </button>
-                {tab == "files" ? (
-                  <button
-                    onClick={sendFile}
-                    type="button"
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
-                  >
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="6" color="sky-blue" />
-                    ) : (
-                      <>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          height="24"
-                          fill="white"
-                        >
-                          <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
-                        </svg>
-
-                        <span className="text-white">Upload Files</span>
-                      </>
-                    )}
-                  </button>
-                ) : (
-                  <button
-                    onClick={sendTaskMessage}
-                    type="button"
-                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
-                  >
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="6" color="sky-blue" />
-                    ) : (
-                      <span className="text-white">Send</span>
-                    )}
-                  </button>
-                )}
-              </div>
-            </div>
-            {/* end of Buttons Sections  */}
           </div>
           {/* END OF TEXTAREA */}
         </div>
 
         {/* MESSAGE SECTION */}
         <div className="w-full lg:w-1/2">
+          <div className="mb-4">
+            <AttachFile
+              data={props.details}
+              showOnData={true}
+              fontSize={'text-lg'}
+            />
+          </div>
           <div className="flex justify-between items-center gap-5">
             <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
               <span>Message</span>
@@ -586,6 +593,16 @@ function ActiveJobs(props) {
         />
       )}
       {/* END OF POPOUT SECTION */}
+
+      {/* Delivery Details Popout */}
+      {jobDetailModal &&
+        <JobDetailPopout
+          action={jobDetailModalHandler}
+          situation={jobDetailModal}
+          jobDetail={props?.details?.job_description}
+        />
+      }
+      {/* END Delivery Details Popout */}
     </Layout>
   );
 }

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -15,6 +15,7 @@ const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
+import TabButton from "../customTabs/TabButton";
 
 function ActiveJobsMedia(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -32,7 +33,9 @@ function ActiveJobsMedia(props) {
 
   const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  const [tab, setTab] = useState("message");
+  // const [tab, setTab] = useState("message");
+  const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
+  const [selectedTab, setSelectedTab] = useState(tabs[0]);
 
   const [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -66,11 +69,23 @@ function ActiveJobsMedia(props) {
       // IF NO FILE SELECTED RETURN
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+    let fileType = files[0].type.split('/')[0].toLowerCase()
+    if (fileType == 'video' && files[0].size > Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)) {  // return if video file is more than 30mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
@@ -91,14 +106,15 @@ function ActiveJobsMedia(props) {
       return;
     }
     // INCLUDE FILE IF NO ERROR
-    setFilesToSend((prev) => [...prev, files[0]]);
+    // setFilesToSend((prev) => [...prev, files[0]]); //for sending multiple file if need be
+    setFilesToSend([files[0]])
   };
 
   // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
   const handleClearAll = ({ target: { name } }) => {
-    if (tab == "message") {
+    if (selectedTab == "Send Message") {
       setMessageToSend("");
-    } else if (tab == "files") {
+    } else if (selectedTab == "Send Files") {
       setFilesToSend([]);
     } else {
       return;
@@ -181,60 +197,42 @@ function ActiveJobsMedia(props) {
       }, 5000);
     }
 
-    for (let i = 0; i <= filesToSend.length - 1; i++) {
-      // Loops through files to send array and trigger upload API call
+    // const fileToBase64 = async () => {
+    //   // Converts file data to base64 string
+    //   try {
+    //     const base64String = await convertFileToBase64(filesToSend[i]);
+    //     return base64String;
+    //   } catch (error) {
+    //     return false;
+    //   }
+    // };
 
-      const fileToBase64 = async () => {
-        // Converts file data to base64 string
-        try {
-          const base64String = await convertFileToBase64(filesToSend[i]);
-          return base64String;
-        } catch (error) {
-          return false;
-        }
-      };
+    let reqData = {
+      msg_type: "FILE",
+      contract: props.details.contract,
+      file: filesToSend[0],
+    };
 
-      // if(await !fileToBase64()){
-      //   return
-      // }
-
-      let reqData = {
-        file_name: filesToSend[i].name,
-        file_size: filesToSend[i].size,
-        file_type: "image/png",
-        file_data: await fileToBase64(),
-        msg_type: "FILE",
-        contract: props.details.contract,
-      };
-
-      ApiCall.sendFiles(reqData)
-        .then((res) => {
-          // if(res.status != 200 || res.data.internal_return < 0){
-          //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
-          //   return
-          // }
-          // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
-          // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
-          // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
-        })
-        .catch((error) => {
-          // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
-        })
-        .finally(() => {
-          if (i == filesToSend.length - 1) {
-            setRequestStatus({
-              loading: false,
-              status: true,
-              message: "File(s) Uploaded Successfully",
-            });
-            setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
-            props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
-            setTimeout(() => {
-              setRequestStatus({ loading: false, status: false, message: "" });
-            }, 5000);
-          }
-        });
-    }
+    ApiCall.sendFilesNew(reqData)
+    .then((res) => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: 'File could not be sent, try again later'})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: 'File Uploaded Successfully'})
+      // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+      // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+    })
+    .catch((error) => {
+      setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+    })
+    .finally(() => {
+        setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+        props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+    });
   };
 
   // FUNCTION TO CHECK IF TASK PASS DUE IS REACHED
@@ -275,314 +273,288 @@ function ActiveJobsMedia(props) {
         backpath={props.details.pathname}
         title={props.details?.title ? props.details.title : ''}
     >
-        {/* job title */}
-            {/* <div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
-                <div className="w-full">
-                    <div className="w-full flex justify-start space-x-3 items-start">
-                        <button
-                        type="button"
-                        className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-                        onClick={() => {
-                            if (props.details.pathname == "/manage-family") {
-                            navigate(
-                                props.details.pathname,
-                                { state: { ...props.details.accountDetails } },
-                                { replace: true }
-                            );
-                            } else {
-                            navigate(props.details.pathname, { replace: true });
-                            }
-                        }}
-                        >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="35"
-                            height="35"
-                            viewBox="0 0 24 24"
-                            fill="skyblue"
-                        >
-                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
-                        </svg>
-                        </button>
-                        <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
-                        {props.details?.title && props.details.title}
-                        </h1>
-                    </div>
-                </div>
-            </div> */}
-        {/* end of job title */}
-
-        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
-            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
-            
+      <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+          <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             <div className="mb-4 w-full h-auto">
                 <VideoElement videoId={props?.details?.media_uid} />
             </div>
 
-            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
+            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md xl:flex xl:justify-between gap-4">
                 <div className="w-full flex flex-col justify-between">
-                    <div className="w-full">
-                        <p className="w-full text-base text-right text-sky-blue">
-                        {props?.details && props.details.job_to}
-                        </p>
-                        <div className="text-base tracking-wide">
-                            <p className="font-semibold text-black dark:text-white tracking-wider">
-                                Description:{" "}
-                            </p>
-                            <p className="p-2 ml-8 border-b border-sky-blue">
-                                {props?.details && props.details.description}
-                            </p>
-                        </div>
-                        <div className="mt-6 w-full lg:flex gap-8">
-                            <div className="w-full text-base tracking-wide">
-                                <p className="font-semibold text-black dark:text-white tracking-wider">
-                                    Delivery Detail:{" "}
-                                </p>
-                                <p className="p-2 ml-8">
-                                    {props?.details && props.details.job_description}
-                                </p>
-                            </div>
-                            <div className="my-2 lg:my-0">
-                                <IndexJobActions details={props.details} />
-                            </div>
-                        </div>
-                    </div>
+                  {/* <p className="w-full text-base text-right text-sky-blue">
+                  {props?.details && props.details.job_to}
+                  </p> */}
+                  <div className="text-base tracking-wide">
+                      <p className="font-semibold text-black dark:text-white tracking-wider">
+                          Description:{" "}
+                      </p>
+                      <p className="p-2 ml-8 border-b border-sky-blue">
+                          {props?.details && props.details.description}
+                      </p>
+                  </div>
+                  <div className="mt-6 w-full">
+                      <div className="w-full text-base tracking-wide">
+                          <p className="font-semibold text-black dark:text-white tracking-wider">
+                              Delivery Detail:{" "}
+                          </p>
+                          <p className="p-2 ml-8">
+                              {props?.details && props.details.job_description}
+                          </p>
+                      </div>
+                      {/* <div className="my-2 xl:my-0">
+                          <IndexJobActions details={props.details} />
+                      </div> */}
+                  </div>
                 </div>
 
-                {/* job details */}
-                <div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
-                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
-                    {passDue ? (
-                        <div className="my-1">
-                            <p className="text-base text-slate-700">
-                                <span className="font-semibold">Due: </span>
-                                {props?.details && props.details.delivery_date.split(" ")[0]}
-                            </p>
-                            {props?.delivery_date && (
-                                <p className="py-2 text-base text-slate-700">
-                                {props.details.delivery_date.split(" ")[1]}
-                                </p>
-                            )}
-                        </div>
-                    ) : (
-                        <div className="my-1 flex items-start gap-3">
-                            <p className="font-semibold">Due: </p>
-                            <div className="flex flex-col justify-between">
-                                <p className="text-base text-slate-700 tracking-wide">
-                                <CountDown
-                                    lastDate={props?.details && props.details.delivery_date}
-                                />
-                                </p>
-                                <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
-                                <span>Hrs</span>
-                                <span>Min</span>
-                                <span>Sec</span>
-                                </div>
-                            </div>
-                        </div>
-                    )}
+                <div className="flex justify-between items-center gap-1 xl:min-w-[350px]">
+                  <div className="h-[150px] xl:h-full w-[150px] xl:min-w-[150px]">
+                      <IndexJobActions details={props.details} />
+                  </div>
+                  {/* job details */}
+                  <div className="min-w-[170px] flex flex-col justify-center gap-2">
+                      {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
+                      {passDue ? (
+                          <div className="my-1">
+                              <p className="text-base text-slate-700">
+                                  <span className="font-semibold">Due: </span>
+                                  {props?.details && props.details.delivery_date.split(" ")[0]}
+                              </p>
+                              {props?.delivery_date && (
+                                  <p className="py-2 text-base text-slate-700">
+                                  {props.details.delivery_date.split(" ")[1]}
+                                  </p>
+                              )}
+                          </div>
+                      ) : (
+                          <div className="my-1 flex items-start gap-3">
+                              <p className="font-semibold">Due: </p>
+                              <div className="flex flex-col justify-between">
+                                  <p className="text-base text-slate-700 tracking-wide">
+                                  <CountDown
+                                      lastDate={props?.details && props.details.delivery_date}
+                                  />
+                                  </p>
+                                  <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
+                                  <span>Hrs</span>
+                                  <span>Min</span>
+                                  <span>Sec</span>
+                                  </div>
+                              </div>
+                          </div>
+                      )}
 
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Reward:{" "}
-                        </span>
-                        <span className="">{thePrice}</span>
-                    </div>
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Reward:{" "}
+                          </span>
+                          <span className="">{thePrice}</span>
+                      </div>
 
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Duration:{" "}
-                        </span>
-                        <span className="">
-                        {props.details?.timeline_days && props.details.timeline_days}{" "}
-                        day(s)
-                        </span>
-                    </div>
-                    {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        No:{" "}
-                        </span>
-                        <span className="">
-                        {props.details?.contract && props.details.contract}
-                        </span>
-                    </div> */}
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Duration:{" "}
+                          </span>
+                          <span className="">
+                          {props.details?.timeline_days && props.details.timeline_days}{" "}
+                          day(s)
+                          </span>
+                      </div>
+                  </div>
+                  {/* end of job details */}
                 </div>
-                {/* end of job details */}
-            </div>
             </div>
+          </div>
 
-            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
-                {/* TEXTAREA SECTION */}
-                <div className="w-full mb-3">
-                    <div className="w-full">
-                        <div className="pl-7 flex items-center gap-3">
-                            <button
+          <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+              {/* TEXTAREA SECTION */}
+              <div className="w-full mb-3">
+                  <div className="w-full">
+                      {/* <div className="pl-7 flex items-center gap-3">
+                          <button
+                              name="message"
+                              onClick={(e) => setTab(e.target.name)}
+                              className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                              tab == "message"
+                                  ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                  : "bg-white text-[#000] border-t-[2px]"
+                              }`}
+                          >
+                              Send Message
+                          </button>
+                          <button
+                              name="files"
+                              onClick={(e) => setTab(e.target.name)}
+                              className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
+                              tab == "files"
+                                  ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                                  : "bg-white text-[#000] border-t-[2px]"
+                              }`}
+                          >
+                              Send Files
+                          </button>
+                      </div> */}
+                      {/* switch button */}
+                      <div className="grid grid-cols-2">
+                      {tabs.map((item) => (
+                          <TabButton 
+                              key={item}
+                              item={item}
+                              selectedTab={selectedTab}
+                              setSelectedTab={setSelectedTab}
+                          />
+                      ))}
+                      </div>
+                      {/* switch button */}
+                      <div className="w-full bg-red-50 overflow-x-auto">
+                        {selectedTab == "Send Message" ? (
+                          <div className="p-2 w-full">
+                            <textarea
+                                className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
+                                // rows="10"
+                                style={{ resize: "none" }}
                                 name="message"
-                                onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
-                                tab == "message"
-                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                                    : "bg-white text-[#000] border-t-[2px]"
-                                }`}
-                            >
-                                Send Message
-                            </button>
-                            <button
-                                name="files"
-                                onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
-                                tab == "files"
-                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                                    : "bg-white text-[#000] border-t-[2px]"
-                                }`}
-                            >
-                                Send Files
-                            </button>
-                        </div>
-                        {tab == "message" ? (
-                        <textarea
-                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
-                            // rows="10"
-                            style={{ resize: "none" }}
-                            name="message"
-                            onChange={handleMessageChange}
-                            value={messageToSend}
-                            autoFocus
-                        />
-                        ) : (
-                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
-                            <div className="files flex">
-                            <label
-                                htmlFor="file"
-                                className="custom-btn btn-gradient text-base text-white"
-                            >
-                                Select Files to Upload
-                            </label>
-                            <input
-                                type="file"
-                                id="file"
-                                accept="image/*"
-                                style={{ display: "none" }}
-                                onChange={handleFileChange}
+                                onChange={handleMessageChange}
+                                value={messageToSend}
+                                autoFocus
                             />
-                            </div>
-                            <div className="selected_file my-2 overflow-y-auto">
-                            {filesToSend.length > 0 &&
-                                filesToSend.map((item, index) => (
-                                <p key={index} className="flex items-center space-x-2">
-                                    <span>{item.name}</span>
-                                    <button
-                                    name="remove"
-                                    onClick={() => handleRemoveImage(item)}
-                                    className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
-                                    >
-                                    x
-                                    </button>
-                                </p>
-                                ))}
-                            </div>
+                          </div>
+                        ) : (
+                        <div className="p-2 w-full">
+                          <div className="p-4 mb-2 h-[150px] text-base text-slate-600">
+                              <div className="files flex">
+                              <label
+                                  htmlFor="file"
+                                  className="custom-btn btn-gradient text-base text-white"
+                              >
+                                  Select Files to Upload
+                              </label>
+                              <input
+                                  type="file"
+                                  id="file"
+                                  accept="image/*,video/*"
+                                  style={{ display: "none" }}
+                                  onChange={handleFileChange}
+                              />
+                              </div>
+                              <div className="selected_file my-2 overflow-y-auto">
+                              {filesToSend.length > 0 &&
+                                  filesToSend.map((item, index) => (
+                                  <p key={index} className="flex items-center space-x-2">
+                                      <span>{item.name}</span>
+                                      <button
+                                      name="remove"
+                                      onClick={() => handleRemoveImage(item)}
+                                      className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
+                                      >
+                                      x
+                                      </button>
+                                  </p>
+                                  ))}
+                              </div>
+                          </div>
                         </div>
                         )}
-                    </div>
-
-                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                    <div className="w-full">
-                        {/* error or success display */}
-                        {requestStatus.message != "" &&
-                        (!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 or success display */}
-
-                    {/* Buttons Sections */}
-                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
-                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
-                            <button
-                                type="button"
-                                onClick={handleClearAll}
-                                className="custom-btn border-gradient"
-                            >
-                                <span className="text-gradient">Clear</span>
-                            </button>
-                            {tab == "files" ? (
+                        {/* Buttons Sections */}
+                        <div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
+                            <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
                                 <button
-                                onClick={sendFile}
-                                type="button"
-                                className="custom-btn btn-gradient text-white"
+                                    type="button"
+                                    onClick={handleClearAll}
+                                    className="custom-btn border-gradient"
                                 >
-                                {requestStatus.loading ? (
-                                    <LoadingSpinner size="6" color="sky-blue" />
-                                ) : (
-                                    <>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        viewBox="0 0 24 24"
-                                        width="20"
-                                        height="20"
-                                        fill="white"
+                                    <span className="text-gradient">Clear</span>
+                                </button>
+                                {selectedTab == "Send Files" ? (
+                                    <button
+                                    onClick={sendFile}
+                                    type="button"
+                                    className="custom-btn btn-gradient text-white"
                                     >
-                                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
-                                    </svg>
+                                    {requestStatus.loading ? (
+                                        <LoadingSpinner size="6" color="sky-blue" />
+                                    ) : (
+                                        <>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 0 24 24"
+                                            width="20"
+                                            height="20"
+                                            fill="white"
+                                        >
+                                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
+                                        </svg>
 
-                                    <span className="text-white">Upload Files</span>
-                                    </>
-                                )}
-                                </button>
-                            ) : (
-                                <button
-                                onClick={sendTaskMessage}
-                                type="button"
-                                className="custom-btn btn-gradient text-white"
-                                >
-                                {requestStatus.loading ? (
-                                    <LoadingSpinner size="6" color="sky-blue" />
+                                        <span className="text-white">Upload Files</span>
+                                        </>
+                                    )}
+                                    </button>
                                 ) : (
-                                    <span className="text-white">Send</span>
+                                    <button
+                                    onClick={sendTaskMessage}
+                                    type="button"
+                                    className="custom-btn btn-gradient text-white"
+                                    >
+                                    {requestStatus.loading ? (
+                                        <LoadingSpinner size="6" color="sky-blue" />
+                                    ) : (
+                                        <span className="text-white">Send</span>
+                                    )}
+                                    </button>
                                 )}
-                                </button>
-                            )}
+                            </div>
                         </div>
-                    </div>
-                    {/* end of Buttons Sections  */}
-                </div>
-                {/* END OF TEXTAREA */}
+                        {/* end of Buttons Sections  */}
+                      </div>
+                  </div>
 
-                {/* MESSAGE SECTION */}
-                <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
-                    <div className="flex justify-between items-center gap-5">
-                        <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
-                        <span>Message</span>
-                        <button
-                        type="button"
-                        onClick={popUpHandler}
-                        className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
-                        >
-                        View all
-                        </button>
-                        </p>
-                    </div>
-                    {props.activeJobMesList.loading ? (
-                        <LoadingSpinner size="16" color="sky-blue" />
-                    ) : (
-                        <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
-                    )}
-                </div>
-                {/* END OF MESSAGE */}
-            </div>
-        </div>
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="w-full">
+                      {/* error or success display */}
+                      {requestStatus.message != "" &&
+                      (!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 or success display */}
+              </div>
+              {/* END OF TEXTAREA */}
+
+              {/* MESSAGE SECTION */}
+              <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md">
+                  <div className="flex justify-between items-center gap-5">
+                      <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
+                      <span>Message</span>
+                      <button
+                      type="button"
+                      onClick={popUpHandler}
+                      className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
+                      >
+                      View all
+                      </button>
+                      </p>
+                  </div>
+                  {props.activeJobMesList.loading ? (
+                      <LoadingSpinner size="16" color="sky-blue" />
+                  ) : (
+                      <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
+                  )}
+              </div>
+              {/* END OF MESSAGE */}
+          </div>
+      </div>
 
       {/* POPOUT SECTION */}
       {popUp && (

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -60,12 +60,12 @@ function CurrentTaskAction({jobDetails}) {
     }
 
   return (
-    <div className='dark:bg-black'>
+    <div className='h-full dark:bg-black'>
 
-          <div className="w-full text-sm text-left text-gray-500">
+          <div className="h-full w-full text-sm text-left text-gray-500">
             {jobDetails.job_type == 'MEDIA' ?
-            <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
+            <div className="h-full flex justify-center items-center">
+                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>

src/components/MyActiveJobs/JobDetailPopout.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import ModalCom from '../Helpers/ModalCom'
+
+export default function JobDetailPopout({action, situation, jobDetail}) {
+    return (
+        <ModalCom action={action} situation={situation}>
+            <div className="modal-container">
+                <div className="modal-header-con">
+                    <h1 className="modal-title">
+                        Delivery Detail
+                    </h1>
+                    <button
+                        type="button"
+                        className="modal-close-btn"
+                        onClick={action}
+                    >
+                        <svg
+                        width="36"
+                        height="36"
+                        viewBox="0 0 36 36"
+                        fill="none"
+                        className="fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                        >
+                        <path
+                            d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                            fill=""
+                            fillOpacity="0.6"
+                        />
+                        <path
+                            d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                            fill="#"
+                            fillOpacity="0.6"
+                        />
+                        </svg>
+                    </button>
+                </div>
+                <div className="modal-body-wrapper">
+                    <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p>
+                </div>
+                <div className="modal-footer-wrapper justify-end">
+                    <button
+                        onClick={action}
+                        className="custom-btn border-gradient"
+                    >
+                        <span className="text-gradient">Close</span>
+                    </button>
+                </div>
+            </div>
+        </ModalCom>
+      );
+}

src/components/MyJobs/MyJobTable.jsx

@@ -7,13 +7,14 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
-import EditJobPopOut from "../jobPopout/EditJobPopout";
+// import EditJobPopOut from "../jobPopout/EditJobPopout";
 
 import DeleteIcon from "../../assets/images/icon-delete.svg";
 import EditIcon from "../../assets/images/icon-edit.svg";
 import { tableReload } from "../AddJob/settings";
 import CreditPopup from "../MyWallet/Popup/CreditPopup";
 import JobListPopout from "../jobPopout/JobListPopout";
+import EditJobPopoutNew from "../jobPopout/EditJobPopoutNew";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const dispatch = useDispatch();
@@ -103,7 +104,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       );
   };
 
-  const currentJobList = filterJobList();
+  const currentJobList = filterJobList()?.filter(item => item?.job_mode == 'GENERAL'); // Show only jobs with job mode of GENERAL
 
   // Handling Filter Pagination
   const filteredCurrentJobList = currentJobList?.slice(
@@ -182,7 +183,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
       {/* END of Delete Job Popout */}
 
       {editJob.show && (
-        <EditJobPopOut
+        <EditJobPopoutNew
           details={editJob.data}
           onClose={() => {
             setEditJob({
@@ -357,13 +358,14 @@ function myJobTableFeatures(
             {MyJobList?.data?.result_list?.length > 0 ? (
               filteredCurrentJobList.length > 0 ? (
                 filteredCurrentJobList.map((value, index) => (
-                  <JobListItem
-                    key={index}
-                    index={index}
-                    value={value}
-                    image_server={MyJobList.data.session_image_server}
-                  />
-                ))
+                      <JobListItem
+                        key={index}
+                        index={index}
+                        value={value}
+                        image_server={MyJobList.data.session_image_server}
+                      />
+                    )
+                )
               ) : (
                 <NoJobsRow text="No Jobs Available In This Category!" />
               )

src/components/MyTasks/MyJobTable.jsx

@@ -122,17 +122,43 @@ export default function MyJobTable({ className, ActiveJobList, Account, imageSer
                   </div>
 
                   <div className="flex justify-center items-center py-4 px-2">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        navigate("/manage-active-job", {
-                          state: { ...task, pathname },
-                        });
-                      }}
-                      className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      {task.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
-                    </button>
+                    {accountType ?
+                      <button
+                        type="button"
+                        onClick={() => {
+                          navigate("/manage-active-job", {
+                            state: { ...task, pathname },
+                          });
+                        }}
+                        className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      >
+                        {task.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
+                      </button>
+                      :
+                      <button
+                        type="button"
+                        onClick={() => {
+                          navigate("/manage-active-job", {
+                            state: { ...task, pathname },
+                          });
+                        }}
+                        className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 11 20"
+                          id="Arrow"
+                          className="w-[0.7rem]"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                            // fill=""
+                            className="color000000 svgShape fill-[#fff]"
+                          ></path>
+                        </svg>
+                      </button>
+                    }
                   </div>
                 </div>
               );

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -51,7 +51,7 @@ function AmountSection({ currency, amount, country }) {
     <div className={`flex items-center gap-8`}>
       {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
       <h1 className="min-w-[150px] job-label">
-        Amount({currency})
+        Amount ({currency})
       </h1>
       <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
@@ -91,7 +91,7 @@ function TotalSection({ currency, amount, fee, country }) {
   return (
     <div className={`flex items-center gap-8`}>
       <h1 className="min-w-[150px] job-label">
-        Total
+        Total ({currency})
       </h1>
       <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}

src/components/MyWallet/Wallet.jsx

@@ -60,13 +60,6 @@ const WalletRoutes = () => {
     getPaymentHistory();
   }, [walletTable]);
 
-  console.log(
-    "Testing all country: ",
-    allCountries,
-    "Testing wallet: ",
-    walletDetails
-  );
-
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -18,21 +18,21 @@ function PurchasesTable({purchase}) {
     <div className='flex flex-col justify-between min-h-[500px]'>
         {purchase.data.length ?
         <table className="wallet-activity w-full table-auto border-collapse text-left">
-            <thead className='border-b-2'>
-                <tr className='text-slate-600'>
-                <th className="p-2">Trx.</th>
-                <th className="p-2">Amount</th>
-                <th className="p-2">Fee</th>
+            <thead className='w-full'>
+                <tr className='text-slate-600 dark:text-white'>
+                <th className="p-4">Trx.</th>
+                <th className="p-4 text-right">Amount</th>
+                <th className="p-4 text-right">Fee</th>
                 </tr>
             </thead>
             <tbody>
                 {currentPurchase.map((item, index) => (
-                <tr key={index} className='text-slate-500'>
-                    <td className="p-2">{item.added_date}<br />
+                <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                    <td className="p-4">{item.added_date}<br />
                     <b>{item.confirmation} </b>
                     </td>
-                    <td className="p-2">{item.amount}</td>
-                    <td className="p-2">{item.fee}</td>
+                    <td className="p-4 text-right">{item.amount}</td>
+                    <td className="p-4 text-right">{item.fee}</td>
                 </tr>
                 ))}
             </tbody>
@@ -48,7 +48,7 @@ function PurchasesTable({purchase}) {
         }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -21,28 +21,28 @@ function RecentActivityTable({ payment }) {
     <div className="flex flex-col justify-between min-h-[500px]">
       {payment?.data?.length > 0 ? 
         <table className="wallet-activity w-full table-auto border-collapse text-left">
-          <thead className="border-b-2">
-            <tr className="text-slate-600">
-              <th className="p-2">Date</th>
-              <th className="p-2">Trx.</th>
-              <th className="p-2">Amnt./Fee</th>
-              <th className="p-2">Status</th>
+          <thead className="w-full">
+            <tr className="text-slate-600 dark:text-white">
+              <th className="p-4">Date</th>
+              <th className="p-4">Trx.</th>
+              <th className="p-4 text-right">Amnt./Fee</th>
+              <th className="p-4">Status</th>
             </tr>
           </thead>
           <tbody>
             {currentActivity.map((item, index) => (
-              <tr key={index} className="text-slate-500">
-                <td className="p-2">{item.trx_date}</td>
+              <tr key={index} className="dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300">
+                <td className="p-4">{item.trx_date}</td>
                 <td
                   className="p-4"
                   dangerouslySetInnerHTML={{ __html: item.recipient }}
                 ></td>
-                <td className="p-2">
+                <td className="p-4 text-right">
                   {item.amount}
                   <br />
                   {item.fee}
                 </td>
-                <td className="p-2">{item.status}</td>
+                <td className="p-4">{item.status}</td>
               </tr>
             ))}
           </tbody>
@@ -70,6 +70,7 @@ function RecentActivityTable({ payment }) {
         data={payment?.data}
         start={indexOfFirstItem}
         stop={indexOfLastItem}
+        borderTop={false}
       />
       {/* END OF PAGINATION BUTTON */}
     </div>

src/components/MyWallet/WalletHeader.jsx

@@ -11,7 +11,7 @@ import { useSelector } from "react-redux";
 
 export default function WalletHeader(props) {
 
-  const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
+  const {userDetails: { account_type, wallet_available_status }} = useSelector((state) => state?.userDetails);
   //  debugger;
   //props.myWalletList.result_list
   let { pathname } = useLocation();
@@ -22,6 +22,7 @@ export default function WalletHeader(props) {
       props.setBalanceDropdown.toggle();
     else navigate("/my-wallet", { replace: true });
   }
+  // console.log('props.myWalletList', wallet_available_status)
   return (
     <>
       {account_type == 'FULL' ?
@@ -49,6 +50,8 @@ export default function WalletHeader(props) {
               </h3>
             </div>
             <div className="content px-7 pb-7">
+            {/* wallet_available_status == 'WALLET_AVAILABLE' */}
+            {(wallet_available_status == 'WALLET_AVAILABLE' || localStorage.getItem('wallet_available_status')== 'WALLET_AVAILABLE') ?
               <ul>
                 {props.myWalletList &&
                   props.myWalletList?.length > 0 &&
@@ -176,17 +179,25 @@ export default function WalletHeader(props) {
                 {/*    </div>*/}
                 {/*</li>*/}
               </ul>
+            :
+              <div className='p-2 w-full flex gap-4 items-center'>
+                <img className='w-[100px!important] h-auto' src={localImgLoad('images/icons/wallet.svg')} alt='Wallet Icon' />
+                <p className='text-lg text-red-500'>We do not currently support wallets in your area. We are diligently working on it. </p>
+              </div>
+            }
+
+            {(wallet_available_status == 'WALLET_AVAILABLE' || localStorage.getItem('wallet_available_status')== 'WALLET_AVAILABLE') &&
               <div className="add-money-btn flex justify-center items-center mt-3">
                 {/* <button
-                                  onClick={() => {
-                                  if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
-                                  else navigate('/my-wallet', {replace: true})
-                                  }}
-                                  type="button"
-                                  className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                              >
-                                  Manage
-                              </button> */}
+                    onClick={() => {
+                    if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
+                    else navigate('/my-wallet', {replace: true})
+                    }}
+                    type="button"
+                    className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                    Manage
+                </button> */}
                 <Link
                   to="/my-wallet"
                   onClick={onWalletClick}
@@ -195,6 +206,7 @@ export default function WalletHeader(props) {
                   Manage
                 </Link>
               </div>
+            }
             </div>
           </div>
         </div>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -6,10 +6,20 @@ import CommonHead from "../UserHeader/CommonHead";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import OthersInterestedTable from "./OthersInterestedTable";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function ManageInterestOffer(props) {
+
+    const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+    let { othersInterestedTable } = useSelector((state) => state.tableReload); // FOR OTHERS INTERESTED TABLE RELOAD
+    
+    let walletBal = walletDetails?.data?.filter(wallet => wallet.code == props?.offerDetails?.currency_code) // USER WALLET BALANCE FOR CORRESPONDING TASK CURRENCY
+
+    let clientAdded = new Date(props.offerDetails?.client_added)
+
     const dispatch = useDispatch()
     const navigate = useNavigate()
     const apiCall = new usersService()
@@ -26,6 +36,8 @@ export default function ManageInterestOffer(props) {
 
     const [messageList, setMessageList] = useState({loading: true, data: []}) // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
 
+    const [interestStats, setInterestStats] = useState({loading: true, data: []}) // STATE TO HOLD INTEREST STATS
+
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
@@ -120,6 +132,20 @@ export default function ManageInterestOffer(props) {
             console.log('Failed', err)
         })
     },[messageListReload])
+
+    useEffect(()=>{ //API to get Interest stats
+        let reqData = { // API PAYLOADS
+            interest_uid: props?.offerDetails?.interest_uid,
+            client_uid: props?.offerDetails?.client_uid
+        }
+        setInterestStats(prev => ({...prev, loading: true}))
+        apiCall.interestStatistics(reqData).then(res=>{
+            setInterestStats({loading: false, data:res?.data})
+        }).catch(err => {
+            setInterestStats(prev => ({...prev, loading: false}))
+            console.log('Failed', err)
+        })
+    },[othersInterestedTable])
     return (
         <Layout>
             <CommonHead
@@ -183,12 +209,21 @@ export default function ManageInterestOffer(props) {
                                         <button
                                         name="message"
                                         onClick={(e) => setTab(e.target.name)}
-                                        className={`px-4 py-1 rounded-t-2xl ${
+                                        className={`px-4 py-1 rounded-t-2xl flex gap-2 ${
                                             tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
                                           }`}
                                         >
                                         Messages ({messageList.data.length})
                                         </button>
+                                        <button
+                                        name="details"
+                                        onClick={(e) => setTab(e.target.name)}
+                                        className={`px-4 py-1 rounded-t-2xl ${
+                                            tab == "details" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                                          }`}
+                                        >
+                                        Delivery Details
+                                        </button>
                                     </div>
                                     {/* END OF switch button */}
 
@@ -197,40 +232,90 @@ export default function ManageInterestOffer(props) {
                                     <div className="info-details w-full border-t">
                                         <div className="my-0 md:my-3 block md:flex items-center gap-10">
                                             <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                                <p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Name</p>
+                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</p>
                                             </div>
                                             <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
-                                                <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>
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_completed ? props.offerDetails?.client_jobs_completed :0}</span>
-                                        </div>
-                                        <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">Jobs active</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_active ? props.offerDetails?.client_jobs_active:0}</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">Jobs uncompleted</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_jobs_missed ? props.offerDetails?.client_jobs_missed:0}</span>
-                                            </div>
-                                        </div>
-                                        <div className="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">% completion</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_percent_completion ? props.offerDetails?.client_percent_completion:0}</span>
-                                            </div>
-                                            <div className="flex items-center gap-1">
-                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Pending Offers</span>
-                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_offers_pending ? props.offerDetails?.client_offers_pending:0}</span>
+                                                <p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Member Since</p>
+                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">
+                                                    {clientAdded.getFullYear()}{" - "}
+                                                    {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                </p>
                                             </div>
                                         </div>
+                                        <>
+                                        {interestStats.loading ?
+                                            <LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
+                                            :
+                                            <>
+                                                <div className='w-full'>
+                                                    <h1 className="text-xl font-extrabold text-black dark:text-white tracking-wide">Previous Job Statistics</h1>
+                                                </div>
+                                                <div className='p-2 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl rounded-2xl bg-sky-100'>
+                                                    <div className='contents md:flex flex-col gap-3'>
+                                                        <div className='flex items-center gap-4'>  
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
+                                                        </div>
+                                                    </div>
+                                                    <div className='contents md:flex flex-col gap-3'>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed:</p>
+                                                            <p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
+                                                        </div>
+                                                        <div className="flex items-center gap-4">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                {/* <div className="my-0 md:my-3 block md:flex items-center gap-5">
+                                                    <div className='my-3 md:my-0 flex items-center gap-4'>  
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
+                                                    </div>
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
+                                                        <p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
+                                                    </div>
+                                                </div> */}
+                                                {/* <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-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Active:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
+                                                    </div>
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Uncompleted:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
+                                                    </div>
+                                                </div> */}
+                                                {/* <div className="block md:flex items-center gap-10">
+                                                    <div className="my-3 md:my-0 flex items-center gap-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">% Completion:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
+                                                    </div>
+                                                    <div className="flex items-center gap-4">
+                                                        <p className="min-w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                        <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
+                                                    </div>
+                                                </div> */}
+                                            </>
+                                        }
+                                        </>
                                     </div>
-                                    :
+                                    : tab == 'message' ?
                                     <div className="message-details w-full border-t">
                                         <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">
@@ -294,14 +379,31 @@ export default function ManageInterestOffer(props) {
                                         }
                                         </div>
                                     </div>
+                                    : tab == 'details' ?
+                                    <div className="info-details w-full border-t">
+                                        <h1 className="my-3 text-base font-medium text-dark-gray dark:text-white tracking-wide">{props?.offerDetails?.description}</h1>
+                                    </div>
+                                    :
+                                    null
                                     }
                                 </div>
                             </div>
                             {/* END OF Detail section */}
 
-                            {/* 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="p-4 w-full min-h-full bg-sky-100 rounded-2xl dark:bg-dark-gray col-span-1">
+                                {/* Wallet balance and reward */}
+                                <div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
+                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
+                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
+                                        <span className="font-medium text-dark-gray dark:text-white">{ walletDetails?.loading ? 'loading...' : PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                    </div>
+                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
+                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Reward:</p>
+                                        <span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(props?.offerDetails?.price * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
+                                    </div>
+                                </div>
+                                {/* BUTTON section */}
+                                <div className="w-full">
                                     <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' />
@@ -333,6 +435,7 @@ export default function ManageInterestOffer(props) {
                                             </button>
                                         }
                                     </div>
+                                    {/* END of BUTTON section */}
 
                                     {/* ERROR DISPLAY */}
                                     <div className="w-full">
@@ -357,7 +460,6 @@ export default function ManageInterestOffer(props) {
                                     {/* End of error or success display */}
                                 </div>
                             </div>
-                            {/* END of BUTTON section */}
                         </div>
                     </div>
                     {/* END OF manage offer section */}

src/components/OffersInterest/OffersInterestTable.jsx

@@ -100,9 +100,21 @@ export default function OffersInterestTable({offerInterestList, className}) {
                                                 });
                                             }}
                                             type="button"
-                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            className='w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                                         >
-                                            View
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 11 20"
+                                                id="Arrow"
+                                                className="w-[0.7rem]"
+                                                >
+                                                <path
+                                                    fillRule="evenodd"
+                                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                                    // fill=""
+                                                    className="color000000 svgShape fill-[#fff]"
+                                                ></path>
+                                            </svg>
                                         </button>
                                     </td>
                                 </tr>

src/components/OffersInterest/OthersInterestedTable.jsx

@@ -101,9 +101,22 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                                 });
                                             }}
                                             type="button"
-                                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                         >
-                                            View
+                                            {/* View */}
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 11 20"
+                                                id="Arrow"
+                                                className="w-[0.7rem]"
+                                                >
+                                                <path
+                                                    fillRule="evenodd"
+                                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                                    // fill=""
+                                                    className="color000000 svgShape fill-[#fff]"
+                                                ></path>
+                                            </svg>
                                         </button>
                                     </td>
                                 </tr>

src/components/Pagination/PaginatedList.jsx

@@ -1,7 +1,7 @@
-const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
+const PaginatedList = ({ onClick, prev, next, data, start, stop, borderTop=true }) => {
   if (data?.length > process.env.REACT_APP_ITEM_PER_PAGE) {
     return (
-      <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2 w-full">
+      <div className={`p-3 flex justify-center items-center min-h-[70px] space-x-2 w-full ${borderTop ? 'border-t-2' : 'border-t-0'}`}>
         {/* Render pagination buttons */}
         {!prev && (
           <button

src/components/Partials/Layout.jsx

@@ -53,12 +53,12 @@ export default function Layout({ children }) {
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
-              <div className="flex-[80%] 2xl:flex-[85%] w-full">
+            <div className="nft-container h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center 2xl:flex-row 2xl:justify-between gap-10">
+              <div className="w-full 2xl:w-[calc(100%-250px)]">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
+              <div className="nft-right-side-content w-full 2xl:w-[200px] 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>
@@ -67,7 +67,7 @@ export default function Layout({ children }) {
       </div>
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
-          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="modal-header-con">
               <h1 className="modal-title">
                 Confirm

src/components/Partials/MediaLayout.jsx

@@ -53,22 +53,11 @@ export default function MediaLayout({backpath, title, children }) {
 
     return (
         <>
-            <div className="nft-main-wrapper-layout media container mx-auto">
-                <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
-                    {/* sidebar */}
-                    {/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
-                    {/*    <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />*/}
-                    {/*</div>*/}
-                    {/*{MobileSideBar && (*/}
-                    {/*    <div onClick={() => setMobileSidebar.toggle()} className="bg-black bg-opacity-20 fixed left-0 top-0 w-full h-full z-[50] block xl:hidden"></div>*/}
-                    {/*)}*/}
-                    {/*<div className={`nft-sidebar block xl:hidden section-shadow w-[280px] pl-3 bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed z-[60] top-0 pt-8 ${MobileSideBar ? "left-0" : "-left-[290px]"}`}>*/}
-                    {/*    <MobileSidebar logoutModalHandler={logoutModalHandler} sidebar={MobileSideBar} action={() => setMobileSidebar.toggle()} myJobList={userJobList} />*/}
-                    {/*</div>*/}
-                    {/* end sidebar */}
-                    <div className={`nft-header-container-wrapper flex-1 md:ml-12 xl:ml-[110px]  h-full`}>
+            <div className="relative w-full max-w-[2000px] nft-main-wrapper-layout mx-auto">
+                <div className={`nft-wrapper-layout-container w-full min-h-screen flex`}>
+                    <div className={`w-full nft-header-container-wrapper h-full 2xl:px-10 px-8`}>
                         {/* header */}
-                        <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 ">
+                        <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0">
                             <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                         </div>
                         {/* container */}
@@ -76,9 +65,6 @@ export default function MediaLayout({backpath, title, children }) {
                             <div className="nft-main-container_media flex-[100%] w-full">
                                 {children && children}
                             </div>
-                            {/*<div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">*/}
-                            {/*    <RightSideBar myJobList={userJobList} />*/}
-                            {/*</div>*/}
                         </div>
                     </div>
                 </div>

src/components/Partials/MobileSideBar.jsx

@@ -21,6 +21,8 @@ export default function MobileSidebar({
   const marketData = jobLists?.result_list;
   let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
+  let walletExist = userDetails?.wallet_available_status == 'WALLET_AVAILABLE' || localStorage.getItem('wallet_available_status')== 'WALLET_AVAILABLE'
+
   return (
     <div className="w-full h-full">
       {/* logo-area */}
@@ -138,7 +140,7 @@ export default function MobileSidebar({
           </div>
         )}
 
-        {userDetails?.account_type !== "FAMILY" && (
+        {(userDetails?.account_type !== "FAMILY" && walletExist) && (
           <>
             {!userDetails?.post_jobs ? (
               <div

src/components/Partials/RightSideBar.jsx

@@ -36,6 +36,7 @@ export default function RightSideBar({ myJobList }) {
   };
 
   const { userDetails } = useSelector((state) => state?.userDetails);
+  let walletExist = userDetails?.wallet_available_status == 'WALLET_AVAILABLE' || localStorage.getItem('wallet_available_status')== 'WALLET_AVAILABLE'
 
   return (
     <>
@@ -129,25 +130,27 @@ export default function RightSideBar({ myJobList }) {
                     </p>
                   </div>
                 </div>
-                <div className="item flex space-x-3 items-center">
-                  {/* image */}
-                  <div className="w-8 h-8 rounded-full bg-sky-500/50 p-1 flex justify-center items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
-                      <path
-                        fillRule="evenodd"
-                        d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
-                        fill="#ffffff"
-                        className="color000000 svgShape"
-                      ></path>
-                    </svg>
+                { Number(process.env.REACT_APP_SHOW_USER_PAGE) == 1 &&
+                  <div className="item flex space-x-3 items-center">
+                    {/* image */}
+                    <div className="w-8 h-8 rounded-full bg-sky-500/50 p-1 flex justify-center items-center">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+                        <path
+                          fillRule="evenodd"
+                          d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+                          fill="#ffffff"
+                          className="color000000 svgShape"
+                        ></path>
+                      </svg>
+                    </div>
+                    {/* name */}
+                    <div>
+                      <p className="text-thin-light-gray text-base font-medium">
+                        <NavLink to="/yourpage">My Page</NavLink>
+                      </p>
+                    </div>
                   </div>
-                  {/* name */}
-                  <div>
-                    <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/yourpage">My Page</NavLink>
-                    </p>
-                  </div>
-                </div>
+                }
               </>
             )}
 
@@ -278,7 +281,7 @@ export default function RightSideBar({ myJobList }) {
         </div>
 
         {/*JOB LINKS*/}
-        {userDetails?.account_type !== "FAMILY" &&
+        {(userDetails?.account_type !== "FAMILY" && walletExist) &&
           myJobList?.data?.result_list?.length > 0 && (
             <div className="top-platform mt-6 bg-white dark:bg-dark-white rounded-2xl py-8 w-full 2xl:mb-10 2xl:border-none border ">
               {/* heading */}

src/components/Partials/Sidebar.jsx

@@ -22,6 +22,8 @@ export default function Sidebar({
   const marketData = jobLists?.result_list;
   let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
+  let walletExist = userDetails?.wallet_available_status == 'WALLET_AVAILABLE' || localStorage.getItem('wallet_available_status')== 'WALLET_AVAILABLE'
+
   useEffect(() => {
     const title = document.querySelectorAll(".menu-setting-items .heading");
     if (sidebar) {
@@ -104,7 +106,7 @@ export default function Sidebar({
           }`}
         >
           <div className="heading mb-5">
-            <h1 className="title text-xl font-bold text-sky-blue">Menu</h1>
+            <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Menu</h1>
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
@@ -139,11 +141,11 @@ export default function Sidebar({
         {userDetails?.account_type !== "FAMILY" && (
           <div
             className={`menu-item transition-all duration-300 ease-in-out ${
-              sidebar ? "my-5" : ""
+              sidebar ? "mb-5" : "mb-2"
             }`}
           >
             <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
+              <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Family</h1>
             </div>
             <div className="items">
               <ul className="flex flex-col space-y-6">
@@ -157,7 +159,7 @@ export default function Sidebar({
             </div>
           </div>
         )}
-        {userDetails?.account_type !== "FAMILY" && (
+        {(userDetails?.account_type !== "FAMILY" && walletExist) && (
           <>
             {!userDetails?.post_jobs ? (
               <div
@@ -204,8 +206,8 @@ export default function Sidebar({
                 }`}
               >
                 <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-sky-blue">
-                    My Jobs
+                  <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>
+                    Jobs
                   </h1>
                 </div>
                 <div className="items">
@@ -319,7 +321,7 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
         </span>
         <span
           className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
-            sidebar ? "active flex-1" : "w-0"
+            sidebar ? "active flex-1" : "hidden"
           }`}
         >
           {title && title}

src/components/Resources/tabs/MyUploadedFiles.jsx

@@ -16,6 +16,22 @@ export default function MyUploadedFiles({ uploadedFiles }) {
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
+
+
+  //FUNCTION TO OPEN NEW WINDOW
+  const openNewWindow = (e, url, width=1000, height=600) => {
+    e.preventDefault()
+    var leftPosition, topPosition;
+    //Allow for borders.
+    leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
+    //Allow for title and status bars.
+    topPosition = (window.screen.height / 2) - ((height / 2) + 50);
+    //Open the window.
+    window.open(url, "",
+    "status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
+    + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
+    + topPosition + ",toolbar=no,menubar=no,scrollbars=yes,location=no,directories=no");
+  }
   return (
     <>
       <div className="mb-4 w-full flex justify-end item-center">
@@ -44,7 +60,8 @@ export default function MyUploadedFiles({ uploadedFiles }) {
                   currentFiles.map((value, idx) => {
                     let addedDate = value?.added?.split(" ")[0];
                     let formattedSize = formatFileSize(value?.file_size);
-                    let imageLink = `${uploadedFiles?.image}${localStorage.getItem('session_token')}/myfile/${value.file_uid}`
+                    let downloadLink = value.file_type == 'video/mp4' ? `${process.env.REACT_APP_MEDIA_LINK}/myfile/${value.file_uid}` : `${uploadedFiles?.image}${localStorage.getItem('session_token')}/myfile/${value.file_uid}`
+
                     return (
                       <tr
                         key={value?.file_uid}
@@ -103,8 +120,9 @@ export default function MyUploadedFiles({ uploadedFiles }) {
                         <td className="text-right py-4 px-2">
                           <div className="flex justify-center items-center">
                             <a
-                              href={imageLink}
+                              href={downloadLink}
                               title="download"
+                              onClick={(e)=> openNewWindow(e, downloadLink)}
                               // className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
                               <img 

src/components/Settings/index.jsx

@@ -203,7 +203,7 @@ export default function Settings({ faq }) {
               </div>
               <div className="content-body w-full lg:flex lg:px-10 px-4">
                 <div className="content-tab-items lg:w-[230px] w-full mr-2">
-                  <ul className="overflow-hidden mb-10 lg:mb-0">
+                  <ul className="overflow-hidden mb-10 lg:mb-0 flex flex-col sm:block lg:flex-col">
                     {tabs.map(({ name, id, title, iconName }) => (
                       <li
                         onClick={() => tabHandler(name)}

src/components/UploadProduct/index.jsx

@@ -146,10 +146,12 @@ export default function UploadProduct({uploadTypes}) {
     
     let reqData = { // PAYLOAD FOR API CALL
       // file_name: selectedFile.substring(0,21).replace(/ /gi, ""),
+      
+      // file_data: img.file?.split(",")[1],
       file_name: `myfile.${imgDetails?.type?.split('/')[1]}`,
       file_size: imgDetails.size,
       file_type: imgDetails.type,
-      file_data: img.file?.split(",")[1],
+      files: imgDetails,
       title: itemName,
       description: description,
       msg_type: 'FILE',
@@ -173,7 +175,7 @@ export default function UploadProduct({uploadTypes}) {
     
     // API CALL TO UPLOAD COMES HERE
     setRequestStatus({loading: true, status: null, message: ''}) // SETS REQUEST LOADING TRUE
-    apiCall.sendFiles(reqData).then(res=>{
+    apiCall.uploadFile(reqData).then(res=>{
       if(res.status != 200 || res.data.internal_return < 0){
         return setRequestStatus({loading: false, status: false, message: 'Something went wrong, try again'})
       }
@@ -311,6 +313,13 @@ export default function UploadProduct({uploadTypes}) {
                               className="w-full h-full object-cover"
                               controls
                             ></video>
+                          ) : img.type === "audio" ? (
+                            <audio
+                              type=""
+                              src={img.file}
+                              className="w-full h-full object-cover"
+                              controls
+                            ></audio>
                           ) : img.type != null ? (
                             <p>{selectedFile}</p>
                           ) : null}
@@ -434,6 +443,7 @@ export default function UploadProduct({uploadTypes}) {
                       // to="/"
                       onClick={uploadItem}
                       className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center btn-gradient sm:text-18 text-sm rounded-full text-white"
+                      disabled={uploadTypes.loading || requestStatus.loading}
                     >
                       Upload
                     </button>

src/components/attachmentCom/AttachFile.jsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef, useState } from 'react'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import axios from 'axios'
+
+import usersService from '../../services/UsersService'
+
+export default function AttachFile({data='', fontSize='text-sm', showOnData=false}) {
+
+    const apiCall = new usersService()
+    
+    let [uploadedList, setUploadedList] = useState({loading: true, data:{}})
+    let [reloadList, setReloadList] = useState(false) // Triggers list of upload reload
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
+
+    const inputFile = useRef()
+
+    const upload = (event) => {
+        let inputs = {
+            file: event.target.files[0],
+            job_uid: data?.job_uid,
+            // uid: localStorage.getItem("uid"),
+            // member_id: localStorage.getItem("member_id"),
+            // sessionid: localStorage.getItem("session_token"),
+          };
+        setRequestStatus({loading: true, status:false, message:''})
+        if(!inputs.file){
+            setRequestStatus({loading: false, status:false, message:'Please select a file'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        }
+        // const formData = new FormData()
+        // for (let input in inputs) {
+        //     formData.append(input, inputs[input]);
+        // }
+        apiCall.uploadTaskFile(inputs).then(res => {
+            if(res.data.internal_return < 0){
+                inputFile.current.value = null
+                setRequestStatus({loading: false, status:false, message:'upload failed'})
+                setTimeout(()=>{
+                    setRequestStatus({loading: false, status:false, message:''})
+                }, 3000)
+                return 
+            }
+            setRequestStatus({loading: false, status:true, message:'uploaded'})
+            inputFile.current.value = null
+            setReloadList(prev => !prev) // Triggers list of upload reload
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+        }).catch(err => {
+            inputFile.current.value = null
+            setRequestStatus({loading: false, status:false, message:'upload failed'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        })
+    }
+
+    //FUNCTION TO OPEN NEW WINDOW
+    const openNewWindow = (e, url, width=1000, height=600) => {
+        e.preventDefault()
+        var leftPosition, topPosition;
+        //Allow for borders.
+        leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
+        //Allow for title and status bars.
+        topPosition = (window.screen.height / 2) - ((height / 2) + 50);
+        //Open the window.
+        window.open(url, "",
+        "status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
+        + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
+        + topPosition + ",toolbar=no,menubar=no,scrollbars=yes,location=no,directories=no");
+    }
+
+    useEffect(()=>{
+        apiCall.jobManagerFiles({job_uid:data?.job_uid || data?.origin_job_uid}).then(res => {
+            setUploadedList({loading: false, data:res.data})
+        }).catch(err => {
+            console.log(err)
+            setUploadedList({loading: false, data:{}})
+        })
+    },[data, reloadList])
+
+    return (
+        <>
+        {!showOnData ?
+            <div className='w-full h-full flex flex-col justify-center items-center'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files {
+                            requestStatus.loading ? 
+                                <LoadingSpinner size='6' /> 
+                                : 
+                                <span className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</span>
+                            } 
+                        </div>
+                        <label htmlFor='file' className={`text-black bg-[#f8ffd4] cursor-pointer text-[12px] py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add Files</label>
+                    </div>
+                    <div className='w-full p-2 rounded-2xl bg-slate-100'>
+                        <div className='text-[12px] w-full h-20 overflow-y-auto flex flex-col gap-2'>
+                            {uploadedList.loading ?
+                            <div className='w-full h-full justify-center items-center'>
+                                <LoadingSpinner size='6' height='h-full' />
+                            </div>
+                            :
+                            Object.keys(uploadedList.data).length > 0 ?
+                            uploadedList.data.result_list.length > 0 ? 
+                                uploadedList.data.result_list.map((item, index) => {
+                                    let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                    let downloadLink = fileNameExt == 'mp4' ? `${process.env.REACT_APP_MEDIA_LINK}/mytask/${item.file_uid}` : `${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`
+                                    return(
+                                        <div key={item.file_uid} className={`mb-[6px] flex justify-start gap-2 ${fontSize}`}>
+                                            <span>{index + 1}:</span>
+                                            <a 
+                                                target='_blank' 
+                                                alt='download-link' 
+                                                className='' 
+                                                href={downloadLink}
+                                                onClick={(e)=> openNewWindow(e, downloadLink)}
+                                            >
+                                                {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                            </a>
+                                        </div>
+                                    )
+                                })
+                                : 
+                                <p className='text-sm'>No Uploaded files yet</p>
+                            :
+                            <></>
+                            }
+                        </div>
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
+                </div>
+            </div>
+        :showOnData && uploadedList?.data?.result_list?.length > 0 ?
+            <div className='w-full h-full flex flex-col justify-center items-center'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files
+                        </div>
+                    </div>
+                    <div className='w-full p-2 rounded-2xl bg-slate-100'>
+                        <div className='text-[12px] w-full p-2 h-20 overflow-y-auto flex flex-col gap-2'>
+                            {uploadedList.data.result_list.map((item, index) => {
+                                let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                let downloadLink = fileNameExt == 'mp4' ? `${process.env.REACT_APP_MEDIA_LINK}/mytask/${item.file_uid}` : `${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`
+                                return(
+                                    <div key={item.file_uid} className={`mb-[6px] flex justify-start gap-2 ${fontSize}`}>
+                                        <span>{index + 1}:</span>
+                                        <a 
+                                            target='_blank' 
+                                            alt='download-link'
+                                            className='' 
+                                            href={downloadLink}
+                                            onClick={(e)=> openNewWindow(e, downloadLink)}
+                                        >
+                                            {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                        </a>
+                                    </div>
+                                )
+                            })
+                            }
+                        </div>
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
+                </div>
+            </div>
+        :
+            <></>
+        }
+        </>
+    )
+}

src/components/countdown/CustomTimer.jsx

@@ -6,12 +6,14 @@ export default function CustomTimer({className='text-emerald-500'}) {
 
     useEffect(()=>{
         const timer = setInterval(()=>{
-            setTime(prev => prev - 1)
+            if(time > 0 ){
+                setTime(prev => prev - 1)
+            }
         },1000)
         return ()=>{
             clearInterval(timer)
         }
-    },[])
+    },[time])
 
     let minutes = time == 0 ? 0 : Math.floor(time/60)
     let seconds = time == 0 ? 0 :time - (minutes * 60)

src/components/jobPopout/DeleteJobPopout.jsx

@@ -145,7 +145,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
           {/* End of error or success display */}
         </div>
         <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
-          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
             <button
               onClick={onClose}
               type="button"

src/components/jobPopout/EditJobPopout.jsx

@@ -211,315 +211,314 @@ const EditJobPopOut = ({
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="modal-header-con">
-          <h1 className="modal-title">
-            Edit Job
-          </h1>
-          <button
-            type="button"
-            className="modal-close-btn"
-            onClick={onClose}
-          >
-            <svg
-              width="36"
-              height="36"
-              viewBox="0 0 36 36"
-              fill="none"
-              className="fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
-                fill=""
-                fillOpacity="0.6"
-              />
-              <path
-                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
-                fill="#"
-                fillOpacity="0.6"
-              />
-            </svg>
-          </button>
-        </div>
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
             onSubmit={handleEditJob}
           >
             {(props) => (
-              <Form className="w-full">
-                <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
-                  <div className="flex flex-col-reverse sm:flex-row">
-                    <div className="fields w-full">
-                      <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
-                        <div className="field w-full mb-6 xl:mb-0">
+              <Form className="">
+                <div className="modal-container">
+                  <div className="modal-header-con">
+                    <h1 className="modal-title">
+                      Edit Job
+                    </h1>
+                    <button
+                      type="button"
+                      className="modal-close-btn"
+                      onClick={onClose}
+                    >
+                      <svg
+                        width="36"
+                        height="36"
+                        viewBox="0 0 36 36"
+                        fill="none"
+                        className="fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                          fill=""
+                          fillOpacity="0.6"
+                        />
+                        <path
+                          d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                          fill="#"
+                          fillOpacity="0.6"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <div className="modal-body-wrapper">
+                    <div className="flex flex-col-reverse sm:flex-row">
+                      <div className="fields w-full">
+                        <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
+                          <div className="field w-full mb-6 xl:mb-0">
+                            <InputCom
+                              fieldClass="px-6 cursor-default"
+                              label="Currency"
+                              labelClass="tracking-wide"
+                              inputBg="bg-slate-100"
+                              inputClass="input-curve lg border border-light-purple"
+                              type="text"
+                              name="country"
+                              value={props.values.country}
+                              inputHandler={props.handleChange}
+                              blurHandler={props.handleBlur}
+                              disable={true}
+                            />
+                          </div>
+
+                          {/* Price */}
+                          <div className="field w-full">
+                            <InputCom
+                              fieldClass="px-6 text-right"
+                              label="Price"
+                              labelClass="tracking-wide"
+                              inputBg="bg-slate-100"
+                              inputClass="input-curve lg border border-light-purple"
+                              type="number"
+                              name="price"
+                              value={props.values.price}
+                              inputHandler={props.handleChange}
+                              blurHandler={props.handleBlur}
+                              errorBorder={
+                                props.errors.price && props.touched.price
+                              }
+                            />
+                          </div>
+                        </div>
+                        {/* Title  */}
+                        <div className="field w-full mb-[0.5rem]">
                           <InputCom
-                            fieldClass="px-6 cursor-default"
-                            label="Currency"
+                            fieldClass="px-6"
+                            label="Title"
                             labelClass="tracking-wide"
                             inputBg="bg-slate-100"
-                            inputClass="input-curve lg border border-light-purple"
+                            inputClass=" input-curve lg border border-light-purple"
                             type="text"
-                            name="country"
-                            value={props.values.country}
+                            name="title"
+                            value={props.values.title}
                             inputHandler={props.handleChange}
                             blurHandler={props.handleBlur}
-                            disable={true}
+                            errorBorder={props.errors.title && props.touched.title}
                           />
                         </div>
 
-                        {/* Price */}
-                        <div className="field w-full">
+                        {/* Description  */}
+                        <div className="field w-full mb-[0.5rem]">
                           <InputCom
-                            fieldClass="px-6 text-right"
-                            label="Price"
+                            fieldClass="px-6"
+                            label="Description"
                             labelClass="tracking-wide"
                             inputBg="bg-slate-100"
-                            inputClass="input-curve lg border border-light-purple"
-                            type="number"
-                            name="price"
-                            value={props.values.price}
+                            inputClass=" input-curve lg border border-light-purple"
+                            type="text"
+                            name="description"
+                            value={props.values.description}
                             inputHandler={props.handleChange}
                             blurHandler={props.handleBlur}
                             errorBorder={
-                              props.errors.price && props.touched.price
+                              props.errors.description && props.touched.description
                             }
                           />
                         </div>
-                      </div>
-                      {/* Title  */}
-                      <div className="field w-full mb-[0.5rem]">
-                        <InputCom
-                          fieldClass="px-6"
-                          label="Title"
-                          labelClass="tracking-wide"
-                          inputBg="bg-slate-100"
-                          inputClass=" input-curve lg border border-light-purple"
-                          type="text"
-                          name="title"
-                          value={props.values.title}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                          errorBorder={props.errors.title && props.touched.title}
-                        />
-                      </div>
 
-                      {/* Description  */}
-                      <div className="field w-full mb-[0.5rem]">
-                        <InputCom
-                          fieldClass="px-6"
-                          label="Description"
-                          labelClass="tracking-wide"
-                          inputBg="bg-slate-100"
-                          inputClass=" input-curve lg border border-light-purple"
-                          type="text"
-                          name="description"
-                          value={props.values.description}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                          errorBorder={
-                            props.errors.description && props.touched.description
-                          }
-                        />
-                      </div>
-
-                      {/* Details */}
-                      <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                        <div className="sm:w-[60%] w-full">
-                          <label
-                            htmlFor="job-label"
-                            className='job-label'
-                          >
-                            Job Delivery Details
-                          </label>
-                          <textarea
-                            id="Job Delivery Details"
-                            rows="5"
-                            className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
-                              props.errors.job_detail && props.touched.job_detail
-                                ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                                : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                            } rounded-[10px]`}
-                            style={{ resize: "none" }}
-                            name="job_detail"
-                            value={props.values.job_detail}
-                            onChange={props.handleChange}
-                            onBlur={props.handleBlur}
-                          />
-                        </div>
-
-                        <div className="sm:w-[35%] w-full">
-                          <div
-                            htmlFor="Job Categories"
-                            className='job-label'
-                            id="checked-group"
-                          >
-                            Categories
+                        {/* Details */}
+                        <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                          <div className="sm:w-[60%] w-full">
+                            <label
+                              htmlFor="job-label"
+                              className='job-label'
+                            >
+                              Job Delivery Details
+                            </label>
+                            <textarea
+                              id="Job Delivery Details"
+                              rows="5"
+                              className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                                props.errors.job_detail && props.touched.job_detail
+                                  ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                  : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                              } rounded-[10px]`}
+                              style={{ resize: "none" }}
+                              name="job_detail"
+                              value={props.values.job_detail}
+                              onChange={props.handleChange}
+                              onBlur={props.handleBlur}
+                            />
                           </div>
-                          <div
-                            className="sm:flex-col flex flex-wrap px-3 mt-3"
-                            role="group"
-                            aria-labelledby="checked-group"
-                          >
-                            {categories &&
-                              Object.entries(categories)?.map(([key, value]) => (
-                                <label
-                                  key={key}
-                                  className="flex gap-1 w-full items-center dark:text-white"
-                                >
-                                  <Field
-                                    type="checkbox"
-                                    name="category"
-                                    value={key}
-                                  />
-                                  <span className="text-[13.975px]">{value}</span>
-                                </label>
-                              ))}
-                            <span className="h-5 text-sm italic text-[#cf3917]">
-                              {props.errors.category &&
-                                props.touched.category &&
-                                "please select a category"}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="w-full flex items-center gap-2 mb-2">
-                        {/* FOR TASK IMAGE */}
-                        <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                          <input
-                            id="task_image"
-                            className="hidden"
-                            type="file"
-                            accept="image/*"
-                            onChange={taskImgChangeHandler}
-                          />
-                          {taskImage ? (
-                            <div className="w-full absolute -top-5">
-                              <img
-                                src={taskImage}
-                                className="max-h-[150px] min-h-[150px] w-full object-cover"
-                                alt="uploaded task"
-                              />
-                              <span
-                                onClick={() => setTaskImage("")}
-                                className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
-                              >
-                                Remove Image
+
+                          <div className="sm:w-[35%] w-full">
+                            <div
+                              htmlFor="Job Categories"
+                              className='job-label'
+                              id="checked-group"
+                            >
+                              Categories
+                            </div>
+                            <div
+                              className="sm:flex-col flex flex-wrap px-3 mt-3"
+                              role="group"
+                              aria-labelledby="checked-group"
+                            >
+                              {categories &&
+                                Object.entries(categories)?.map(([key, value]) => (
+                                  <label
+                                    key={key}
+                                    className="flex gap-1 w-full items-center dark:text-white"
+                                  >
+                                    <Field
+                                      type="checkbox"
+                                      name="category"
+                                      value={key}
+                                    />
+                                    <span className="text-[13.975px]">{value}</span>
+                                  </label>
+                                ))}
+                              <span className="h-5 text-sm italic text-[#cf3917]">
+                                {props.errors.category &&
+                                  props.touched.category &&
+                                  "please select a category"}
                               </span>
                             </div>
-                          ) : (
-                            <label
-                              className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
-                              htmlFor="task_image"
-                            >
-                              Select Task Image
-                            </label>
-                          )}
-                        </div>
-                        {/* END OF TASK IMAGE */}
-
-                        <div className="field w-1/2">
-                          <div className={`flex items-center justify-between`}>
-                            <label
-                              className="job-label flex flex-col"
-                              htmlFor="timeline_days"
-                            >
-                              Timeline -
-                              <span className="w-full text-center text-green-700 text-sm tracking-wide">
-                                Expected duration of this task
-                              </span>
-                            </label>
                           </div>
-
-                          <Field
-                            component="select"
-                            name="timeline_days"
-                            className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
-                              props.errors.timeline_days &&
-                              props.touched.timeline_days
-                                ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                                : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                            }`}
-                            value={props.values.timeline_days}
-                          >
-                            <option value="">Select Duration</option>
-                            {publicArray.map(({ name, duration }, idx) => (
-                              <option
-                                key={duration}
-                                className="text-slate-500 text-lg"
-                                value={duration}
+                        </div>
+                        <div className="w-full flex items-center gap-2 mb-2">
+                          {/* FOR TASK IMAGE */}
+                          <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
+                            <input
+                              id="task_image"
+                              className="hidden"
+                              type="file"
+                              accept="image/*"
+                              onChange={taskImgChangeHandler}
+                            />
+                            {taskImage ? (
+                              <div className="w-full absolute -top-5">
+                                <img
+                                  src={taskImage}
+                                  className="max-h-[150px] min-h-[150px] w-full object-cover"
+                                  alt="uploaded task"
+                                />
+                                <span
+                                  onClick={() => setTaskImage("")}
+                                  className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                                >
+                                  Remove Image
+                                </span>
+                              </div>
+                            ) : (
+                              <label
+                                className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                                htmlFor="task_image"
                               >
-                                {name}
-                              </option>
-                            ))}
-                          </Field>
+                                Select Task Image
+                              </label>
+                            )}
+                          </div>
+                          {/* END OF TASK IMAGE */}
+
+                          <div className="field w-1/2">
+                            <div className={`flex items-center justify-between`}>
+                              <label
+                                className="job-label flex flex-col"
+                                htmlFor="timeline_days"
+                              >
+                                Timeline -
+                                <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                                  Expected duration of this task
+                                </span>
+                              </label>
+                            </div>
+
+                            <Field
+                              component="select"
+                              name="timeline_days"
+                              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                                props.errors.timeline_days &&
+                                props.touched.timeline_days
+                                  ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                  : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                              }`}
+                              value={props.values.timeline_days}
+                            >
+                              <option value="">Select Duration</option>
+                              {publicArray.map(({ name, duration }, idx) => (
+                                <option
+                                  key={duration}
+                                  className="text-slate-500 text-lg"
+                                  value={duration}
+                                >
+                                  {name}
+                                </option>
+                              ))}
+                            </Field>
+                          </div>
                         </div>
+                        {/* inputs ends here */}
                       </div>
-                      {/* inputs ends here */}
                     </div>
-                  </div>
-                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                  <div className="content-footer w-full">
-                    {/* error or success display */}
-                    {requestStatus.message != "" &&
-                      (!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 && (
+                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                    <div className="content-footer w-full">
+                      {/* error or success display */}
+                      {requestStatus.message != "" &&
+                        (!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]`}
+                            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>
-                        )
-                      ))}
-                    {/* End of error or success display */}
+                        ) : (
+                          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>
+                          )
+                        ))}
+                      {/* End of error or success display */}
+
+                      {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
+                      <div className="w-full">
+                        {uploadStatus.message && !uploadStatus.loading && (
+                          <p
+                            className={`text-center ${
+                              uploadStatus.status
+                                ? "text-green-500"
+                                : "text-red-500"
+                            }`}
+                          >
+                            {uploadStatus.message}
+                          </p>
+                        )}
+                        {uploadStatus.loading && (
+                          <p className="text-center">{uploadStatus.message}</p>
+                        )}
+                      </div>
 
-                    {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                    <div className="w-full">
-                      {uploadStatus.message && !uploadStatus.loading && (
-                        <p
-                          className={`text-center ${
-                            uploadStatus.status
-                              ? "text-green-500"
-                              : "text-red-500"
-                          }`}
-                        >
-                          {uploadStatus.message}
-                        </p>
-                      )}
-                      {uploadStatus.loading && (
-                        <p className="text-center">{uploadStatus.message}</p>
-                      )}
                     </div>
-
                   </div>
-                </div>
-                <div className="modal-footer-wrapper justify-end">
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="6" color="sky-blue" />
-                    ) : (
-                      <button
-                        type="submit"
-                        className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                        disabled={
-                          requestStatus.loading || uploadStatus.loading
-                        }
-                      >
-                        Save
-                      </button>
-                    )}
+                  <div className="modal-footer-wrapper justify-end">
+                      {requestStatus.loading ? (
+                        <LoadingSpinner size="6" color="sky-blue" />
+                      ) : (
+                        <button
+                          type="submit"
+                          className="custom-btn btn-gradient text-white"
+                          disabled={
+                            requestStatus.loading || uploadStatus.loading
+                          }
+                        >
+                          Save
+                        </button>
+                      )}
+                  </div>
                 </div>
               </Form>
             )}
           </Formik>
-      </div>
     </ModalCom>
   );
 };

src/components/jobPopout/EditJobPopoutNew.jsx

@@ -0,0 +1,541 @@
+import { Field, Form, Formik } from "formik";
+import React, { useCallback, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom";
+import ModalCom from "../Helpers/ModalCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { apiConst } from "../../lib/apiConst";
+import AttachFile from "../attachmentCom/AttachFile";
+
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Country is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(149, "Maximum 149 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(299, "Maximum 299 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(1440, "Maximum 1440 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
+});
+
+const EditJobPopoutNew = ({
+  details,
+  onClose,
+  situation,
+  country,
+  categories,
+}) => {
+  const dispatch = useDispatch();
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const { walletDetails } = useSelector((state) => state.walletDetails);
+
+  const uploadedImage = `${
+    userDetails.session_image_server
+  }${localStorage.getItem("session_token")}/job/${details?.job_uid}`;
+
+  const [taskImage, setTaskImage] = useState(uploadedImage);
+
+  let [uploadStatus, setUploadStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // Holds state when submit button is pressed
+
+  let initialValues = {
+    // initial values for formik
+    country: details.currency,
+    price: details?.price * 0.01,
+    title: details?.title,
+    description: details?.description,
+    job_detail: details?.job_detail,
+    timeline_days: details?.timeline_days,
+    category: details?.category,
+  };
+
+  const jobApi = useMemo(() => new usersService(), []);
+  const navigate = useNavigate();
+
+  const handleEditJob = useCallback(
+    async (values) => {
+      let reqData = {
+        country: values?.country,
+        price: Number(values.price) * 100,
+        title: values?.title,
+        description: values?.description,
+        job_detail: values?.job_detail,
+        timeline_days: values?.timeline_days,
+        category: values.category?.join("@"),
+        job_id: details.job_id,
+        job_uid: details.job_uid,
+      };
+      setRequestStatus({ loading: true, message: "" });
+
+      try {
+        let res = await jobApi.jobManagerUpdateJob(reqData);
+        let { data } = await res;
+        if (data?.internal_return < 0) return;
+        setRequestStatus({ loading: false, message: null });
+        setTimeout(() => {
+          dispatch(tableReload({ type: "JOBTABLE" }));
+          navigate("/myjobs", { replace: true });
+          onClose();
+        }, 1000);
+      } catch (error) {
+        setRequestStatus({ loading: false, message: error });
+        throw new Error(error);
+      }
+    },
+    [jobApi, navigate, onClose, details]
+  );
+
+  const taskImgChangeHandler = (e) => {
+    setUploadStatus({ loading: false, status: false, message: "" });
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"]; // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0]; //UPLOADED FILE
+
+    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
+    if (!acceptedFormat.includes(fileFormat)) {
+      //CHECKING FOR CORRECT UPLOAD FORMAT
+      const msg = `Please select ${acceptedFormat
+        .slice(0, -1)
+        .join(", ")} or ${acceptedFormat.slice(-1)}`;
+      setUploadStatus({ loading: false, status: false, message: msg });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (uploadedFile.size > 5 * 1048576) {
+      // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({
+        loading: false,
+        status: false,
+        message: "File must not exceed 5MB",
+      });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        let base64Img = imgReader.result.split(",")[1];
+        let reqData = {
+          // PAYLOAD FOR API CALL
+          job_uid: details?.job_uid,
+          file_name: uploadedFile?.name.slice(0, 19),
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: base64Img,
+          msg_type: "FILE",
+          action: apiConst.WRENCHBOARD_PICTURE_JOB,
+        };
+        setUploadStatus({
+          loading: true,
+          status: false,
+          message: "Loading...",
+        });
+        jobApi
+          .sendFiles(reqData)
+          .then((res) => {
+            if (res.status != 200 || res.data.internal_return < 0) {
+              return setUploadStatus({
+                loading: false,
+                status: false,
+                message: "Something went wrong, try again",
+              });
+            }
+            setUploadStatus({
+              loading: false,
+              status: true,
+              message: "Uploaded successfully",
+            });
+            setTaskImage(event.target.result);
+            setTimeout(() => {
+              dispatch(tableReload({ type: "JOBTABLE" }));
+              navigate("/myjobs", { replace: true });
+              onClose();
+            }, 1000);
+          })
+          .catch((error) => {
+            setUploadStatus({
+              loading: false,
+              status: false,
+              message: "Network error, try again",
+            });
+          })
+          .finally(() => {
+            setTimeout(() => {
+              setUploadStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          });
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  return (
+    <ModalCom action={onClose} situation={situation}>
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleEditJob}
+          >
+            {(props) => (
+              <Form className="">
+                <div className="modal-container">
+                    <div className="modal-header-con">
+                        <h1 className="modal-title">
+                            Edit Job
+                        </h1>
+                        <button
+                            type="button"
+                            className="modal-close-btn"
+                            onClick={onClose}
+                        >
+                            <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 36 36"
+                            fill="none"
+                            className="fill-current"
+                            xmlns="http://www.w3.org/2000/svg"
+                            >
+                            <path
+                                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                                fill=""
+                                fillOpacity="0.6"
+                            />
+                            <path
+                                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                                fill="#"
+                                fillOpacity="0.6"
+                            />
+                            </svg>
+                        </button>
+                    </div>
+                    <div className="modal-body-wrapper">
+                        <div className="flex flex-col-reverse sm:flex-row">
+                            <div className="fields w-full">
+                            <div className="sm:flex sm:space-x-7 mb-[0.5rem]">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
+                                <InputCom
+                                    fieldClass="px-6 cursor-default"
+                                    label="Currency"
+                                    labelClass="tracking-wide"
+                                    inputBg="bg-slate-100"
+                                    inputClass="input-curve lg border border-light-purple"
+                                    type="text"
+                                    name="country"
+                                    value={props.values.country}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    disable={true}
+                                />
+                                </div>
+
+                                {/* Price */}
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
+                                <InputCom
+                                    fieldClass="px-6 text-right"
+                                    label="Price"
+                                    labelClass="tracking-wide"
+                                    inputBg="bg-slate-100"
+                                    inputClass="input-curve lg border border-light-purple"
+                                    type="number"
+                                    name="price"
+                                    value={props.values.price}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    errorBorder={
+                                    props.errors.price && props.touched.price
+                                    }
+                                />
+                                </div>
+
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
+                                <label
+                                    className="job-label"
+                                    htmlFor="timeline_days"
+                                >
+                                    Timeline -
+                                    {/* <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                                    Expected duration of this task
+                                    </span> */}
+                                </label>
+                                <Field
+                                    component="select"
+                                    name="timeline_days"
+                                    className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
+                                    props.errors.timeline_days &&
+                                    props.touched.timeline_days
+                                        ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                        : "dark:border-[#5e6278]"
+                                    }`}
+                                    value={props.values.timeline_days}
+                                >
+                                    <option value="" className='text-slate-500 text-lg'>Select Duration</option>
+                                    {publicArray.map(({ name, duration }, idx) => (
+                                    <option
+                                        key={duration}
+                                        className="text-slate-500 text-lg"
+                                        value={duration}
+                                    >
+                                        {name}
+                                    </option>
+                                    ))}
+                                </Field>
+                                </div>
+                            </div>
+
+                            {/* Title  */}
+                            <div className="field w-full mb-[0.5rem]">
+                                <InputCom
+                                fieldClass="px-6"
+                                label="Title"
+                                labelClass="tracking-wide"
+                                inputBg="bg-slate-100"
+                                inputClass=" input-curve lg border border-light-purple"
+                                type="text"
+                                name="title"
+                                value={props.values.title}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
+                                errorBorder={props.errors.title && props.touched.title}
+                                />
+                            </div>
+
+                            {/* Description  */}
+                            <div className="field w-full mb-[0.5rem]">
+                                <InputCom
+                                fieldClass="px-6"
+                                label="Description"
+                                labelClass="tracking-wide"
+                                inputBg="bg-slate-100"
+                                inputClass=" input-curve lg border border-light-purple"
+                                type="text"
+                                name="description"
+                                value={props.values.description}
+                                inputHandler={props.handleChange}
+                                blurHandler={props.handleBlur}
+                                errorBorder={
+                                    props.errors.description && props.touched.description
+                                }
+                                />
+                            </div>
+
+                            {/* Details */}
+                            <div className="field flex flex-col sm:flex-row w-full mb-[2px] gap-2">
+                                <div className="sm:w-[60%] w-full">
+                                <label
+                                    htmlFor="job-label"
+                                    className='job-label'
+                                >
+                                    Job Delivery Details
+                                </label>
+                                <textarea
+                                    id="Job Delivery Details"
+                                    rows="5"
+                                    className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                                    props.errors.job_detail && props.touched.job_detail
+                                        ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                        : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                                    } rounded-[10px]`}
+                                    style={{ resize: "none" }}
+                                    name="job_detail"
+                                    value={props.values.job_detail}
+                                    onChange={props.handleChange}
+                                    onBlur={props.handleBlur}
+                                />
+                                </div>
+
+                                <div className="sm:w-[35%] w-full">
+                                <div
+                                    htmlFor="Job Categories"
+                                    className='job-label'
+                                    id="checked-group"
+                                >
+                                    Categories
+                                </div>
+                                <div
+                                    className="sm:flex-col flex flex-wrap px-3 mt-3"
+                                    role="group"
+                                    aria-labelledby="checked-group"
+                                >
+                                    {categories &&
+                                    Object.entries(categories)?.map(([key, value]) => (
+                                        <label
+                                        key={key}
+                                        className="flex gap-1 w-full items-center dark:text-white"
+                                        >
+                                        <Field
+                                            type="checkbox"
+                                            name="category"
+                                            value={key}
+                                        />
+                                        <span className="text-[13.975px]">{value}</span>
+                                        </label>
+                                    ))}
+                                    <span className="h-5 text-sm italic text-[#cf3917]">
+                                    {props.errors.category &&
+                                        props.touched.category &&
+                                        "please select a category"}
+                                    </span>
+                                </div>
+                                </div>
+                            </div>
+                            <div className="w-full flex items-center justify-center gap-2 mb-2">
+                                {/* FOR TASK IMAGE */}
+                                <div className="w-1/3 relative flex flex-col max-h-[130px] min-h-[130px]">
+                                <div className="w-full flex gap-2">
+                                    <label
+                                        className={`w-full job-label cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
+                                        htmlFor="task_image"
+                                        >
+                                        Banner
+                                    </label>
+                                    {uploadStatus.loading ? 
+                                        <LoadingSpinner size='6' /> 
+                                        : 
+                                        <span className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</span>
+                                    } 
+                                </div>
+                                <input
+                                    id="task_image"
+                                    className="hidden"
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={taskImgChangeHandler}
+                                />
+                                {taskImage ? (
+                                    <div className="w-full relative h-full">
+                                    <img
+                                        src={taskImage}
+                                        className="h-32 w-full object-cover"
+                                        alt="uploaded task"
+                                    />
+                                    <div className="absolute inset-0 flex flex-col justify-center items-center">
+                                        <span
+                                        onClick={() => setTaskImage("")}
+                                        className="p-2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                                        >
+                                        Remove Image
+                                        </span>
+                                    </div>
+                                    </div>
+                                ) : (
+                                    <div className="absolute inset-0 flex flex-col justify-center items-center">
+                                    <label
+                                        className="p-2 bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                                        htmlFor="task_image"
+                                    >
+                                        Select Task Image
+                                    </label>
+                                    </div>
+                                )}
+                                </div>
+                                {/* END OF TASK IMAGE */}
+
+                                <div className="field w-2/3">
+                                    <AttachFile data={details} />
+                                </div>
+
+                            </div>
+                            {/* inputs ends here */}
+                            </div>
+                        </div>
+                        {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                        <div className="content-footer w-full">
+                            {/* error or success display */}
+                            {requestStatus.message != "" &&
+                            (!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>
+                                )
+                            ))}
+                            {/* End of error or success display */}
+                        </div>
+                    </div>
+                    <div className="modal-footer-wrapper justify-end">
+                        {requestStatus.loading ? (
+                        <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                        <button
+                            type="submit"
+                            className="custom-btn btn-gradient text-white"
+                            disabled={
+                            requestStatus.loading || uploadStatus.loading
+                            }
+                        >
+                            Save
+                        </button>
+                        )}
+                    </div>
+                </div>
+              </Form>
+            )}
+          </Formik>
+    </ModalCom>
+  );
+};
+
+export default EditJobPopoutNew;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -11,6 +11,7 @@ import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
 
 import { SocketValues } from "../Contexts/SocketIOContext";
+import AttachFile from "../attachmentCom/AttachFile";
 
 const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
 const ImageElement = lazy(() => import("../ImageCon/ImageElement"));
@@ -206,11 +207,11 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/5 h-full flex flex-col justify-between">
+          <div className="p-4 w-full md:w-2/5 h-full flex flex-col gap-4 justify-between">
             { details.job_type == 'TASK' ?
               <div className="image-wrapper w-full h-40 flex justify-center items-center">
                 <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
-                  <ImageElement src={details?.image} alt='banner' className='w-auto h-full' />
+                  <ImageElement src={details?.image} alt='banner' className='w-full h-auto' />
                 </Suspense>
               </div>
               :
@@ -222,6 +223,9 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                 </div>
               </div>
             }
+            <div className="w-full">
+              <AttachFile data={details} showOnData={true} />
+            </div>
             <div className="my-3 md:flex md:justify-center">
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />

src/components/jobPopout/JobListPopout.jsx

@@ -560,7 +560,7 @@ const JobFieldInput = ({
               <Field
                 component="select"
                 name={inputName}
-                className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
+                className={`options-default`}
                 value={value}
               >
                 {/* <option value="">{optionText}</option> */}

src/components/jobPopout/PendingJobsPopout.jsx

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

src/components/jobPopout/popoutcomponent/Detail.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 function Detail({label, value, bg,}) {
   return (
     <>
-        <label className='job-label w-full md:w-1/4'>{label}</label>
+        <label className='job-label w-full md:w-[150px]'>{label}</label>
         <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white ${bg ? bg : null}`}>{value}</p>
     </>
   )

src/index.css

@@ -160,8 +160,12 @@
     @apply flex items-center gap-2
   }
 
-  /* STYLES FOR MODAL */
-  /* Modal Header */
+  /* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL/ADD JOB MODAL FOR SAMPLE USAGE'*/
+  .modal-container {
+    @apply w-11/12 md:w-[700px] mx-auto h-auto max-h-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
+  }
+
+  /* Modal Header section*/
   .modal-header-con{
     @apply w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29]  border-light-purple
   }
@@ -172,9 +176,14 @@
     @apply text-[#000] dark:text-red-500
   }
 
+  /* Modal Body section */
+  .modal-body-wrapper {
+    @apply w-full min-h-[300px] h-full overflow-y-auto flex flex-col items-center px-10 p-2
+  }
+
   /* modal footer */
   .modal-footer-wrapper{
-    @apply p-4 border-t-2 flex justify-between items-center
+    @apply p-4 border-t-2 flex justify-between items-center w-full
   }
   /* END OF STYLES FOR MODAL BOX */
 
@@ -185,6 +194,9 @@
   .logout-btn {
     @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
   }
+  .options-default {
+    @apply px-2 placeholder:text-sm w-full h-full bg-white outline-none text-sm text-slate-900 dark:text-white
+  }
 }
 
 /* =====================  EXTRA ===================== */

src/lib/apiConst.js

@@ -44,6 +44,7 @@ export const apiConst = {
     WRENCH_FILE_FAMILY:     400,
     WRENCH_FILE_FAMILYBANNER:    410,
     WRENCH_FILE_JOB :    500,
+    JOB_MANAGER_FILES: 13012,
     WRENCHBOARD_BKO_START: 10000,
     WRENCHBOARD_BKO_LOGIN: 10010,
     WRENCHBOARD_BKO_CREATEUSER: 10015,
@@ -187,6 +188,8 @@ export const apiConst = {
     WRENCHBOARD_JOB_JOBGROUPADD:  13046,
     WRENCHBOARD_JOB_REPORT:  13047,
 
+    WRENCHBOARD_INTEREST_STATS:  13048,
+
     WRENCHBOARD_GROUP_START: 12000,
     WRENCHBOARD_GROUP_CREATEGROUP: 12010,
     WRENCHBOARD_GROUP_INVITEGROUP: 12015,

src/middleware/AuthRoute.jsx

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

src/services/UsersService.js

@@ -570,6 +570,20 @@ class usersService {
     return this.postAuxEnd("/familyrewardhx", postData);
   }
 
+  // API FUNCTION TO GET CONTRACT HISTORY
+  getContractHx() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      offset: 1,
+      limit: 20,
+      // action: apiConst.WRENCHBOARD_FAMILY_TRANSFERHX,
+      action: "",
+    };
+    return this.postAuxEnd("/contracthx", postData);
+  }
+
   // API FUNCTION TO GET PAYMENT HISTORY
   getPaymentHx() {
     var postData = {
@@ -908,6 +922,60 @@ class usersService {
     return this.postAuxEnd("/uploads", postData);
   }
 
+   // FUNCTION FOR NEW FILE UPLOAD
+   sendFilesNew(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
+      ...reqData,
+    };
+
+    const formData = new FormData();
+    for (let data in postData) {
+      formData.append(data, postData[data]);
+    }
+
+    return this.postAuxEnd("/upload/contract", formData, true);
+  }
+
+    // FUNCTION TO UPLOAD RESOURCE FILES
+    uploadFile(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
+        ...reqData,
+      };
+  
+      const formData = new FormData();
+      for (let data in postData) {
+        formData.append(data, postData[data]);
+      }
+  
+      return this.postAuxEnd("/upload/resources", formData, true);
+    }
+
+    // FUNCTION TO UPLOAD TASK FILES
+    uploadTaskFile(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        // action: apiConst.WRENCHBOARD_CONTRACT_MESSAGE,
+        ...reqData,
+      };
+  
+      const formData = new FormData();
+      for (let data in postData) {
+        formData.append(data, postData[data]);
+      }
+  
+      return this.postAuxEnd("/upload/task", formData, true);
+    }
+
   // END POINT TO DELETE  A JOB
   deleteJob(reqData) {
     var postData = {
@@ -1044,6 +1112,18 @@ class usersService {
     return this.postAuxEnd("/offerinterestlistmsg", postData);
   }
 
+  // END POINT TO GET INTEREST STATS
+  interestStatistics(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_INTEREST_STATS,
+      ...reqData,
+    };
+    return this.postAuxEnd("/intereststats", postData);
+  }
+
   // TO ADD FAMILY
   addFamily(reqData) {
     var postData = {
@@ -1356,6 +1436,18 @@ class usersService {
     return this.postAuxEnd("/assignmediatask", postData);
   }
 
+  // API FUNCTION FOR LISTING JOB MANAGER FILES (TASK FILE UPLAOD)
+  jobManagerFiles(reqData) {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.JOB_MANAGER_FILES,
+      ...reqData
+    };
+    return this.postAuxEnd("/jobmanagerfiles", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)
@@ -1444,8 +1536,8 @@ class usersService {
       });
   }
 
-  postAuxEnd(uri, reqData) {
-    const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
+  postAuxEnd(uri, reqData, uploadPost=false) {
+    const endPoint = uploadPost ? process.env.REACT_APP_MEDIA_LINK + uri : process.env.REACT_APP_USERS_ENDPOINT + uri;
     const session_token = localStorage.getItem("session_token");
     // session_token = session_token !=null ?session_token : '';
     //   'Authorization': `Basic ${(session_token !=null) ?session_token : ''}`,

src/views/AddJobPage.jsx

@@ -5,7 +5,7 @@ import ModalCom from "../components/Helpers/ModalCom";
 function AddJobPage({ action, situation, categories }) {
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+      <div className="modal-container">
         <div className="modal-header-con">
           <h1 className="modal-title">
             New Job

src/views/FamilyRoutesPage.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Route, Routes } from "react-router-dom";
+
+import FamilyRoutes from '../components/FamilyAcc/FamilyRoutes'
+import FamilyAcc from '../components/FamilyAcc';
+import FamilyActivities from '../components/FamilyAcc/FamilyActivities';
+import FamilySettings from '../components/FamilyAcc/FamilySettings';
+import FourZeroFour from '../components/FourZeroFour';
+
+export default function FamilyRoutesPage() {
+  return (
+    <Routes>
+        <Route element={<FamilyRoutes />}>
+            <Route exact path='/' element={<FamilyAcc />} />
+            <Route exact path="/activities" element={<FamilyActivities />} />
+            <Route exact path="/familysettings" element={<FamilySettings />} />
+            <Route exact path="/*" element={<FourZeroFour />} />
+        </Route>
+    </Routes>
+  )
+}

src/views/MyWalletPage.jsx

@@ -1,5 +1,19 @@
+import {useEffect} from 'react'
 import WalletRoutes from "../components/MyWallet/Wallet";
+import { useSelector } from "react-redux";
+import {useNavigate} from 'react-router-dom'
 
 export default function MyWalletPage() {
+  const {userDetails: { account_type, wallet_available_status }} = useSelector((state) => state?.userDetails);
+  const navigate = useNavigate()
+
+  useEffect(()=>{
+    let walletExist = wallet_available_status || localStorage.getItem('wallet_available_status')
+    console.log(walletExist)
+    if(account_type == 'FULL' && walletExist != 'WALLET_AVAILABLE'){
+      navigate('/', {replace: true})
+    }
+  },[])
+
   return <WalletRoutes />;
 }