banner done

src/Components/Banner/AddBanner.jsx

@@ -1,123 +1,124 @@
 import {
-    Box,
-    FormControl,
-    FormHelperText,
-    FormLabel,
-    Input,
-    Text,
-    Stack,
-    Textarea,
-    Heading,
-    Button,
-    useToast,
-    Divider,
-    Image,
-  } from "@chakra-ui/react";
-  import React, { useState } from "react";
-  import fallbackImage from "../../../assets/ultp-fallback-img.webp";
-  import { TiWarning } from "react-icons/ti";
-  
-  import { motion } from "framer-motion";
-  import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-  
-  import { yupResolver } from "@hookform/resolvers/yup";
-  import { useForm } from "react-hook-form";
-  import { addCommunityBannerSchema, addCommunitySchema } from "../../../Validations/Validations";
-  import {
-      useCreateCommunityBannerMutation,
-    useCreateCommunityMutation,
-    useGetCommunityQuery,
-  } from "../../../Services/api.service";
-  import { useNavigate } from "react-router-dom";
-  import Loader01 from "../../../Components/Loaders/Loader01";
-  
-  const AddBanner = () => {
-    const toast = useToast();
-    const navigate = useNavigate();
-    const getCommunityQuery = useGetCommunityQuery();
-    const [createCommunityBannerData] =   useCreateCommunityBannerMutation(); // Invoke the hook to get the mutation function
-    const [isLoading, setIsLoading] = useState(false);
-    const [selectedImage, setSelectedImage] = useState(fallbackImage);
-  
-    const {
-      register,
-      handleSubmit,
-      reset,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(addCommunityBannerSchema),
-    });
-  
-    const onSubmit = async (data) => {
-        console.log(data);
-      try {
-        setIsLoading(true);
-        const formData = new FormData();
-        formData.append("heading", data.heading);
-        formData.append("sub_heading", data.sub_heading);
-        formData.append("CTO_button_link", data.CTO_button_link);
-        formData.append("CTO_button_title", data.CTO_button_title);
-        if (data.banner_image[0]) {
-          formData.append("banner_image", data.banner_image[0]);
-        }
-        // Trigger the mutation
-        createCommunityBannerData(formData)
-          .then((response) => {
-            // Handle the response here
-            console.log("Mutation response:", response?.data?.statusCode);
-            console.log("Mutation response:", response?.data?.message);
-  
-            if (response?.data?.statusCode === 200) {
-              setIsLoading(false);
-              toast({
-                title: response?.data?.message,
-                status: "success",
-                isClosable: true,
-              });
-              reset();
-              navigate("/banner/banner-community");
-            }else if(response?.data?.statusCode === 500){
-                setIsLoading(false);
-                toast({
-                  title: response?.data?.message,
-                  status: "success",
-                  isClosable: true,
-                });
+  Box,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Stack,
+  Textarea,
+  Heading,
+  Button,
+  useToast,
+  Divider,
+  Image,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import fallbackImage from "../../assets/ultp-fallback-img.webp";
+import { TiWarning } from "react-icons/ti";
 
-            }
-          })
-          .catch((error) => {
-            // Handle errors
-            console.error("Error creating community:", error);
+import { motion } from "framer-motion";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import {
+  addCommunityBannerSchema,
+  addCommunitySchema,
+} from "../../Validations/Validations";
+import { useNavigate } from "react-router-dom";
+import Loader01 from "../../Components/Loaders/Loader01";
+import Header from "../Header";
+
+const AddBanner = ({ createApi, navigateLink, title }) => {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(fallbackImage);
+  const [largeImageData, setLargeImageData] = useState(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addCommunityBannerSchema),
+  });
+
+  const onSubmit = async (data) => {
+    console.log(data);
+    try {
+      setIsLoading(true);
+      const formData = new FormData();
+      formData.append("heading", data.heading);
+      formData.append("sub_heading", data.sub_heading);
+      formData.append("CTO_button_link", data.CTO_button_link);
+      formData.append("CTO_button_title", data.CTO_button_title);
+      if (data.banner_image[0]) {
+        formData.append("banner_image", data.banner_image[0]);
+      }
+      // Trigger the mutation
+      createApi(formData)
+        .then((response) => {
+          // Handle the response here
+          console.log("Mutation response:", response?.data?.statusCode);
+          console.log("Mutation response:", response?.data?.message);
+
+          if (response?.data?.statusCode === 200) {
             setIsLoading(false);
-            // Handle error notification if needed
-          });
-      } catch (error) {
-        // Handle errors
-        console.error("Error creating community:", error);
-        setIsLoading(false);
-      }
-    };
-  
-    const handleImageChange = (e) => {
-      const file = e.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          setSelectedImage(reader.result);
-        };
-        reader.readAsDataURL(file);
-      }
-    };
-  
-    return (
-      <Box
-        {...OPACITY_ON_LOAD}
-        w={"100%"}
-        h={"100vh"}
-        className="overflow-auto "
-        display={"flex"}
-      >
+            toast({
+              title: response?.data?.message,
+              status: "success",
+              isClosable: true,
+            });
+            reset();
+            navigate(navigateLink);
+          } else if (response?.data?.statusCode === 500) {
+            setIsLoading(false);
+            toast({
+              title: response?.data?.message,
+              status: "success",
+              isClosable: true,
+            });
+          }
+        })
+        .catch((error) => {
+          // Handle errors
+          console.error("Error creating community:", error);
+          setIsLoading(false);
+          // Handle error notification if needed
+        });
+    } catch (error) {
+      // Handle errors
+      console.error("Error creating community:", error);
+      setIsLoading(false);
+    }
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    setLargeImageData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <Box
+      {...OPACITY_ON_LOAD}
+      w={"100%"}
+      h={"100vh"}
+      className="overflow-auto "
+      display={"flex"}
+      flexDirection={"column"}
+    >
+      <Header title={title} />
+
+      <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">
             Banner Info
