input error position changed

src/components/AddJob/AddJob.jsx

@@ -23,15 +23,15 @@ const validationSchema = Yup.object().shape({
     })
     .required("Price is required"),
   title: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
-    .max(100, "Maximum 25 characters")
+    .max(45, "Maximum 45 characters")
     .required("Title is required"),
   description: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
     .max(250, "Maximum 250 characters")
     .required("Description is required"),
   job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
     .max(250, "Maximum 250 characters")
     .required("Details is required"),
   timeline_days: Yup.number()
@@ -162,19 +162,16 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
                         htmlFor="country"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
                       >
                         Currency
+                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
                       </label>
                       <select
                         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 ${
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                          props.errors.country && props.touched.country
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        }`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
@@ -218,7 +215,7 @@ function AddJob({ popUpHandler, categories }) {
                         value={props.values.price}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
-                        errorBorder={props.errors.price && props.touched.price}
+                        error={props.errors.price && props.touched.price && props.errors.price}
                       />
                     </div>
                   </div>
@@ -236,7 +233,7 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.title && props.touched.title}
+                      error={props.errors.title && props.touched.title && props.errors.title}
                     />
                   </div>
 
@@ -252,9 +249,7 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={
+                      error={props.errors.description && props.touched.description && props.errors.description}
-                        props.errors.description && props.touched.description
-                      }
                     />
                   </div>
 
@@ -263,18 +258,15 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="sm:w-[60%] w-full">
                       <label
                         htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
                       >
                         Job Delivery Details
+                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
                       </label>
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
-                          props.errors.job_detail && props.touched.job_detail
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        } rounded-[10px]`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}

