text updated

.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/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

@@ -4,7 +4,7 @@ import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text_new.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
@@ -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

@@ -5,6 +5,7 @@ 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'
 
 export default function VerifyLink() {
   const [email, setEmail] = useState("");
@@ -119,7 +120,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

@@ -34,7 +34,7 @@ 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 || ""
           }`}
         >
@@ -42,50 +42,56 @@ export default function AvailableJobsCard({
             onClick={() => {
               setMarketPopUp({ 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 h-[236px] 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 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>

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/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,10 +85,10 @@ export default function AssignMediaTask({
               >
                 {(props) => {
                   return (
-                        <Form>
+                        <Form className='contents'>
                             <>
                                 <div
-                                className={`job-action-modal-body w-full h-[500px] 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 h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
@@ -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

@@ -22,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 (
     <>
@@ -33,7 +33,7 @@ export default function AssignPrevNewTask({
             ) : (
               <>
                 <div
-                  className={`job-action-modal-body w-full h-[500px] 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"
                   }`}
                 >
@@ -121,65 +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="mb-1 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>
-                            
-                            {/* ATTACHMENT SECTION*/}
-                            <div className="w-full max-h-28">
-                                <AttachFile data={activeTask.data} />
-                            </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>
@@ -228,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

@@ -24,6 +24,8 @@ const AssignTaskPopout = ({
   setActiveTask,
   setUpdatePage,  
 }) => {
+  const newJobList = {...jobList, data:jobList?.data?.filter(item => item?.job_mode == 'FAMILY')}
+  
   const {parentAssignJobToKid} = SocketValues()
 
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
@@ -311,7 +313,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 ? (
@@ -364,7 +366,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 +385,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/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/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/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

@@ -252,7 +252,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md 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
@@ -262,9 +262,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 >
                   {" "}
                   <div className="w-full flex flex-col justify-between gap-2">
-                    <span>Send</span>
-                    <span>Interest</span>
-                    <span>Request</span>
+                    <span>Notify</span>
+                    <span>Owner</span>
                   </div>
                 </button>
                 <>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -15,6 +15,8 @@ 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
   
@@ -43,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({
@@ -54,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);
@@ -67,7 +75,19 @@ 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 <= 30mb",
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
       setRequestStatus({
         loading: false,
         status: false,
@@ -92,7 +112,8 @@ 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
@@ -181,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
@@ -276,7 +282,7 @@ function ActiveJobs(props) {
       <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">
-          <div className="w-full flex justify-start space-x-3 items-start">
+          <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"
@@ -325,7 +331,7 @@ function ActiveJobs(props) {
 
         {/* job details */}
         <div className="min-w-[150px]">
-          <p className="text-base text-sky-blue">Delivery Detail</p>
+          <button className="text-base text-sky-blue" onClick={jobDetailModalHandler}>Delivery Detail</button>
           {passDue ? (
             <div className="my-1">
               <p className="text-base text-slate-700">
@@ -437,7 +443,7 @@ function ActiveJobs(props) {
                         <input
                             type="file"
                             id="file"
-                            accept="image/*"
+                            accept="image/*,video/*"
                             style={{ display: "none" }}
                             onChange={handleFileChange}
                         />
@@ -544,6 +550,7 @@ function ActiveJobs(props) {
             <AttachFile
               data={props.details}
               showOnData={true}
+              fontSize={'text-lg'}
             />
           </div>
           <div className="flex justify-between items-center gap-5">
@@ -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

@@ -69,7 +69,19 @@ 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 <= 30mb",
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
       setRequestStatus({
         loading: false,
         status: false,
@@ -94,7 +106,8 @@ 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
@@ -184,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
@@ -437,7 +432,7 @@ function ActiveJobsMedia(props) {
                               <input
                                   type="file"
                                   id="file"
-                                  accept="image/*"
+                                  accept="image/*,video/*"
                                   style={{ display: "none" }}
                                   onChange={handleFileChange}
                               />

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

@@ -104,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(
@@ -358,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/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/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/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) {
@@ -157,7 +159,7 @@ export default function Sidebar({
             </div>
           </div>
         )}
-        {userDetails?.account_type !== "FAMILY" && (
+        {(userDetails?.account_type !== "FAMILY" && walletExist) && (
           <>
             {!userDetails?.post_jobs ? (
               <div

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/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

@@ -4,10 +4,10 @@ import axios from 'axios'
 
 import usersService from '../../services/UsersService'
 
-export default function AttachFile({data='', showOnData=false}) {
+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
 
@@ -19,9 +19,9 @@ export default function AttachFile({data='', showOnData=false}) {
         let inputs = {
             file: event.target.files[0],
             job_uid: data?.job_uid,
-            uid: localStorage.getItem("uid"),
+            // uid: localStorage.getItem("uid"),
             // member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
+            // sessionid: localStorage.getItem("session_token"),
           };
         setRequestStatus({loading: true, status:false, message:''})
         if(!inputs.file){
@@ -31,13 +31,12 @@ export default function AttachFile({data='', showOnData=false}) {
             }, 3000)
             return 
         }
-        const formData = new FormData()
-        for (let input in inputs) {
-            formData.append(input, inputs[input]);
-        }
-
-        axios.post(`${process.env.REACT_APP_MEDIA_LINK}/upload/task`,formData).then(res => {
-            if(res.data.status < 1){
+        // 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(()=>{
@@ -61,6 +60,21 @@ export default function AttachFile({data='', showOnData=false}) {
         })
     }
 
+    //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})
@@ -84,10 +98,10 @@ export default function AttachFile({data='', showOnData=false}) {
                                 <span className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</span>
                             } 
                         </div>
-                        <label htmlFor='file' className={`dark:text-white cursor-pointer text-[12px] py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add</label>
+                        <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-1'>
+                        <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' />
@@ -97,14 +111,16 @@ export default function AttachFile({data='', showOnData=false}) {
                             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='text-sm my-1 flex justify-start gap-2'>
+                                        <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={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
+                                                href={downloadLink}
+                                                onClick={(e)=> openNewWindow(e, downloadLink)}
                                             >
                                                 {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
                                             </a>
@@ -136,17 +152,19 @@ export default function AttachFile({data='', showOnData=false}) {
                         </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-1'>
+                        <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='flex justify-start gap-2'>
+                                    <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={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
+                                            href={downloadLink}
+                                            onClick={(e)=> openNewWindow(e, downloadLink)}
                                         >
                                             {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
                                         </a>

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/EditJobPopoutNew.jsx

@@ -254,7 +254,7 @@ const EditJobPopoutNew = ({
                         <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-6 sm:mb-0">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                 <InputCom
                                     fieldClass="px-6 cursor-default"
                                     label="Currency"
@@ -271,7 +271,7 @@ const EditJobPopoutNew = ({
                                 </div>
 
                                 {/* Price */}
-                                <div className="field w-full mb-6 sm:mb-0">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                 <InputCom
                                     fieldClass="px-6 text-right"
                                     label="Price"
@@ -289,7 +289,7 @@ const EditJobPopoutNew = ({
                                 />
                                 </div>
 
-                                <div className="field w-full">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                 <label
                                     className="job-label"
                                     htmlFor="timeline_days"
@@ -302,15 +302,15 @@ const EditJobPopoutNew = ({
                                 <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 ${
+                                    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"
-                                        : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                                        : "dark:border-[#5e6278]"
                                     }`}
                                     value={props.values.timeline_days}
                                 >
-                                    <option value="">Select Duration</option>
+                                    <option value="" className='text-slate-500 text-lg'>Select Duration</option>
                                     {publicArray.map(({ name, duration }, idx) => (
                                     <option
                                         key={duration}

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/index.css

@@ -160,9 +160,9 @@
     @apply flex items-center gap-2
   }
 
-  /* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL FOR SAMPLE USAGE'*/
+  /* 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-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
+    @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*/
@@ -178,12 +178,12 @@
 
   /* Modal Body section */
   .modal-body-wrapper {
-    @apply w-full h-full overflow-y-auto flex flex-col items-center px-10 p-2
+    @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 */
 
@@ -194,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/services/UsersService.js

@@ -908,6 +908,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 = {
@@ -1456,8 +1510,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/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 />;
 }