@@ -125,26 +126,40 @@ import {
           <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"
-            />
+
+          <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"
@@ -159,7 +174,7 @@ import {
             </Button>
           </Box>
         </Box>
-  
+
         <form
           onSubmit={handleSubmit(onSubmit)}
           className="col-7 pt-4 mb-3  overflow-auto p-4"
@@ -176,12 +191,11 @@ import {
             />
             {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.heading.message}
+                <TiWarning className="fw-bold fs-5 " /> {errors.heading.message}
               </span>
             )}
           </FormControl>
-  
+
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Sub Heading
@@ -199,7 +213,7 @@ import {
               </span>
             )}
           </FormControl>
-  
+
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
               Button title
@@ -214,7 +228,7 @@ import {
             <FormHelperText className="web-text-small">
               Maximum characters must be 100 characters.
             </FormHelperText>
-  
+
             {errors.CTO_button_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 " />{" "}
@@ -222,10 +236,10 @@ import {
               </span>
             )}
           </FormControl>
-  
+
           <FormControl isRequired className="mb-3">
             <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Button link
+              Button link
             </FormLabel>
             <Input
               {...register("CTO_button_link")}
@@ -238,17 +252,18 @@ import {
             </FormHelperText>
             {errors.CTO_button_link && (
               <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.CTO_button_link.message}
+                <TiWarning className="fw-bold fs-5 " />{" "}
+                {errors.CTO_button_link.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"
@@ -323,7 +338,7 @@ import {
                 />
               </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 " />{" "}
@@ -334,17 +349,18 @@ import {
               Maximum limit of image is 5mb.
             </FormHelperText>
           </FormControl>
-  
+
           <Box className=" d-flex justify-content-end mb-5">
             <Button
               isLoading={isLoading}
               spinner={<Loader01 />}
-              color={'whitesmoke'}
-              backgroundColor={'purple.700'}
+              color={"whitesmoke"}
+              backgroundColor={"purple.700"}
               _hover={{
                 backgroundColor: "purple.800",
               }}
               type="submit"
+              rounded={"sm"}
               size="sm"
             >
               Create
@@ -352,8 +368,8 @@ import {
           </Box>
         </form>
       </Box>
-    );
-  };
-  
-  export default AddBanner;
-  
+    </Box>
+  );
+};
+
+export default AddBanner;

src/Pages/Banners/Banner.jsx

@@ -1,68 +1,65 @@
-import { Box, Button, Divider, HStack, Skeleton, Text } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import React from "react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { Link } from "react-router-dom";
-import { AddIcon, ArrowForwardIcon } from "@chakra-ui/icons";
-import { useGetBuildBannerQuery, useGetCommunityBannerQuery, useGetLearnBannerQuery, useGetNewsBannerQuery } from "../../Services/api.service";
-import CommunityBannerCard from "../Community/CommunityBannerCard";
+import {
+  useGetBuildBannerQuery,
+  useGetCommunityBannerQuery,
+  useGetLearnBannerQuery,
+  useGetNewsBannerQuery,
+} from "../../Services/api.service";
 import Header from "../../Components/Header";
 import BannerStack from "../../Components/BannerStack";
 
 const Banner = () => {
   const communityBanner = useGetCommunityBannerQuery();
   const learnBanner = useGetLearnBannerQuery();
-  const buildBanner = useGetBuildBannerQuery()
-  const newsBanner = useGetNewsBannerQuery()
+  const buildBanner = useGetBuildBannerQuery();
+  const newsBanner = useGetNewsBannerQuery();
 
   return (
-    <Box
-      {...OPACITY_ON_LOAD}
-      overflowY={"scroll"}
-      height={"100vh"}
-    >
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
       <Header title={"👋🏻 Hi, developer admin"} />
       <BannerStack
-      stackTitle={"Community banner"}
-      viewAllLink={"/banner/banner-community"}
-      bannerIsLoading={communityBanner?.isLoading}
-      bannerArray={communityBanner?.data?.data?.rows?.slice(0, 3)}
-      // bannerArray={communityBanner?.data?.data?.rows?.filter(item => item?.status === true)}
-      viewBannerLink={'/banner/banner-community/view'}
+        stackTitle={"Community banner"}
+        viewAllLink={"/banner/banner-community"}
+        bannerIsLoading={communityBanner?.isLoading}
+        bannerArray={communityBanner?.data?.data?.rows?.slice(0, 3)}
+        // bannerArray={communityBanner?.data?.data?.rows?.filter(item => item?.status === true)}
+        viewBannerLink={"/banner/banner-community/view"}
       />
-      <Divider/>
+      <Divider />
       <BannerStack
-      stackTitle={"Learn banner"}
-      viewAllLink={"/banner/learn"}
-      bannerIsLoading={learnBanner?.isLoading}
-      bannerArray={learnBanner?.data?.data?.rows?.slice(0, 3)}
-      viewBannerLink={'/banner/learn/view'}
+        stackTitle={"Learn banner"}
+        viewAllLink={"/banner/learn"}
+        bannerIsLoading={learnBanner?.isLoading}
+        bannerArray={learnBanner?.data?.data?.rows?.slice(0, 3)}
+        viewBannerLink={"/banner/learn/view"}
       />
-      <Divider/>
+      <Divider />
       <BannerStack
-      stackTitle={"Build banner"}
-      viewAllLink={"/banner/build"}
-      bannerIsLoading={buildBanner?.isLoading}
-      bannerArray={buildBanner?.data?.data?.rows?.slice(0, 3)}
-      viewBannerLink={'/banner/build/view'}
+        stackTitle={"Build banner"}
+        viewAllLink={"/banner/build"}
+        bannerIsLoading={buildBanner?.isLoading}
+        bannerArray={buildBanner?.data?.data?.rows?.slice(0, 3)}
+        viewBannerLink={"/banner/build/view"}
       />
-      <Divider/>
+      <Divider />
       <BannerStack
-      stackTitle={"News banner"}
-      viewAllLink={"/banner/build"}
-      bannerIsLoading={newsBanner?.isLoading}
-      bannerArray={newsBanner?.data?.data?.rows?.slice(0, 3)}
-      viewBannerLink={'/banner/news/view'}
+        stackTitle={"News banner"}
+        viewAllLink={"/banner/news"}
+        bannerIsLoading={newsBanner?.isLoading}
+        bannerArray={newsBanner?.data?.data?.rows?.slice(0, 3)}
+        viewBannerLink={"/banner/news/view"}
+      />
+      <BannerStack
+        stackTitle={"Home banner"}
+        viewAllLink={"/banner/home"}
+        bannerIsLoading={newsBanner?.isLoading}
+        bannerArray={newsBanner?.data?.data?.rows?.slice(0, 3)}
+        viewBannerLink={"/banner/home/view"}
       />
     </Box>
   );
 };
 
 export default Banner;
-
-
-
-
-
-
-
-

src/Pages/Banners/BannerBuild/BannerBuild.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  useDeleteBuildBannerMutation,
+  useGetBuildBannerQuery,
+  useUpdateBuildBannerStatusMutation,
+} from "../../../Services/api.service";
+import BannerTable from "../../../Components/Banner/BannerTable";
+
+const BannerBuild = () => {
+  const buildBanner = useGetBuildBannerQuery();
+  const [deleteBuildBanner] = useDeleteBuildBannerMutation();
+  const [updateLearnBuildStatus] = useUpdateBuildBannerStatusMutation();
+
+  return (
+    <BannerTable
+      addLink={"/banner/build/add-banner"}
+      title={"Build Banner"}
+      deleteApi={deleteBuildBanner}
+      dataArray={buildBanner}
+      statusUpdateApi={updateLearnBuildStatus}
+    />
+  );
+};
+
+export default BannerBuild;

src/Pages/Banners/BannerBuild/BuildBannerAdd.jsx

@@ -0,0 +1,18 @@
+import AddBanner from "../../../Components/Banner/AddBanner";
+import {
+  useCreateBuildBannerMutation,
+  useCreateLearnBannerMutation,
+} from "../../../Services/api.service";
+
+const BuildBannerAdd = () => {
+  const [createBuildBannerData] = useCreateBuildBannerMutation();
+  return (
+    <AddBanner
+      title={"Build banner"}
+      navigateLink={"/banner/build"}
+      createApi={createBuildBannerData}
+    />
+  );
+};
+
+export default BuildBannerAdd;

src/Pages/Banners/BannerCommunity/BannerCommunityAdd.jsx

@@ -0,0 +1,16 @@
+import { useCreateCommunityBannerMutation } from "../../../Services/api.service";
+import AddBanner from "../../../Components/Banner/AddBanner";
+
+const BannerCommunityAdd = () => {
+  const [createCommunityBannerData] = useCreateCommunityBannerMutation();
+
+  return (
+    <AddBanner
+      title={"Learn banner"}
+      navigateLink={"/banner/banner-community"}
+      createApi={createCommunityBannerData}
+    />
+  );
+};
+
+export default BannerCommunityAdd;

src/Pages/Banners/BannerLearn/AddLearnBanner.jsx

@@ -1,359 +0,0 @@
-import {
-  Box,
-  FormControl,
-  FormHelperText,
-  FormLabel,
-  Input,
-  Text,
-  Stack,
-  Textarea,
-  Heading,
-  Button,
-  useToast,
-  Divider,
-  Image,
-} from "@chakra-ui/react";
-import React, { useState } from "react";
-import fallbackImage from "../../../assets/ultp-fallback-img.webp";
-import { TiWarning } from "react-icons/ti";
-
-import { motion } from "framer-motion";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useForm } from "react-hook-form";
-import { addCommunityBannerSchema, addCommunitySchema } from "../../../Validations/Validations";
-import {
-    useCreateCommunityBannerMutation,
-  useCreateCommunityMutation,
-  useCreateLearnBannerMutation,
-  useGetCommunityQuery,
-} from "../../../Services/api.service";
-import { useNavigate } from "react-router-dom";
-import Loader01 from "../../../Components/Loaders/Loader01";
-
-const AddLearnBanner = () => {
-  const toast = useToast();
-  const navigate = useNavigate();
-  const getCommunityQuery = useGetCommunityQuery();
-  const [createLearnBannerData] =   useCreateLearnBannerMutation(); // Invoke the hook to get the mutation function
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedImage, setSelectedImage] = useState(fallbackImage);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: yupResolver(addCommunityBannerSchema),
-  });
-
-  const onSubmit = async (data) => {
-      console.log(data);
-    try {
-      setIsLoading(true);
-      const formData = new FormData();
-      formData.append("heading", data.heading);
-      formData.append("sub_heading", data.sub_heading);
-      formData.append("CTO_button_link", data.CTO_button_link);
-      formData.append("CTO_button_title", data.CTO_button_title);
-      if (data.banner_image[0]) {
-        formData.append("banner_image", data.banner_image[0]);
-      }
-      // Trigger the mutation
-      createLearnBannerData(formData)
-        .then((response) => {
-          // Handle the response here
-          console.log("Mutation response:", response?.data?.statusCode);
-          console.log("Mutation response:", response?.data?.message);
-
-          if (response?.data?.statusCode === 200) {
-            setIsLoading(false);
-            toast({
-              title: response?.data?.message,
-              status: "success",
-              isClosable: true,
-            });
-            reset();
-            navigate("/banner/learn");
-          }else if(response?.data?.statusCode === 500){
-              setIsLoading(false);
-              toast({
-                title: response?.data?.message,
-                status: "success",
-                isClosable: true,
-              });
-
-          }
-        })
-        .catch((error) => {
-          // Handle errors
-          console.error("Error creating community:", error);
-          setIsLoading(false);
-          // Handle error notification if needed
-        });
-    } catch (error) {
-      // Handle errors
-      console.error("Error creating community:", error);
-      setIsLoading(false);
-    }
-  };
-
-  const handleImageChange = (e) => {
-    const file = e.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setSelectedImage(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  return (
-    <Box
-      {...OPACITY_ON_LOAD}
-      w={"100%"}
-      h={"100vh"}
-      className="overflow-auto "
-      display={"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>
-
-        <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"
-          />
-          <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">
-            Heading
-          </FormLabel>
-          <Input
-            {...register("heading")}
-            placeholder="Heading"
-            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.heading.message}
-            </span>
-          )}
-        </FormControl>
-
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Sub Heading
-          </FormLabel>
-          <Input
-            {...register("sub_heading")}
-            placeholder="Sub Heading"
-            className="web-text-medium"
-            size="sm"
-          />
-          {errors.sub_heading && (
-            <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.sub_heading.message}
-            </span>
-          )}
-        </FormControl>
-
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-            Button title
-          </FormLabel>
-          <Input
-            {...register("CTO_button_title")}
-            placeholder="Button title"
-            className="web-text-medium"
-            size="sm"
-            maxLength={90}
-          />
-          <FormHelperText className="web-text-small">
-            Maximum characters must be 100 characters.
-          </FormHelperText>
-
-          {errors.CTO_button_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.CTO_button_title.message}
-            </span>
-          )}
-        </FormControl>
-
-        <FormControl isRequired className="mb-3">
-          <FormLabel className="web-text-large fw-bold rubix-text-dark">
-          Button link
-          </FormLabel>
-          <Input
-            {...register("CTO_button_link")}
-            placeholder="Button link"
-            className="web-text-medium"
-            size="sm"
-          />
-          <FormHelperText className="web-text-small">
-            Please share proper linked in link here.
-          </FormHelperText>
-          {errors.CTO_button_link && (
-            <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.CTO_button_link.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 5mb.
-          </FormHelperText>
-        </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>
-        </Box>
-      </form>
-    </Box>
-  );
-};
-
-export default AddLearnBanner;

