disabled assign btn after task is assigned

.env

@@ -124,7 +124,4 @@ 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
-
-# MEDIA_SERVER_URL
-MEDIA_SERVER_URL=''
+REACT_APP_CUSTOMTIMER=90

.env.development

@@ -92,7 +92,4 @@ 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
-
-# MEDIA_SERVER_URL
-MEDIA_SERVER_URL=''
+REACT_APP_CUSTOMTIMER=90

.env.production

@@ -98,7 +98,4 @@ REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
-
-# MEDIA_SERVER_URL
-MEDIA_SERVER_URL=''
+REACT_APP_CUSTOMTIMER=90

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.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";

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

@@ -311,7 +311,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 +364,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,7 +383,7 @@ const AssignTaskPopout = ({
               Media
               </button>
             </div>
-            <div className="">
+            <div className="contents">
               {assignType == 'task' ?
                 <AssignPrevNewTask 
                   jobList={jobList}

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,
@@ -93,9 +93,9 @@ const FamilyWaitlist = memo(
                                 </div>
                               </div>
                               <div className="px-2 flex flex-col items-center justify-center">
-                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                {/* <p className="text-sm font-bold text-dark-gray dark:text-white">
                                   {addedDate}
-                                </p>
+                                </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>
@@ -144,6 +144,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/MyActiveJobs/ActiveJobMessage.jsx

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

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -13,6 +13,7 @@ import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
 import TabButton from "../customTabs/TabButton";
+import AttachFile from "../attachmentCom/AttachFile";
 
 function ActiveJobs(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -539,6 +540,13 @@ function ActiveJobs(props) {
 
         {/* MESSAGE SECTION */}
         <div className="w-full lg:w-1/2">
+          <div className="mb-4">
+            <AttachFile
+              data={props.details}
+              showOnData={true}
+              fontSize={'text-lg'}
+            />
+          </div>
           <div className="flex justify-between items-center gap-5">
             <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
               <span>Message</span>

src/components/attachmentCom/AttachFile.jsx

@@ -1,8 +1,15 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 import axios from 'axios'
 
-export default function AttachFile({data}) {
+import usersService from '../../services/UsersService'
+
+export default function AttachFile({data='', fontSize='text-sm', showOnData=false}) {
+
+    const apiCall = new usersService()
+
+    let [uploadedList, setUploadedList] = useState({loading: true, data:{}})
+    let [reloadList, setReloadList] = useState(false) // Triggers list of upload reload
 
     const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
 
@@ -13,7 +20,7 @@ export default function AttachFile({data}) {
             file: event.target.files[0],
             job_uid: data?.job_uid,
             uid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
+            // member_id: localStorage.getItem("member_id"),
             sessionid: localStorage.getItem("session_token"),
           };
         setRequestStatus({loading: true, status:false, message:''})
@@ -29,60 +36,138 @@ export default function AttachFile({data}) {
             formData.append(input, inputs[input]);
         }
 
-        console.log('data', formData, inputs)
-        // axios.post(`${process.env.MEDIA_SERVER_URL}/upload/task`,formData).then(res => {
-        //     if(res.data.status < 1){
-        //         inputFile.current.value = null
-        //         setRequestStatus({loading: false, status:false, message:'upload failed'})
-        //         setTimeout(()=>{
-        //             setRequestStatus({loading: false, status:false, message:''})
-        //         }, 3000)
-        //         return 
-        //     }
-        //     setRequestStatus({loading: false, status:true, message:'uploaded'})
-        //     inputFile.current.value = null
-        //     setTimeout(()=>{
-        //         setRequestStatus({loading: false, status:false, message:''})
-        //     }, 3000)
-        // }).catch(err => {
-        //     inputFile.current.value = null
-        //     setRequestStatus({loading: false, status:false, message:'upload failed'})
-        //     setTimeout(()=>{
-        //         setRequestStatus({loading: false, status:false, message:''})
-        //     }, 3000)
-        //     return 
-        // })
-        
-        setTimeout(()=>{
-            setRequestStatus({loading: false, status:false, message:''})
-        }, 3000)
+        axios.post(`${process.env.REACT_APP_MEDIA_LINK}/upload/task`,formData).then(res => {
+            if(res.data.internal_return < 0){
+                inputFile.current.value = null
+                setRequestStatus({loading: false, status:false, message:'upload failed'})
+                setTimeout(()=>{
+                    setRequestStatus({loading: false, status:false, message:''})
+                }, 3000)
+                return 
+            }
+            setRequestStatus({loading: false, status:true, message:'uploaded'})
+            inputFile.current.value = null
+            setReloadList(prev => !prev) // Triggers list of upload reload
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+        }).catch(err => {
+            inputFile.current.value = null
+            setRequestStatus({loading: false, status:false, message:'upload failed'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        })
     }
 
+    useEffect(()=>{
+        apiCall.jobManagerFiles({job_uid:data?.job_uid || data?.origin_job_uid}).then(res => {
+            setUploadedList({loading: false, data:res.data})
+        }).catch(err => {
+            console.log(err)
+            setUploadedList({loading: false, data:{}})
+        })
+    },[data, reloadList])
+
     return (
-        <div className='w-full h-full flex flex-col justify-center items-center rounded-md border'>
-            <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
-                <div className='p-2 w-full flex justify-between items-center gap-1 border-b shadow-sm'>
-                    <p className='job-label job-label-flex'>
-                        Files {
-                        requestStatus.loading ? 
-                            <LoadingSpinner size='6' /> 
-                            : 
-                            <p className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</p>
-                        } 
-                    </p>
-                    <label htmlFor='file' className={`cursor-pointer job-label py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add</label>
+        <>
+        {!showOnData ?
+            <div className='w-full h-full flex flex-col justify-center items-center'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files {
+                            requestStatus.loading ? 
+                                <LoadingSpinner size='6' /> 
+                                : 
+                                <span className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</span>
+                            } 
+                        </div>
+                        <label htmlFor='file' className={`text-black bg-[#f8ffd4] cursor-pointer text-[12px] py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add Files</label>
+                    </div>
+                    <div className='w-full p-2 rounded-2xl bg-slate-100'>
+                        <div className='text-[12px] w-full h-20 overflow-y-auto flex flex-col gap-2'>
+                            {uploadedList.loading ?
+                            <div className='w-full h-full justify-center items-center'>
+                                <LoadingSpinner size='6' height='h-full' />
+                            </div>
+                            :
+                            Object.keys(uploadedList.data).length > 0 ?
+                            uploadedList.data.result_list.length > 0 ? 
+                                uploadedList.data.result_list.map((item, index) => {
+                                    let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                    return(
+                                        <div key={item.file_uid} className={`my-[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}`}
+                                            >
+                                                {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                            </a>
+                                        </div>
+                                    )
+                                })
+                                : 
+                                <p className='text-sm'>No Uploaded files yet</p>
+                            :
+                            <></>
+                            }
+                        </div>
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
                 </div>
-                <div className='job-label w-full px-2 py-1 h-20 overflow-y-auto flex justify-center items-center'>
-                    list shows here
-                </div>
-                <input 
-                    type="file" 
-                    id='file' 
-                    ref={inputFile} 
-                    className='hidden file:rounded-full job-label p-1' 
-                    onChange={upload}
-                />
             </div>
-        </div>
+        :showOnData && uploadedList?.data?.result_list?.length > 0 ?
+            <div className='w-full h-full flex flex-col justify-center items-center'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files
+                        </div>
+                    </div>
+                    <div className='w-full p-2 rounded-2xl bg-slate-100'>
+                        <div className='text-[12px] w-full p-2 h-20 overflow-y-auto flex flex-col gap-2'>
+                            {uploadedList.data.result_list.map((item, index) => {
+                                let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                return(
+                                    <div key={item.file_uid} className={`my-[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}`}
+                                        >
+                                            {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                        </a>
+                                    </div>
+                                )
+                            })
+                            }
+                        </div>
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
+                </div>
+            </div>
+        :
+            <></>
+        }
+        </>
     )
 }

src/components/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}
@@ -423,17 +423,19 @@ const EditJobPopoutNew = ({
                             <div className="w-full flex items-center justify-center gap-2 mb-2">
                                 {/* FOR TASK IMAGE */}
                                 <div className="w-1/3 relative flex flex-col max-h-[130px] min-h-[130px]">
-                                <label
-                                    className={`w-full job-label job-label-flex cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
-                                    htmlFor="task_image"
-                                    >
-                                    Banner
+                                <div className="w-full flex gap-2">
+                                    <label
+                                        className={`w-full job-label cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
+                                        htmlFor="task_image"
+                                        >
+                                        Banner
+                                    </label>
                                     {uploadStatus.loading ? 
                                         <LoadingSpinner size='6' /> 
                                         : 
-                                        <p className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</p>
+                                        <span className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</span>
                                     } 
-                                </label>
+                                </div>
                                 <input
                                     id="task_image"
                                     className="hidden"

src/components/jobPopout/FamilyOfferJobPopout.jsx

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

src/components/jobPopout/JobListPopout.jsx

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

src/components/jobPopout/popoutcomponent/Detail.jsx

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

src/index.css

@@ -160,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*/
@@ -183,7 +183,7 @@
 
   /* 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/lib/apiConst.js

@@ -44,6 +44,7 @@ export const apiConst = {
     WRENCH_FILE_FAMILY:     400,
     WRENCH_FILE_FAMILYBANNER:    410,
     WRENCH_FILE_JOB :    500,
+    JOB_MANAGER_FILES: 13012,
     WRENCHBOARD_BKO_START: 10000,
     WRENCHBOARD_BKO_LOGIN: 10010,
     WRENCHBOARD_BKO_CREATEUSER: 10015,

src/services/UsersService.js

@@ -1356,6 +1356,18 @@ class usersService {
     return this.postAuxEnd("/assignmediatask", postData);
   }
 
+  // API FUNCTION FOR LISTING JOB MANAGER FILES (TASK FILE UPLAOD)
+  jobManagerFiles(reqData) {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.JOB_MANAGER_FILES,
+      ...reqData
+    };
+    return this.postAuxEnd("/jobmanagerfiles", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

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