blog card image display adjusted

src/components/Cards/ResourceBlogCard.jsx

@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
   
   return (
     <div
-      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+      className={`card-style-two w-full 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"
+            className="w-full h-[140px] p-6  rounded-lg overflow-hidden"
             style={{
               // 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`,
+              background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
+              backgroundSize: '100%',
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 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 || "dummy title..."}
             </h1>

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

@@ -28,7 +28,9 @@ export default function InputCom({
   direction,
   tabIndex,
   error,
-  autoComplete="on"
+  autoComplete="on",
+  minDate='1900-01-01',
+  maxDate='2099-09-13'
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -90,26 +92,51 @@ export default function InputCom({
             : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa]  border"
         }`}
       >
-        <input
+        <>
-          placeholder={placeholder}
+          {type == 'date' ?
-          value={value}
+          <input
-          onChange={inputHandler}
+            placeholder={placeholder}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
+            value={value}
-            inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
+            onChange={inputHandler}
-          type={type}
+            className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
-          id={name}
+              inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
-          name={name}
+            type={type}
-          onInput={onInput}
+            id={name}
-          minLength={minLengthValidation()}
+            name={name}
-          maxLength={maxLengthValidation()}
+            onInput={onInput}
-          tabIndex={tabIndex}
+            min={minDate}
-          // pattern={inputPatterns()}
+            max={maxDate}
-          ref={inputRef}
+            tabIndex={tabIndex}
-          readOnly={disable}
+            // pattern={inputPatterns()}
-          onBlur={blurHandler}
+            ref={inputRef}
-          dir={direction}
+            readOnly={disable}
-          autoComplete={autoComplete}
+            onBlur={blurHandler}
-        />
+            dir={direction}
+            autoComplete={autoComplete}
+          />
+          :
+          <input
+            placeholder={placeholder}
+            value={value}
+            onChange={inputHandler}
+            className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
+              inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
+            type={type}
+            id={name}
+            name={name}
+            onInput={onInput}
+            minLength={minLengthValidation()}
+            maxLength={maxLengthValidation()}
+            tabIndex={tabIndex}
+            // pattern={inputPatterns()}
+            ref={inputRef}
+            readOnly={disable}
+            onBlur={blurHandler}
+            dir={direction}
+            autoComplete={autoComplete}
+          />
+          }
+        </>
         {iconName && (
           <div className="absolute right-6 bottom-3 z-10 flex gap-2">
             {iconName.split(" ").map((item, index) => (

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -14,15 +14,15 @@ const validationSchema = Yup.object().shape({
   country: Yup.string()
     .required("Required"),
   phone_number: Yup.string()
-    .min(9, "Min 9 characters")
+    .min(9, "Invalid")
-    .max(11, "Max 11 characters")
+    .max(11, "Invalid")
-    .required("Required"),
-  birthYear: Yup.string()
-    .required("Required"),
-  birthMonth: Yup.string()
-    .required("Required"),
-  birthDay: Yup.string()
     .required("Required"),
+  // birthYear: Yup.string()
+  //   .required("Required"),
+  // birthMonth: Yup.string()
+  //   .required("Required"),
+  // birthDay: Yup.string()
+  //   .required("Required"),
   address: Yup.string()
     .min(5, "Min 3 characters")
     .max(50, "Max 25 characters")
@@ -37,6 +37,8 @@ const validationSchema = Yup.object().shape({
     .min(1, "Min 3 characters")
     .max(8, "Max 8 characters")
     .required("Required"),
+  dob: Yup.string()
+    .required("Required"),
 });
 
 const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
@@ -67,32 +69,33 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
     address: '',
     city: userDetails?.city ? userDetails.city : '',
     state: '',
-    zipCode: ''
+    zipCode: '',
+    dob: ''
   };
 
   
   const handleSubmit = (values) => {
-    const reqData1 = {
+    // const reqData1 = {
-      name: values.firstname + ' ' + values.firstname,
+    //   name: values.firstname + ' ' + values.firstname,
-      email: values.email,
+    //   email: values.email,
-      phone_number: values.phone_number,
+    //   phone_number: values.phone_number,
-      status: 'active',
+    //   status: 'active',
-      type: 'individual',
+    //   type: 'individual',
-      individual: {
+    //   individual: {
-        first_name: values.firstname,
+    //     first_name: values.firstname,
-        last_name: values.lastname,
+    //     last_name: values.lastname,
-        dob: {day: values.birthDay, month: values.birthMonth, year: values.birthYear}
+    //     dob: {day: values.birthDay, month: values.birthMonth, year: values.birthYear}
-      },
+    //   },
-      billing:{
+    //   billing:{
-        address : {
+    //     address : {
-          line1: values.address,
+    //       line1: values.address,
-          city: values.city,
+    //       city: values.city,
-          state: values.state,
+    //       state: values.state,
-          postal_code: values.zipCode,
+    //       postal_code: values.zipCode,
-          country: values.country
+    //       country: values.country
-        }
+    //     }
-      }
+    //   }
-    }
+    // }
     const reqData = {
       request_type: '100',
       address: values.address,
@@ -101,9 +104,13 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
       country: values.country,
       postal_code: values.zipCode,
       phone_number: values.phone_number,
-      dob_day: values.birthDay,
+      // dob_day: values.birthDay,
-      dob_month: values.birthMonth,
+      // dob_month: values.birthMonth,
-      dob_year: values.birthYear,
+      // dob_year: values.birthYear,
+      dob_day: Number(new Date(values.dob).getDate()),
+      dob_month: Number(new Date(values.dob).getMonth()) + 1,
+      dob_year: Number(new Date(values.dob).getFullYear()),
+      dob: values.dob
     }
     // console.log('Values', reqData)
     setRequestStatus({loading: true, status:false, message: ''})
@@ -170,8 +177,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
         onSubmit={handleSubmit}
       >
         {(props) => (
-          <Form className="w-full overflow-y-auto">
+          <div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-            <div className="logout-modal-wrapper mx-auto w-[90%] lg:w-[900px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+            <Form className="w-full">
               <div className="modal-header-con">
                 <h1 className="modal-title">
                   {walletItem?.description}
@@ -202,303 +209,329 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                   </svg>
                 </button>
               </div>
-              <div className="p-4 w-full grid lg:grid-cols-2 gap-4">
+              <div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
-                {/* left part */}
+                <div className='pb-4'>
-                <div className='w-full flex flex-col gap-4'>
                   <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
-                  <div className="field w-full grid md:grid-cols-3 gap-4">
+                </div>
-                      <div className="md:col-span-1 field w-full">
+                <div className="grid md:grid-cols-2 gap-4">
+                  {/* left part */}
+                  <div className='w-full flex flex-col gap-4'>
+                    <div className="field w-full grid md:grid-cols-5 gap-4">
+                        <div className="md:col-span-2 field w-full">
+                          <label
+                            htmlFor="country"
+                            className="job-label job-label-flex"
+                          >
+                            <span>Country</span>
+                            {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-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                            onChange={props.handleChange}
+                            disabled={countryCode ? true : false}
+                          >
+                            {allCountries.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
+                              </option>
+                            : allCountries.data?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select Country
+                              </option>
+                              {allCountries.data?.map(item => (
+                                <option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
+                                  {item.country}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
+                          </select>
+                        </div>
+                        <div className='md:col-span-3'>
+                          <InputCom
+                          fieldClass="px-6"
+                          label="Phone Number"
+                          labelClass="tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="w-full input-curve lg border border-light-purple"
+                          type="text"
+                          name="phone_number"
+                          value={props.values.phone_number}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                          />
+                        </div>
+                    </div>
+                    <InputCom
+                      disable={true}
+                      fieldClass="px-6"
+                      label="Email"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="email"
+                      value={props.values.email}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.email && props.touched.email) && props.errors.email}
+                    />
+                    <div className="hidden field w-full md:grid-cols-2 gap-4">
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Firstname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="firstname"
+                        value={props.values.firstname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
+                      />
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Lastname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="lastname"
+                        value={props.values.lastname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
+                      />
+                    </div>
+
+                    {/* hidden section */}
+                    <div className="hidden field w-full flex-col gap-4">
+                        <p className='job-label'>Date of Birth</p>
+                        <div className='xxs:grid-cols-3 gap-4'>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthDay"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Day</span>
+                              {props.errors.birthDay && props.touched.birthDay && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthDay}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthDay"
+                              name="birthDay"
+                              value={props.values.birthDay}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {day.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthMonth"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Month</span>
+                              {props.errors.birthMonth && props.touched.birthMonth && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthMonth}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthMonth"
+                              name="birthMonth"
+                              value={props.values.birthMonth}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {month.map(item => (
+                                <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
+                                  {item.name}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthYear"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Year</span>
+                              {props.errors.birthYear && props.touched.birthYear && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthYear}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthYear"
+                              name="birthYear"
+                              value={props.values.birthYear}
+                              className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
+                              onChange={props.handleChange}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {year.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                        </div>
+                    </div>
+
+                    <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
+                      <div className='w-full md:col-span-2 '>
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Date of Birth"
+                          labelClass="md:hidden tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="input-curve lg border border-light-purple"
+                          type="date"
+                          name="dob"
+                          value={props.values.dob}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.dob && props.touched.dob) && props.errors.dob}
+                          maxDate={year[0] + '-12-31'}
+                          minDate={year[year?.length - 1] + '-01-01'}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* right part */}
+                  <div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Address"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="address"
+                      value={props.values.address}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.address && props.touched.address) && props.errors.address}
+                    />
+                    <InputCom
+                      fieldClass="px-6"
+                      label="City"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="city"
+                      value={props.values.city}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.city && props.touched.city) && props.errors.city}
+                    />
+                    {/* <InputCom
+                      fieldClass="px-6"
+                      label="State/Province"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="state"
+                      value={props.values.state}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.state && props.touched.state) && props.errors.state}
+                    /> */}
+
+                    <div className="field w-full grid md:grid-cols-2 gap-4">
+                      <div className="field w-full">
                         <label
-                          htmlFor="country"
+                          htmlFor="state"
                           className="job-label job-label-flex"
                         >
-                          <span>Country</span>
+                          <span>State/Province</span>
-                          {props.errors.country && props.touched.country && (
+                          {props.errors.state && props.touched.state && (
                             <span className="text-[12px] text-red-500">
-                              {props.errors.country}
+                              {props.errors.state}
                             </span>
                           )}
                         </label>
                         <select
-                          id="country"
+                          id="state"
-                          name="country"
+                          name="state"
-                          value={props.values.country}
+                          value={props.values.state}
                           className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
                           onChange={props.handleChange}
-                          disabled={countryCode ? true : false}
                         >
-                          {allCountries.loading ?
+                          {state.loading ?
-                            <option className="text-slate-500 text-lg" value="">
+                              <option className="text-slate-500 text-lg" value="">
-                              Loading...
+                                Loading...
-                            </option>
-                          : allCountries.data?.length > 0 ?
-                          <>
-                            <option className="text-slate-500 text-lg" value="">
-                              Select Country
-                            </option>
-                            {allCountries.data?.map(item => (
-                              <option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
-                                {item.country}
                               </option>
-                            ))}
+                            : Object.keys(state.data)?.length > 0 ?
-                          </>
+                            <>
-                          :
+                              <option className="text-slate-500 text-lg" value="">
-                            <option className="text-slate-500 text-lg" value="">
+                                Select State
-                              Not Found
+                              </option>
-                            </option>
+                              {Object.keys(state.data)?.map((item, index) => (
-                          }
+                                <option key={index} className="text-slate-500 text-lg" value={item}>
+                                  {state?.data[item]}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
                         </select>
                       </div>
-                      <div className='md:col-span-2'>
+                  
-                        <InputCom
+                      <InputCom
                         fieldClass="px-6"
-                        label="Phone Number"
+                        label="Zip Code"
                         labelClass="tracking-wide"
                         inputBg="bg-slate-100"
-                        inputClass="w-full input-curve lg border border-light-purple"
+                        inputClass="input-curve lg border border-light-purple"
                         type="text"
-                        name="phone_number"
+                        name="zipCode"
-                        value={props.values.phone_number}
+                        value={props.values.zipCode}
                         inputHandler={props.handleChange}
-                        error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                        error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
-                        />
+                      />
-                      </div>
-                  </div>
-                  <InputCom
-                    disable={true}
-                    fieldClass="px-6"
-                    label="Email"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="email"
-                    value={props.values.email}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.email && props.touched.email) && props.errors.email}
-                  />
-                  <div className="hidden field w-full md:grid-cols-2 gap-4">
-                    <InputCom
-                      disable={true}
-                      fieldClass="px-6"
-                      label="Firstname"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      inputClass="input-curve lg border border-light-purple"
-                      type="text"
-                      name="firstname"
-                      value={props.values.firstname}
-                      inputHandler={props.handleChange}
-                      error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
-                    />
-                    <InputCom
-                      disable={true}
-                      fieldClass="px-6"
-                      label="Lastname"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      inputClass="input-curve lg border border-light-purple"
-                      type="text"
-                      name="lastname"
-                      value={props.values.lastname}
-                      inputHandler={props.handleChange}
-                      error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
-                    />
-                  </div>
-                  <div className="field w-full flex flex-col gap-4">
-                      <p className='job-label'>Date of Birth</p>
-                      <div className='grid xxs:grid-cols-3 gap-4'>
-                        <div className="field w-full">
-                          <label
-                            htmlFor="birthDay"
-                            className="job-label job-label-flex"
-                          >
-                            <span>Day</span>
-                            {props.errors.birthDay && props.touched.birthDay && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.birthDay}
-                              </span>
-                            )}
-                          </label>
-                          <select
-                            id="birthDay"
-                            name="birthDay"
-                            value={props.values.birthDay}
-                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                            onChange={props.handleChange}
-                          >
-                            <>
-                            <option className="text-slate-500 text-lg" value=''>
-                                select
-                            </option>
-                            {day.map(item => (
-                              <option key={item} className="text-slate-500 text-lg" value={item}>
-                                {item}
-                              </option>
-                            ))}
-                            </>
-                          </select>
-                        </div>
-                        <div className="field w-full">
-                          <label
-                            htmlFor="birthMonth"
-                            className="job-label job-label-flex"
-                          >
-                            <span>Month</span>
-                            {props.errors.birthMonth && props.touched.birthMonth && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.birthMonth}
-                              </span>
-                            )}
-                          </label>
-                          <select
-                            id="birthMonth"
-                            name="birthMonth"
-                            value={props.values.birthMonth}
-                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                            onChange={props.handleChange}
-                          >
-                            <>
-                            <option className="text-slate-500 text-lg" value=''>
-                                select
-                            </option>
-                            {month.map(item => (
-                              <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
-                                {item.name}
-                              </option>
-                            ))}
-                            </>
-                          </select>
-                        </div>
-                        <div className="field w-full">
-                          <label
-                            htmlFor="birthYear"
-                            className="job-label job-label-flex"
-                          >
-                            <span>Year</span>
-                            {props.errors.birthYear && props.touched.birthYear && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.birthYear}
-                              </span>
-                            )}
-                          </label>
-                          <select
-                            id="birthYear"
-                            name="birthYear"
-                            value={props.values.birthYear}
-                            className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                            onChange={props.handleChange}
-                          >
-                            <>
-                            <option className="text-slate-500 text-lg" value=''>
-                                select
-                            </option>
-                            {year.map(item => (
-                              <option key={item} className="text-slate-500 text-lg" value={item}>
-                                {item}
-                              </option>
-                            ))}
-                            </>
-                          </select>
-                        </div>
-                      </div>
-                  </div>
-                </div>
-
-                {/* right part */}
-                <div className='p-4 w-full flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Address"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="address"
-                    value={props.values.address}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.address && props.touched.address) && props.errors.address}
-                  />
-                  <InputCom
-                    fieldClass="px-6"
-                    label="City"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="city"
-                    value={props.values.city}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.city && props.touched.city) && props.errors.city}
-                  />
-                  {/* <InputCom
-                    fieldClass="px-6"
-                    label="State/Province"
-                    labelClass="tracking-wide"
-                    inputBg="bg-slate-100"
-                    inputClass="input-curve lg border border-light-purple"
-                    type="text"
-                    name="state"
-                    value={props.values.state}
-                    inputHandler={props.handleChange}
-                    error={(props.errors.state && props.touched.state) && props.errors.state}
-                  /> */}
-
-                  <div className="field w-full grid md:grid-cols-2 gap-4">
-                    <div className="field w-full">
-                      <label
-                        htmlFor="state"
-                        className="job-label job-label-flex"
-                      >
-                        <span>State/Province</span>
-                        {props.errors.state && props.touched.state && (
-                          <span className="text-[12px] text-red-500">
-                            {props.errors.state}
-                          </span>
-                        )}
-                      </label>
-                      <select
-                        id="state"
-                        name="state"
-                        value={props.values.state}
-                        className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                        onChange={props.handleChange}
-                      >
-                        {state.loading ?
-                            <option className="text-slate-500 text-lg" value="">
-                              Loading...
-                            </option>
-                          : Object.keys(state.data)?.length > 0 ?
-                          <>
-                            <option className="text-slate-500 text-lg" value="">
-                              Select State
-                            </option>
-                            {Object.keys(state.data)?.map((item, index) => (
-                              <option key={index} className="text-slate-500 text-lg" value={item}>
-                                {state?.data[item]}
-                              </option>
-                            ))}
-                          </>
-                          :
-                            <option className="text-slate-500 text-lg" value="">
-                              Not Found
-                            </option>
-                          }
-                      </select>
                     </div>
-                
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Zip Code"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      inputClass="input-curve lg border border-light-purple"
-                      type="text"
-                      name="zipCode"
-                      value={props.values.zipCode}
-                      inputHandler={props.handleChange}
-                      error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
-                    />
                   </div>
                 </div>
               </div>
@@ -532,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       </>
                   </div>
               </div>
-            </div>
+            </Form>
-          </Form>
+          </div>
         )}
       </Formik>
     </ModalCom>
@@ -543,29 +576,24 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
 export default VirtualAddCardPopout;
 
 
+
 const day = new Array(31).fill(0).map((_,i) => i+1 )
 
 const month = [
-  {value: 0, name: 'January'},
+  {value: 1, name: 'January'},
-  {value: 1, name: 'February'},
+  {value: 2, name: 'February'},
-  {value: 2, name: 'March'},
+  {value: 3, name: 'March'},
-  {value: 3, name: 'April'},
+  {value: 4, name: 'April'},
-  {value: 4, name: 'May'},
+  {value: 5, name: 'May'},
-  {value: 5, name: 'June'},
+  {value: 6, name: 'June'},
-  {value: 6, name: 'July'},
+  {value: 7, name: 'July'},
-  {value: 7, name: 'August'},
+  {value: 8, name: 'August'},
-  {value: 8, name: 'September'},
+  {value: 9, name: 'September'},
-  {value: 9, name: 'October'},
+  {value: 10, name: 'October'},
-  {value: 10, name: 'November'},
+  {value: 11, name: 'November'},
-  {value: 11, name: 'December'},
+  {value: 12, name: 'December'},
 ]
 
 const date = new Date().getFullYear()
 
-const year = new Array(100).fill(0).map((_,i) =>  (date-2) - i+1 )
+const year = new Array(100).fill(0).map((_,i) =>  (date-2) - i+1 )
-
-// const state = [
-//   {value: 'abia', name: 'Abia'},
-//   {value: 'imo', name: 'Imo'},
-//   {value: 'anambra', name: 'Anambra'},
-// ]

src/components/Resources/index.jsx

@@ -24,10 +24,11 @@ export default function Resources(props) {
   const ownProducts = products.datas;
   // Resource Props
   const __resources = props.MyResourceData;
+
   //debugger;
   // Collection Items
   const CreatedSell = __resources?.marketdata?.data;
-  const tab_categories = __resources?.tab_categories?.data;
+  const tab_categories = __resources?.tab_categories?.data?.sort((a, b) => b.name.localeCompare(a.name))
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
   const CreatedBits = __resources?.productdata?.datas;
@@ -77,23 +78,22 @@ export default function Resources(props) {
     }
   };
 
-  useEffect(() => {
-    getUploadedFiles();
-  }, [uploadsTable]);
-
   // const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
   const [tab, setTab] = useState(
     props.activeTab
       ? props.activeTab
-      : tab_categories
+      : "onsale"
-      ? tab_categories[0]?.name
-      : ""
   );
 
   const tabHandler = (value) => {
     setTab(value);
   };
 
+  useEffect(() => {
+    getUploadedFiles();
+  }, [uploadsTable]);
+
+
   // Category Components
   const tabComponents = {
     blog: <BlogTab blogdata={blogItems} />,