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,6 +92,29 @@ export default function InputCom({
             : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa]  border"
         }`}
       >
+        <>
+          {type == 'date' ?
+          <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}
+            min={minDate}
+            max={maxDate}
+            tabIndex={tabIndex}
+            // pattern={inputPatterns()}
+            ref={inputRef}
+            readOnly={disable}
+            onBlur={blurHandler}
+            dir={direction}
+            autoComplete={autoComplete}
+          />
+          :
           <input
             placeholder={placeholder}
             value={value}
@@ -110,6 +135,8 @@ export default function InputCom({
             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,12 +209,15 @@ 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]'>
+                <div className='pb-4'>
+                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
                   {/* left part */}
                   <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-5 gap-4">
-                  <div className="field w-full grid md:grid-cols-3 gap-4">
+                        <div className="md:col-span-2 field w-full">
-                      <div className="md:col-span-1 field w-full">
                           <label
                             htmlFor="country"
                             className="job-label job-label-flex"
@@ -249,7 +259,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                             }
                           </select>
                         </div>
-                      <div className='md:col-span-2'>
+                        <div className='md:col-span-3'>
                           <InputCom
                           fieldClass="px-6"
                           label="Phone Number"
@@ -305,9 +315,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                         error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
                       />
                     </div>
-                  <div className="field w-full flex flex-col gap-4">
+
+                    {/* hidden section */}
+                    <div className="hidden field w-full flex-col gap-4">
                         <p className='job-label'>Date of Birth</p>
-                      <div className='grid xxs:grid-cols-3 gap-4'>
+                        <div className='xxs:grid-cols-3 gap-4'>
                           <div className="field w-full">
                             <label
                               htmlFor="birthDay"
@@ -403,10 +415,30 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           </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='p-4 w-full flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                  <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"
@@ -502,6 +534,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                     </div>
                   </div>
                 </div>
+              </div>
               {requestStatus.message &&
               <div className='px-4 my-1'>
                 <p className={`text-center text-base py-1 font-bold ${requestStatus.status ? 'bg-emerald-600 text-white' : 'bg-red-100 text-red-600'}`}>{requestStatus.message}</p>
@@ -532,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       </>
                   </div>
               </div>
-            </div>
             </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 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} />,