Bug fix 10-06-2024

index.html

@@ -16,7 +16,7 @@ const craftedMsg = "Crafted with ❤️ by WDI Team for a better web.";
 
   const craftedStyles = 'font-size: 16px; font-family: monospace; background: #000; color: #E5195E; padding: 12px 19px; border: 1.8px dashed; border-right: 0px #000 solid';
   const websiteStyles = 'font-size: 16px; font-family: monospace; background: #E5195E; color: #000; padding: 12px 19px; border: 1.8px dashed #000; border-left: 0px #000 solid';
-  console.log('%c' + craftedMsg + ' %c' + websiteMsg, craftedStyles, websiteStyles);
+   console.log('%c' + craftedMsg + ' %c' + websiteMsg, craftedStyles, websiteStyles);
 
 
 </script>

src/Components/Banner/AddBanner.jsx

@@ -65,8 +65,8 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
       createApi(formData)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 200) {
             setIsLoading(false);
@@ -94,13 +94,13 @@ const AddBanner = ({ createApi, navigateLink, title, center }) => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };

src/Components/Banner/BannerEdit.jsx

@@ -110,13 +110,13 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}
     }
         // Log the FormData entries
         // for (const [key, value] of form.entries()) {
-        //   console.log(`${key}: ${value}`);
+        //   // console.log(`${key}: ${value}`);
         // }
     const mutationResult = await updateBanner({ id: id, data: form })
       .then((response) => {
         // Handle the response here
-        console.log("Mutation response:", response?.data?.statusCode);
-        console.log("Mutation response:", response?.data?.message);
+        // // console.log("Mutation response:", response?.data?.statusCode);
+        // // console.log("Mutation response:", response?.data?.message);
 
         if (response?.data?.statusCode === 200) {
           setIsLoadingEdit(false);
@@ -131,7 +131,7 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo, refetch, center}
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);

src/Components/Banner/BannerTable.jsx

@@ -86,13 +86,13 @@ const BannerCommunity = ({
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error deleting community:", error);
+      // // console.error("Error deleting community:", error);
     }
   };
 
@@ -115,11 +115,11 @@ const BannerCommunity = ({
             }
           })
           .catch((error) => {
-            console.log(error);
+            // // console.log(error);
           });
       } catch (error) {
         // Handle errors
-        console.error("Error updating community status:", error);
+        // // console.error("Error updating community status:", error);
       }
     }
   };