src/components/Cards/FamilyMarketCard.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";
+
+export default function FamilyMarketCard({
+  className,
+  datas,
+  hidden = false,
+}) {
+  // debugger;
+  const [addFavorite, setValue] = useState(datas.whishlisted);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+      toast.success("Added to Favorite List");
+    } else {
+      setValue(false);
+      toast.warn("Remove to Favorite List");
+    }
+  };
+  return (
+    <div
+      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col justify-between w-full h-full">
+        <div className="thumbnail-area w-full">
+          <div
+            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            style={{
+              background: `url(${`https://blog.float.sg/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <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>
+            {hidden && <div className="flex justify-center"></div>}
+          </div>
+        </div>
+        <div className="details-area">
+          {/* title */}
+          <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">
+              {datas.post_title}
+            </h1>
+          </Link>
+          <div className="flex justify-between">
+            <div className="flex items-center space-x-2"></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/Cards/ResourceBlogCard.jsx

@@ -1,10 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
-import localImgLoad from "../../lib/localImgLoad";
-import Icons from "../Helpers/Icons";
-
-import Image from '../../assets/images/Linkedin.png'
 
 export default function ProductCardStyleTwo({
   className,
@@ -36,8 +32,8 @@ export default function ProductCardStyleTwo({
           <div
             className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
             style={{
-              background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              // background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-            // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+            background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -54,9 +50,9 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <a href={datas.guid} target="_blank" className="mb-2.5">
+          <a href={datas.guid} target="_blank" className="mb-2.5" rel="noreferrer">
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-              {datas.post_title}
+              {datas.post_title || "dummy title..."}
             </h1>
           </a>
           <div className="flex justify-between">
@@ -66,6 +62,7 @@ export default function ProductCardStyleTwo({
                 href={datas.guid}
                 target="_blank"
                 className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                rel="noreferrer"
               >
                 View
               </a>

src/components/FamilyAcc/FamilyMarket.jsx

@@ -3,6 +3,11 @@ import InputCom from "../Helpers/Inputs/InputCom";
 import Layout from "../Partials/Layout";
 import SiteService from "../../services/SiteService";
 import ModalCom from "../Helpers/ModalCom";
+import DataIteration from "../Helpers/DataIteration";
+import SearchCom from "../Helpers/SearchCom";
+import collections from "../../data/collectionplan_data.json";
+import FamilyMarketCard from "../Cards/FamilyMarketCard";
+import { Link } from "react-router-dom";
 
 export default function FamilyMarket() {
   const [selectTab, setValue] = useState("today");
@@ -24,7 +29,6 @@ export default function FamilyMarket() {
     setValue(value);
   };
 
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -37,15 +41,8 @@ export default function FamilyMarket() {
                 <span
                   className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
-                  Family Market
+                  Suggest Task to the Parents
                 </span>
-                {/* <button
-                  onClick={popUpHandler}
-                  type="button"
-                  className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                >
-                  Add
-                </button> */}
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
@@ -55,11 +52,40 @@ export default function FamilyMarket() {
               ></div>
             </div>
           </div>
+          {/* Body */}
+          <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+            {/* filter-search */}
+            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+              <SearchCom />
+            </div>
+            {/* filer-dropdown */}
+            <div className="flex-1 flex sm:justify-end">
+              <Link
+                to="/upload-product"
+                className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+              >
+                Any Other Task
+              </Link>
+            </div>
+          </div>
+          <div className="content-section w-full-width">
+            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+              <DataIteration
+                datas={collections?.data}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={collections?.data.length}
+              >
+                {({ datas }) => (
+                  <FamilyMarketCard key={datas.id} datas={datas} />
+                )}
+              </DataIteration>
+            </div>
+          </div>
         </div>
       </div>
       {popUp && (
         <ModalCom action={popUpHandler} situation={popUp}>
-         {/*  */}
+          {/*  */}
         </ModalCom>
       )}
     </Layout>

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

@@ -22,7 +22,7 @@ export default function InputCom({
   spanTag,
   inputBg,
   direction,
-  errorBorder,
+  error,
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -48,7 +48,7 @@ export default function InputCom({
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
         {label && (
           <label
-            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
             htmlFor={name}
           >
             {label}
@@ -62,6 +62,8 @@ export default function InputCom({
                 {spanTag}
               </span>
             )}
+            {/* displays error is any */}
+            {error && <span className="text-[12px] text-red-500">{error}</span>} 
           </label>
         )}
         {forgotPassword && (
@@ -74,11 +76,7 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border ${
+        className={`input-wrapper border 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 ${inputClass}`}
-          errorBorder
-            ? "border-[#ff0a0a63] border-[0.5px] shadow-red-500 animate-shake"
-            : "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 ${inputClass}`}
       >
         <input
           placeholder={placeholder}

src/components/Helpers/SearchCom.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Icons from "./Icons";
 
-export default function SearchCom({ className, inputClasses }) {
+export default function SearchCom({ className, inputClasses, placeholder }) {
   return (
     <div
       className={`w-full h-[48px]  pl-8 flex rounded-full overflow-hidden bg-white dark:bg-dark-white   ${
@@ -17,7 +17,7 @@ export default function SearchCom({ className, inputClasses }) {
             inputClasses || ""
           }`}
           type="text"
-          placeholder="Search items, collections..."
+          placeholder={placeholder || 'Search items, collections...'}
         />
       </div>
     </div>

src/components/MyPendingJobs/ParentWaiting.jsx

@@ -25,8 +25,8 @@ export default function ParentWaiting({ className }) {
             Waiting for Parent to Get Started...
           </h1>
         </div>
-        <div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2 flex-1">
+        <div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2 flex-1 lg:gap-8">
-          <div className="lg:w-[540px] w-full h-full bg-white dark:bg-dark-white  flex-[50%] rounded-2xl overflow-hidden mb-10">
+          <div className=" w-full h-full bg-white dark:bg-dark-white  flex-[50%] rounded-2xl overflow-hidden mb-10">
             <img
               src={activeAidsBanner}
               alt="banner"

src/components/Resources/index.jsx

@@ -27,7 +27,7 @@ export default function Resources(props) {
   const tab_categories = __resources?.tab_categories?.data;
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
-  const CreatedBits = __resources?.productdata?.data;
+  const CreatedBits = __resources?.productdata?.datas;
   const blogItems =   __resources?.blogdata?.payload;
 
   const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
@@ -60,6 +60,19 @@ export default function Resources(props) {
 
   // Tab Item Component
   const TabItem = ({ tabValue, isActive }) => {
+    let countNumber = (name) => { // FUNCTION TO DETERMINE THE COUNT NUMBER
+      if(name == 'blog'){
+        return blogItems?.blogdata?.length
+      }else if(name == 'onsale'){
+        return onSaleProducts?.length
+      }else if(name == 'owned'){
+        return ownProducts?.length
+      }else if(name == 'created'){
+        return CreatedSell?.length + CreatedBits?.length
+      }else{
+        return 0
+      }
+    }
     return (
       <li
         className={`relative group inline`}
@@ -81,7 +94,8 @@ export default function Resources(props) {
               : "text-thin-light-gray bg-[#F2B8FD]"
           }`}
         >
-          16
+          {/* 16 blog, onsale, owned,created */}
+          {countNumber(tabValue.name)}
         </span>
       </li>
     );

src/components/Resources/tabs/BlogTab.jsx

@@ -4,56 +4,62 @@ import SearchCom from "../../Helpers/SearchCom";
 import ResourceBlogCard from "../../Cards/ResourceBlogCard";
 
 export default function BlogTab({ className, blogdata }) {
-   // debugger;
+  console.log("Blog data here>> ", blogdata);
-    return (
+  // debugger;
-        <>
+  return (
-            <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
+    <>
-                <div className="main-container w-full">
+      <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
-                    <div className="filter-section w-full items-center sm:flex justify-between mb-6">
+        <div className="main-container w-full">
-                        {/* filter-search */}
+          <div className="filter-section w-full items-center sm:flex justify-between mb-6">
-                        <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
+            {/* filter-search */}
-                            <SearchCom />
+            <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
-                        </div>
+              <SearchCom placeholder='Search Blog Items...' />
-                        {/* filer-dropdown */}
-                        <div className="flex-1 flex sm:justify-end">
-                {/*            <div className="flex space-x-1 items-center">*/}
-                {/*<span className="text-18 text-thin-light-gray">*/}
-                {/*  Recently Received*/}
-                {/*</span>*/}
-                {/*                <span>*/}
-                {/*  <svg*/}
-                {/*      width="20"*/}
-                {/*      height="10"*/}
-                {/*      viewBox="0 0 13 6"*/}
-                {/*      fill="none"*/}
-                {/*      xmlns="http://www.w3.org/2000/svg"*/}
-                {/*  >*/}
-                {/*    <path*/}
-                {/*        opacity="0.7"*/}
-                {/*        d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"*/}
-                {/*        fill="#374557"*/}
-                {/*        fillOpacity="0.6"*/}
-                {/*    />*/}
-                {/*  </svg>*/}
-                {/*</span>*/}
-                {/*            </div>*/}
-                        </div>
-                    </div>
-                    <div className="content-section w-full-width">
-                        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
-                            <DataIteration
-                                datas={blogdata?.blogdata}
-                                startLength={process.env.REACT_APP_ZERO_STATE}
-                                endLength={blogdata?.blogdata.length}
-                            >
-                                {({ datas }) => (
-                                    <ResourceBlogCard key={datas.id} datas={datas} bg={blogdata.image_url} />
-                                )}
-                            </DataIteration>
-                        </div>
-                    </div>
-                </div>
             </div>
-        </>
+            {/* filer-dropdown */}
-    );
+            <div className="flex-1 flex sm:justify-end">
+              {/*            <div className="flex space-x-1 items-center">*/}
+              {/*<span className="text-18 text-thin-light-gray">*/}
+              {/*  Recently Received*/}
+              {/*</span>*/}
+              {/*                <span>*/}
+              {/*  <svg*/}
+              {/*      width="20"*/}
+              {/*      height="10"*/}
+              {/*      viewBox="0 0 13 6"*/}
+              {/*      fill="none"*/}
+              {/*      xmlns="http://www.w3.org/2000/svg"*/}
+              {/*  >*/}
+              {/*    <path*/}
+              {/*        opacity="0.7"*/}
+              {/*        d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"*/}
+              {/*        fill="#374557"*/}
+              {/*        fillOpacity="0.6"*/}
+              {/*    />*/}
+              {/*  </svg>*/}
+              {/*</span>*/}
+              {/*            </div>*/}
+            </div>
+          </div>
+
+          <div className="content-section w-full-width">
+            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+              <DataIteration
+                datas={blogdata?.blogdata}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={blogdata?.blogdata.length}
+              >
+                {({ datas }) => (
+                  <ResourceBlogCard
+                    key={datas.id}
+                    datas={datas}
+                    bg={blogdata.image_url}
+                  />
+                )}
+              </DataIteration>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }

src/views/FamilyManagePage.jsx

@@ -1,9 +1,9 @@
 import FamilyManage from "../components/FamilyAcc/FamilyManage";
 
 export default function FamilyManagePage() {
-    return (
+  return (
-        <>
+    <>
-            <FamilyManage />
+      <FamilyManage />
-        </>
+    </>
-    );
+  );
-}
+}