src/Pages/Banners/BannerLearn/BannerLearn.jsx

@@ -1,66 +1,10 @@
-import React, { useRef, useState } from "react";
+import React from "react";
 import {
-  Avatar,
-  Box,
-  Link,
-  Tag,
-  Text,
-  WrapItem,
-  Tooltip,
-  Divider,
-  Stack,
-  HStack,
-  Input,
-  Button,
-  Select,
-  Image,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  Switch,
-  Portal,
-  useDisclosure,
-  AlertDialog,
-  AlertDialogOverlay,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogCloseButton,
-  AlertDialogBody,
-  AlertDialogFooter,
-  useToast,
-  Skeleton,
-  VStack,
-} from "@chakra-ui/react";
-import { GrAdd } from "react-icons/gr";
-import { AddIcon, ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
-import DataTable from "../../../Components/DataTable/DataTable";
-import CommunityBanner from "../../../Components/CommunityBanner";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import { v4 as uuidv4 } from "uuid";
-import { Link as RouterLink } from "react-router-dom";
-import {
-  useDeleteCommunityBannerMutation,
-  useDeleteCommunityMutation,
   useDeleteLearnBannerMutation,
-  useGetCommunityBannerQuery,
-  useGetCommunityByIdQuery,
-  useGetCommunityQuery,
-  useGetLearnBannerByIdQuery,
   useGetLearnBannerQuery,
-  useUpdateCommunityBannerStatusMutation,
-  useUpdateCommunityStatusMutation,
   useUpdateLearnBannerStatusMutation,
 } from "../../../Services/api.service";
-import BannerTable from "../../../Components/Banner/BannerTable"
-import { HiDotsVertical } from "react-icons/hi";
-import TimeCalculator from "../../../Components/Functions/TimeCalculator";
-import { formatDate } from "../../../Components/Functions/UTCConvertor";
-import CustomAlertDialog from "../../../Components/CustomAlertDialog";
-import WebButton from "../../../Components/WebButton";
-import CommunityCardDisplay from "../../Community/CommunityCardDisplay";
-import CommunityBannerCard from "../../Community/CommunityBannerCard";
-import Header from "../../../Components/Header";
+import BannerTable from "../../../Components/Banner/BannerTable";
 
 const BannerLearn = () => {
   const learnBanner = useGetLearnBannerQuery();

src/Pages/Banners/BannerLearn/LearnBannerAdd.jsx

@@ -0,0 +1,15 @@
+import AddBanner from "../../../Components/Banner/AddBanner";
+import { useCreateLearnBannerMutation } from "../../../Services/api.service";
+
+const LearnBannerAdd = () => {
+  const [createLearnBannerData] = useCreateLearnBannerMutation();
+  return (
+    <AddBanner
+      title={"Learn banner"}
+      navigateLink={"/banner/learn"}
+      createApi={createLearnBannerData}
+    />
+  );
+};
+
+export default LearnBannerAdd;

src/Pages/Banners/BannerNews/BannerNews.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  useDeleteBuildBannerMutation,
+  useDeleteLearnBannerMutation,
+  useDeleteNewsBannerMutation,
+  useGetBuildBannerQuery,
+  useGetLearnBannerQuery,
+  useGetNewsBannerQuery,
+  useUpdateBuildBannerStatusMutation,
+  useUpdateLearnBannerStatusMutation,
+  useUpdateNewsBannerStatusMutation,
+} from "../../../Services/api.service";
+import BannerTable from "../../../Components/Banner/BannerTable";
+
+const BannerNews = () => {
+  const newsBanner = useGetNewsBannerQuery();
+  const [deleteNewsBanner] = useDeleteNewsBannerMutation();
+  const [updateNewsBuildStatus] = useUpdateNewsBannerStatusMutation();
+
+  return (
+    <BannerTable
+      addLink={"/banner/news/add-banner"}
+      title={"News Banner"}
+      deleteApi={deleteNewsBanner}
+      dataArray={newsBanner}
+      statusUpdateApi={updateNewsBuildStatus}
+    />
+  );
+};
+
+export default BannerNews;

src/Pages/Banners/BannersNew/NewsBannerAdd.jsx

@@ -0,0 +1,15 @@
+import AddBanner from "../../../Components/Banner/AddBanner";
+import { useCreateNewsBannerMutation } from "../../../Services/api.service";
+
+const NewsBannerAdd = () => {
+  const [createNewsBannerData] = useCreateNewsBannerMutation();
+  return (
+    <AddBanner
+      title={"News banner"}
+      navigateLink={"/news/build"}
+      createApi={createNewsBannerData}
+    />
+  );
+};
+
+export default NewsBannerAdd;

src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx

@@ -144,182 +144,170 @@ const AddBlogsAndArticles = () => {
       {...OPACITY_ON_LOAD}
       overflowY={"scroll"}
       height={"100vh"}
-      display={'flex'}
-      flexDirection={'column'}
+      display={"flex"}
+      flexDirection={"column"}
     >
-      
       <Header title={"Blog"} />
       <form onSubmit={handleSubmit(onSubmit)}>
         <Box display={"flex"}>
-          
-        <Box className="col-5 d-flex flex-column justify-content-between gap-2 pt-4">
-            <Box 
-            flexDirection={'column'}
-            display={'flex'}>
-            <span 
-            className="web-text-large fw-bold rubix-text-dark">
-              Blog Info
-            </span>
-            
-            <span className="web-text-medium text-secondary">
-              Select the platform for which you need to create this campaign.
-            </span>
+          <Box className="col-5 d-flex flex-column justify-content-between gap-2 pt-4">
+            <Box flexDirection={"column"} display={"flex"}>
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Blog Info
+              </span>
+
+              <span className="web-text-medium text-secondary">
+                Select the platform for which you need to create this campaign.
+              </span>
             </Box>
 
-            <Box 
-            flexDirection={'column'}
-            display={'flex'}>
+            <Box flexDirection={"column"} display={"flex"}>
+              <Divider />
 
-            <Divider />
+              <span className="web-text-large fw-bold rubix-text-dark">
+                Blog's 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>
 
-            <span className="web-text-large fw-bold rubix-text-dark">
-              Blog's 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 p-2 justify-content-center flex-column align-items-center gap-3"
-            >
-              {false ? (
-                <FormControl isRequired className="mb-3">
-                  {/* <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              <Box
+                boxSize="sm"
+                className="d-flex w-100 p-2 justify-content-center flex-column align-items-center gap-3"
+              >
+                {false ? (
+                  <FormControl isRequired className="mb-3">
+                    {/* <FormLabel className="web-text-large fw-bold rubix-text-dark">
                   Display profile
                 </FormLabel> */}
-                  {/* <ImageDropBox /> */}
+                    {/* <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
+                    <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"
-                          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("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>
-                      <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 5mb.
-                  </FormHelperText>
-                </FormControl>
-              ) : (
-                <>
-                  <Image
-                    shadow={"md"}
-                    rounded={8}
-                    w={500}
-                    h={240}
-                    src={selectedImageLarge}
-                    alt="Selected Image"
-                  />
-                  {selectedImageLarge === fallbackImageLarge || largeImageData === null ? (
-                    ""
-                  ) : (
-                    <Box display={"flex"} flexDirection={"column"} w={"100%"}>
-                      <span className="web-text-small">
-                        {largeImageData?.name}
+                    {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>
-                      <span className="web-text-small text-secondary fst-italic">
-                        {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb
-                      </span>
-                    </Box>
-                  )}
-                </>
-              )}
+                    )}
+                    <FormHelperText className="web-text-small">
+                      Maximum limit of image is 5mb.
+                    </FormHelperText>
+                  </FormControl>
+                ) : (
+                  <>
+                    <Image
+                      shadow={"md"}
+                      rounded={8}
+                      w={500}
+                      h={240}
+                      src={selectedImageLarge}
+                      alt="Selected Image"
+                    />
+                    {selectedImageLarge === fallbackImageLarge ||
+                    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={() => setSelectedImageLarge(fallbackImageLarge)}
-                backgroundColor="red.400"
-                color={"whitesmoke"}
-                transition={"0.5s"}
-                _hover={{
-                  backgroundColor: "red.500",
-                }}
-                size="xs"
-              >
-                Remove
-              </Button>
+                <Button
+                  onClick={() => setSelectedImageLarge(fallbackImageLarge)}
+                  backgroundColor="red.400"
+                  color={"whitesmoke"}
+                  transition={"0.5s"}
+                  _hover={{
+                    backgroundColor: "red.500",
+                  }}
+                  size="xs"
+                >
+                  Remove
+                </Button>
+              </Box>
             </Box>
-            </Box>
-
-
-
-
-
-
           </Box>
 
           <Box className="col-7 pt-4 p-4">
@@ -731,7 +719,7 @@ const AddBlogsAndArticles = () => {
                 }}
                 type="submit"
                 size="sm"
-                rounded={'sm'}
+                rounded={"sm"}
               >
                 Create blog
               </Button>

src/Pages/Community/AddComunity.jsx

@@ -329,7 +329,7 @@ const AddComunity = () => {
               }}
               type="submit"
               size="sm"
-              rounded={'sm'}
+              rounded={"sm"}
             >
               Create member
             </Button>

src/Routes/Routes.js

@@ -19,14 +19,17 @@ import ViewNews from "../Pages/News/ViewNews";
 import ViewBlogsAndArticles from "../Pages/BlogsAndArticles/ViewBlogsAndArticles";
 import EditBlogsAndArticles from "../Pages/BlogsAndArticles/EditBlogsAndArticles";
 import BannerLearn from "../Pages/Banners/BannerLearn/BannerLearn";
-import AddBanner from "../Pages/Banners/BannerCommunity/AddBanner";
-import AddLearnBanner from "../Pages/Banners/BannerLearn/AddLearnBanner";
+import AddLearnBanner from "../Pages/Banners/BannerLearn/LearnBannerAdd";
 import HelpAndSupport from "../Pages/News/HelpAndSupport";
 import AddEvents from "../Pages/Events/AddEvents";
 import ViewLearnBanner from "../Pages/Events/ViewLearnBanner";
 import BannerBuildView from "../Pages/Banners/BannerBuild/BannerBuildView";
-import BannersNew from "../Pages/Banners/BannersNew/BannersNews";
 import BannersNews from "../Pages/Banners/BannersNew/BannersNews";
+import BannerBuild from "../Pages/Banners/BannerBuild/BannerBuild";
+import BannerNews from "../Pages/Banners/BannerNews/BannerNews";
+import BannerCommunityAdd from "../Pages/Banners/BannerCommunity/BannerCommunityAdd";
+import BuildBannerAdd from "../Pages/Banners/BannerBuild/BuildBannerAdd";
+import NewsBannerAdd from "../Pages/Banners/BannersNew/NewsBannerAdd";
 
 export const RouteLink = [
   { path: "/", Component: Home },
@@ -42,9 +45,15 @@ export const RouteLink = [
 
   // =============[ community banner ]================
   { path: "banner/banner-community", Component: BannerCommunity },
-  { path: "banner/banner-community/add-banner", Component: AddBanner },
-  { path: "banner/banner-community/edit/:id", Component: BannerComunityEditPage },
-  { path: "banner/banner-community/view/:id", Component: BannerComunityViewPage },
+  { path: "banner/banner-community/add-banner", Component: BannerCommunityAdd },
+  {
+    path: "banner/banner-community/edit/:id",
+    Component: BannerComunityEditPage,
+  },
+  {
+    path: "banner/banner-community/view/:id",
+    Component: BannerComunityViewPage,
+  },
 
   // =============[ learn banner ]================
   { path: "banner/learn", Component: BannerLearn },
@@ -53,23 +62,17 @@ export const RouteLink = [
   { path: "banner/learn/edit/:id", Component: ViewLearnBanner },
 
   // =============[ build banner ]================
+  { path: "banner/build", Component: BannerBuild },
+  { path: "banner/build/add-banner", Component: BuildBannerAdd },
   { path: "banner/build/view/:id", Component: BannerBuildView },
   { path: "banner/build/edit/:id", Component: BannerBuildView },
 
-
-  
   // =============[ news banner ]================
+  { path: "banner/news", Component: BannerNews },
+  { path: "banner/news/add-banner", Component: NewsBannerAdd },
   { path: "banner/news/view/:id", Component: BannersNews },
   { path: "banner/news/edit/:id", Component: BannersNews },
 
-
-
-
-
-
-
-
-
   // =============[ blog ]================
   { path: "/blogs-articles", Component: BlogsAndArticles },
   { path: "blogs-articles/add-blog", Component: AddBlogsAndArticles },

src/Services/api.service.js

@@ -22,8 +22,12 @@ export const rubixApi = createApi({
     "getNewsById",
     "getBlog",
     "getBlogById",
-    "getEvents"
-
+    "getEvents",
+    "getEventsById",
+    "getEventsBanner",
+    "getEventsBannerById",
+    "getEventsBanner",
+    "getEventsBannerById",
   ],
   endpoints: (builder) => ({
     // ===============[ Community cards endpoints ]=======================
@@ -146,9 +150,6 @@ export const rubixApi = createApi({
       invalidatesTags: ["getLearnBanner"],
     }),
 
-
-
-    
     // ===============[ Build Banners endpoints ]=======================
     getBuildBanner: builder.query({
       query: () => "/admin/build",
@@ -158,10 +159,30 @@ export const rubixApi = createApi({
       query: (id) => `/admin/build/${id}`,
       providesTags: ["getBuildBannerById"],
     }),
+    deleteBuildBanner: builder.mutation({
+      query: (id) => ({
+        url: `/admin/build/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getBuildBanner"],
+    }),
+    updateBuildBannerStatus: builder.mutation({
+      query: ({ id }) => ({
+        url: `/admin/build/change-visibility/${id}`,
+        method: "POST",
+      }),
+      invalidatesTags: ["getBuildBanner"],
+    }),
+    createBuildBanner: builder.mutation({
+      query: (newBanner) => ({
+        url: "/admin/build",
+        method: "POST",
+        body: newBanner,
+      }),
+      invalidatesTags: ["getBuildBanner"],
+    }),
 
-
-     
-    // ===============[ news Banners endpoints ]=======================
+    // ===============[ News Banners endpoints ]=======================
     getNewsBanner: builder.query({
       query: () => "/admin/main-news",
       providesTags: ["getNewsBanner"],
@@ -170,10 +191,30 @@ export const rubixApi = createApi({
       query: (id) => `/admin/main-news/${id}`,
       providesTags: ["getNewsBannerById"],
     }),
+    deleteNewsBanner: builder.mutation({
+      query: (id) => ({
+        url: `/admin/news/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getNewsBanner"],
+    }),
+    updateNewsBannerStatus: builder.mutation({
+      query: ({ id }) => ({
+        url: `/admin/news/change-visibility/${id}`,
+        method: "POST",
+      }),
+      invalidatesTags: ["getNewsBanner"],
+    }),
+    createNewsBanner: builder.mutation({
+      query: (newBanner) => ({
+        url: "/admin/news",
+        method: "POST",
+        body: newBanner,
+      }),
+      invalidatesTags: ["getNewsBanner"],
+    }),
 
-
-    // ================[ blog endpoints ]====================
-
+    // ================[ Blog endpoints ]====================
     getBlog: builder.query({
       query: () => "/admin/blog",
       providesTags: ["getBlog"],
@@ -213,8 +254,7 @@ export const rubixApi = createApi({
       invalidatesTags: ["getBlog"],
     }),
 
-    // ================[ news ]====================
-
+    // ================[ News ]====================
     getNews: builder.query({
       query: ({ page, size }) => `/admin/news?page=${page}&size=${size}`,
       providesTags: ["getNews"],
@@ -254,12 +294,7 @@ export const rubixApi = createApi({
       invalidatesTags: ["getNews"],
     }),
 
-
-
-
     // ================[ events ]====================
-
-
     getEvents: builder.query({
       query: ({ page, size }) => `/admin/events?page=${page}&size=${size}`,
       providesTags: ["getEvents"],
@@ -287,10 +322,29 @@ export const rubixApi = createApi({
       invalidatesTags: ["getEvents"],
     }),
 
-
-
-
-
+    // ===============[ Home Banners endpoints ]=======================
+    getHomeBanner: builder.query({
+      query: () => "/admin/home",
+      providesTags: ["getHomeBanner"],
+    }),
+    getHomeBannerById: builder.query({
+      query: (id) => `/admin/home/${id}`,
+      providesTags: ["getHomeBannerById"],
+    }),
+    deleteHomeBanner: builder.mutation({
+      query: (id) => ({
+        url: `/admin/home/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getHomeBanner"],
+    }),
+    updateHomeBannerStatus: builder.mutation({
+      query: ({ id }) => ({
+        url: `/admin/home/change-visibility/${id}`,
+        method: "POST",
+      }),
+      invalidatesTags: ["getHomeBanner"],
+    }),
   }),
 });
 
@@ -317,9 +371,15 @@ export const {
 
   useGetBuildBannerQuery,
   useGetBuildBannerByIdQuery,
+  useDeleteBuildBannerMutation,
+  useUpdateBuildBannerStatusMutation,
+  useCreateBuildBannerMutation,
 
   useGetNewsBannerQuery,
   useGetNewsBannerByIdQuery,
+  useDeleteNewsBannerMutation,
+  useUpdateNewsBannerStatusMutation,
+  useCreateNewsBannerMutation,
 
   useGetBlogQuery,
   useGetBlogByIdQuery,
@@ -336,8 +396,6 @@ export const {
   useGetNewsByIdQuery,
   useUpdateNewsMutation,
 
-
-
   useGetEventsQuery,
   useCreateEventsMutation,
   useUpdateEventsStatusMutation,