src/Components/ChipSelector/ChipSelector.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { Box, Input, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+import { Box, FormHelperText, Input, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
 import { TiWarning } from "react-icons/ti";
 
-const ChipSelector = ({chips, setChips}) => {
+const ChipSelector = ({chips, setChips, type}) => {
   const [text, setText] = useState("");
   const [validationError, setValidationError] = useState("");
 
@@ -28,10 +28,11 @@ const ChipSelector = ({chips, setChips}) => {
       <Box
       display={'flex'}
       flexDirection={'column'}
-      gap={3}
+      gap={2}
        className="">
         <Input
-          type="text"
+          type={type? type : "text"}
+
           id="tags"
           size="sm"
           className="web-text-medium "
@@ -41,6 +42,11 @@ const ChipSelector = ({chips, setChips}) => {
           onKeyDown={handlePressEnter}
         />
         {validationError && <span className="error-message web-text-small text-danger d-flex align-items-center gap-1"><TiWarning className="fw-bold fs-5 " />{validationError}</span>}
+        
+        <FormHelperText className="web-text-small mt-0">
+              {type ? "Please select and press enter to add date." :  "Please type and press enter to add tags."}
+
+              </FormHelperText>
         <Box 
         display={'flex'}
         justifyContent={'start'}

src/Components/Header.jsx

@@ -8,7 +8,6 @@ import { useGetNewsLetterEmailQuery } from "../Services/api.service";
 
 const Header = ({ link, btnTitle, title }) => {
   const { data, error, isLoading } = useGetNewsLetterEmailQuery();
-  console.log(data);
 
   const handleDownload = () => {
     if (Array.isArray(data?.data?.rows)) {
@@ -17,10 +16,10 @@ const Header = ({ link, btnTitle, title }) => {
       XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
       XLSX.writeFile(workbook, "newsletter_emails.xlsx");
     } else {
-      console.error(
-        "Expected data to be an array but received:",
-        data?.data?.rows
-      );
+      // // console.error(
+      //   "Expected data to be an array but received:",
+      //   data?.data?.rows
+      // );
     }
   };
   return (

src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx

@@ -96,8 +96,8 @@ const AddBlogsAndArticles = () => {
       createBlog(formData)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setIsLoading(false);
@@ -123,13 +123,13 @@ const AddBlogsAndArticles = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // // console.error("Error creating community:", error);
     }
   };
 
@@ -148,7 +148,6 @@ const AddBlogsAndArticles = () => {
   const handleImageChangeLarge = (e) => {
     const file = e.target.files[0];
     setLargeImageData(file);
-    console.log(largeImageData);
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -360,7 +359,7 @@ const AddBlogsAndArticles = () => {
               <Textarea
                 rows={2}
                 {...register("summary")}
-                placeholder="summary link"
+                placeholder="Summary"
                 className="web-text-medium"
                 size="sm"
               />
@@ -434,7 +433,7 @@ const AddBlogsAndArticles = () => {
                 onChange={setValue}
               />
               <FormHelperText className="web-text-small">
-                Please share proper linked in link here.
+              Please enter your content here. You can format your text using the toolbar above.
               </FormHelperText>
             </FormControl>
 
@@ -443,6 +442,7 @@ const AddBlogsAndArticles = () => {
                 Tags
               </FormLabel>
               <ChipSelector chips={chips} setChips={setChips} />
+              
             </FormControl>
 
             <FormControl isRequired className="mb-3">
@@ -454,10 +454,10 @@ const AddBlogsAndArticles = () => {
                 placeholder="Category"
                 className="web-text-medium"
                 size="sm"
-                maxLength={90}
+                maxLength={50}
               />
               <FormHelperText className="web-text-small">
-                Maximum characters must be 100 characters.
+                Maximum characters must be 50 characters.
               </FormHelperText>
 
               {errors.category && (

src/Pages/BlogsAndArticles/BlogsAndArticles.jsx

@@ -77,8 +77,8 @@ const BlogsAndArticles = () => {
       await deleteBlog(communityId)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -86,13 +86,13 @@ const BlogsAndArticles = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error deleting community:", error);
+      // // console.error("Error deleting community:", error);
     }
   };
 
@@ -101,7 +101,6 @@ const BlogsAndArticles = () => {
       // Trigger the mutation
       await updateBlogStatus({ id })
         .then((response) => {
-          console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -114,11 +113,11 @@ const BlogsAndArticles = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // // console.error("Error updating community status:", error);
     }
   };
 
@@ -288,7 +287,7 @@ const BlogsAndArticles = () => {
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete video?"}
+        message={"Are you sure you want to delete blogs?"}
         isLoading={deleteIsLoading}
       />
     </>

src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx

@@ -21,7 +21,7 @@ import {
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
-import { addBlogSchema } from "../../Validations/Validations";
+import { addBlogSchema, editBlogSchema } from "../../Validations/Validations";
 import fallbackImage from "../../assets/fallBackImage.png";
 import fallbackImageLarge from "../../assets/ultp-fallback-img.webp";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
@@ -48,7 +48,6 @@ const EditBlogsAndArticles = () => {
   const [smallImageData, setSmallImageData] = useState(null);
   const [chips, setChips] = useState();
 
-  console.log(error);
 
   const [valueQuill, setValueQuill] = useState(blog?.content);
 
@@ -59,7 +58,7 @@ const EditBlogsAndArticles = () => {
     formState: { errors },
     setValue,
   } = useForm({
-    resolver: yupResolver(addBlogSchema),
+    resolver: yupResolver(editBlogSchema),
     defaultValues: {
       author_name: "",
       author_designation: "",
@@ -126,11 +125,8 @@ const EditBlogsAndArticles = () => {
       updateBlog({ id: id, data: formData })
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.error?.status);
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
-          console.log(response?.error?.status?.error?.message);
-
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
           if (response?.data?.statusCode === 201) {
             setIsLoading01(false);
             toast({
@@ -165,13 +161,13 @@ const EditBlogsAndArticles = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setIsLoading01(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // // console.error("Error creating community:", error);
     }
   };
 
@@ -190,7 +186,7 @@ const EditBlogsAndArticles = () => {
   const handleImageChangeLarge = (e) => {
     const file = e.target.files[0];
     setLargeImageData(file);
-    console.log(largeImageData);
+    // console.log(largeImageData);
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -242,100 +238,7 @@ const EditBlogsAndArticles = () => {
                 boxSize="sm"
                 className="d-flex w-100 p-2 justify-content-center flex-column align-items-center gap-3"
               >
-                {false ? (
-                  <FormControl className="mb-3">
-                    {/* <FormLabel className="web-text-large fw-bold rubix-text-dark">
-                  Display profile
-                </FormLabel> */}
-                    {/* <ImageDropBox /> */}
-
-                    <Box
-                      borderColor="gray.300"
-                      borderStyle="dashed"
-                      borderWidth="2px"
-                      rounded="md"
-                      shadow="sm"
-                      role="group"
-                      transition="all 150ms ease-in-out"
-                      _hover={{
-                        shadow: "md",
-                      }}
-                      as={motion.div}
-                      initial="rest"
-                      animate="rest"
-                      whileHover="hover"
-                      h={220}
-                      className="pointer"
-                    >
-                      <Box position="relative" height="100%" width="100%">
-                        <Box
-                          position="absolute"
-                          top="0"
-                          left="0"
-                          height="100%"
-                          width="100%"
-                          display="flex"
-                          flexDirection="column"
-                        >
-                          <Stack
-                            height="100%"
-                            width="100%"
-                            display="flex"
-                            alignItems="center"
-                            justify="center"
-                          >
-                            <span
-                              className="d-flex flex-column align-items-center pointer"
-                              spacing="1"
-                            >
-                              <Heading
-                                fontSize="lg"
-                                color="gray.700"
-                                fontWeight="bold"
-                                cursor={"pointer"}
-                              >
-                                Drop images here
-                              </Heading>
-                              <span
-                                fontWeight="light"
-                                className="web-text-large text-secondary text-center pointer"
-                              >
-                                or click to upload
-                              </span>
-                            </span>
-                          </Stack>
-                        </Box>
-                        <Input
-                          {...register("content_image_large")}
-                          type="file"
-                          height="100%"
-                          width="100%"
-                          position="absolute"
-                          top="0"
-                          left="0"
-                          opacity="0"
-                          aria-hidden="true"
-                          accept="image/*"
-                          onChange={handleImageChangeLarge}
-                          onDrop={handleImageChangeLarge}
-                          //   onDragEnter={startAnimation}
-                          //   onDragLeave={stopAnimation}
-                        />
-                      </Box>
-                    </Box>
-
-                    {errors.content_image_large && (
-                      <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                        <TiWarning className="fw-bold fs-5 " />{" "}
-                        {errors.content_image_large.message}
-                      </span>
-                    )}
-                    <FormHelperText className="web-text-small">
-                      Maximum limit of image is 10MB.
-                    </FormHelperText>
-                  </FormControl>
-                ) : (
-                  <>
+               
                     <Image
                       shadow={"md"}
                       rounded={8}
@@ -356,8 +259,6 @@ const EditBlogsAndArticles = () => {
                         </span>
                       </Box>
                     )}
-                  </>
-                )}
 
                 <Button
                   onClick={() => setSelectedImageLarge(fallbackImageLarge)}
@@ -450,7 +351,7 @@ const EditBlogsAndArticles = () => {
               <Textarea
                 rows={2}
                 {...register("summary")}
-                placeholder="summary link"
+                placeholder="Summary"
                 className="web-text-medium"
                 size="sm"
               />
@@ -465,11 +366,12 @@ const EditBlogsAndArticles = () => {
               )}
             </FormControl>
 
-            <FormControl className="mb-3">
+            <FormControl className="mb-3" isRequired >
               <FormLabel className="web-text-large fw-bold rubix-text-dark">
                 Tags
               </FormLabel>
               <ChipSelector chips={chips} setChips={setChips} />
+              
             </FormControl>
 
             <FormControl isRequired className="mb-3">

src/Pages/BlogsAndArticles/ViewBlogsAndArticles.jsx

@@ -24,7 +24,6 @@ const ViewBlogsAndArticles = () => {
   if (isLoading) {
     return <FullscreenLoaders />;
   }
-  console.log(blog);
   return (
     <Box
       {...OPACITY_ON_LOAD}

src/Pages/Community/AddComunity.jsx

@@ -31,6 +31,7 @@ import { useNavigate } from "react-router-dom";
 import Loader01 from "../../Components/Loaders/Loader01";
 import Header from "../../Components/Header";
 import { CloseIcon } from "@chakra-ui/icons";
+import ToastBox from "../../Components/ToastBox";
 
 const AddComunity = () => {
   const toast = useToast();
@@ -45,6 +46,7 @@ const AddComunity = () => {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(addCommunitySchema),
@@ -65,8 +67,8 @@ const AddComunity = () => {
       createCommunityData(formData)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 200) {
             setIsLoading(false);
@@ -81,13 +83,13 @@ const AddComunity = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // // console.error("Error creating community:", error);
     }
   };
 
@@ -174,8 +176,20 @@ const AddComunity = () => {
               placeholder="Name"
               className="web-text-medium"
               size="sm"
-            />
-            {errors.name && (
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.member_name?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.member_name?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If name crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.member_name?.length}{" "}
+                  characters
+                </FormHelperText>
+            {errors.member_name && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}
                 {errors.member_name.message}
@@ -211,12 +225,19 @@ const AddComunity = () => {
               className="web-text-medium"
               size="sm"
               rows={2}
-              maxLength={90}
+              minLength={4}
+              errorBorderColor="crimson"
+              isInvalid={watch()?.description?.length > 230}
+              // maxLength={51}
             />
-            <FormHelperText className="web-text-small">
-              Maximum characters must be 100 characters.
+            <FormHelperText
+              color={watch()?.description?.length > 230 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If title crosses 230 characters it will cause problem in
+              alignment on website.you have entered {watch()?.description?.length}{" "}
+              characters
             </FormHelperText>
-
             {errors.description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}

src/Pages/Community/Community.jsx

@@ -93,8 +93,8 @@ const Community = () => {
       await deleteCommunity(communityId)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -102,13 +102,13 @@ const Community = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error deleting community:", error);
+      // // console.error("Error deleting community:", error);
     }
   };
   const handleUpdateStatus = async (id) => {
@@ -116,7 +116,6 @@ const Community = () => {
       // Trigger the mutation
       await updateCommunityStatus({ id })
         .then((response) => {
-          console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -126,11 +125,11 @@ const Community = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // // console.error("Error updating community status:", error);
     }
   };
 
@@ -505,7 +504,7 @@ const Community = () => {
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete member?"}
+        message={"Are you sure you want to delete community?"}
         isLoading={deleteIsLoading}
       />
     </Box>

src/Pages/Community/ComunityEditPage.jsx

@@ -46,6 +46,7 @@ const ComunityEditPage = () => {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
     setValue,
   } = useForm({
@@ -55,7 +56,7 @@ const ComunityEditPage = () => {
       designation: "",
       description: "",
       linkedin: "",
-      profile_image:null
+      profile_image: null,
     },
   });
 
@@ -88,12 +89,12 @@ const ComunityEditPage = () => {
     await updateCommunity({ id: id, data: form })
       .then((response) => {
         // Handle the response here
-        console.log("Mutation response:", response?.data?.statusCode);
-        console.log("Mutation response:", response?.data?.message);
+        // // console.log("Mutation response:", response?.data?.statusCode);
+        // // console.log("Mutation response:", response?.data?.message);
 
         if (response?.data?.statusCode === 200) {
           setIsLoadingEdit(false);
-          
+
           toast({
             render: () => (
               <ToastBox status={"success"} message={response?.data?.message} />
@@ -111,7 +112,7 @@ const ComunityEditPage = () => {
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
@@ -119,7 +120,7 @@ const ComunityEditPage = () => {
 
     // Log the FormData entries
     // for (const [key, value] of form.entries()) {
-    //   console.log(`${key}: ${value}`);
+    //   // console.log(`${key}: ${value}`);
     // }
 
     reset();
@@ -145,33 +146,31 @@ const ComunityEditPage = () => {
       h={"100vh"}
       overflowY={"scroll"}
       display={"flex"}
-      flexDirection={'column'}
-    >    
+      flexDirection={"column"}
+    >
+      <Header title={"Community"} />
+      <Box display={"flex"}>
+        <Box className="col-5 d-flex flex-column gap-2 pt-4">
+          <span className="web-text-large fw-bold rubix-text-dark">
+            Members Info
+          </span>
+          <span className="web-text-medium text-secondary">
+            Select the platform for which you need to create this campaign.
+          </span>
 
+          <Divider />
 
-<Header 
-    title={"Community"}
-    />
-      <Box display={'flex'}>
-      <Box className="col-5 d-flex flex-column gap-2 pt-4">
-        <span className="web-text-large fw-bold rubix-text-dark">
-          Members Info
-        </span>
-        <span className="web-text-medium text-secondary">
-          Select the platform for which you need to create this campaign.
-        </span>
+          <span className="web-text-large fw-bold rubix-text-dark">
+            Display profile
+          </span>
+          <span className="web-text-medium text-secondary mb-4">
+            Below is the profile that will be displayed on the community page.
+          </span>
 
-        <Divider />
-
-        <span className="web-text-large fw-bold rubix-text-dark">
-          Display profile
-        </span>
-        <span className="web-text-medium text-secondary mb-4">
-          Below is the profile that will be displayed on the community page.
-        </span>
-
-        <Box boxSize="sm" 
-          className="d-flex w-100 justify-content-center flex-column align-items-center gap-3">
+          <Box
+            boxSize="sm"
+            className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
+          >
             <Image
               shadow={"md"}
               rounded={8}
@@ -193,225 +192,260 @@ const ComunityEditPage = () => {
               Remove
             </Button>
           </Box>
-      </Box>
+        </Box>
 
-      <form
-        className="col-7 pt-4 overflow-auto p-4"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        {/* <Switch
+        <form
+          className="col-7 pt-4 overflow-auto p-4"
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          {/* <Switch
           size={"sm"}
           colorScheme="teal"
           onChange={() => handleUpdateStatus(item.id)}
           isChecked={data?.data?.status}
         /> */}
-        <Box className="web-text-large fw-bold mb-2 rubix-text-dark">
+          <Box className="web-text-large fw-bold mb-2 rubix-text-dark">
             Status
           </Box>
-        {data?.data?.status ? <Tag position={'sticky'} right={10} size={"sm"} variant="solid" colorScheme="teal">
-          Active
-        </Tag> : <Tag position={'sticky'} right={10} size={"sm"} variant="solid" colorScheme="red">
-          Inactive
-        </Tag>}
-
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Name
-          </FormLabel>
-          <Input
-            {...register("member_name")}
-            placeholder="Name"
-            className="web-text-medium"
-            size="sm"
-            name="member_name"
-            type="text"
-            id="member_name"
-          />
-          {errors.name && (
-            <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-              <TiWarning className="fw-bold fs-5 " />{" "}
-              {errors.member_name.message}
-            </span>
+          {data?.data?.status ? (
+            <Tag
+              position={"sticky"}
+              right={10}
+              size={"sm"}
+              variant="solid"
+              colorScheme="teal"
+            >
+              Active
+            </Tag>
+          ) : (
+            <Tag
+              position={"sticky"}
+              right={10}
+              size={"sm"}
+              variant="solid"
+              colorScheme="red"
+            >
+              Inactive
+            </Tag>
           )}
-        </FormControl>
 
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Designation
-          </FormLabel>
-          <Input
-            {...register("designation")}
-            placeholder="Designation"
-            className="web-text-medium"
-            size="sm"
-            id="designation"
-            name="designation"
-          />
-          {errors.designation && (
-            <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-              <TiWarning className="fw-bold fs-5 " />{" "}
-              {errors.designation.message}
-            </span>
-          )}
-        </FormControl>
+          <FormControl isRequired className="mb-3">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Name
+            </FormLabel>
+            <Input
+              {...register("member_name")}
+              placeholder="Name"
+              className="web-text-medium"
+              size="sm"
+              name="member_name"
+              type="text"
+              id="member_name"
+              minLength={4}
+              errorBorderColor="crimson"
+              isInvalid={watch()?.member_name?.length > 50}
+              // maxLength={51}
+            />
+            <FormHelperText
+              color={watch()?.member_name?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If name crosses 50 characters it will cause problem in alignment
+              on website.you have entered {watch()?.member_name?.length}{" "}
+              characters
+            </FormHelperText>
+            {errors.name && (
+              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.member_name.message}
+              </span>
+            )}
+          </FormControl>
 
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Description
-          </FormLabel>
-          <Textarea
-            {...register("description")}
-            placeholder="Description"
-            className="web-text-medium"
-            size="sm"
-            rows={2}
-            maxLength={90}
-            id="description"
-            name="description"
-          />
-          <FormHelperText className="web-text-small">
-            Maximum characters must be 100 characters.
-          </FormHelperText>
+          <FormControl isRequired className="mb-3">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Designation
+            </FormLabel>
+            <Input
+              {...register("designation")}
+              placeholder="Designation"
+              className="web-text-medium"
+              size="sm"
+              id="designation"
+              name="designation"
+            />
+            {errors.designation && (
+              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.designation.message}
+              </span>
+            )}
+          </FormControl>
 
-          {errors.description && (
-            <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-              <TiWarning className="fw-bold fs-5 " />{" "}
-              {errors.description.message}
-            </span>
-          )}
-        </FormControl>
+          <FormControl isRequired className="mb-3">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Description
+            </FormLabel>
+            <Textarea
+              {...register("description")}
+              placeholder="Description"
+              className="web-text-medium"
+              size="sm"
+              rows={2}
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.description?.length > 230}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.description?.length > 230 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If Description crosses 230 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.description?.length}{" "}
+                  characters
+                </FormHelperText>
 
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Linked In
-          </FormLabel>
-          <Input
-            {...register("linkedin")}
-            placeholder="Linkedin link"
-            className="web-text-medium"
-            size="sm"
-            id="linkedin"
-            name="linkedin"
-          />
-          {errors.linkedin && (
-            <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-              <TiWarning className="fw-bold fs-5 " /> {errors.linkedin.message}
-            </span>
-          )}
-          <FormHelperText className="web-text-small">
-            Please share proper linked in link here.
-          </FormHelperText>
-        </FormControl>
+            {errors.description && (
+              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.description.message}
+              </span>
+            )}
+          </FormControl>
 
-        <FormControl className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Display profile
-          </FormLabel>
-          {/* <ImageDropBox /> */}
+          <FormControl isRequired className="mb-3">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Linked In
+            </FormLabel>
+            <Input
+              {...register("linkedin")}
+              placeholder="Linkedin link"
+              className="web-text-medium"
+              size="sm"
+              id="linkedin"
+              name="linkedin"
+            />
+            {errors.linkedin && (
+              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.linkedin.message}
+              </span>
+            )}
+            <FormHelperText className="web-text-small">
+              Please share proper linked in link here.
+            </FormHelperText>
+          </FormControl>
 
-          <Box
-            borderColor="gray.300"
-            borderStyle="dashed"
-            borderWidth="2px"
-            rounded="md"
-            shadow="sm"
-            role="group"
-            transition="all 150ms ease-in-out"
-            _hover={{
-              shadow: "md",
-            }}
-            as={motion.div}
-            initial="rest"
-            animate="rest"
-            whileHover="hover"
-            height={"105px"}
-            className="pointer"
-          >
-            <Box position="relative" height="100%" width="100%">
-              <Box
-                position="absolute"
-                top="0"
-                left="0"
-                height="100%"
-                width="100%"
-                display="flex"
-                flexDirection="column"
-              >
-                <Stack
+          <FormControl className="mb-3">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Display profile
+            </FormLabel>
+            {/* <ImageDropBox /> */}
+
+            <Box
+              borderColor="gray.300"
+              borderStyle="dashed"
+              borderWidth="2px"
+              rounded="md"
+              shadow="sm"
+              role="group"
+              transition="all 150ms ease-in-out"
+              _hover={{
+                shadow: "md",
+              }}
+              as={motion.div}
+              initial="rest"
+              animate="rest"
+              whileHover="hover"
+              height={"105px"}
+              className="pointer"
+            >
+              <Box position="relative" height="100%" width="100%">
+                <Box
+                  position="absolute"
+                  top="0"
+                  left="0"
                   height="100%"
                   width="100%"
                   display="flex"
-                  alignItems="center"
-                  justify="center"
+                  flexDirection="column"
                 >
-                  <span
-                    className="d-flex flex-column align-items-center pointer"
-                    spacing="1"
+                  <Stack
+                    height="100%"
+                    width="100%"
+                    display="flex"
+                    alignItems="center"
+                    justify="center"
                   >
-                    <Heading
-                      fontSize="lg"
-                      color="gray.700"
-                      fontWeight="bold"
-                      cursor={"pointer"}
-                    >
-                      Drop images here
-                    </Heading>
                     <span
-                      fontWeight="light"
-                      className="web-text-large text-secondary text-center pointer"
+                      className="d-flex flex-column align-items-center pointer"
+                      spacing="1"
                     >
-                      or click to upload
+                      <Heading
+                        fontSize="lg"
+                        color="gray.700"
+                        fontWeight="bold"
+                        cursor={"pointer"}
+                      >
+                        Drop images here
+                      </Heading>
+                      <span
+                        fontWeight="light"
+                        className="web-text-large text-secondary text-center pointer"
+                      >
+                        or click to upload
+                      </span>
                     </span>
-                  </span>
-                </Stack>
+                  </Stack>
+                </Box>
+                <Input
+                  {...register("profile_image")}
+                  type="file"
+                  height="100%"
+                  width="100%"
+                  position="absolute"
+                  top="0"
+                  left="0"
+                  opacity="0"
+                  aria-hidden="true"
+                  accept="image/*"
+                  onChange={handleImageChange}
+                  onDrop={handleImageChange}
+                  //   onDragEnter={startAnimation}
+                  //   onDragLeave={stopAnimation}
+                />
               </Box>
-              <Input
-                {...register("profile_image")}
-                type="file"
-                height="100%"
-                width="100%"
-                position="absolute"
-                top="0"
-                left="0"
-                opacity="0"
-                aria-hidden="true"
-                accept="image/*"
-                onChange={handleImageChange}
-                onDrop={handleImageChange}
-                //   onDragEnter={startAnimation}
-                //   onDragLeave={stopAnimation}
-              />
             </Box>
+
+            {errors.profile_image && (
+              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.profile_image.message}
+              </span>
+            )}
+            <FormHelperText className="web-text-small">
+              Maximum limit of image is 10MB.
+            </FormHelperText>
+          </FormControl>
+
+          <Box className=" d-flex justify-content-end ">
+            <Button
+              isLoading={isLoadingEdit}
+              spinner={<Loader01 />}
+              color={"whitesmoke"}
+              backgroundColor={"purple.900"}
+              _hover={{
+                backgroundColor: "purple.800",
+              }}
+              type="submit"
+              size="sm"
+              rounded={"sm"}
+            >
+              Save edit
+            </Button>
           </Box>
-
-          {errors.profile_image && (
-            <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-              <TiWarning className="fw-bold fs-5 " />{" "}
-              {errors.profile_image.message}
-            </span>
-          )}
-          <FormHelperText className="web-text-small">
-            Maximum limit of image is 10MB.
-          </FormHelperText>
-        </FormControl>
-
-        <Box className=" d-flex justify-content-end ">
-          <Button
-            isLoading={isLoadingEdit}
-            spinner={<Loader01 />}
-            color={'whitesmoke'}
-            backgroundColor={'purple.900'}
-            _hover={{
-              backgroundColor: "purple.800",
-            }}
-            type="submit"
-            size="sm"
-            rounded={'sm'}
-          >
-            Save edit
-          </Button>
-        </Box>
-      </form>
+        </form>
       </Box>
     </Box>
   );

src/Pages/Events/AddEvents.jsx

@@ -1,6 +1,7 @@
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import Header from "../../Components/Header";
 import {
+  AspectRatio,
   Box,
   Button,
   Divider,
@@ -24,6 +25,7 @@ import Loader01 from "../../Components/Loaders/Loader01";
 import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import { useCreateEventsMutation } from "../../Services/api.service";
+import ToastBox from "../../Components/ToastBox";
 
 const AddEvents = () => {
   const toast = useToast();
@@ -33,15 +35,32 @@ const AddEvents = () => {
   const [largeImageData, setLargeImageData] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
+  const [eventDatesInput, setEventsDatesInputs] = useState([]);
+
+
+  // Function to handle adding new date inputs
+  const addDateInput = () => {
+    setEventsDatesInputs([...eventDatesInput, ""]);
+  };
+
+  // Function to handle the change in date inputs
+  const handleDateChange = (index, event) => {
+    const newDates = [...eventDatesInput];
+    newDates[index] = event.target.value;
+    setEventsDatesInputs(newDates);
+  };
+
   const {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(addEvents),
   });
 
+
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     setLargeImageData(file);
@@ -55,7 +74,6 @@ const AddEvents = () => {
   };
 
   const onSubmit = (data) => {
-    console.log(data);
     setIsLoading(true);
     const formData = new FormData();
     formData.append("title", data.title);
@@ -64,21 +82,34 @@ const AddEvents = () => {
     formData.append("organizer_name", data.organizer_name);
     formData.append("organizer_mobile_number", data.organizer_mobile_number);
     formData.append("organizer_email", data.organizer_email);
-    formData.append("dates[0]", "2024-05-08T08:19:27.264Z");
+
+    if (eventDatesInput.length === 0 || eventDatesInput[0]==="") {
+      setIsLoading(false);
+      return toast({
+        render: () => (
+          <ToastBox status={"warn"} message={"Please add events date"} />
+        ),
+      });
+    } else {
+      eventDatesInput.forEach((date, index) => {
+        formData.append(`dates[${index}]`, date);
+      });
+    }
+
     if (data.banner_image[0]) {
       formData.append("banner_image", data.banner_image[0]);
     }
 
     // for (const [key, value] of formData.entries()) {
-    //   console.log(`${key}: ${value}`);
+    //   // console.log(`${key}: ${value}`);
     // }
 
     // Trigger the mutationconst
     const res = createEvents(formData)
       .then((response) => {
         // Handle the response here
-        console.log("Mutation response:", response?.data?.statusCode);
-        console.log("Mutation response:", response?.data?.message);
+        // // console.log("Mutation response:", response?.data?.statusCode);
+        // // console.log("Mutation response:", response?.data?.message);
 
         if (response?.data?.statusCode === 201) {
           setIsLoading(false);
@@ -100,12 +131,11 @@ const AddEvents = () => {
       })
       .catch((error) => {
         // Handle errors
-        console.error("Error creating community:", error?.message);
+        // // console.error("Error creating community:", error?.message);
         setIsLoading(false);
         // Handle error notification if needed
       });
 
-    console.log(res);
   };
 
   return (
@@ -113,285 +143,435 @@ const AddEvents = () => {
       {...OPACITY_ON_LOAD}
       w={"100%"}
       h={"100vh"}
+
       className="overflow-auto "
       display={"flex"}
       flexDirection={"column"}
     >
       <Header title={"Events"} />
 
+
+      {/* <Box width="100%" maxWidth="1200px" mx="auto" my={4}>
+      <AspectRatio ratio={16 / 6}>
+        <iframe
+          title="naruto"
+          src="https://rubix.betadelivery.com/events"
+          width="100%"
+          height="100%"
+          style={{ border: 'none' }}
+          allowFullScreen
+        />
+      </AspectRatio>
+    </Box> */}
+
       <Box className="d-flex">
-        <Box className="col-5 d-flex flex-column gap-2 pt-4">
-          <span className="web-text-large fw-bold rubix-text-dark">
-            Banner info
-          </span>
-          <span className="web-text-medium text-secondary">
-            Select the platform for which you need to create this campaign.
-          </span>
+        <form className="w-100" onSubmit={handleSubmit(onSubmit)}>
+          <Box display={"flex"}>
+            <Box className="col-5 d-flex flex-column gap-2 pt-4">
+              <Box h={340} gap={4} display={'flex'} flexDirection={'column'}>
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Banner info
+              </span>
+              <span className="web-text-medium text-secondary">
+                Select the platform for which you need to create this campaign.
+              </span>
 
-          <Divider />
 
-          <span className="web-text-large fw-bold rubix-text-dark">
-            Banner image
-          </span>
-          <span className="web-text-medium text-secondary mb-4">
-            Below is the profile that will be displayed on the community page.
-          </span>
-
-          <Box
-            boxSize="sm"
-            className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
-          >
-            <Image
-              shadow={"md"}
-              rounded={8}
-              w={500}
-              h={240}
-              src={selectedImage}
-              alt="Selected Image"
-            />
-            {selectedImage === fallbackImage || largeImageData === null ? (
-              ""
-            ) : (
-              <Box display={"flex"} flexDirection={"column"} w={"100%"}>
-                <span className="web-text-small">{largeImageData?.name}</span>
-                <span className="web-text-small text-secondary fst-italic">
-                  {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb
-                </span>
               </Box>
-            )}
-            <Button
-              onClick={() => setSelectedImage(fallbackImage)}
-              backgroundColor="red.400"
-              color={"whitesmoke"}
-              transition={"0.5s"}
-              _hover={{
-                backgroundColor: "red.500",
-              }}
-              size="xs"
-            >
-              Remove
-            </Button>
-          </Box>
-        </Box>
 
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          className="col-7 pt-4 mb-3  overflow-auto p-4"
-        >
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Title
-            </FormLabel>
-            <Input
-              {...register("title")}
-              placeholder="Title"
-              className="web-text-medium"
-              size="sm"
-            />
-            {errors.name && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
+
+              <Divider />
+
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Banner image
               </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Location
-            </FormLabel>
-            <Input
-              {...register("location")}
-              placeholder="Location"
-              className="web-text-medium"
-              size="sm"
-            />
-            {errors.location && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.location.message}
+              <span className="web-text-medium text-secondary mb-4">
+                Below is the profile that will be displayed on the community
+                page.
               </span>
-            )}
-          </FormControl>
 
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Organisation name
-            </FormLabel>
-            <Input
-              {...register("organizer_name")}
-              placeholder="Organisation name"
-              className="web-text-medium"
-              size="sm"
-            />
-            {errors.organizer_name && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.organizer_name.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Organisation contact
-            </FormLabel>
-            <Input
-              type="tel"
-              {...register("organizer_mobile_number")}
-              placeholder="Organisation contact"
-              className="web-text-medium"
-              size="sm"
-            />
-            {errors.organizer_mobile_number && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.organizer_mobile_number.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Organisation email
-            </FormLabel>
-            <Input
-              type="email"
-              {...register("organizer_email")}
-              placeholder="Organisation email"
-              className="web-text-medium"
-              size="sm"
-            />
-            {errors.organizer_email && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.organizer_email.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Content
-            </FormLabel>
-            <Textarea
-              {...register("content")}
-              placeholder="Content"
-              className="web-text-medium"
-              size="sm"
-            />
-            {errors.content && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " /> {errors.content.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Banner image
-            </FormLabel>
-            {/* <ImageDropBox /> */}
-
-            <Box
-              borderColor="gray.300"
-              borderStyle="dashed"
-              borderWidth="2px"
-              rounded="md"
-              shadow="sm"
-              role="group"
-              transition="all 150ms ease-in-out"
-              _hover={{
-                shadow: "md",
-              }}
-              as={motion.div}
-              initial="rest"
-              animate="rest"
-              whileHover="hover"
-              height={"105px"}
-              className="pointer"
-            >
-              <Box position="relative" height="100%" width="100%">
-                <Box
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  height="100%"
-                  width="100%"
-                  display="flex"
-                  flexDirection="column"
-                >
-                  <Stack
-                    height="100%"
-                    width="100%"
-                    display="flex"
-                    alignItems="center"
-                    justify="center"
-                  >
-                    <span
-                      className="d-flex flex-column align-items-center pointer"
-                      spacing="1"
-                    >
-                      <Heading
-                        fontSize="lg"
-                        color="gray.700"
-                        fontWeight="bold"
-                        cursor={"pointer"}
-                      >
-                        Drop images here
-                      </Heading>
-                      <span
-                        fontWeight="light"
-                        className="web-text-large text-secondary text-center pointer"
-                      >
-                        or click to upload
-                      </span>
-                    </span>
-                  </Stack>
-                </Box>
-                <Input
-                  {...register("banner_image")}
-                  type="file"
-                  height="100%"
-                  width="100%"
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  opacity="0"
-                  aria-hidden="true"
-                  accept="image/*"
-                  onChange={handleImageChange}
-                  onDrop={handleImageChange}
-                  //   onDragEnter={startAnimation}
-                  //   onDragLeave={stopAnimation}
+              <Box
+                boxSize="sm"
+                className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
+              >
+                <Image
+                  shadow={"md"}
+                  rounded={8}
+                  w={500}
+                  h={240}
+                  src={selectedImage}
+                  alt="Selected Image"
                 />
+                {selectedImage === fallbackImage || largeImageData === null ? (
+                  ""
+                ) : (
+                  <Box display={"flex"} flexDirection={"column"} w={"100%"}>
+                    <span className="web-text-small">
+                      {largeImageData?.name}
+                    </span>
+                    <span className="web-text-small text-secondary fst-italic">
+                      {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb
+                    </span>
+                  </Box>
+                )}
+                <Button
+                  onClick={() => setSelectedImage(fallbackImage)}
+                  backgroundColor="red.400"
+                  color={"whitesmoke"}
+                  transition={"0.5s"}
+                  _hover={{
+                    backgroundColor: "red.500",
+                  }}
+                  size="xs"
+                >
+                  Remove
+                </Button>
               </Box>
             </Box>
 
-            {errors.banner_image && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.banner_image.message}
-              </span>
-            )}
-            <FormHelperText className="web-text-small">
-              Maximum limit of image is 10MB.
-            </FormHelperText>
-          </FormControl>
+            <Box className="col-7 pt-4 mb-3  overflow-auto p-4">
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Title
+                </FormLabel>
+                <Input
+                  {...register("title")}
+                  placeholder="Title"
+                  className="web-text-medium"
+                  size="sm"
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If title crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
+                {errors.name && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.title.message}
+                  </span>
+                )}
+              </FormControl>
 
-          <Box className=" d-flex justify-content-end mb-5">
-            <Button
-              isLoading={isLoading}
-              spinner={<Loader01 />}
-              color={"whitesmoke"}
-              backgroundColor={"purple.700"}
-              _hover={{
-                backgroundColor: "purple.800",
-              }}
-              type="submit"
-              size="sm"
-            >
-              Create
-            </Button>
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Location
+                </FormLabel>
+                <Input
+                  {...register("location")}
+                  placeholder="Location"
+                  className="web-text-medium"
+                  size="sm"
+                />
+                {errors.location && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.location.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Content
+                </FormLabel>
+                <Textarea
+                  {...register("content")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="content"
+                  type="text"
+                  id="content"
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.content?.length > 230}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.content?.length > 230 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If content crosses 230 characters it will cause problem in
+                  alignment on website.you have entered{" "}
+                  {watch()?.content?.length} characters
+                </FormHelperText>
+                {errors.content && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.content.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation email
+                </FormLabel>
+                <Input
+                  type="email"
+                  {...register("organizer_email")}
+                  placeholder="Organisation email"
+                  className="web-text-medium"
+                  size="sm"
+                />
+                {errors.organizer_email && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_email.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Event dates
+                </FormLabel>
+                {eventDatesInput.map((date, index) => (
+                  <Input
+                    key={index}
+                    type="date"
+                    value={date}
+                    onChange={(event) => handleDateChange(index, event)}
+                    className="web-text-medium"
+                    size="sm"
+                  />
+                ))}
+                <Box display={"flex"} justifyContent={"flex-end"} mt={2}>
+                  <Button
+                    size={"xs"}
+                    rounded={"sm"}
+                    type="button"
+                    onClick={addDateInput}
+                  >
+                    Add Date
+                  </Button>
+                </Box>
+                {/* <FormHelperText className="web-text-small">
+                  {data?.data?.eventDates?.map(({ date }, index) => (
+                    <span className="web-text-small me-2">
+                      {formatDate(date)}
+                    </span>
+                  ))}
+                </FormHelperText> */}
+                {errors.eventDates && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.eventDates.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Banner image
+                </FormLabel>
+                {/* <ImageDropBox /> */}
+
+                <Box
+                  borderColor="gray.300"
+                  borderStyle="dashed"
+                  borderWidth="2px"
+                  rounded="md"
+                  shadow="sm"
+                  role="group"
+                  transition="all 150ms ease-in-out"
+                  _hover={{
+                    shadow: "md",
+                  }}
+                  as={motion.div}
+                  initial="rest"
+                  animate="rest"
+                  whileHover="hover"
+                  height={"105px"}
+                  className="pointer"
+                >
+                  <Box position="relative" height="100%" width="100%">
+                    <Box
+                      position="absolute"
+                      top="0"
+                      left="0"
+                      height="100%"
+                      width="100%"
+                      display="flex"
+                      flexDirection="column"
+                    >
+                      <Stack
+                        height="100%"
+                        width="100%"
+                        display="flex"
+                        alignItems="center"
+                        justify="center"
+                      >
+                        <span
+                          className="d-flex flex-column align-items-center pointer"
+                          spacing="1"
+                        >
+                          <Heading
+                            fontSize="lg"
+                            color="gray.700"
+                            fontWeight="bold"
+                            cursor={"pointer"}
+                          >
+                            Drop images here
+                          </Heading>
+                          <span
+                            fontWeight="light"
+                            className="web-text-large text-secondary text-center pointer"
+                          >
+                            or click to upload
+                          </span>
+                        </span>
+                      </Stack>
+                    </Box>
+                    <Input
+                      {...register("banner_image")}
+                      type="file"
+                      height="100%"
+                      width="100%"
+                      position="absolute"
+                      top="0"
+                      left="0"
+                      opacity="0"
+                      aria-hidden="true"
+                      accept="image/*"
+                      onChange={handleImageChange}
+                      onDrop={handleImageChange}
+                      //   onDragEnter={startAnimation}
+                      //   onDragLeave={stopAnimation}
+                    />
+                  </Box>
+                </Box>
+
+                {errors.banner_image && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.banner_image.message}
+                  </span>
+                )}
+                <FormHelperText className="web-text-small">
+                  Maximum limit of image is 10MB.
+                </FormHelperText>
+              </FormControl>
+            </Box>
+          </Box>
+
+          <Divider />
+
+          <Box display={"flex"}>
+            <Box className="col-5 d-flex flex-column gap-2 pt-4">
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Orgainsation info
+              </span>
+              <span className="web-text-medium text-secondary mb-0">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+                dicta exercitationem laboriosam fugit vel ipsam hic, consectetur
+                eum nesciunt adipisci?
+              </span>
+            </Box>
+
+            <Box className="col-7 pt-4 p-4">
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation name
+                </FormLabel>
+                <Input
+                  {...register("organizer_name")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="organizer_name"
+                  type="text"
+                  id="organizer_name"
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.organizer_name?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={
+                    watch()?.organizer_name?.length > 50 ? "red" : "gray.500"
+                  }
+                  className="web-text-small"
+                >
+                  If Organisation name crosses 50 characters it will cause
+                  problem in alignment on website.you have entered{" "}
+                  {watch()?.organizer_name?.length} characters
+                </FormHelperText>
+                {errors.organizer_name && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_name.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation number
+                </FormLabel>
+                <Input
+                  {...register("organizer_mobile_number")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="organizer_mobile_number"
+                  type="text"
+                  id="organizer_mobile_number"
+                />
+                {errors.organizer_mobile_number && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_mobile_number.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation email
+                </FormLabel>
+                <Input
+                  {...register("organizer_email")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="organizer_email"
+                  type="text"
+                  id="organizer_email"
+                />
+                <FormHelperText className="web-text-small">
+                  Please enter valid email
+                </FormHelperText>
+                {errors.organizer_email && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_email.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <Box className=" d-flex justify-content-end mb-5">
+                <Button
+                  isLoading={isLoading}
+                  spinner={<Loader01 />}
+                  color={"whitesmoke"}
+                  backgroundColor={"purple.700"}
+                  _hover={{
+                    backgroundColor: "purple.800",
+                  }}
+                  rounded={"sm"}
+                  type="submit"
+                  size="sm"
+                >
+                  Create event
+                </Button>
+              </Box>
+            </Box>
           </Box>
         </form>
       </Box>

src/Pages/Events/EditEvents.jsx

@@ -17,6 +17,7 @@ import {
   Input,
   Stack,
   Tag,
+  Textarea,
   useToast,
 } from "@chakra-ui/react";
 import { addEvents } from "../../Validations/Validations";
@@ -29,6 +30,18 @@ import { TiWarning } from "react-icons/ti";
 import { motion } from "framer-motion";
 import Loader01 from "../../Components/Loaders/Loader01";
 import ToastBox from "../../Components/ToastBox";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import ChipSelector from "../../Components/ChipSelector/ChipSelector";
+
+const convertToDateArray = (dateArray) => {
+  return dateArray?.map((dateString) => {
+    const date = new Date(dateString);
+    const year = date.getUTCFullYear();
+    const month = String(date.getUTCMonth() + 1).padStart(2, "0"); // getUTCMonth() is zero-based
+    const day = String(date.getUTCDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  });
+};
 
 const EditEvents = () => {
   const { id } = useParams();
@@ -39,11 +52,15 @@ const EditEvents = () => {
   const [selectedImage, setSelectedImage] = useState(fallbackImage);
   const [largeImageData, setLargeImageData] = useState(null);
   const [updateEvents] = useUpdateEventsMutation();
+  const [eventsDate, setEventsDate] = useState(
+    convertToDateArray(data?.data?.eventDates.map((event) => event.date))
+  );
 
   const {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
     setValue,
   } = useForm({
@@ -54,7 +71,7 @@ const EditEvents = () => {
       location: "",
       organizer_name: "",
       organizer_mobile_number: "",
-      eventDates:[],
+      // eventDates: eventsDate,
       organizer_email: "",
       banner_image: null,
     },
@@ -72,16 +89,13 @@ const EditEvents = () => {
       setValue("organizer_mobile_number", data?.data?.organizer_mobile_number);
       setValue("organizer_email", data?.data?.organizer_email);
       setValue("content", data?.data?.content);
-      setValue("eventDates", data?.data?.eventDates);
+      // setValue("eventDates", data?.data?.eventDates);
       setValue("banner_image", data?.data?.banner_image);
-      
-      setValue("eventDates", data?.data?.eventDates);
+
+      // setValue("eventDates", eventsDate);
     }
   }, [data, setValue]);
 
-
-
-  
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     setLargeImageData(file);
@@ -92,11 +106,9 @@ const EditEvents = () => {
       };
       reader.readAsDataURL(file);
     }
-
   };
 
 
-  
   const onSubmit = (data) => {
     setIsLoadingEdit(true);
     const formData = new FormData();
@@ -106,21 +118,43 @@ const EditEvents = () => {
     formData.append("organizer_name", data.organizer_name);
     formData.append("organizer_mobile_number", data.organizer_mobile_number);
     formData.append("organizer_email", data.organizer_email);
-    formData.append("dates[0]", "2024-05-08T08:19:27.264Z");
+
+
+    if (eventsDate.length === 0) {
+      setIsLoadingEdit(false);
+      return toast({
+        render: () => (
+          <ToastBox status={"warn"} message={"Please add events date"} />
+        ),
+      })
+    }else{
+        eventsDate.forEach((date, index) => {
+          formData.append(`dates[${index}]`, date);
+        });
+      }
+
+
+  
+
+    
+
+
+
+
     if (data.banner_image[0]) {
       formData.append("banner_image", data.banner_image[0]);
     }
 
     // for (const [key, value] of formData.entries()) {
-    //   console.log(`${key}: ${value}`);
+    //   // console.log(`${key}: ${value}`);
     // }
 
     // Trigger the mutationconst
-    const res = updateEvents({id: id, data: formData})
+    const res = updateEvents({ id: id, data: formData })
       .then((response) => {
         // Handle the response here
-        console.log("Mutation response:", response?.data?.statusCode);
-        console.log("Mutation response:", response?.data?.message);
+        // // console.log("Mutation response:", response?.data?.statusCode);
+        // // console.log("Mutation response:", response?.data?.message);
 
         if (response?.data?.statusCode === 201) {
           setIsLoadingEdit(false);
@@ -142,18 +176,13 @@ const EditEvents = () => {
       })
       .catch((error) => {
         // Handle errors
-        console.error("Error creating community:", error?.message);
+        // // console.error("Error creating community:", error?.message);
         setIsLoadingEdit(false);
         // Handle error notification if needed
       });
-
   };
 
 
-
-
-  console.log(errors);
-
   return isLoading ? (
     <FullscreenLoaders />
   ) : (
@@ -166,401 +195,404 @@ const EditEvents = () => {
       <Header title={"Events"} />
 
       <Box display={"flex"}>
+        <form className="w-100" onSubmit={handleSubmit(onSubmit)}>
+          <Box display={"flex"}>
+            <Box className="col-5 d-flex flex-column gap-2 pt-4">
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Events Info
+              </span>
+              <span className="web-text-medium text-secondary">
+                Select the platform for which you need to create this campaign.
+              </span>
 
-        
-      <form className="w-100" 
-      onSubmit={handleSubmit(onSubmit)}
-      >
-        <Box display={"flex"}>
-        <Box className="col-5 d-flex flex-column gap-2 pt-4">
-          <span className="web-text-large fw-bold rubix-text-dark">
-            Events Info
-          </span>
-          <span className="web-text-medium text-secondary">
-            Select the platform for which you need to create this campaign.
-          </span>
+              <Divider />
 
-          <Divider />
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Display image
+              </span>
+              <span className="web-text-medium text-secondary mb-4">
+                Below is the profile that will be displayed on the events page.
+              </span>
 
-          <span className="web-text-large fw-bold rubix-text-dark">
-            Display image
-          </span>
-          <span className="web-text-medium text-secondary mb-4">
-            Below is the profile that will be displayed on the events page.
-          </span>
-
-          <Box
-            boxSize="sm"
-            className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
-          >
-            <Image
-              shadow={"md"}
-              rounded={8}
-              w={"100%"}
-              h={240}
-              src={selectedImage}
-              alt="Selected Image"
-            />
-            {selectedImage === fallbackImage || largeImageData === null ? (
-              ""
-            ) : (
-              <Box display={"flex"} flexDirection={"column"} w={"100%"}>
-                <span className="web-text-small">
-                  {largeImageData && largeImageData?.name}
-                </span>
-                <span className="web-text-small text-secondary fst-italic">
-                  {largeImageData &&
-                    (largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "}
-                  mb
-                </span>
+              <Box
+                boxSize="sm"
+                className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
+              >
+                <Image
+                  shadow={"md"}
+                  rounded={8}
+                  w={"100%"}
+                  h={240}
+                  src={selectedImage}
+                  alt="Selected Image"
+                />
+                {selectedImage === fallbackImage || largeImageData === null ? (
+                  ""
+                ) : (
+                  <Box display={"flex"} flexDirection={"column"} w={"100%"}>
+                    <span className="web-text-small">
+                      {largeImageData && largeImageData?.name}
+                    </span>
+                    <span className="web-text-small text-secondary fst-italic">
+                      {largeImageData &&
+                        (largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "}
+                      mb
+                    </span>
+                  </Box>
+                )}
+                <Button
+                  onClick={() => setSelectedImage(fallbackImage)}
+                  backgroundColor="red.400"
+                  color={"whitesmoke"}
+                  transition={"0.5s"}
+                  _hover={{
+                    backgroundColor: "red.500",
+                  }}
+                  size="xs"
+                >
+                  Remove
+                </Button>
               </Box>
-            )}
-            <Button
-              onClick={() => setSelectedImage(fallbackImage)}
-              backgroundColor="red.400"
-              color={"whitesmoke"}
-              transition={"0.5s"}
-              _hover={{
-                backgroundColor: "red.500",
-              }}
-              size="xs"
-            >
-              Remove
-            </Button>
-          </Box>
-        </Box>
-
-        <Box
-          className="col-7 pt-4 overflow-auto p-4"
-          //   onSubmit={handleSubmit(onSubmit)}
-        >
-          <Box className="web-text-large fw-bold mb-2 rubix-text-dark">
-            Status
-          </Box>
-          {data?.data?.status ? (
-            <Tag
-              position={"sticky"}
-              right={10}
-              size={"sm"}
-              variant="solid"
-              colorScheme="teal"
-            >
-              Active
-            </Tag>
-          ) : (
-            <Tag
-              position={"sticky"}
-              right={10}
-              size={"sm"}
-              variant="solid"
-              colorScheme="red"
-            >
-              Inactive
-            </Tag>
-          )}
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Title
-            </FormLabel>
-            <Input
-              {...register("title")}
-              placeholder="Name"
-              className="web-text-medium"
-              size="sm"
-              name="title"
-              type="text"
-              id="title"
-            />
-            {errors.title && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Content
-            </FormLabel>
-            <Input
-              {...register("content")}
-              placeholder="Name"
-              className="web-text-medium"
-              size="sm"
-              name="content"
-              type="text"
-              id="content"
-            />
-            {errors.content && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " /> {errors.content.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Location
-            </FormLabel>
-            <Input
-              {...register("location")}
-              placeholder="Name"
-              className="web-text-medium"
-              size="sm"
-              name="location"
-              type="text"
-              id="location"
-            />
-            {errors.location && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.location.message}
-              </span>
-            )}
-          </FormControl>
-
-          
-          <FormControl className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Event dates
-            </FormLabel>
-            <Input
-              {...register("eventDates")}
-              placeholder="Dates"
-              className="web-text-medium"
-              size="sm"
-              name="eventDates"
-              type="text"
-              id="eventDates"
-            />
-            {errors.eventDates && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.eventDates.message}
-              </span>
-            )}
-          </FormControl>
-
-
-
-
-
-
-
-
-          <FormControl className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Banner image
-            </FormLabel>
-            {/* <ImageDropBox /> */}
+            </Box>
 
             <Box
-              borderColor="gray.300"
-              borderStyle="dashed"
-              borderWidth="2px"
-              rounded="md"
-              shadow="sm"
-              role="group"
-              transition="all 150ms ease-in-out"
-              _hover={{
-                shadow: "md",
-              }}
-              as={motion.div}
-              initial="rest"
-              animate="rest"
-              whileHover="hover"
-              height={"105px"}
-              className="pointer"
+              className="col-7 pt-4 overflow-auto p-4"
+              //   onSubmit={handleSubmit(onSubmit)}
             >
-              <Box position="relative" height="100%" width="100%">
-                <Box
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  height="100%"
-                  width="100%"
-                  display="flex"
-                  flexDirection="column"
+              <Box className="web-text-large fw-bold mb-2 rubix-text-dark">
+                Status
+              </Box>
+              {data?.data?.status ? (
+                <Tag
+                  position={"sticky"}
+                  right={10}
+                  size={"sm"}
+                  variant="solid"
+                  colorScheme="teal"
                 >
-                  <Stack
-                    height="100%"
-                    width="100%"
-                    display="flex"
-                    alignItems="center"
-                    justify="center"
-                  >
-                    <span
-                      className="d-flex flex-column align-items-center pointer"
-                      spacing="1"
-                    >
-                      <Heading
-                        fontSize="lg"
-                        color="gray.700"
-                        fontWeight="bold"
-                        cursor={"pointer"}
-                      >
-                        Drop images here
-                      </Heading>
-                      <span
-                        fontWeight="light"
-                        className="web-text-large text-secondary text-center pointer"
-                      >
-                        or click to upload
-                      </span>
-                    </span>
-                  </Stack>
-                </Box>
+                  Active
+                </Tag>
+              ) : (
+                <Tag
+                  position={"sticky"}
+                  right={10}
+                  size={"sm"}
+                  variant="solid"
+                  colorScheme="red"
+                >
+                  Inactive
+                </Tag>
+              )}
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Title
+                </FormLabel>
                 <Input
-                  {...register("banner_image")}
-                  type="file"
-                  height="100%"
-                  width="100%"
-                  position="absolute"
-                  top="0"
-                  left="0"
-                  opacity="0"
-                  aria-hidden="true"
-                  accept="image/*"
-                  onChange={handleImageChange}
-                  onDrop={handleImageChange}
-                  //   onDragEnter={startAnimation}
-                  //   onDragLeave={stopAnimation}
+                  {...register("title")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="title"
+                  type="text"
+                  id="title"
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
                 />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If title crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
+                {errors.title && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.title.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Location
+                </FormLabel>
+                <Input
+                  {...register("location")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="location"
+                  type="text"
+                  id="location"
+                />
+                {errors.location && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.location.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Content
+                </FormLabel>
+                <Textarea
+                  {...register("content")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="content"
+                  type="text"
+                  id="content"
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.content?.length > 230}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.content?.length > 230 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If content crosses 230 characters it will cause problem in
+                  alignment on website.you have entered{" "}
+                  {watch()?.content?.length} characters
+                </FormHelperText>
+                {errors.content && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.content.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Event dates
+                </FormLabel>
+                <ChipSelector
+                  type={"date"}
+                  chips={eventsDate}
+                  setChips={setEventsDate}
+                />
+                {errors.eventDates && (
+                  <span className="text-warning web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.eventDates.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Banner image
+                </FormLabel>
+                {/* <ImageDropBox /> */}
+
+                <Box
+                  borderColor="gray.300"
+                  borderStyle="dashed"
+                  borderWidth="2px"
+                  rounded="md"
+                  shadow="sm"
+                  role="group"
+                  transition="all 150ms ease-in-out"
+                  _hover={{
+                    shadow: "md",
+                  }}
+                  as={motion.div}
+                  initial="rest"
+                  animate="rest"
+                  whileHover="hover"
+                  height={"105px"}
+                  className="pointer"
+                >
+                  <Box position="relative" height="100%" width="100%">
+                    <Box
+                      position="absolute"
+                      top="0"
+                      left="0"
+                      height="100%"
+                      width="100%"
+                      display="flex"
+                      flexDirection="column"
+                    >
+                      <Stack
+                        height="100%"
+                        width="100%"
+                        display="flex"
+                        alignItems="center"
+                        justify="center"
+                      >
+                        <span
+                          className="d-flex flex-column align-items-center pointer"
+                          spacing="1"
+                        >
+                          <Heading
+                            fontSize="lg"
+                            color="gray.700"
+                            fontWeight="bold"
+                            cursor={"pointer"}
+                          >
+                            Drop images here
+                          </Heading>
+                          <span
+                            fontWeight="light"
+                            className="web-text-large text-secondary text-center pointer"
+                          >
+                            or click to upload
+                          </span>
+                        </span>
+                      </Stack>
+                    </Box>
+                    <Input
+                      {...register("banner_image")}
+                      type="file"
+                      height="100%"
+                      width="100%"
+                      position="absolute"
+                      top="0"
+                      left="0"
+                      opacity="0"
+                      aria-hidden="true"
+                      accept="image/*"
+                      onChange={handleImageChange}
+                      onDrop={handleImageChange}
+                      //   onDragEnter={startAnimation}
+                      //   onDragLeave={stopAnimation}
+                    />
+                  </Box>
+                </Box>
+
+                {errors.banner_image && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.banner_image.message}
+                  </span>
+                )}
+                <FormHelperText className="web-text-small">
+                  Maximum limit of image should be 1mb to protect website from
+                  slow loading.
+                </FormHelperText>
+              </FormControl>
+            </Box>
+          </Box>
+          <Divider />
+
+          <Box display={"flex"}>
+            <Box className="col-5 d-flex flex-column gap-2 pt-4">
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Orgainsation info
+              </span>
+              <span className="web-text-medium text-secondary mb-0">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
+                dicta exercitationem laboriosam fugit vel ipsam hic, consectetur
+                eum nesciunt adipisci?
+              </span>
+            </Box>
+
+            <Box className="col-7 pt-4 p-4">
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation name
+                </FormLabel>
+                <Input
+                  {...register("organizer_name")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="organizer_name"
+                  type="text"
+                  id="organizer_name"
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.organizer_name?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={
+                    watch()?.organizer_name?.length > 50 ? "red" : "gray.500"
+                  }
+                  className="web-text-small"
+                >
+                  If Organisation name crosses 50 characters it will cause
+                  problem in alignment on website.you have entered{" "}
+                  {watch()?.organizer_name?.length} characters
+                </FormHelperText>
+                {errors.organizer_name && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_name.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation number
+                </FormLabel>
+                <Input
+                  {...register("organizer_mobile_number")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="organizer_mobile_number"
+                  type="text"
+                  id="organizer_mobile_number"
+                />
+                {errors.organizer_mobile_number && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_mobile_number.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <FormControl isRequired className="mb-3">
+                <FormLabel className="web-text-large fw-bold rubix-text-dark">
+                  Organisation email
+                </FormLabel>
+                <Input
+                  {...register("organizer_email")}
+                  placeholder="Name"
+                  className="web-text-medium"
+                  size="sm"
+                  name="organizer_email"
+                  type="text"
+                  id="organizer_email"
+                />
+                <FormHelperText className="web-text-small">
+                  Please enter valid email
+                </FormHelperText>
+                {errors.organizer_email && (
+                  <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+                    <TiWarning className="fw-bold fs-5 " />{" "}
+                    {errors.organizer_email.message}
+                  </span>
+                )}
+              </FormControl>
+
+              <Box className=" d-flex justify-content-end">
+                <Button
+                  isLoading={isLoadingEdit}
+                  spinner={<Loader01 />}
+                  color={"whitesmoke"}
+                  backgroundColor={"purple.900"}
+                  _hover={{
+                    backgroundColor: "purple.800",
+                  }}
+                  type="submit"
+                  size="sm"
+                  rounded={"sm"}
+                >
+                  Save edit
+                </Button>
               </Box>
             </Box>
-
-            {errors.banner_image && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.banner_image.message}
-              </span>
-            )}
-            <FormHelperText className="web-text-small">
-              Maximum limit of image should be 1mb to protect website from slow loading.
-            </FormHelperText>
-          </FormControl>
-
-
-
-
-
-
-        </Box>
-
-
-        </Box>
-        <Divider />
-
-        <Box display={"flex"}>
-
-            
-          <Box className="col-5 d-flex flex-column gap-2 pt-4">
-
-            <span className="web-text-large fw-bold rubix-text-dark">
-              Orgainsation info
-            </span>
-            <span className="web-text-medium text-secondary mb-0">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dicta exercitationem laboriosam fugit vel ipsam hic, consectetur eum nesciunt adipisci?
-            </span>
           </Box>
-
-
-          
-          <Box className="col-7 pt-4 p-4">
-
-            
-
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Organisation name
-            </FormLabel>
-            <Input
-              {...register("organizer_name")}
-              placeholder="Name"
-              className="web-text-medium"
-              size="sm"
-              name="organizer_name"
-              type="text"
-              id="organizer_name"
-            />
-            {errors.organizer_name && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.organizer_name.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Organisation number
-            </FormLabel>
-            <Input
-              {...register("organizer_mobile_number")}
-              placeholder="Name"
-              className="web-text-medium"
-              size="sm"
-              name="organizer_mobile_number"
-              type="text"
-              id="organizer_mobile_number"
-            />
-            {errors.organizer_mobile_number && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.organizer_mobile_number.message}
-              </span>
-            )}
-          </FormControl>
-
-          <FormControl isRequired className="mb-3">
-            <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Organisation email
-            </FormLabel>
-            <Input
-              {...register("organizer_email")}
-              placeholder="Name"
-              className="web-text-medium"
-              size="sm"
-              name="organizer_email"
-              type="text"
-              id="organizer_email"
-            />
-            {errors.organizer_email && (
-              <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.organizer_email.message}
-              </span>
-            )}
-          </FormControl>
-
-          <Box className=" d-flex justify-content-end">
-              <Button
-                isLoading={isLoadingEdit}
-                spinner={<Loader01 />}
-                color={"whitesmoke"}
-                backgroundColor={"purple.900"}
-                _hover={{
-                  backgroundColor: "purple.800",
-                }}
-                type="submit"
-                size="sm"
-                rounded={"sm"}
-              >
-                Save edit
-              </Button>
-            </Box>
-
-
-          </Box>
-
-        </Box>
-
-
-      </form>
-
-        
+        </form>
       </Box>
     </Box>
   );

src/Pages/Events/Events.jsx

@@ -1,16 +1,33 @@
-import { Box, HStack, Input, Menu, MenuButton, MenuItem, MenuList, Portal, Select, Switch, Text, useToast } from '@chakra-ui/react'
-import { OPACITY_ON_LOAD } from '../../Layout/animations'
-import { useDeleteEventsMutation, useGetEventsQuery, useUpdateEventsStatusMutation } from '../../Services/api.service'
-import { useState } from 'react';
-import { TABLE_PAGINATION } from '../../Constants/Paginations';
-import Header from '../../Components/Header';
-import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
-import DataTable from '../../Components/DataTable/DataTable';
-import { HiDotsVertical } from 'react-icons/hi';
+import {
+  Box,
+  HStack,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  Select,
+  Switch,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  useDeleteEventsMutation,
+  useGetEventsQuery,
+  useUpdateEventsStatusMutation,
+} from "../../Services/api.service";
+import { useState } from "react";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import Header from "../../Components/Header";
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import DataTable from "../../Components/DataTable/DataTable";
+import { HiDotsVertical } from "react-icons/hi";
 import { Link as RouterLink } from "react-router-dom";
-import { formatDate } from '../../Components/Functions/UTCConvertor';
-import CustomAlertDialog from '../../Components/CustomAlertDialog';
-import ToastBox from '../../Components/ToastBox';
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import ToastBox from "../../Components/ToastBox";
 
 const Events = () => {
   // ====================================================[Hooks]===================================================================
@@ -23,14 +40,15 @@ const Events = () => {
   const [statusFilter, setStatusFilter] = useState("all");
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
-  const [displayRange, setDisplayRange] = useState({ start: TABLE_PAGINATION?.page, end: pageSize });
+  const [displayRange, setDisplayRange] = useState({
+    start: TABLE_PAGINATION?.page,
+    end: pageSize,
+  });
   // ====================================================[RTK Hooks]===================================================================
   const events = useGetEventsQuery({ page: currentPage, size: pageSize });
   const [updateEventsStatus] = useUpdateEventsStatusMutation();
   const [deleteEvents] = useDeleteEventsMutation();
 
-
-  
   // ====================================================[Functions]===================================================================
   const handleDelete = async (id) => {
     try {
@@ -38,55 +56,55 @@ const Events = () => {
       setDeleteIsLoading(true);
       await deleteEvents(id)
         .then((response) => {
-
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
             setDeleteAlert(false);
             toast({
               render: () => (
-                <ToastBox status={"success"} message={response?.data?.message} />
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
               ),
             });
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error deleting community:", error);
+      // console.error("Error deleting community:", error);
     }
-
   };
   const handleUpdateStatus = async (id) => {
-    
     try {
       // Trigger the mutation
       await updateEventsStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
-                <ToastBox status={"success"} message={response?.data?.message} />
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
               ),
             });
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
-    
   };
 
-
-  
   // ====================================================[Pagination Setup]================================================================
   const paginationPrev = () => {
     if (currentPage > 1) {
@@ -109,7 +127,6 @@ const Events = () => {
     setDisplayRange({ start, end });
   };
 
-  
   // ====================================================[Table Filter]================================================================
   const filteredData = events?.data?.data?.rows?.filter((item) => {
     // Filter by name (case insensitive)
@@ -128,9 +145,6 @@ const Events = () => {
     return nameMatches && statusMatches;
   });
 
-
-
-
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Title",
@@ -144,13 +158,12 @@ const Events = () => {
 
   const extractedArray = filteredData?.map((item, index) => {
     return {
-      Title: 
-      <RouterLink to={`view/${item.id}`}>{item?.title}</RouterLink>,
+      Title: <RouterLink to={`view/${item.id}`}>{item?.title}</RouterLink>,
       "Organisation name": item?.organizer_name,
       "Contact no": item?.organizer_mobile_number,
       Email: item?.organizer_email,
       Location: item?.location,
-      
+
       Status: (
         <Switch
           size={"sm"}
@@ -191,19 +204,21 @@ const Events = () => {
         </span>
       ),
     };
-  })
+  });
 
   return (
     <Box
-    {...OPACITY_ON_LOAD}
-    overflowY={"scroll"}
-    overflowX={"hidden"}
-    paddingBottom={50}
-    height={"100vh"}
+      {...OPACITY_ON_LOAD}
+      overflowY={"scroll"}
+      overflowX={"hidden"}
+      paddingBottom={50}
+      height={"100vh"}
     >
-      <Header title={"Events"} btnTitle={"Create event"} link={"/events/add-events"} />
-
-      
+      <Header
+        title={"Events"}
+        btnTitle={"Create event"}
+        link={"/events/add-events"}
+      />
 
       <Box pt={4}>
         <HStack
@@ -268,26 +283,24 @@ const Events = () => {
         </HStack>
       </Box>
 
-
-       {/* ====================================================[ Table ]================================================================ */}
-       <DataTable
+      {/* ====================================================[ Table ]================================================================ */}
+      <DataTable
         emptyMessage={"We don't have any blog for this author"}
         tableHeadRow={tableHeadRow}
         data={extractedArray}
         isLoading={events?.isLoading}
       />
 
-      
       {/* ====================================================[ Alert ]================================================================ */}
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete member?"}
+        message={"Are you sure you want to delete event?"}
         isLoading={deleteIsLoading}
       />
     </Box>
-  )
-}
+  );
+};
 
-export default Events
+export default Events;

src/Pages/Events/ViewEvents.jsx

@@ -143,6 +143,20 @@ const ViewEvents = () => {
             </Box>
           </Box>
 
+          <Box className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Event Dates
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              
+            {events?.eventDates?.map(({ date }, index) => (
+                    <span key={index} className="web-text-small me-2">
+                      {formatDate(date)}
+                    </span>
+                  ))}
+            </Box>
+          </Box>
+
 
 
           <Box className="mb-3">

src/Pages/Faq/AddFaq.jsx

@@ -41,6 +41,7 @@ const AddFaq = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     setValue: setYupFormValue,
     formState: { errors },
@@ -52,7 +53,7 @@ const AddFaq = () => {
     },
   });
 
-  console.log(errors);
+  // console.log(errors);
   // const handleImageChange = (e) => {
   //   const file = e.target.files[0];
   //   setImageData(file);
@@ -118,13 +119,13 @@ const AddFaq = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
@@ -192,7 +193,19 @@ const AddFaq = () => {
               placeholder="Question"
               className="web-text-medium"
               size="sm"
-            />
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.question?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.question?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If question crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.question?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.question && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}

src/Pages/Faq/EditFaq.jsx

@@ -5,6 +5,7 @@ import {
   Button,
   Divider,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   useToast,
@@ -32,11 +33,12 @@ const EditFaq = () => {
   const [updateFaq] = useUpdateFaqMutation();
   const [valueQuill, setValueQuill] = useState(data?.data?.answer);
 
-  console.log(data);
+  // console.log(data);
 
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     formState: { errors },
     setValue,
@@ -93,7 +95,7 @@ const EditFaq = () => {
         }
       })
       .catch((error) => {
-        console.error("Error updating FAQ:", error);
+        // console.error("Error updating FAQ:", error);
         setIsLoadingEdit(false);
       });
   };
@@ -125,7 +127,19 @@ const EditFaq = () => {
               placeholder="Question"
               className="web-text-medium"
               size="sm"
-            />
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.question?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.question?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If question crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.question?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.question && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}

src/Pages/Faq/Faq.jsx

@@ -47,7 +47,7 @@ const Faq = () => {
 
   const { data } = useGetFaqQuery();
   const faq = data?.data?.rows;
-  console.log(faq);
+  // console.log(faq);
 
   const [deleteFaq] = useDeleteFaqMutation();
   const [updateFaqStatus] = useUpdateFaqStatusMutation();
@@ -160,8 +160,8 @@ const Faq = () => {
       const response = await deleteFaq(communityId);
 
       // Handle the response here
-      console.log("Mutation response:", response?.data?.statusCode);
-      console.log("Mutation response:", response?.data?.message);
+      // console.log("Mutation response:", response?.data?.statusCode);
+      // console.log("Mutation response:", response?.data?.message);
 
       if (response?.data?.statusCode === 200) {
         toast({
@@ -180,7 +180,7 @@ const Faq = () => {
         });
       }
     } catch (error) {
-      console.error("Error deleting community:", error);
+      // console.error("Error deleting community:", error);
       toast({
         render: () => (
           <ToastBox
@@ -200,7 +200,7 @@ const Faq = () => {
     try {
       await updateFaqStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -215,11 +215,11 @@ const Faq = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
 

src/Pages/Faq/ViewFaq.jsx

@@ -19,8 +19,8 @@ const ViewFaq = () => {
   const { data, error, isLoading } = useGetFaqByIdQuery(id);
   const viewFaq = data?.data;
 
-  // console.log(viewPolicy?.banner_image);
-  // console.log(`https://rubix.betadelivery.com/${viewPolicy?.banner_image}`);
+  // // console.log(viewPolicy?.banner_image);
+  // // console.log(`https://rubix.betadelivery.com/${viewPolicy?.banner_image}`);
 
   if (isLoading) {
     return <FullscreenLoaders />;

src/Pages/NewLetter/NewsLetter.jsx

@@ -51,9 +51,9 @@ const NewsLetter = () => {
   const [deleteIsLoading, setDeleteIsLoading] = useState(false);
 
   const { data } = useGetNewsLetterQuery();
-  // console.log(useGetNewsletterQuery);
+  // // console.log(useGetNewsletterQuery);
   const email = data?.data?.rows;
-  console.log(email);
+  // console.log(email);
 
   const [deleteEmail] = useDeleteEmailMutation();
   // const [updateFaqStatus] = useUpdateFaqStatusMutation();
@@ -76,8 +76,8 @@ const NewsLetter = () => {
       const response = await deleteEmail(communityId);
 
       // Handle the response here
-      console.log("Mutation response:", response?.data?.statusCode);
-      console.log("Mutation response:", response?.data?.message);
+      // console.log("Mutation response:", response?.data?.statusCode);
+      // console.log("Mutation response:", response?.data?.message);
 
       if (response?.data?.statusCode === 200) {
         toast({
@@ -96,7 +96,7 @@ const NewsLetter = () => {
         });
       }
     } catch (error) {
-      console.error("Error deleting community:", error);
+      // console.error("Error deleting community:", error);
       toast({
         render: () => (
           <ToastBox
@@ -123,7 +123,6 @@ const NewsLetter = () => {
   const extractedArray = email?.map((item, index) => {
     return {
       Title: (
-        <Link w={200} to={`/faq/view/${item.id}`}>
           <Tooltip
             className="rounded-2 web-text-xsmall"
             width={"fit-content"}
@@ -138,7 +137,6 @@ const NewsLetter = () => {
               </Text>
             </Box>
           </Tooltip>
-        </Link>
       ),
       "Created At": (
         <Box

src/Pages/News/AddNews.jsx

@@ -36,6 +36,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import Loader01 from "../../Components/Loaders/Loader01";
 import Header from "../../Components/Header";
+import ToastBox from "../../Components/ToastBox";
 
 const AddNews = () => {
   const toast = useToast();
@@ -43,21 +44,22 @@ const AddNews = () => {
   const [createNews] = useCreateNewsMutation(); // Invoke the hook to get the mutation function
   const [isLoading, setIsLoading] = useState(false);
   const [selectedImage, setSelectedImage] = useState(fallbackImage);
-  const [ imageData, setImageData ] = useState(null)
-
-
-  
+  const [imageData, setImageData] = useState(null);
 
+  const today = new Date().toISOString().split("T")[0];
 
   const {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(addNews),
   });
 
+  const formData = watch()
+
   const onSubmit = async (data) => {
     const date = new Date(data?.release_date).toUTCString();
     try {
@@ -74,14 +76,17 @@ const AddNews = () => {
       createNews(formData)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 200) {
             setIsLoading(false);
             toast({
               render: () => (
-                <ToastBox status={"success"} message={response?.data?.message} />
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
               ),
             });
             reset();
@@ -90,20 +95,23 @@ const AddNews = () => {
             setIsLoading(false);
             toast({
               render: () => (
-                <ToastBox status={"success"} message={response?.data?.message} />
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
               ),
             });
           }
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
@@ -199,7 +207,18 @@ const AddNews = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={formData?.title?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.title?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If description crosses 50 characters it will cause problem in
+              alignment on website.you have entered {formData?.title?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -209,14 +228,25 @@ const AddNews = () => {
 
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Description
+              Meta description
             </FormLabel>
-            <Input
+            <Textarea
               {...register("meta_description")}
-              placeholder="Sub heading"
+              placeholder="Description"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={formData?.meta_description?.length > 160}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.meta_description?.length > 160 ? "red" : "green.500"}
+              className="web-text-small"
+            >
+              If description crosses 160 characters it will cause problem in
+              alignment on website.you have entered {formData?.meta_description?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.meta_description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}
@@ -234,10 +264,17 @@ const AddNews = () => {
               placeholder="Content"
               className="web-text-medium"
               size="sm"
-              maxLength={90}
+              errorBorderColor="crimson"
+              isInvalid={formData?.content?.length > 230}
+              // maxLength={51}
             />
-            <FormHelperText className="web-text-small">
-              Maximum characters must be 100 characters.
+            <FormHelperText
+              color={formData?.content?.length > 230 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If content crosses 230 characters it will cause problem in
+              alignment on website.you have entered {formData?.content?.length}{" "}
+              characters
             </FormHelperText>
 
             {errors.content && (
@@ -257,9 +294,10 @@ const AddNews = () => {
               placeholder="Button link"
               className="web-text-medium"
               size="sm"
+              min={today} // Disable past dates
             />
             <FormHelperText className="web-text-small">
-              Please share proper linked in link here.
+              Please share proper release date here.
             </FormHelperText>
             {errors.release_date && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
@@ -372,15 +410,13 @@ const AddNews = () => {
               }}
               type="submit"
               size="sm"
-              rounded={'sm'}
+              rounded={"sm"}
             >
               Create
             </Button>
           </Box>
         </form>
       </Box>
-
-
     </Box>
   );
 };

src/Pages/News/EditNews.jsx

@@ -36,7 +36,7 @@ const EditNews = () => {
   const { id } = useParams();
   const toast = useToast();
   const navigate = useNavigate();
-  const { data, error, isLoading } = useGetNewsByIdQuery(id);
+  const { data, error, isLoading, refetch } = useGetNewsByIdQuery(id);
   const [isLoadingEdit, setIsLoadingEdit] = useState(false);
   const [selectedImage, setSelectedImage] = useState(fallbackImage);
   const [largeImageData, setLargeImageData] = useState(null);
@@ -47,6 +47,7 @@ const EditNews = () => {
     handleSubmit,
     reset,
     formState: { errors },
+    watch,
     setValue,
   } = useForm({
     resolver: yupResolver(editNews),
@@ -59,6 +60,10 @@ const EditNews = () => {
     },
   });
 
+
+  const formData = watch()
+
+
   useEffect(() => {
     if (data?.data) {
       setSelectedImage(
@@ -72,7 +77,7 @@ const EditNews = () => {
     }
   }, [data, setValue]);
 
-  console.log(errors);
+  // console.log(errors);
 
   const onSubmit = async (data) => {
     setIsLoadingEdit(true);
@@ -95,12 +100,13 @@ const EditNews = () => {
               <ToastBox status={"success"} message={response?.data?.message} />
             ),
           });
+          refetch();
           navigate("/news");
           // setDeleteAlert(false);
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
@@ -231,7 +237,18 @@ const EditNews = () => {
               name="title"
               type="text"
               id="title"
+              errorBorderColor="crimson"
+              isInvalid={formData?.title?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.title?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If title crosses 50 characters it will cause problem in
+              alignment on website.you have entered {formData?.title?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -241,9 +258,9 @@ const EditNews = () => {
 
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
-              Description
+              Meta description
             </FormLabel>
-            <Input
+            <Textarea
               {...register("meta_description")}
               placeholder="Name"
               className="web-text-medium"
@@ -251,7 +268,18 @@ const EditNews = () => {
               name="meta_description"
               type="text"
               id="meta_description"
+              errorBorderColor="crimson"
+              isInvalid={formData?.meta_description?.length > 160}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.meta_description?.length > 160 ? "red" : "green.500"}
+              className="web-text-small"
+            >
+              If meta_description crosses 160 characters it will cause problem in
+              alignment on website.you have entered {formData?.meta_description?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.meta_description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}
@@ -269,10 +297,17 @@ const EditNews = () => {
               placeholder="Content"
               className="web-text-medium"
               size="sm"
-              maxLength={90}
+              errorBorderColor="crimson"
+              isInvalid={formData?.content?.length > 230}
+              // maxLength={51}
             />
-            <FormHelperText className="web-text-small">
-              Maximum characters must be 100 characters.
+            <FormHelperText
+              color={formData?.content?.length > 230 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If content crosses 230 characters it will cause problem in
+              alignment on website.you have entered {formData?.content?.length}{" "}
+              characters
             </FormHelperText>
 
             {errors.content && (

src/Pages/News/News.jsx

@@ -58,8 +58,8 @@ const News = () => {
       await deleteNews(id)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 200) {
             setDeleteIsLoading(false);
@@ -67,13 +67,13 @@ const News = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error deleting community:", error);
+      // console.error("Error deleting community:", error);
     }
   };
 
@@ -82,7 +82,7 @@ const News = () => {
       // Trigger the mutation
       await updateNewsStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -95,11 +95,11 @@ const News = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
   // ====================================================[Table Filter]================================================================
@@ -255,7 +255,7 @@ const News = () => {
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete video?"}
+        message={"Are you sure you want to delete news?"}
         isLoading={deleteIsLoading}
       />
     </>

src/Pages/News/ViewNews.jsx

@@ -30,11 +30,7 @@ const ViewNews = () => {
       display={"flex"}
       flexDirection={"column"}
     >
-      <Header 
-      title={"News"}
-      btnTitle={'Edit news'}
-      link={`/news/edit/${id}`} 
-      />
+      <Header title={"News"} btnTitle={"Edit news"} link={`/news/edit/${id}`} />
 
       <Box display={"flex"}>
         <Box className="col-5  d-flex flex-column gap-2 pt-4">
@@ -61,7 +57,7 @@ const ViewNews = () => {
             <Image
               shadow={"md"}
               rounded={8}
-              objectFit='cover'
+              objectFit="cover"
               w={500}
               h={240}
               src={`https://rubix.betadelivery.com/${news?.banner_image}`}
@@ -93,7 +89,7 @@ const ViewNews = () => {
 
           <Box className="mb-3">
             <Box className="web-text-large fw-bold rubix-text-dark">
-              news description
+              Meta description
             </Box>
             <Box className="web-text-medium text-secondary">
               {news?.meta_description}

src/Pages/Partners/AddPartners.jsx

@@ -9,6 +9,7 @@ import {
   Image,
   Input,
   Stack,
+  Textarea,
   useToast,
 } from "@chakra-ui/react";
 import React, { useState } from "react";
@@ -49,6 +50,7 @@ const AddPartner = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     // setValue: setYupFormValue,
     formState: { errors },
@@ -61,12 +63,12 @@ const AddPartner = () => {
     },
   });
 
-  console.log(errors);
+  // console.log(errors);
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     setImageData(file);
     // setYupFormValue("banner_image", file);
-    console.log(file);
+    // console.log(file);
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -83,12 +85,12 @@ const AddPartner = () => {
       const formData = new FormData();
       formData.append("website_link", data?.website_link);
       formData.append("description", data?.description);
-      console.log(selectedImage);
+      // console.log(selectedImage);
       if (data?.banner_image) {
         formData.append("banner_image", data?.banner_image[0]);
       }
       for (let [key, value] of formData.entries()) {
-        console.log(key, value);
+        // console.log(key, value);
       }
       // Trigger the mutation
       createPartner(formData)
@@ -131,13 +133,13 @@ const AddPartner = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
@@ -200,12 +202,24 @@ const AddPartner = () => {
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Description
             </FormLabel>
-            <Input
+            <Textarea
               {...register("description")}
               placeholder="Description"
               className="web-text-medium"
               size="sm"
-            />
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.description?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.description?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If description crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.description?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}

src/Pages/Partners/EditPartners.jsx

@@ -12,6 +12,7 @@ import {
   Input,
   Stack,
   Text,
+  Textarea,
   useToast,
 } from "@chakra-ui/react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
@@ -49,6 +50,7 @@ const EditPartner = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     formState: { errors },
     setValue,
@@ -62,7 +64,7 @@ const EditPartner = () => {
   });
 
   const partnerCard = data?.data;
-  // console.log(termContent);
+  // // console.log(termContent);
 
   useEffect(() => {
     if (data?.data) {
@@ -89,7 +91,7 @@ const EditPartner = () => {
   };
 
   const onSubmit = async (data) => {
-    console.log(data);
+    // console.log(data);
 
     setIsLoadingEdit(true);
     const form = new FormData();
@@ -101,12 +103,12 @@ const EditPartner = () => {
 
     // Log formData entries
     for (let [key, value] of form.entries()) {
-      console.log(`${key}: ${value}`);
+      // console.log(`${key}: ${value}`);
     }
 
     await updatePartners({ id: id, data: form })
       .then((response) => {
-        // console.log(response?.error?.data?.error?.message);
+        // // console.log(response?.error?.data?.error?.message);
         if (response?.data?.statusCode === 200) {
           setIsLoadingEdit(false);
           toast({
@@ -128,14 +130,14 @@ const EditPartner = () => {
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
       });
   };
 
-  console.log(errors);
+  // console.log(errors);
   if (isLoading) {
     return <FullscreenLoaders />;
   }
@@ -201,12 +203,24 @@ const EditPartner = () => {
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Description
             </FormLabel>
-            <Input
+            <Textarea
               {...register("description")}
               placeholder="Description"
               className="web-text-medium"
               size="sm"
-            />
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.description?.length > 230}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.description?.length > 230 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If description crosses 230 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.description?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}

src/Pages/Partners/Partner.jsx

@@ -53,10 +53,10 @@ const Partner = () => {
   const [deletePartners] = useDeletePartnersMutation();
   const [updatePartnerStatus] = useUpdatePartnersStatusMutation();
 
-  console.log(partners?.data?.data?.rows);
+  // console.log(partners?.data?.data?.rows);
 
   const filteredData = partners?.data?.data?.rows?.filter((item) => {
-    // console.log(item.description);
+    // // console.log(item.description);
     // Filter by name (case insensitive)
     const name = item.description;
     const searchLower = searchTerm.toLowerCase();
@@ -164,8 +164,8 @@ const Partner = () => {
   //     await deletePartners(communityId)
   //       .then((response) => {
   //         // Handle the response here
-  //         console.log("Mutation response:", response?.data?.statusCode);
-  //         console.log("Mutation response:", response?.data?.message);
+  //         // console.log("Mutation response:", response?.data?.statusCode);
+  //         // console.log("Mutation response:", response?.data?.message);
 
   //         if (response?.data?.statusCode === 201) {
   //           setDeleteIsLoading(false);
@@ -181,13 +181,13 @@ const Partner = () => {
   //         }
   //       })
   //       .catch((error) => {
-  //         console.error("Error creating community:", error);
+  //         // console.error("Error creating community:", error);
   //         setDeleteIsLoading(false);
   //         setDeleteAlert(false);
   //       });
   //   } catch (error) {
   //     // Handle errors
-  //     console.log("Error deleting community:", error);
+  //     // console.log("Error deleting community:", error);
   //   }
   // };
 
@@ -209,8 +209,8 @@ const Partner = () => {
       const response = await deletePartners(communityId);
 
       // Handle the response here
-      console.log("Mutation response:", response?.data?.statusCode);
-      console.log("Mutation response:", response?.data?.message);
+      // console.log("Mutation response:", response?.data?.statusCode);
+      // console.log("Mutation response:", response?.data?.message);
 
       if (response?.data?.statusCode === 200) {
         toast({
@@ -229,7 +229,7 @@ const Partner = () => {
         });
       }
     } catch (error) {
-      console.error("Error deleting community:", error);
+      // console.error("Error deleting community:", error);
       toast({
         render: () => (
           <ToastBox
@@ -249,7 +249,7 @@ const Partner = () => {
     try {
       await updatePartnerStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -264,11 +264,11 @@ const Partner = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
 

src/Pages/Partners/ViewPartner.jsx

@@ -19,8 +19,8 @@ const ViewPartner = () => {
   const { data, error, isLoading } = useGetPartnersByIdQuery(id);
   const viewPolicy = data?.data;
 
-  console.log(viewPolicy);
-  console.log(`https://rubix.betadelivery.com/${viewPolicy?.company_logo}`);
+  // console.log(viewPolicy);
+  // console.log(`https://rubix.betadelivery.com/${viewPolicy?.company_logo}`);
 
   if (isLoading) {
     return <FullscreenLoaders />;

src/Pages/Policy/AddPolicy.jsx

@@ -45,6 +45,7 @@ const AddPolicy = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     setValue: setYupFormValue,
     formState: { errors },
@@ -57,7 +58,7 @@ const AddPolicy = () => {
     },
   });
 
-  console.log(errors);
+  // console.log(errors);
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     setImageData(file);
@@ -82,7 +83,7 @@ const AddPolicy = () => {
         formData.append("banner_image", data?.image[0]);
       }
       // for (let [key, value] of formData.entries()) {
-      //   console.log(key, value);
+      //   // console.log(key, value);
       // }
       // Trigger the mutation
       createPolicy(formData)
@@ -125,13 +126,13 @@ const AddPolicy = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
@@ -199,7 +200,18 @@ const AddPolicy = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
+              minLength={4}
+              errorBorderColor="crimson"
+              isInvalid={watch()?.title?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If title crosses 50 characters it will cause problem in alignment
+              on website.you have entered {watch()?.title?.length} characters
+            </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}

src/Pages/Policy/EditPolicy.jsx

@@ -44,7 +44,7 @@ const EditPolicy = () => {
   const [updatePolicy] = useUpdatePolicyMutation();
   const [valueQuill, setValueQuill] = useState(data?.data?.content);
 
-  console.log(valueQuill);
+  // console.log(valueQuill);
 
   const {
     register,
@@ -62,7 +62,7 @@ const EditPolicy = () => {
   });
 
   const policyContent = data?.data;
-  // console.log(termContent);
+  // // console.log(termContent);
 
   useEffect(() => {
     if (data?.data) {
@@ -89,7 +89,7 @@ const EditPolicy = () => {
   };
 
   const onSubmit = async (data) => {
-    console.log(data);
+    // console.log(data);
 
     setIsLoadingEdit(true);
     const form = new FormData();
@@ -101,12 +101,12 @@ const EditPolicy = () => {
 
     // Log formData entries
     for (let [key, value] of form.entries()) {
-      console.log(`${key}: ${value}`);
+      // console.log(`${key}: ${value}`);
     }
 
     await updatePolicy({ id: id, data: form })
       .then((response) => {
-        // console.log(response?.error?.data?.error?.message);
+        // // console.log(response?.error?.data?.error?.message);
         if (response?.data?.statusCode === 200) {
           setIsLoadingEdit(false);
           toast({
@@ -128,14 +128,14 @@ const EditPolicy = () => {
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
       });
   };
 
-  console.log(errors);
+  // console.log(errors);
   if (isLoading) {
     return <FullscreenLoaders />;
   }

src/Pages/Policy/Policy.jsx

@@ -161,8 +161,8 @@ const Policy = () => {
       await deletePolicy(communityId)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -178,13 +178,13 @@ const Policy = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.log("Error deleting community:", error);
+      // console.log("Error deleting community:", error);
     }
   };
 
@@ -192,7 +192,7 @@ const Policy = () => {
     try {
       await updatePolicyStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -207,11 +207,11 @@ const Policy = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
 

src/Pages/Policy/ViewPolicy.jsx

@@ -16,8 +16,8 @@ const ViewPolicy = () => {
   const { data, error, isLoading } = useGetPolicyByIdQuery(id);
   const viewPolicy = data?.data;
 
-  console.log(viewPolicy?.banner_image);
-  console.log(`https://rubix.betadelivery.com/${viewPolicy?.banner_image}`);
+  // console.log(viewPolicy?.banner_image);
+  // console.log(`https://rubix.betadelivery.com/${viewPolicy?.banner_image}`);
 
   if (isLoading) {
     return <FullscreenLoaders />;

src/Pages/Terms/AddTerms.jsx

@@ -45,6 +45,7 @@ const AddTerms = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     setValue: setYupFormValue,
     formState: { errors },
@@ -57,7 +58,7 @@ const AddTerms = () => {
     },
   });
 
-  console.log(errors);
+  // console.log(errors);
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     setImageData(file);
@@ -82,7 +83,7 @@ const AddTerms = () => {
         formData.append("banner_image", data?.image[0]);
       }
       for (let [key, value] of formData.entries()) {
-        console.log(key, value);
+        // console.log(key, value);
       }
       // Trigger the mutation
       createTerms(formData)
@@ -125,13 +126,13 @@ const AddTerms = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
@@ -199,7 +200,18 @@ const AddTerms = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
-            />
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If title crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}

src/Pages/Terms/EditTerms.jsx

@@ -49,6 +49,7 @@ const EditTerms = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     formState: { errors },
     setValue,
@@ -61,10 +62,10 @@ const EditTerms = () => {
     },
   });
 
-  console.log("----------", data?.data?.banner_image);
+  // console.log("----------", data?.data?.banner_image);
 
   const termContent = data?.data;
-  // console.log(termContent);
+  // // console.log(termContent);
   const [valueQuill, setValueQuill] = useState(termContent?.content);
 
   useEffect(() => {
@@ -92,7 +93,7 @@ const EditTerms = () => {
   };
 
   const onSubmit = async (data) => {
-    console.log(data);
+    // console.log(data);
     setIsLoadingEdit(true);
     const form = new FormData();
     form.append("title", data?.title);
@@ -103,12 +104,12 @@ const EditTerms = () => {
 
     // Log formData entries
     for (let [key, value] of form.entries()) {
-      console.log(`${key}: ${value}`);
+      // console.log(`${key}: ${value}`);
     }
 
     await updateTerms({ id: id, data: form })
       .then((response) => {
-        // console.log(response?.error?.data?.error?.message);
+        // // console.log(response?.error?.data?.error?.message);
         if (response?.data?.statusCode === 200) {
           setIsLoadingEdit(false);
           toast({
@@ -130,14 +131,14 @@ const EditTerms = () => {
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
       });
   };
 
-  console.log(errors);
+  // console.log(errors);
   if (isLoading) {
     return <FullscreenLoaders />;
   }
@@ -208,7 +209,18 @@ const EditTerms = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
-            />
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If title crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}

src/Pages/Terms/Terms.jsx

@@ -163,8 +163,8 @@ const Terms = () => {
       await deletePolicy(communityId)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -180,13 +180,13 @@ const Terms = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.log("Error deleting community:", error);
+      // console.log("Error deleting community:", error);
     }
   };
 
@@ -194,7 +194,7 @@ const Terms = () => {
     try {
       await updateTermsStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -209,11 +209,11 @@ const Terms = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
 
@@ -241,7 +241,7 @@ const Terms = () => {
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete Terms?"}
+        message={"Are you sure you want to delete Terms and condition?"}
         isLoading={deleteIsLoading}
       />
     </>

src/Pages/Terms/ViewTerms.jsx

@@ -16,8 +16,8 @@ const ViewTerms = () => {
   const { data, error, isLoading } = useGetTermsByIdQuery(id);
   const viewTerms = data?.data;
 
-  console.log(viewTerms?.banner_image);
-  console.log(`https://rubix.betadelivery.com/${viewTerms?.banner_image}`);
+  // console.log(viewTerms?.banner_image);
+  // console.log(`https://rubix.betadelivery.com/${viewTerms?.banner_image}`);
 
   if (isLoading) {
     return <FullscreenLoaders />;

src/Pages/Usecase/AddUseCase.jsx

@@ -63,6 +63,7 @@ const AddUseCase = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     setValue: setUseCaseValue,
     formState: { errors },
@@ -71,13 +72,13 @@ const AddUseCase = () => {
   });
 
 
-  console.log(errors);
+  // console.log(errors);
 
   const onSubmit = async (data) => {
     setIsLoading(true);
     setUseCaseValue("content", value);
-    console.log(data);
-    console.log(data);
+    // console.log(data);
+    // console.log(data);
 
     const formData = new FormData();
 
@@ -94,7 +95,7 @@ const AddUseCase = () => {
       formData.append("icon", data.icon[0]);
     }
 
-    console.log(data.attachment);
+    // console.log(data.attachment);
 
 
 
@@ -109,7 +110,7 @@ const AddUseCase = () => {
 
     // Log formData entries
     // for (let [key, value] of formData.entries()) {
-    //   console.log(`${key}: ${value}`);
+    //   // console.log(`${key}: ${value}`);
     // }
 
     try {
@@ -117,8 +118,8 @@ const AddUseCase = () => {
       createUsecase(formData)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response);
-          console.log("Mutation response:", response?.data?.message);
+          // console.log("Mutation response:", response);
+          // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 200) {
             setIsLoading(false);
@@ -134,7 +135,7 @@ const AddUseCase = () => {
             setIsLoading(false)
             navigate("/usecase");
           } else if(response?.error?.status === 500){
-            console.log(response?.error?.data?.error?.message);
+            // console.log(response?.error?.data?.error?.message);
             setIsLoading(false);
             toast({
               render: () => (
@@ -149,13 +150,13 @@ const AddUseCase = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
@@ -287,8 +288,19 @@ const AddUseCase = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
-              maxLength={24}
-            />
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If name crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -545,7 +557,7 @@ const AddUseCase = () => {
               className="web-text-medium form-control rounded-1"
               size="sm"
               multiple={true}
-              // onChange={(e)=> console.log(e.target.value)}
+              // onChange={(e)=> // console.log(e.target.value)}
             />
             <FormHelperText className="web-text-small">
             You can select multiple documents using <span className="text-dark">

src/Pages/Usecase/EditUseCase.jsx

@@ -59,6 +59,7 @@ const EditUseCase = () => {
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     formState: { errors },
     setValue,
@@ -112,9 +113,9 @@ const EditUseCase = () => {
       updateBlog({ id: id, data: formData })
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
-          console.log(response);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
+          // console.log(response);
 
           if (response?.data?.statusCode === 200) {
             setIsLoading01(false);
@@ -142,13 +143,13 @@ const EditUseCase = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading01(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
     }
   };
 
@@ -167,7 +168,7 @@ const EditUseCase = () => {
   const handleImageChangeLarge = (e) => {
     const file = e.target.files[0];
     setLargeImageData(file);
-    console.log(largeImageData);
+    // console.log(largeImageData);
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
@@ -290,8 +291,19 @@ const EditUseCase = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
-              maxLength={24}
-            />
+              minLength={4}
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If title crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -319,9 +331,9 @@ const EditUseCase = () => {
                   ? "red"
                   : metaDescription.length > 100
                   ? "crimson"
-                  : ""
+                  : "gray.500"
               }
-              fontWeight={metaDescription.length > 160 ? "bold" : ""}
+          
               className="web-text-small"
             >
               If description crosses 160 characters it will cause problem in SEO
@@ -546,7 +558,6 @@ const EditUseCase = () => {
               className="web-text-medium form-control rounded-1"
               size="sm"
               multiple={true}
-              onChange={() => console.log(e.target.value)}
             />
             <FormHelperText className="web-text-small">
               You can select multiple documents using{" "}

src/Pages/Usecase/Usecase.jsx

@@ -65,8 +65,8 @@ const Usecase = () => {
       await deleteUsecase(id)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -74,13 +74,13 @@ const Usecase = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error deleting community:", error);
+      // console.error("Error deleting community:", error);
     }
   };
 
@@ -101,11 +101,11 @@ const Usecase = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
   // ====================================================[Table Filter]================================================================
@@ -259,7 +259,7 @@ const Usecase = () => {
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete video?"}
+        message={"Are you sure you want to delete usecase?"}
         isLoading={deleteIsLoading}
       />
     </>

src/Pages/Videos/AddVideos.jsx

@@ -25,10 +25,13 @@ const AddVideos = () => {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(addVideos),
   });
+  
+  const formData = watch();
 
 
   const handleImageChange = (e) => {
@@ -59,7 +62,7 @@ const AddVideos = () => {
       }
 
       for (const [key, value] of formData.entries()) {
-        console.log(`${key}: ${value}`);
+        // console.log(`${key}: ${value}`);
       }
       // Trigger the mutation
       createVideos(formData)
@@ -84,16 +87,16 @@ const AddVideos = () => {
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
-    console.log(data);
+    // console.log(data);
   };
 
 
@@ -176,7 +179,18 @@ const AddVideos = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={formData?.title?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.title?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If title crosses 50 characters it will cause problem in
+              alignment on website.you have entered {formData?.title?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -195,7 +209,18 @@ const AddVideos = () => {
               placeholder="Description"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={formData?.description?.length > 230}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.description?.length > 230 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If description crosses 230 characters it will cause problem in
+              alignment on website.you have entered {formData?.description?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.description.message}
@@ -215,6 +240,9 @@ const AddVideos = () => {
               size="sm"
               type="text"
             />
+            <FormHelperText className="web-text-small">
+              Please enter duration Hrs:Min:Sec format.
+            </FormHelperText>
             {errors.duration && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.duration.message}
@@ -235,7 +263,7 @@ const AddVideos = () => {
               maxLength={90}
             />
             <FormHelperText className="web-text-small">
-              Please enter duration Hrs:Min:Sec format.
+            Please enter the embedded youtube Url.
             </FormHelperText>
             {errors.embeddedCode && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">

src/Pages/Videos/EditVideos.jsx

@@ -59,6 +59,8 @@ const EditVideos = () => {
     },
   });
 
+  const formData = watch()
+
   useEffect(() => {
     if (data?.data?.data) {
       setSelectedImage(
@@ -97,8 +99,8 @@ const EditVideos = () => {
     await updateVideos({ id: id, data: form })
       .then((response) => {
         // Handle the response here
-        console.log("Mutation response:", response?.data?.statusCode);
-        console.log("Mutation response:", response?.data?.message);
+        // // console.log("Mutation response:", response?.data?.statusCode);
+        // // console.log("Mutation response:", response?.data?.message);
 
         if (response?.data?.statusCode === 201) {
           setIsLoadingEdit(false);
@@ -113,7 +115,7 @@ const EditVideos = () => {
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
@@ -232,7 +234,18 @@ const EditVideos = () => {
               name="title"
               type="text"
               id="title"
+              errorBorderColor="crimson"
+              isInvalid={formData?.title?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.title?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If title crosses 50 characters it will cause problem in
+              alignment on website.you have entered {formData?.title?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -244,7 +257,7 @@ const EditVideos = () => {
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Description
             </FormLabel>
-            <Input
+            <Textarea
               {...register("description")}
               placeholder="Name"
               className="web-text-medium"
@@ -252,7 +265,18 @@ const EditVideos = () => {
               name="description"
               type="text"
               id="description"
+              errorBorderColor="crimson"
+              isInvalid={formData?.description?.length > 230}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={formData?.description?.length > 230 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If description crosses 230 characters it will cause problem in
+              alignment on website.you have entered {formData?.description?.length}{" "}
+              characters
+            </FormHelperText>
             {errors.description && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " />{" "}

src/Pages/Videos/Videos.jsx

@@ -101,7 +101,7 @@ const Videos = () => {
       ),
       Duration: (
         <Text as={"span"} isTruncated={true}>
-          {item?.duration} min
+          {item?.duration} sec
         </Text>
       ),
       Active: (
@@ -155,8 +155,8 @@ const Videos = () => {
       await deleteVideos(communityId)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -172,13 +172,13 @@ const Videos = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.log("Error deleting community:", error);
+      // console.log("Error deleting community:", error);
     }
   };
 
@@ -203,11 +203,11 @@ const Videos = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
 

src/Pages/Videos/ViewVideos.jsx

@@ -12,7 +12,7 @@ const ViewVideos = () => {
   const navigate = useNavigate();
   const { data, error, isLoading } = useGetVideosByIdQuery(id);
   const videos = data?.data?.data;
-  console.log(videos);
+  // console.log(videos);
 
   if (isLoading) {
     return <FullscreenLoaders />;

src/Pages/Whitepapers/AddWhitepapers.jsx

@@ -1,38 +1,48 @@
-import { Box, Button, Divider, FormControl, FormHelperText, FormLabel, Heading, Image, Input, Stack, useToast } from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { OPACITY_ON_LOAD } from '../../Layout/animations'
-import Header from '../../Components/Header'
-import { useNavigate } from 'react-router-dom'
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Heading,
+  Image,
+  Input,
+  Stack,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import Header from "../../Components/Header";
+import { useNavigate } from "react-router-dom";
 import fallbackImage from "../../assets/ultp-fallback-img.webp";
-import { addWhitePapers } from '../../Validations/Validations'
-import { TiWarning } from 'react-icons/ti'
+import { addWhitePapers } from "../../Validations/Validations";
+import { TiWarning } from "react-icons/ti";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
-import { motion } from 'framer-motion'
-import Loader01 from '../../Components/Loaders/Loader01'
-import { useCreateWhitepaperMutation } from '../../Services/api.service'
-import ToastBox from '../../Components/ToastBox'
+import { motion } from "framer-motion";
+import Loader01 from "../../Components/Loaders/Loader01";
+import { useCreateWhitepaperMutation } from "../../Services/api.service";
+import ToastBox from "../../Components/ToastBox";
 
 const AddWhitepapers = () => {
-    const toast = useToast();
-    const navigate = useNavigate();
-    const [isLoading, setIsLoading] = useState(false);
-    const [selectedImage, setSelectedImage] = useState(fallbackImage);
-    const [ imageData, setImageData ] = useState(null)
-    
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(fallbackImage);
+  const [imageData, setImageData] = useState(null);
+
   const [createWhitepaper] = useCreateWhitepaperMutation();
 
-    const {
-        register,
-        handleSubmit,
-        reset,
-        formState: { errors },
-      } = useForm({
-        resolver: yupResolver(addWhitePapers),
-      });
-
-
-      
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addWhitePapers),
+  });
 
   const handleImageChange = (e) => {
     const file = e.target.files[0];
@@ -66,7 +76,10 @@ const AddWhitepapers = () => {
             setIsLoading(false);
             toast({
               render: () => (
-                <ToastBox status={"success"} message={response?.data?.message} />
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
               ),
             });
             reset();
@@ -75,25 +88,27 @@ const AddWhitepapers = () => {
             setIsLoading(false);
             toast({
               render: () => (
-                <ToastBox status={"success"} message={response?.data?.message} />
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
               ),
             });
           }
         })
         .catch((error) => {
           // Handle errors
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setIsLoading(false);
           // Handle error notification if needed
         });
     } catch (error) {
       // Handle errors
-      console.error("Error creating community:", error);
+      // console.error("Error creating community:", error);
       setIsLoading(false);
     }
   };
 
-
   return (
     <Box
       {...OPACITY_ON_LOAD}
@@ -103,7 +118,6 @@ const AddWhitepapers = () => {
       display={"flex"}
       flexDirection={"column"}
     >
-        
       <Header title={"WhitePaper"} />
 
       <Box className="d-flex">
@@ -121,7 +135,8 @@ const AddWhitepapers = () => {
             Whitepaper Banner image
           </span>
           <span className="web-text-medium text-secondary mb-4">
-            Below is the whitepaper Banner image that will be whitepaper on the community page.
+            Below is the whitepaper Banner image that will be whitepaper on the
+            community page.
           </span>
 
           <Box
@@ -165,8 +180,6 @@ const AddWhitepapers = () => {
           onSubmit={handleSubmit(onSubmit)}
           className="col-7 pt-4 mb-3  overflow-auto p-4"
         >
-
-            
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Title
@@ -176,7 +189,17 @@ const AddWhitepapers = () => {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
+              errorBorderColor="crimson"
+              isInvalid={watch()?.title?.length > 50}
+              // maxLength={51}
             />
+            <FormHelperText
+              color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+              className="web-text-small"
+            >
+              If title crosses 50 characters it will cause problem in alignment
+              on website.you have entered {watch()?.title?.length} characters
+            </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}
@@ -184,28 +207,24 @@ const AddWhitepapers = () => {
             )}
           </FormControl>
 
-
-          
-            
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Document
             </FormLabel>
             <input
-                type='file'
+              type="file"
               {...register("document")}
               className="web-text-medium form-control rounded-1"
               size="sm"
             />
             {errors.document && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " /> {errors.document.message}
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.document.message}
               </span>
             )}
           </FormControl>
 
-
-          
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Banner image
@@ -289,8 +308,7 @@ const AddWhitepapers = () => {
 
             {errors.image && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-                <TiWarning className="fw-bold fs-5 " />{" "}
-                {errors.image.message}
+                <TiWarning className="fw-bold fs-5 " /> {errors.image.message}
               </span>
             )}
             <FormHelperText className="web-text-small">
@@ -298,9 +316,6 @@ const AddWhitepapers = () => {
             </FormHelperText>
           </FormControl>
 
-
-
-          
           <Box className=" d-flex justify-content-end mb-5">
             <Button
               isLoading={isLoading}
@@ -311,19 +326,16 @@ const AddWhitepapers = () => {
                 backgroundColor: "purple.800",
               }}
               type="submit"
-              rounded={'sm'}
-
+              rounded={"sm"}
               size="sm"
             >
               Create
             </Button>
           </Box>
-
         </form>
-        
-        </Box>
+      </Box>
     </Box>
-  )
-}
+  );
+};
 
-export default AddWhitepapers
+export default AddWhitepapers;

src/Pages/Whitepapers/EditWhitepaper.jsx

@@ -47,6 +47,7 @@ const EditWhitepaper = () => {
     register,
     handleSubmit,
     reset,
+    watch,
     formState: { errors },
     setValue,
   } = useForm({
@@ -81,7 +82,7 @@ const EditWhitepaper = () => {
   };
 
   const onSubmit = async (data) => {
-    console.log(data);
+    // console.log(data);
     setIsLoadingEdit(true);
     const form = new FormData();
     form.append("title", data?.title);
@@ -93,7 +94,7 @@ const EditWhitepaper = () => {
     }
 // Log formData entries
 for (let [key, value] of form.entries()) {
-  console.log(`${key}: ${value}`);
+  // console.log(`${key}: ${value}`);
 }
 
     await updateWhitepaper({ id: id, data: form })
@@ -110,7 +111,7 @@ for (let [key, value] of form.entries()) {
         }
       })
       .catch((error) => {
-        console.error("Error creating community:", error);
+        // console.error("Error creating community:", error);
         setIsLoadingEdit(false);
         // setDeleteIsLoading(false);
         // setDeleteAlert(false);
@@ -204,7 +205,18 @@ for (let [key, value] of form.entries()) {
               placeholder="Title"
               className="web-text-medium"
               size="sm"
-            />
+                  errorBorderColor="crimson"
+                  isInvalid={watch()?.title?.length > 50}
+                  // maxLength={51}
+                />
+                <FormHelperText
+                  color={watch()?.title?.length > 50 ? "red" : "gray.500"}
+                  className="web-text-small"
+                >
+                  If title crosses 50 characters it will cause problem in
+                  alignment on website.you have entered {watch()?.title?.length}{" "}
+                  characters
+                </FormHelperText>
             {errors.title && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
                 <TiWarning className="fw-bold fs-5 " /> {errors.title.message}

src/Pages/Whitepapers/ViewWhitePaper.jsx

@@ -15,7 +15,7 @@ const ViewWhitePaper = () => {
   const navigate = useNavigate();
   const { data, error, isLoading } = useGetWhitepaperByIdQuery(id);
   const whitepaper = data?.data?.data;
-  console.log(whitepaper?.document);
+  // console.log(whitepaper?.document);
 
   if (isLoading) {
     return <FullscreenLoaders />;

src/Pages/Whitepapers/Whitepapers.jsx

@@ -162,8 +162,8 @@ const Whitepapers = () => {
       await deleteWhitepaper(communityId)
         .then((response) => {
           // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
+          // // console.log("Mutation response:", response?.data?.statusCode);
+          // // console.log("Mutation response:", response?.data?.message);
 
           if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
@@ -179,13 +179,13 @@ const Whitepapers = () => {
           }
         })
         .catch((error) => {
-          console.error("Error creating community:", error);
+          // console.error("Error creating community:", error);
           setDeleteIsLoading(false);
           setDeleteAlert(false);
         });
     } catch (error) {
       // Handle errors
-      console.log("Error deleting community:", error);
+      // console.log("Error deleting community:", error);
     }
   };
 
@@ -193,7 +193,7 @@ const Whitepapers = () => {
     try {
       await updateWhitepaperStatus({ id })
         .then((response) => {
-          console.log(response?.data);
+          // console.log(response?.data);
           if (response?.data?.statusCode === 201) {
             toast({
               render: () => (
@@ -208,11 +208,11 @@ const Whitepapers = () => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          // console.log(error);
         });
     } catch (error) {
       // Handle errors
-      console.error("Error updating community status:", error);
+      // console.error("Error updating community status:", error);
     }
   };
 
@@ -241,7 +241,7 @@ const Whitepapers = () => {
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete video?"}
+        message={"Are you sure you want to delete whitepaper?"}
         isLoading={deleteIsLoading}
       />
     </>

src/Redux/Store.js

@@ -15,7 +15,7 @@ const rootReducer = combineReducers({
 const encryptor = encryptTransform({
   secretKey: "webStore",
   onError: function (error) {
-    console.log(error);
+    // console.log(error);
   },
 });
 

src/Validations/Validations.js

@@ -9,7 +9,9 @@ export const addCommunitySchema = Yup.object().shape({
   member_name: Yup.string().required("Name is required"),
   designation: Yup.string().required("Designation is required"),
   description: Yup.string().required("Description is required"),
-  linkedin: Yup.string().required("Linked In link is required"),
+  linkedin: Yup.string()
+    .url("Invalid LinkedIn URL")
+    .required("Linked In link is required"),
   profile_image: Yup.mixed()
     .test("required", "You need to provide a file", (files) => {
       // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
@@ -46,10 +48,10 @@ export const schemaEdit = Yup.object().shape({
 export const addCommunityBannerSchema = Yup.object().shape({
   heading: Yup.string().required("Name is required"),
   sub_heading: Yup.string().required("Designation is required"),
-  CTO_button_title: Yup.string().required("Description is required"), 
+  CTO_button_title: Yup.string().required("Description is required"),
   CTO_button_link: Yup.string()
-  .url("Invalid LinkedIn URL")
-  .required("LinkedIn is required"),
+    .url("Invalid LinkedIn URL")
+    .required("LinkedIn is required"),
   banner_image: Yup.mixed()
     .test("required", "You need to provide a file", (files) => {
       // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
@@ -90,70 +92,133 @@ export const addBlogSchema = Yup.object().shape({
   meta_description: Yup.string().required("Description is required"),
   content: Yup.string(),
   summary: Yup.string().required("Summary is required"),
-  profile_image:Yup.mixed()
-  .test("required", "You need to provide a file", (files) => {
-    // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
-    if (files) return true;
-    return false;
-  })
-  .test(
-    "fileSize",
-    " The maximum size of profile picture is 10MB.",
-    (files) => {
-      //if u want to allow only certain file sizes
-      try {
-        if (files.length !== 0) {
-          return files[0].size <= 10000000;
-        }
-        return true;
-      } catch (error) {
-        return false;
-      }
-    }
-  )
-  .test("file_formate", "Image file has unsupported format.", (files) => {
-    // // console.log(files[0].type)
-
-    const SUPPORTED_FORMATS = [
-      "image/jpeg",
-      "image/jpg",
-      "image/png",
-      // "image/gif",
-      "image/tiff",
-      "image/svg+xml",
-    ];
-    try {
-      if (files.length !== 0) {
-        return files && SUPPORTED_FORMATS.includes(files[0].type);
-      }
-      return true;
-    } catch (error) {
+  profile_image: Yup.mixed()
+    .test("required", "You need to provide a file", (files) => {
+      // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
+      if (files) return true;
       return false;
-    }
-  })
-  .optional(),
-  content_image_large:Yup.mixed()
-  .test("required", "You need to provide a file", (files) => {
-    // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
-    if (files) return true;
-    return false;
-  })
-  .test(
-    "fileSize",
-    " The maximum size of profile picture is 10MB.",
-    (files) => {
-      //if u want to allow only certain file sizes
+    })
+    .test(
+      "fileSize",
+      " The maximum size of profile picture is 10MB.",
+      (files) => {
+        //if u want to allow only certain file sizes
+        try {
+          if (files.length !== 0) {
+            return files[0].size <= 10000000;
+          }
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+    )
+    .test("file_formate", "Image file has unsupported format.", (files) => {
+      // // // console.log(files[0].type)
+
+      const SUPPORTED_FORMATS = [
+        "image/jpeg",
+        "image/jpg",
+        "image/png",
+        // "image/gif",
+        "image/tiff",
+        "image/svg+xml",
+      ];
       try {
         if (files.length !== 0) {
-          return files[0].size <= 10000000;
+          return files && SUPPORTED_FORMATS.includes(files[0].type);
         }
         return true;
       } catch (error) {
         return false;
       }
-    }
-  )
-  .optional(),
+    })
+    .optional(),
+  content_image_large: Yup.mixed()
+    .test("required", "You need to provide a file", (files) => {
+      // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
+      if (files) return true;
+      return false;
+    })
+    .test(
+      "fileSize",
+      " The maximum size of profile picture is 10MB.",
+      (files) => {
+        //if u want to allow only certain file sizes
+        try {
+          if (files.length !== 0) {
+            return files[0].size <= 10000000;
+          }
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+    )
+    .optional(),
+});
+
+export const editBlogSchema = Yup.object().shape({
+  author_name: Yup.string().required("Author is required"),
+  author_designation: Yup.string().required("Author designation is required"),
+  title: Yup.string().required("Title is required"),
+  meta_description: Yup.string().required("Description is required"),
+  content: Yup.string(),
+  summary: Yup.string().required("Summary is required"),
+  profile_image: Yup.mixed()
+    .test(
+      "fileSize",
+      " The maximum size of profile picture is 10MB.",
+      (files) => {
+        //if u want to allow only certain file sizes
+        try {
+          if (files.length !== 0) {
+            return files[0].size <= 10000000;
+          }
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+    )
+    .test("file_formate", "Image file has unsupported format.", (files) => {
+      // // // console.log(files[0].type)
+
+      const SUPPORTED_FORMATS = [
+        "image/jpeg",
+        "image/jpg",
+        "image/png",
+        // "image/gif",
+        "image/tiff",
+        "image/svg+xml",
+      ];
+      try {
+        if (files.length !== 0) {
+          return files && SUPPORTED_FORMATS.includes(files[0].type);
+        }
+        return true;
+      } catch (error) {
+        return false;
+      }
+    })
+    .optional(),
+  content_image_large: Yup.mixed()
+    .test(
+      "fileSize",
+      " The maximum size of profile picture is 10MB.",
+      (files) => {
+        //if u want to allow only certain file sizes
+        try {
+          if (files.length !== 0) {
+            return files[0].size <= 10000000;
+          }
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+    )
+    .optional(),
 });
 
 export const addNews = Yup.object().shape({
@@ -183,7 +248,7 @@ export const addNews = Yup.object().shape({
       }
     )
     // .test("file_formate", "Image file has unsupported format.", (files) => {
-    //   // // console.log(files[0].type)
+    //   // // // console.log(files[0].type)
 
     //   const SUPPORTED_FORMATS = [
     //     "image/jpeg",
@@ -194,7 +259,7 @@ export const addNews = Yup.object().shape({
     //   ];
     //   try {
     //     if (files.length !== 0) {
-    //       
+    //
     //       return files && SUPPORTED_FORMATS.includes(files[0].type);
     //     }
     //     return true;
@@ -232,7 +297,7 @@ export const editNews = Yup.object().shape({
     //   }
     // )
     // .test("file_formate", "Image file has unsupported format.", (files) => {
-    //   // // console.log(files[0].type)
+    //   // // // console.log(files[0].type)
 
     //   const SUPPORTED_FORMATS = [
     //     "image/jpeg",
@@ -243,7 +308,7 @@ export const editNews = Yup.object().shape({
     //   ];
     //   try {
     //     if (files.length !== 0) {
-    //       
+    //
     //       return files && SUPPORTED_FORMATS.includes(files[0].type);
     //     }
     //     return true;
@@ -288,7 +353,7 @@ export const addEvents = Yup.object().shape({
     //   }
     // )
     // .test("file_formate", "Image file has unsupported format.", (files) => {
-    //   // // console.log(files[0].type)
+    //   // // // console.log(files[0].type)
 
     //   const SUPPORTED_FORMATS = [
     //     "image/jpeg",
@@ -299,7 +364,7 @@ export const addEvents = Yup.object().shape({
     //   ];
     //   try {
     //     if (files.length !== 0) {
-    //       
+    //
     //       return files && SUPPORTED_FORMATS.includes(files[0].type);
     //     }
     //     return true;
@@ -334,7 +399,7 @@ export const addWhitePapers = Yup.object().shape({
       }
     )
     // .test("file_formate", "Image file has unsupported format.", (files) => {
-    //   // // console.log(files[0].type)
+    //   // // // console.log(files[0].type)
 
     //   const SUPPORTED_FORMATS = [
     //     "image/jpeg",
@@ -346,7 +411,7 @@ export const addWhitePapers = Yup.object().shape({
     //   ];
     //   try {
     //     if (files.length !== 0) {
-    //       
+    //
     //       return files && SUPPORTED_FORMATS.includes(files[0].type);
     //     }
     //     return true;
@@ -378,7 +443,7 @@ export const addWhitePapers = Yup.object().shape({
     )
     .optional(),
   // .test("file_formate", "Image file has unsupported format.", (files) => {
-  //   // // console.log(files[0].type)
+  //   // // // console.log(files[0].type)
 
   //   const SUPPORTED_FORMATS = [
   //     "image/jpeg",
@@ -390,7 +455,7 @@ export const addWhitePapers = Yup.object().shape({
   //   ];
   //   try {
   //     if (files.length !== 0) {
-  //       
+  //
   //       return files && SUPPORTED_FORMATS.includes(files[0].type);
   //     }
   //     return true;
@@ -409,8 +474,7 @@ export const addWhitePapers = Yup.object().shape({
 
 export const addVideos = Yup.object().shape({
   title: Yup.string().required("Name is required"),
-  thumbnail: Yup
-    .mixed()
+  thumbnail: Yup.mixed()
     .required("Thumbnail is required")
     .test("required", "You need to provide a file", (files) => {
       // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
@@ -437,15 +501,12 @@ export const addVideos = Yup.object().shape({
   embeddedCode: Yup.string().required("LinkedIn is required"),
 });
 
-
-
 export const addUsecase = Yup.object().shape({
   title: Yup.string().required("Name is required"),
   meta_description: Yup.string().required("Description is required"),
   attachment: Yup.mixed(),
   content: Yup.string(),
-  banner_image: Yup
-    .mixed()
+  banner_image: Yup.mixed()
     // .required("Thumbnail is required")
     .test("required", "You need to provide a file", (files) => {
       // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
@@ -466,9 +527,9 @@ export const addUsecase = Yup.object().shape({
           return false;
         }
       }
-    ).optional(),
-  icon: Yup
-    .mixed()
+    )
+    .optional(),
+  icon: Yup.mixed()
     // .required("Icon is required")
     .test("required", "You need to provide a file", (files) => {
       if (files) return true;
@@ -487,18 +548,16 @@ export const addUsecase = Yup.object().shape({
           return false;
         }
       }
-    ).optional(),
-
+    )
+    .optional(),
 });
 
-
 export const editUsecase = Yup.object().shape({
   title: Yup.string().required("Name is required"),
   meta_description: Yup.string().required("Description is required"),
   attachment: Yup.mixed(),
   content: Yup.string(),
-  banner_image: Yup
-    .mixed()
+  banner_image: Yup.mixed()
     // .required("Thumbnail is required")
     .test("required", "You need to provide a file", (files) => {
       // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
@@ -519,9 +578,9 @@ export const editUsecase = Yup.object().shape({
           return false;
         }
       }
-    ).optional(),
-  icon: Yup
-    .mixed()
+    )
+    .optional(),
+  icon: Yup.mixed()
     // .required("Icon is required")
     .test("required", "You need to provide a file", (files) => {
       if (files) return true;
@@ -540,11 +599,10 @@ export const editUsecase = Yup.object().shape({
           return false;
         }
       }
-    ).optional(),
-
+    )
+    .optional(),
 });
 
-
 export const addTerms = Yup.object().shape({
   title: Yup.string().required("title is required"),
   content: Yup.string(),
@@ -571,7 +629,7 @@ export const addTerms = Yup.object().shape({
     // )
     .optional(),
   // .test("file_formate", "Image file has unsupported format.", (files) => {
-  //   // // console.log(files[0].type)
+  //   // // // console.log(files[0].type)
 
   //   const SUPPORTED_FORMATS = [
   //     "image/jpeg",
@@ -583,7 +641,7 @@ export const addTerms = Yup.object().shape({
   //   ];
   //   try {
   //     if (files.length !== 0) {
-  //       
+  //
   //       return files && SUPPORTED_FORMATS.includes(files[0].type);
   //     }
   //     return true;
@@ -619,7 +677,7 @@ export const addPolicy = Yup.object().shape({
     // )
     .optional(),
   // .test("file_formate", "Image file has unsupported format.", (files) => {
-  //   // // console.log(files[0].type)
+  //   // // // console.log(files[0].type)
 
   //   const SUPPORTED_FORMATS = [
   //     "image/jpeg",
@@ -631,7 +689,7 @@ export const addPolicy = Yup.object().shape({
   //   ];
   //   try {
   //     if (files.length !== 0) {
-  //       
+  //
   //       return files && SUPPORTED_FORMATS.includes(files[0].type);
   //     }
   //     return true;
@@ -644,7 +702,8 @@ export const addPolicy = Yup.object().shape({
 export const addPartnerCard = Yup.object().shape({
   website_link: Yup.string().required("link is required"),
   description: Yup.string().required("description is required"),
-  banner_image: Yup.mixed().required("logo is required")
+  banner_image: Yup.mixed()
+    .required("logo is required")
     // .test("required", "You need to provide a file", (files) => {
     //   // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
     //   if (files) return true;
@@ -667,7 +726,7 @@ export const addPartnerCard = Yup.object().shape({
     // )
     .optional(),
   // .test("file_formate", "Image file has unsupported format.", (files) => {
-  //   // // console.log(files[0].type)
+  //   // // // console.log(files[0].type)
 
   //   const SUPPORTED_FORMATS = [
   //     "image/jpeg",
@@ -679,7 +738,7 @@ export const addPartnerCard = Yup.object().shape({
   //   ];
   //   try {
   //     if (files.length !== 0) {
-  //       
+  //
   //       return files && SUPPORTED_FORMATS.includes(files[0].type);
   //     }
   //     return true;
@@ -715,7 +774,7 @@ export const addFaq = Yup.object().shape({
     // )
     .optional(),
   // .test("file_formate", "Image file has unsupported format.", (files) => {
-  //   // // console.log(files[0].type)
+  //   // // // console.log(files[0].type)
 
   //   const SUPPORTED_FORMATS = [
   //     "image/jpeg",
@@ -727,7 +786,7 @@ export const addFaq = Yup.object().shape({
   //   ];
   //   try {
   //     if (files.length !== 0) {
-  //       
+  //
   //       return files && SUPPORTED_FORMATS.includes(files[0].type);
   //     }
   //     return true;
@@ -736,4 +795,3 @@ export const addFaq = Yup.object().shape({
   //   }
   // })
 });
-