Merge branch 'master' of into implementing-zero-state

.env

@@ -31,5 +31,8 @@ REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 #NUMBER OF ITEMS PER PAGE
 REACT_APP_ITEM_PER_PAGE=5
 
+# Empty Listings
+REACT_APP_ZERO_STATE=0
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

src/Routers.jsx

@@ -34,6 +34,7 @@ import VerifyLinkPages from "./views/VerifyLinkPages";
 import MyActiveJobsPage from "./views/MyActiveJobsPage";
 import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
+import AddJobPage from "./views/AddJobPage";
 
 export default function Routers() {
   return (
@@ -76,6 +77,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
+          <Route exact path="/add-job" element={<AddJobPage />} />
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/start-job"  element={<StartJob />} />

src/components/ActiveBids/AllBidsSection.jsx

@@ -12,7 +12,7 @@ export default function AllBidsSection({ className, allBids = [] }) {
         </div>
         <div className="w-full">
           <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
-            <DataIteration datas={allBids} startLength={0} endLength={8}>
+            <DataIteration datas={allBids} startLength={process.env.REACT_APP_ZERO_STATE} endLength={8}>
               {({ datas }) => (
                 <div key={datas.id} className="item">
                   <ProductCardStyleOne datas={datas} />

src/components/AddJob/AddJob.jsx

@@ -0,0 +1,340 @@
+import React, {useState, useEffect} from 'react'
+import { Link, useNavigate } from 'react-router-dom';
+import InputCom from '../Helpers/Inputs/InputCom';
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+import usersService from '../../services/UsersService';
+
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
+const validationSchema = Yup.object().shape({
+    country: Yup.string()
+      .min(1, "Minimum 3 characters")
+      .max(25, "Maximum 25 characters")
+      .required("Country is required"),
+    price: Yup.number()
+      .typeError("you must specify a number")
+      .min(1, "Price must be greater than 0")
+      .required("Price is required"),
+    title: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(100, "Maximum 25 characters")
+      .required("Title is required"),
+    description: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(250, "Maximum 250 characters")
+      .required("Description is required"),
+    job_detail: Yup.string()
+      .min(3, "Minimum 3 characters")
+      .max(250, "Maximum 250 characters")
+      .required("Details is required"),
+    timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Price is required"),
+  });
+
+  let initialValues = { // initial values for formik
+    country: '',
+    price: '',
+    title: '',
+    description: '',
+    job_detail: '',
+    timeline_days: ''
+}
+
+function AddJob() {
+    const ApiCall = new usersService()
+    const navigate = useNavigate()
+
+    let [pageLoading, setPageLoading] = useState(true) // State used for knowing when the page is mounting
+
+    let [country, setCountry] = useState({loading: false, status: false, data:[]}) // To Hold the array of country getUserCountry returns
+
+    let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message:''}) // Holds state when submit button is pressed
+
+    // FUNCTION TO GET COUNTRY
+    const getUserCountry = () =>{
+        setCountry(prev => ({...prev, loading:true}))
+        ApiCall.getSignupCountryData().then(res => {
+            if(res.data.internal_return < 1){
+                setCountry({loading: false, status: true, data:[]})
+                return
+            }
+            setCountry({loading: false, status: true, data:res.data.signup_country})
+        }).catch(err => {
+            setCountry({loading: false, status: false, data:[]})
+        })
+    }
+
+    // FUNCTION TO HANDLE ADD JOB FORM
+    const handleAddJob = (values, helpers) => {
+        console.log(values)
+        setRequestStatus({loading: true, status: false, message:''})
+        ApiCall.jobManagerCreateJob(values).then(res => {
+            if(res.data.internal_return < 1){
+                setRequestStatus({loading: false, status: false, message:'Could not complete your request at the moment'})
+                return
+            }
+            setRequestStatus({loading: false, status: true, message:'Job Added Successfully'})
+            setTimeout(()=>{
+                navigate('/myjobs', {replace: true})
+            },1000)
+
+        }).catch(err => {
+            setRequestStatus({loading: false, status: false, message:'Opps! soemthing went wrong. Try Again'})
+        })
+    }
+
+    useEffect(()=>{
+        setPageLoading(false)
+        getUserCountry()
+    },[])
+
+    return pageLoading.loading ? (
+        <div className="personal-info-tab w-full flex flex-col justify-between">
+          <div className="p-3">
+            <LoadingSpinner size="32" color="sky-blue" />
+          </div>
+        </div>
+      ) : (
+        <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleAddJob}
+          >
+            {(props) => {
+                return (
+                <Form>
+                    <h1 className='py-2 my-4 text-lg md:text-xl font-bold tracking-wide'>Create New Job</h1>
+                    <div className="flex flex-col-reverse sm:flex-row">
+                        <div className="fields w-full">
+                            
+                            {/* inputs starts here */}
+                            {/* country */}
+                            <div className="xl:flex xl:space-x-7 mb-6">
+                                <div className="field w-full mb-6 xl:mb-0">
+                                {/* <InputCom
+                                    fieldClass="px-6"
+                                    label="Country"
+                                    labelClass='tracking-wide'
+                                    inputBg = 'bg-slate-100'
+                                    type="text"
+                                    name="country"
+                                    // placeholder="Select Country"
+                                    value={props.values.country}
+                                    inputHandler={props.handleChange}
+                                /> */}
+                                <label 
+                                htmlFor='country'
+                                className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block">
+                                    Country
+                                </label>
+                                <select 
+                                    id='country'
+                                    name='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`}
+                                    onChange={props.handleChange}
+                                >
+                                    {country.loading ? (
+                                        <option className="text-slate-500 text-lg" value="">
+                                        Loading...
+                                        </option>
+                                    ) : country.data.length ? (
+                                        <>
+                                        <option className="text-slate-500 text-lg" value="">
+                                            Select...
+                                        </option>
+                                        {country.data.map((item, index) => (
+                                            <option
+                                            key={index}
+                                            className="text-slate-500 text-lg"
+                                            value={item[0]}
+                                            >
+                                            {item[1]}
+                                            </option>
+                                        ))}
+                                        </>
+                                    ) : (
+                                        <option className="text-slate-500 text-lg" value="">
+                                        No Options Found! Try Again
+                                        </option>
+                                    )}
+                                </select>
+                                {props.errors.country && props.touched.country && (
+                                    <p className="text-sm text-red-500">
+                                    {props.errors.country}
+                                    </p>
+                                )}
+                                </div>
+            
+                                {/* Price */}
+                                <div className="field w-full">
+                                <InputCom
+                                    fieldClass="px-6"
+                                    label="Price"
+                                    labelClass='tracking-wide'
+                                    inputBg = 'bg-slate-100'
+                                    type="text"
+                                    name="price"
+                                    // placeholder="Please Enter Amount"
+                                    value={props.values.price}
+                                    inputHandler={props.handleChange}
+                                />
+                                {props.errors.price && props.touched.price && (
+                                    <p className="text-sm text-red-500">
+                                    {props.errors.price}
+                                    </p>
+                                )}
+                                </div>
+                            </div>
+
+                            {/* Title  */}
+
+                            <div className="field w-full mb-6">
+                                <InputCom
+                                fieldClass="px-6"
+                                label="Title"
+                                labelClass='tracking-wide'
+                                inputBg = 'bg-slate-100'
+                                type="text"
+                                name="title"
+                                // placeholder="Enter Job Title"
+                                value={props.values.title}
+                                inputHandler={props.handleChange}
+                                />
+                                {props.errors.title && props.touched.title && (
+                                <p className="text-sm text-red-500">
+                                    {props.errors.title}
+                                </p>
+                                )}
+                            </div>
+
+                            {/* Description  */}
+                            <div className="field w-full mb-6">
+                                <InputCom
+                                fieldClass="px-6"
+                                label="Description"
+                                labelClass='tracking-wide'
+                                inputBg = 'bg-slate-100'
+                                type="text"
+                                name="description"
+                                // placeholder="Enter a description"
+                                value={props.values.description}
+                                inputHandler={props.handleChange}
+                                />
+                                {props.errors.description && props.touched.description && (
+                                <p className="text-sm text-red-500">
+                                    {props.errors.description}
+                                </p>
+                                )}
+                            </div>
+
+                             {/* Details */}
+                             <div className="field w-full mb-6">
+                            {/* <InputCom
+                                fieldClass="px-6"
+                                label="Job Delivery Details"
+                                labelClass='tracking-wide'
+                                inputBg = 'bg-slate-100'
+                                type="text"
+                                name="details"
+                                // placeholder="Please Enter Detail Description of Job"
+                                value={props.values.details}
+                                inputHandler={props.handleChange}
+                            /> */}
+                            <label 
+                            htmlFor="Job Delivery Details" 
+                            className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'>
+                                Job Delivery Details
+                            </label>
+                            <textarea name="details" id="Job Delivery Details" rows="7"
+                                className={`input-field p-6 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                style={{resize:'none'}}
+                                name='job_detail'
+                                value={props.values.job_detail}
+                                onChange={props.handleChange}
+                            />
+                            {props.errors.job_detail && props.touched.job_detail && (
+                                <p className="text-sm text-red-500">
+                                {props.errors.job_detail}
+                                </p>
+                            )}
+                            </div>
+
+                            <div className="field w-full mb-6">
+                            <InputCom
+                                fieldClass="px-6"
+                                label="Timeline"
+                                labelClass='tracking-wide'
+                                inputBg = 'bg-slate-100'
+                                type="text"
+                                name="timeline_days"
+                                spanTag = ' - Expected duration of this task'
+                                // placeholder="Please Enter Detail Description of Job"
+                                value={props.values.timeline_days}
+                                inputHandler={props.handleChange}
+                            />
+                            {props.errors.timeline_days && props.touched.timeline_days && (
+                                <p className="text-sm text-red-500">
+                                {props.errors.timeline_days}
+                                </p>
+                            )}
+                            </div>
+                            {/* inputs ends here */}
+                        </div>
+                    </div>
+        
+                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                    <div className="content-footer w-full">
+                        {/* error or success display */}
+                        {requestStatus.message != "" && (
+                       !requestStatus.status ?
+                        (<div className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+                            {requestStatus.message}
+                        </div>)
+                        :
+                        requestStatus.status &&
+                            (<div className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+                                {requestStatus.message}
+                            </div>
+                            )
+                        )}
+                        {/* End of error or success display */}
+
+                        <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                            <div className="flex items-center space-x-4 mr-9">
+                                <Link
+                                to="/myjobs"
+                                className="text-18 text-light-red tracking-wide "
+                                >
+                                <span className="border-b dark:border-[#5356fb29]  border-light-red">
+                                    {" "}
+                                    Cancel
+                                </span>
+                                </Link>
+            
+                                {requestStatus.loading ? (
+                                <LoadingSpinner size="8" color="sky-blue" />
+                                ) : (
+                                <button
+                                    type="submit"
+                                    className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                    // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+                                >
+                                    Add Job
+                                </button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </Form>
+              );
+            }}
+          </Formik>
+        </div>
+      )
+}
+
+export default AddJob

src/components/AuthPages/AuthProfile/CollectionTab.jsx

@@ -42,7 +42,7 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/AuthPages/AuthProfile/OnSaleTab.jsx

@@ -42,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/AuthPages/AuthProfile/OwnTab.jsx

@@ -42,7 +42,7 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/AuthPages/UserProfile/CollectionTab.jsx

@@ -42,7 +42,7 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/AuthPages/UserProfile/OnSaleTab.jsx

@@ -42,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/AuthPages/UserProfile/OwnTab.jsx

@@ -42,7 +42,7 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/Cards/AvailableJobsCard.jsx

@@ -5,123 +5,114 @@ import localImgLoad from "../../lib/localImgLoad";
 import Icons from "../Helpers/Icons";
 
 export default function AvailableJobsCard({
-                                           className,
+  className,
-                                           datas,
+  datas,
-                                           hidden = false,
+  hidden = false,
-                                       }) {
+}) {
-    //debugger;
+  //debugger;
-    const [addFavorite, setValue] = useState(datas.whishlisted);
+  const [addFavorite, setValue] = useState(datas.whishlisted);
-    const [options, setOption] = useState(false);
+  const [options, setOption] = useState(false);
-    const favoriteHandler = () => {
+  const favoriteHandler = () => {
-        if (!addFavorite) {
+    if (!addFavorite) {
-            setValue(true);
+      setValue(true);
-            toast.success("Added to Favorite List");
+      toast.success("Added to Favorite List");
-        } else {
+    } else {
-            setValue(false);
+      setValue(false);
-            toast.warn("Remove to Favorite List");
+      toast.warn("Remove to Favorite List");
-        }
+    }
-    };
+  };
-    return (
+  return (
-        <div
+    <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 h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-                className || ""
+        className || ""
-            }`}
+      }`}
-        >
+    >
-            <div className="flex flex-col justify-between w-full h-full">
+      <div className="flex flex-col justify-between w-full h-full">
-                <Link to="/shop-details" className="mb-2.5">
+        <Link to="/shop-details" className="mb-2.5">
-                    <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                        {datas.title}
+            {datas.title}
-                    </h1>
+          </h1>
-                </Link>
+        </Link>
 
-                <div className="card-two-info flex justify-between items-center">
+        <div className="card-two-info flex justify-between items-center">
-                    <div className="owned-by flex space-x-2 items-center">
+          <div className="owned-by flex space-x-2 items-center">
-                        <div>
+            <div>
-                            <p className="text-thin-light-gray text-sm leading-3">Added</p>
+              <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                            <p className="text-base   text-dark-gray dark:text-white">
+              <p className="text-base   text-dark-gray dark:text-white">
-                                {datas.offer_added}
+                {datas.offer_added}
-                            </p>
+              </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">
-                                {datas.expire}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div className="thumbnail-area w-full">
-                    <div
-                        className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
-                        style={{
-                            background: `url(${localImgLoad(
-                                `images/${datas.thumbnil}`
-                            )}) 0% 0% / cover no-repeat`,
-                        }}
-                    >
-                        <div className="flex justify-center">
-                            {datas.description}
-                        </div>
-
-
-
-
-
-                    </div>
-
-                </div>
-                <div className="details-area">
-                    <div className="product-two-options flex justify-between mb-5 relative">
-
-                        {/*      <div className="status">*/}
-                        {/*          {datas.isActive && (*/}
-                        {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-                        {/*  Active*/}
-                        {/*</span>*/}
-                        {/*          )}*/}
-                        {/*      </div>*/}
-
-
-                        {/*<div className=" review flex space-x-2">*/}
-                        {/*    <button*/}
-                        {/*        onClick={favoriteHandler}*/}
-                        {/*        type="button"*/}
-                        {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-                        {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-                        {/*        }`}*/}
-                        {/*    >*/}
-                        {/*        <Icons name="star" />*/}
-                        {/*    </button>*/}
-                        {/*</div>*/}
-                    </div>
-
-                    <div className="flex justify-between">
-                        <div className="flex items-center space-x-2">
-                            <div>
-                                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                                    {datas.price*0.01}{datas.currency} | {datas.timeline_days} day(s)
-                                </p>
-                                <p className="text-sm text-lighter-gray">
-                                    ( {datas.offer_code})
-                                </p>
-                            </div>
-                        </div>
-                        <div>
-                            <button
-                                type="button"
-                                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                            >
-                                View
-                            </button>
-                        </div>
-                    </div>
-                </div>
             </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">
+                {datas.expire}
+              </p>
+            </div>
+          </div>
         </div>
-    );
+        <div className="thumbnail-area w-full">
+          <div
+            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            style={{
+              background: `url(${localImgLoad(
+                `images/${datas.thumbnil}`
+              )}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <div className="flex justify-center">{datas.description}</div>
+          </div>
+        </div>
+        <div className="details-area">
+          <div className="product-two-options flex justify-between mb-5 relative">
+            {/*      <div className="status">*/}
+            {/*          {datas.isActive && (*/}
+            {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+            {/*  Active*/}
+            {/*</span>*/}
+            {/*          )}*/}
+            {/*      </div>*/}
+
+            {/*<div className=" review flex space-x-2">*/}
+            {/*    <button*/}
+            {/*        onClick={favoriteHandler}*/}
+            {/*        type="button"*/}
+            {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+            {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+            {/*        }`}*/}
+            {/*    >*/}
+            {/*        <Icons name="star" />*/}
+            {/*    </button>*/}
+            {/*</div>*/}
+          </div>
+
+          <div className="flex justify-between">
+            <div className="flex items-center space-x-2">
+              <div>
+                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                  {datas.price * 0.01}
+                  {datas.currency} | {datas.timeline_days} day(s)
+                </p>
+                <p className="text-sm text-lighter-gray">
+                  ( {datas.offer_code})
+                </p>
+              </div>
+            </div>
+            <div>
+              <button
+                type="button"
+                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              >
+                View
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

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

@@ -19,6 +19,8 @@ export default function InputCom({
   onClick,
   disable,
   blurHandler,
+  spanTag,
+  inputBg
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -138,8 +140,9 @@ export default function InputCom({
           <label
             className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
             htmlFor={name}
-          >
+            >
             {label}
+            {spanTag && <span className="text-green-700 text-sm tracking-wide">{spanTag}</span>}
           </label>
         )}
         {forgotPassword && (
@@ -158,7 +161,7 @@ export default function InputCom({
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
+          className={`input-field placeholder:text-base text-dark-gray dark:text-white w-full h-full ${inputBg ? inputBg: 'bg-[#FAFAFA]'} dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}
           id={name}
           name={name}

src/components/MarketPlace/MainSection.jsx

@@ -95,7 +95,7 @@ export default function MainSection({ className, marketPlaceProduct }) {
           <div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">
             <DataIteration
               datas={products}
-              startLength="0"
+              startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
               {({ datas }) => (

src/components/MyCollection/CollectionItem/MainSection.jsx

@@ -9,7 +9,7 @@ export default function MainSection({ collectionData, className }) {
         <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
           <DataIteration
             datas={collectionData}
-            startLength={0}
+            startLength={process.env.REACT_APP_ZERO_STATE}
             endLength={collectionData.length}
           >
             {({ datas }) => (

src/components/MyCollection/MainSection.jsx

@@ -8,7 +8,7 @@ function MainSection({ collectionData, className }) {
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
         <DataIteration
           datas={collectionData}
-          startLength={0}
+          startLength={process.env.REACT_APP_ZERO_STATE}
           endLength={collectionData.length}
         >
           {({ datas }) => (

src/components/MyJobs/MyJobTable.jsx

@@ -33,7 +33,7 @@ export default function MyJobTable({MyJobList, className }) {
             <div className="header w-full flex justify-between items-center mb-5">
                 <div className="flex space-x-2 items-center">
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-
+                        All Jobs
                     </h1>
                 </div>
                 <SelectBox
@@ -48,7 +48,7 @@ export default function MyJobTable({MyJobList, className }) {
                 <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     <tr className="text-base text-thin-light-gray border-b  default-border-b dark:border-[#5356fb29] ottom ">
-                        <td className="py-4">All Product</td>
+                        <td className="py-8">.</td>
                         <td className="py-4 text-right">.</td>
                     </tr>
 
@@ -58,8 +58,9 @@ export default function MyJobTable({MyJobList, className }) {
                                 MyJobList.result_list.length > 0 &&
                                 currentJobList.map((value, index) => (
                                     <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                                        <td className="py-4">
+                                        <td className="py-9">
-                                            <div className="flex space-x-2 items-center">
+                                            <div className="flex space-x-2 items-center job-items">
+
                                                 <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                                     <img
                                                         src={dataImage2}
@@ -80,19 +81,23 @@ export default function MyJobTable({MyJobList, className }) {
                                                     <span className="text-sm text-thin-light-gray">
                                                     Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
                                                     </span>
+
                                                 </div>
+                                                <div className="job-sub-menu"><button  type="button"  className="w-20 h-11">[Delete]</button> |
+                                                                             <button  type="button" className="w-20 h-11">Edit</button> </div>
                                             </div>
+
                                         </td>
 
 
-                                        <td className="text-right py-4 px-2">
+                                        <td className="text-right py-3 px-2">
                                             <button
                                                 type="button"
                                                 onClick={()=>{setJobPopout({show:true, data:value})}}
                                                 onClick={()=>{setJobPopout({show:true, data:value})}}
                                                 className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                                             >
-                                                View
+                                                Manage
                                             </button>
                                         </td>
                                     </tr>

src/components/MyJobs/index.jsx

@@ -18,13 +18,16 @@ export default function MyJobs(props) {
                     {/* heading */}
                     <div className="sm:flex justify-between items-center mb-6">
                         <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                            <h1 className="text-26 font-bold flex items-center space-x-1  text-dark-gray dark:text-white">
-                <span
+                                <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
+                                >
-                  My Jobs
+                                My Jobs
-                </span>
+                                </span>
 
+                                <Link to='/add-job' className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
+                                    Add Job
+                                </Link>
                             </h1>
                         </div>
                         <div className="slider-btns flex space-x-4">

src/components/MyWallet/Balance.jsx

@@ -40,7 +40,10 @@ function Balance({wallet, coupon}) {
                             </div>
 
                             <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
-                                <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>
+                                {
+                                    item.action_type != 'AC_AD_FD_ONLY' ?
+                                        <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>:''
+                                }
                                 <Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
                             </div>
                         </div>

src/components/Partials/MobileSideBar.jsx

@@ -174,6 +174,8 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
         </div>
         :
+        jobLists?.result_list?.length ?
+          (
           <div className="setting-item">
             <div className="heading mb-5">
               <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -222,6 +224,32 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
+          )
+          :
+          (
+            <div className="setting-item">
+              <div className="heading mb-5">
+                <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+              </div>
+              <div className="items">
+                <ul className="flex flex-col space-y-6">
+                  <li className="item group">
+                    <NavLink
+                      to="/add-job"
+                      className="nav-item flex items-center justify-start space-x-3.5"
+                    >
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                        <Icons name="people-two" />
+                      </span>
+                      <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                        My Jobs
+                      </span>
+                    </NavLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            )
       }
       </div>
       {/* signout area */}

src/components/Partials/Sidebar.jsx

@@ -249,115 +249,150 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
           </div>
         </div>
         :
-        <div className="setting-item">
+        jobLists?.result_list?.length ?
-          <div className="heading mb-5">
+          (
-            <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+            <div className="setting-item">
-          </div>
+              <div className="heading mb-5">
-          <div className="items">
+                <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-            <ul className="flex flex-col space-y-6">
+              </div>
-              <li className="item group">
+              <div className="items">
-                <NavLink
+                <ul className="flex flex-col space-y-6">
-                  to="/myjobs"
+                  <li className="item group">
-                  className={`nav-item flex items-center ${
+                    <NavLink
-                    ((navData) => (navData.isActive ? "active" : ""),
+                      to="/myjobs"
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
+                      className={`nav-item flex items-center ${
-                  }`}
+                        ((navData) => (navData.isActive ? "active" : ""),
-                >
+                        sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      }`}
-                    <Icons name="people-two" />
+                    >
-                  </span>
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                  <span
+                        <Icons name="people-two" />
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                      </span>
-                      sidebar ? "active flex-1" : "w-0"
+                      <span
-                    }`}
+                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                  >
+                          sidebar ? "active flex-1" : "w-0"
-                    List
+                        }`}
-                  </span>
+                      >
-                </NavLink>
+                        List
-              </li>
+                      </span>
-              <li className="item group">
+                    </NavLink>
-                <NavLink
+                  </li>
-                  to="/my-active-jobs"
+                  <li className="item group">
-                  className={`nav-item flex items-center ${
+                    <NavLink
-                    ((navData) => (navData.isActive ? "active" : ""),
+                      to="/my-active-jobs"
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
+                      className={`nav-item flex items-center ${
-                  }`}
+                        ((navData) => (navData.isActive ? "active" : ""),
-                >
+                        sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      }`}
-                    <Icons name="people-two" />
+                    >
-                  </span>
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                  <span
+                        <Icons name="people-two" />
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                      </span>
-                      sidebar ? "active flex-1" : "w-0"
+                      <span
-                    }`}
+                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                  >
+                          sidebar ? "active flex-1" : "w-0"
-                    Pending
+                        }`}
-                  </span>
+                      >
-                </NavLink>
+                        Pending
-              </li>
+                      </span>
-              <li className="item group">
+                    </NavLink>
-                <NavLink
+                  </li>
-                  to="/my-active-jobs"
+                  <li className="item group">
-                  className={`nav-item flex items-center ${
+                    <NavLink
-                    ((navData) => (navData.isActive ? "active" : ""),
+                      to="/my-active-jobs"
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
+                      className={`nav-item flex items-center ${
-                  }`}
+                        ((navData) => (navData.isActive ? "active" : ""),
-                >
+                        sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                      }`}
-                    <Icons name="people-two" />
+                    >
-                  </span>
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                  <span
+                        <Icons name="people-two" />
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                      </span>
-                      sidebar ? "active flex-1" : "w-0"
+                      <span
-                    }`}
+                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                  >
+                          sidebar ? "active flex-1" : "w-0"
-                    Active
+                        }`}
-                  </span>
+                      >
-                </NavLink>
+                        Active
-              </li>
+                      </span>
-              {/*<li className="item group">*/}
+                    </NavLink>
-              {/*  <NavLink*/}
+                  </li>
-              {/*    to="/profile"*/}
+                  {/*<li className="item group">*/}
-              {/*    className={`nav-item flex items-center ${*/}
+                  {/*  <NavLink*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+                  {/*    to="/profile"*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+                  {/*    className={`nav-item flex items-center ${*/}
-              {/*    }`}*/}
+                  {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*  >*/}
+                  {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+                  {/*    }`}*/}
-              {/*      <Icons name="people-two" />*/}
+                  {/*  >*/}
-              {/*    </span>*/}
+                  {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*    <span*/}
+                  {/*      <Icons name="people-two" />*/}
-              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+                  {/*    </span>*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
+                  {/*    <span*/}
-              {/*      }`}*/}
+                  {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-              {/*    >*/}
+                  {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      My Profile*/}
+                  {/*      }`}*/}
-              {/*    </span>*/}
+                  {/*    >*/}
-              {/*  </NavLink>*/}
+                  {/*      My Profile*/}
-              {/*</li>*/}
+                  {/*    </span>*/}
-              {/*<li className="item group">*/}
+                  {/*  </NavLink>*/}
-              {/*  <NavLink*/}
+                  {/*</li>*/}
-              {/*    to="/settings"*/}
+                  {/*<li className="item group">*/}
-              {/*    className={`nav-item flex items-center ${*/}
+                  {/*  <NavLink*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
+                  {/*    to="/settings"*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
+                  {/*    className={`nav-item flex items-center ${*/}
-              {/*    }`}*/}
+                  {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*  >*/}
+                  {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
+                  {/*    }`}*/}
-              {/*      <Icons name="setting" />*/}
+                  {/*  >*/}
-              {/*    </span>*/}
+                  {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*    <span*/}
+                  {/*      <Icons name="setting" />*/}
-              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
+                  {/*    </span>*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
+                  {/*    <span*/}
-              {/*      }`}*/}
+                  {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-              {/*    >*/}
+                  {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      Settings*/}
+                  {/*      }`}*/}
-              {/*    </span>*/}
+                  {/*    >*/}
-              {/*  </NavLink>*/}
+                  {/*      Settings*/}
-              {/*</li>*/}
+                  {/*    </span>*/}
-            </ul>
+                  {/*  </NavLink>*/}
-          </div>
+                  {/*</li>*/}
-        </div>
+                </ul>
+              </div>
+            </div>
+          )
+          :
+          (
+            <div className="setting-item">
+              <div className="heading mb-5">
+                <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+              </div>
+              <div className="items">
+                <ul className="flex flex-col space-y-6">
+                  <li className="item group">
+                    <NavLink
+                      to="/add-job"
+                      className={`nav-item flex items-center ${
+                        ((navData) => (navData.isActive ? "active" : ""),
+                        sidebar ? "justify-start space-x-3.5" : "justify-center")
+                      }`}
+                    >
+                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                        <Icons name="people-two" />
+                      </span>
+                      <span
+                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                          sidebar ? "active flex-1" : "w-0"
+                        }`}
+                      >
+                        Add Job
+                      </span>
+                    </NavLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          )
         }
 
       </div>

src/components/Resources/CollectionTab.jsx

@@ -42,7 +42,7 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/Resources/OnSaleTab.jsx

@@ -42,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/Resources/OwnTab.jsx

@@ -42,7 +42,7 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (

src/components/Saved/MainSection.jsx

@@ -7,7 +7,7 @@ export default function MainSection({ products }) {
     <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-6">
       <DataIteration
         datas={products}
-        startLength={0}
+        startLength={process.env.REACT_APP_ZERO_STATE}
         endLength={products.length}
       >
         {({ datas }) => (

src/components/jobPopout/JobListPopout.jsx

@@ -9,7 +9,6 @@ function JobListPopout({details, onClose, situation}) {
         public: '',
         individual: '',
         group: '',
-        details: 'Some text here!'
     })
 
     const handleInputChange = ({target:{name, value}}) => {
@@ -89,7 +88,7 @@ function JobListPopout({details, onClose, situation}) {
                     rows='5'
                     name='details'
                     style={{resize: 'none'}} 
-                    value={inputs.details}
+                    value={details.job_detail}
                     onChange={handleInputChange}
                 />
             </div>

src/index.css

@@ -468,6 +468,12 @@ input[type="number"] {
   overflow: hidden;
 }
 
+.job-items{
+  .job-sub-menu{
+    background-color: yellow;
+  }
+}
+
 .content-item .inner-list-items {
   top: 0;
   right: -100%;

src/services/UsersService.js

@@ -426,6 +426,18 @@ class usersService {
         return this.postAuxEnd("/jobmanageragree", postData);
     }
 
+    // END POINT TO TO CREATE A JOB
+    jobManagerCreateJob(reqData) {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            action: 13010,
+            ...reqData
+        };
+        return this.postAuxEnd("/jobmanagercreatejob", postData);
+    }
+
     verifyEmail(code) {
         const reqData = {
             verify_link: code,

src/views/AddJobPage.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import AddJob from '../components/AddJob/AddJob'
+import Layout from '../components/Partials/Layout'
+
+
+function AddJobPage() {
+  return (
+    <Layout>
+        <AddJob />
+    </Layout>
+  )
+}
+
+export default AddJobPage