upload error message bud fixed

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/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -88,10 +88,10 @@ export default function AssignMediaTask({
                         <Form>
                             <>
                                 <div
-                                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
+                                className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
-                                    <div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                    <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                                         {commonMedia?.data?.length ? (
                                         commonMedia?.data?.map((item, index) => (
                                             <div

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -3,6 +3,7 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
 import { NewTasks } from './forms'
 import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
+import AttachFile from '../../attachmentCom/AttachFile';
 
 export default function AssignPrevNewTask({
     jobList,
@@ -32,7 +33,7 @@ export default function AssignPrevNewTask({
             ) : (
               <>
                 <div
-                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
+                  className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid ${
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >
@@ -63,7 +64,7 @@ export default function AssignPrevNewTask({
                     </div>
                     {/* Task Type === select */}
                     {taskType == "select" && (
-                      <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                      <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                         {jobList?.data?.length ? (
                           jobList?.data?.map((item, index) => (
                             <div
@@ -151,7 +152,7 @@ export default function AssignPrevNewTask({
                                 </div>
                               </div>
                               <div className="w-full flex items-center justify-center">
-                                <div className="w-28 h-28 rounded-2xl 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"
@@ -162,13 +163,10 @@ export default function AssignPrevNewTask({
                               </div>
                             </div>
                             
-                            {/* Dummy, no value found for created! thus commented*/}
+                            {/* ATTACHMENT SECTION*/}
-                            {/* <div className="my-3 sm:flex items-center">
+                            <div className="w-full max-h-28">
-                              <Detail
+                                <AttachFile data={activeTask.data} />
-                                label="Created"
+                            </div>
-                                value={`Dummy, no value found for created!`}
-                              />
-                            </div> */}
 
                             <div className="my-3">
                               <label className="w-full job-label">

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

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from 'react'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import axios from 'axios'
+
+import usersService from '../../services/UsersService'
+
+export default function AttachFile({data='', fontSize='text-sm', showOnData=false}) {
+
+    const apiCall = new usersService()
+
+    let [uploadedList, setUploadedList] = useState({loading: true, data:{}})
+    let [reloadList, setReloadList] = useState(false) // Triggers list of upload reload
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
+
+    const inputFile = useRef()
+
+    const upload = (event) => {
+        let inputs = {
+            file: event.target.files[0],
+            job_uid: data?.job_uid,
+            uid: localStorage.getItem("uid"),
+            // member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+          };
+        setRequestStatus({loading: true, status:false, message:''})
+        if(!inputs.file){
+            setRequestStatus({loading: false, status:false, message:'Please select a file'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        }
+        const formData = new FormData()
+        for (let input in inputs) {
+            formData.append(input, inputs[input]);
+        }
+
+        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 (
+        <>
+        {!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>
+        :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/EditJobPopoutNew.jsx

@@ -9,6 +9,7 @@ import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { apiConst } from "../../lib/apiConst";
+import AttachFile from "../attachmentCom/AttachFile";
 
 const validationSchema = Yup.object().shape({
   country: Yup.string()
@@ -301,7 +302,7 @@ const EditJobPopoutNew = ({
                                 <Field
                                     component="select"
                                     name="timeline_days"
-                                    className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                                    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 ${
                                     props.errors.timeline_days &&
                                     props.touched.timeline_days
                                         ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
@@ -419,15 +420,22 @@ const EditJobPopoutNew = ({
                                 </div>
                                 </div>
                             </div>
-                            <div className="w-full flex items-center gap-2 mb-2">
+                            <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
+                                <div className="w-full flex gap-2">
-                                    className="w-full job-label"
+                                    <label
-                                    htmlFor="timeline_days"
+                                        className={`w-full job-label cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
-                                    >
+                                        htmlFor="task_image"
-                                    Banner
+                                        >
-                                </label>
+                                        Banner
+                                    </label>
+                                    {uploadStatus.loading ? 
+                                        <LoadingSpinner size='6' /> 
+                                        : 
+                                        <span className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</span>
+                                    } 
+                                </div>
                                 <input
                                     id="task_image"
                                     className="hidden"
@@ -465,7 +473,7 @@ const EditJobPopoutNew = ({
                                 {/* END OF TASK IMAGE */}
 
                                 <div className="field w-2/3">
-                                {/* PUT SPACE HERE */}
+                                    <AttachFile data={details} />
                                 </div>
 
                             </div>
@@ -492,25 +500,6 @@ const EditJobPopoutNew = ({
                                 )
                             ))}
                             {/* End of error or success display */}
-
-                            {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                            <div className="w-full">
-                            {uploadStatus.message && !uploadStatus.loading && (
-                                <p
-                                className={`text-center ${
-                                    uploadStatus.status
-                                    ? "text-green-500"
-                                    : "text-red-500"
-                                }`}
-                                >
-                                {uploadStatus.message}
-                                </p>
-                            )}
-                            {uploadStatus.loading && (
-                                <p className="text-center">{uploadStatus.message}</p>
-                            )}
-                            </div>
-
                         </div>
                     </div>
                     <div className="modal-footer-wrapper justify-end">

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