banner view updated

src/Components/Banner/BannerView.jsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useGetBuildBannerByIdQuery } from "../../Services/api.service";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import Header from "../../Components/Header";
+import {
+  Box,
+  Button,
+  Divider,
+  Image,
+  StackDivider,
+  Tag,
+  VStack,
+} from "@chakra-ui/react";
+
+const BannerView = ({data, isLoading}) => {
+  const banner = data?.data;
+
+  return isLoading ? (
+    <FullscreenLoaders />
+  ) : (
+    <Box
+      {...OPACITY_ON_LOAD}
+      overflowY={"scroll"}
+      w={"100%"}
+      h={"100vh"}
+      className="overflow-auto "
+      display={"flex"}
+      flexDirection={"column"}
+    >
+      <Header
+        title={"Banner's"}
+        btnTitle={"Edit banner"}
+        link={`/banner/banner-community/edit/${banner.id}`}
+      />
+      <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">
+            Banners 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">
+            Display banner
+          </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={`https://rubix.betadelivery.com/${banner?.banner_image}`}
+              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>
+
+        <Box className="col-7 pt-4 overflow-auto p-4">
+          <Box className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark mb-1">
+              Status
+            </Box>
+            {data?.data?.status ? (
+              <Tag size={"sm"} variant="solid" colorScheme="teal">
+                Active
+              </Tag>
+            ) : (
+              <Tag size={"sm"} variant="solid" colorScheme="red">
+                Inactive
+              </Tag>
+            )}
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Heading
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.Heading}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Sub heading
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.sub_heading}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Button title
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.CTO_button_title}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Button link
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.CTO_button_link}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Created At
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {formatDate(banner?.createdAt)}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Updated At
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {formatDate(banner?.updatedAt)}
+            </Box>
+          </Box>
+
+          <Divider />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default BannerView;

src/Components/BannerStack.jsx

@@ -49,7 +49,7 @@ const BannerStack = ({
         ps={1}
       >
         {bannerIsLoading
-          ? Array.from({ length: 4 }).map((_, index) => (
+          ? Array.from({ length: 3 }).map((_, index) => (
               <Box className="col-4 p-2 ps-0">
                 <Skeleton w={"100%"} key={index} rounded={"md"} height={150} />
               </Box>

src/Components/Header.jsx

@@ -14,7 +14,7 @@ const Header = ({ link, btnTitle, title }) => {
       zIndex={999}
       className={`${
         link && btnTitle ? "" : " pt-3 pb-3"
-      } p-2  pe-2 fw-400   border-bottom d-flex justify-content-between align-items-center`}
+      } p-2  pe-2  fw-400   border-bottom d-flex justify-content-between align-items-center`}
     >
       {/* <span className="fs-5">Community</span> */}
 

src/Pages/Banners/Banner.jsx

@@ -18,7 +18,6 @@ const Banner = () => {
     <Box
       {...OPACITY_ON_LOAD}
       overflowY={"scroll"}
-      paddingBottom={50}
       height={"100vh"}
     >
       <Header title={"👋🏻 Hi, developer admin"} />
@@ -52,7 +51,7 @@ const Banner = () => {
       viewAllLink={"/banner/build"}
       bannerIsLoading={newsBanner?.isLoading}
       bannerArray={newsBanner?.data?.data?.rows?.slice(0, 3)}
-      viewBannerLink={'/banner/build/view'}
+      viewBannerLink={'/banner/news/view'}
       />
     </Box>
   );

src/Pages/Banners/BannerBuild/BannerBuildView.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useGetBuildBannerByIdQuery } from "../../../Services/api.service";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
+import { formatDate } from "../../../Components/Functions/UTCConvertor";
+import Header from "../../../Components/Header";
+import {
+  Box,
+  Button,
+  Divider,
+  Image,
+  StackDivider,
+  Tag,
+  VStack,
+} from "@chakra-ui/react";
+import BannerView from "../../../Components/Banner/BannerView";
+
+const BannerBuildView = () => {
+  const { id } = useParams();
+  const { data, error, isLoading } = useGetBuildBannerByIdQuery(id);
+
+  return (
+      <BannerView isLoading={isLoading} data={data} />
+  );
+};
+
+export default BannerBuildView;

src/Pages/Banners/BannerCommunity/BannerCommunityView.jsx

@@ -1,10 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import {
-  useGetCommunityBannerByIdQuery,
-  useGetCommunityByIdQuery,
-  useGetCommunityQuery,
-} from "../../../Services/api.service";
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useGetCommunityBannerByIdQuery } from "../../../Services/api.service";
 import {
   Box,
   Button,
@@ -23,9 +19,8 @@ const BannerComunityViewPage = () => {
   const { id } = useParams();
   const { data, error, isLoading } = useGetCommunityBannerByIdQuery(id);
   const banner = data?.data;
-  useEffect(() => {
-  }, [data])
-  
+  useEffect(() => {}, [data]);
+
   return isLoading ? (
     <FullscreenLoaders />
   ) : (
@@ -36,36 +31,35 @@ const BannerComunityViewPage = () => {
       h={"100vh"}
       className="overflow-auto "
       display={"flex"}
-      flexDirection={'column'}
+      flexDirection={"column"}
     >
-      
-      
-      <Header 
-      title={"Banner's"} 
-      btnTitle={'Edit banner'}
-      link={`/banner/banner-community/edit/${banner.id}`}
+      <Header
+        title={"Banner's"}
+        btnTitle={"Edit banner"}
+        link={`/banner/banner-community/edit/${banner.id}`}
       />
-      <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">
-          Banners Info
-        </span>
-        <span className="web-text-medium text-secondary">
-          Select the platform for which you need to create this campaign.
-        </span>
+      <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">
+            Banners 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 banner
-        </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">
+            Display banner
+          </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}
@@ -87,66 +81,80 @@ const BannerComunityViewPage = () => {
               Remove
             </Button> */}
           </Box>
-      </Box>
-
-      <Box className="col-7 pt-4 overflow-auto p-4">
-      {data?.data?.status ? <Tag position={'absolute'} right={10} size={"sm"} variant="solid" colorScheme="teal">
-          Active
-        </Tag> : <Tag position={'absolute'} right={10} size={"sm"} variant="solid" colorScheme="red">
-          Inactive
-        </Tag>}
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">Heading</Box>
-          <Box className="web-text-medium text-secondary">
-            {banner?.Heading}
-          </Box>
         </Box>
 
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Sub heading
+        <Box className="col-7 pt-4 overflow-auto p-4">
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark mb-1">
+              Status
+            </Box>
+            {data?.data?.status ? (
+              <Tag size={"sm"} variant="solid" colorScheme="teal">
+                Active
+              </Tag>
+            ) : (
+              <Tag size={"sm"} variant="solid" colorScheme="red">
+                Inactive
+              </Tag>
+            )}
           </Box>
-          <Box className="web-text-medium text-secondary">
-            {banner?.sub_heading}
-          </Box>
-        </Box>
 
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Button title
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Heading
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.Heading}
+            </Box>
           </Box>
-          <Box className="web-text-medium text-secondary">
-            {banner?.CTO_button_title}
-          </Box>
-        </Box>
 
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">Button link</Box>
-          <Box className="web-text-medium text-secondary">
-            {banner?.CTO_button_link}
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Sub heading
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.sub_heading}
+            </Box>
           </Box>
-        </Box>
 
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Created At
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Button title
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.CTO_button_title}
+            </Box>
           </Box>
-          <Box className="web-text-medium text-secondary">
-            {formatDate(banner?.createdAt)}
-          </Box>
-        </Box>
 
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Updated At
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Button link
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {banner?.CTO_button_link}
+            </Box>
           </Box>
-          <Box className="web-text-medium text-secondary">
-            {formatDate(banner?.updatedAt)}
-          </Box>
-        </Box>
 
-        <Divider/>
-      </Box>
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Created At
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {formatDate(banner?.createdAt)}
+            </Box>
+          </Box>
+
+          <Box isRequired className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Updated At
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {formatDate(banner?.updatedAt)}
+            </Box>
+          </Box>
+
+          <Divider />
+        </Box>
       </Box>
     </Box>
   );

src/Pages/Banners/BannersNew/BannersNews.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { useParams } from 'react-router-dom';
+import { useGetNewsBannerByIdQuery } from '../../../Services/api.service';
+import BannerView from '../../../Components/Banner/BannerView';
+
+const BannersNews = () => {
+  const { id } = useParams();
+  const { data, error, isLoading } = useGetNewsBannerByIdQuery(id);
+
+  return <BannerView isLoading={isLoading} data={data} />;
+}
+
+export default BannersNews

src/Pages/Community/ComunityViewPage.jsx

@@ -2,169 +2,14 @@ import React, { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import {
   useGetCommunityByIdQuery,
-  useGetCommunityQuery,
 } from "../../Services/api.service";
-import {
-  Box,
-  Button,
-  Divider,
-  Image,
-  StackDivider,
-  Tag,
-  VStack,
-} from "@chakra-ui/react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
-import { formatDate } from "../../Components/Functions/UTCConvertor";
-import Header from "../../Components/Header";
+import BannerView from "../../Components/Banner/BannerView";
 
 const ComunityViewPage = () => {
   const { id } = useParams();
   const { data, error, isLoading } = useGetCommunityByIdQuery(id);
-  const member = data?.data;
-  return isLoading ? (
-    <FullscreenLoaders />
-  ) : (
-    <Box
-      {...OPACITY_ON_LOAD}
-      w={"100%"}
-      h={"100vh"}
-      overflowY={"scroll"}
-      display={"flex"}
-      flexDirection={"column"}
-    >
 
-      
-    <Header 
-    title={"Community"}
-    btnTitle={"Edit community"}
-    link={`/community/edit/${id}`}
-    />
-
-      <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 />
-
-        <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 h-75  w-100 justify-content-start flex-column align-items-center gap-3"
-        >
-          <Image
-            shadow={"md"}
-            rounded={8}
-            w={214}
-            h={240}
-            src={`https://rubix.betadelivery.com/${member?.profile_image}`}
-            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>
-
-      <Box className="col-7 pt-4 overflow-auto p-4">
-        {data?.data?.status ? (
-          <Tag
-            position={"absolute"}
-            right={10}
-            size={"sm"}
-            variant="solid"
-            colorScheme="teal"
-          >
-            Active
-          </Tag>
-        ) : (
-          <Tag
-            position={"absolute"}
-            right={10}
-            size={"sm"}
-            variant="solid"
-            colorScheme="red"
-          >
-            Inactive
-          </Tag>
-        )}
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">Name</Box>
-          <Box className="web-text-medium text-secondary">
-            {member?.member_name}
-          </Box>
-        </Box>
-
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Designation
-          </Box>
-          <Box className="web-text-medium text-secondary">
-            {member?.designation}
-          </Box>
-        </Box>
-
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Description
-          </Box>
-          <Box className="web-text-medium text-secondary">
-            {member?.description}
-          </Box>
-        </Box>
-
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">Linkedin</Box>
-          <Box className="web-text-medium text-secondary">
-            {member?.linkedin}
-          </Box>
-        </Box>
-
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Created At
-          </Box>
-          <Box className="web-text-medium text-secondary">
-            {formatDate(member?.createdAt)}
-          </Box>
-        </Box>
-
-        <Box isRequired className="mb-3">
-          <Box className="web-text-large fw-bold rubix-text-dark">
-            Updated At
-          </Box>
-          <Box className="web-text-medium text-secondary">
-            {formatDate(member?.updatedAt)}
-          </Box>
-        </Box>
-
-
-        <Divider />
-      </Box>
-      </Box>
-    </Box>
-  );
+  return <BannerView isLoading={isLoading} data={data} />;
 };
 
 export default ComunityViewPage;

src/Pages/Events/Events.jsx

@@ -1,6 +1,6 @@
 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 { useGetEventsQuery, useUpdateEventsStatusMutation } from '../../Services/api.service'
+import { useDeleteEventsMutation, useGetEventsQuery, useUpdateEventsStatusMutation } from '../../Services/api.service'
 import { useState } from 'react';
 import { TABLE_PAGINATION } from '../../Constants/Paginations';
 import Header from '../../Components/Header';
@@ -9,6 +9,7 @@ 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';
 
 const Events = () => {
   // ====================================================[Hooks]===================================================================
@@ -25,12 +26,36 @@ const Events = () => {
   // ====================================================[RTK Hooks]===================================================================
   const events = useGetEventsQuery({ page: currentPage, size: pageSize });
   const [updateEventsStatus] = useUpdateEventsStatusMutation();
+  const [deleteEvents] = useDeleteEventsMutation();
 
 
   
   // ====================================================[Functions]===================================================================
-  const handleDelete = async (communityId) => {
-    console.log(communityId);
+  const handleDelete = async (id) => {
+    console.log(id);
+    try {
+      // Trigger the mutation
+      setDeleteIsLoading(true);
+      await deleteEvents(id)
+        .then((response) => {
+          // Handle the response here
+          console.log("Mutation response:", response?.data?.statusCode);
+          console.log("Mutation response:", response?.data?.message);
+
+          if (response?.data?.statusCode === 201) {
+            setDeleteIsLoading(false);
+            setDeleteAlert(false);
+          }
+        })
+        .catch((error) => {
+          console.error("Error creating community:", error);
+          setDeleteIsLoading(false);
+          setDeleteAlert(false);
+        });
+    } catch (error) {
+      // Handle errors
+      console.error("Error deleting community:", error);
+    }
 
   };
   const handleUpdateStatus = async (id) => {
@@ -254,6 +279,16 @@ const Events = () => {
         data={extractedArray}
         isLoading={events?.isLoading}
       />
+
+      
+      {/* ====================================================[ Alert ]================================================================ */}
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        alertHandler={() => handleDelete(actionId)}
+        message={"Are you sure you want to delete member?"}
+        isLoading={deleteIsLoading}
+      />
     </Box>
   )
 }

src/Pages/Events/ViewLearnBanner.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useGetLearnBannerByIdQuery } from "../../Services/api.service";
+import BannerView from "../../Components/Banner/BannerView";
+
+const ViewLearnBanner = () => {
+  const { id } = useParams();
+  console.log(id);
+  const { data, error, isLoading } = useGetLearnBannerByIdQuery(id);
+
+  
+  return <BannerView isLoading={isLoading} data={data} />;
+};
+
+export default ViewLearnBanner;

src/Pages/News/News.jsx

@@ -46,11 +46,11 @@ const News = () => {
   const [deleteNews] = useDeleteNewsMutation();
   const [updateNewsStatus] = useUpdateNewsStatusMutation();
   // ====================================================[Functions]===================================================================
-  const handleDelete = async (communityId) => {
+  const handleDelete = async (id) => {
     try {
       // Trigger the mutation
       setDeleteIsLoading(true);
-      await deleteNews(communityId)
+      await deleteNews(id)
         .then((response) => {
           // Handle the response here
           console.log("Mutation response:", response?.data?.statusCode);

src/Routes/Routes.js

@@ -23,6 +23,10 @@ import AddBanner from "../Pages/Banners/BannerCommunity/AddBanner";
 import AddLearnBanner from "../Pages/Banners/BannerLearn/AddLearnBanner";
 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";
 
 export const RouteLink = [
   { path: "/", Component: Home },
@@ -38,18 +42,25 @@ export const RouteLink = [
   { path: "community/add-comunity", Component: AddComunity },
   { path: "community-table-view", Component: CommunityCardsTableView },
 
-
-
   { 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/edit/:id",
+    Component: BannerComunityEditPage,
+  },
+  {
+    path: "banner/banner-community/view/:id",
+    Component: BannerComunityViewPage,
+  },
 
-
-  
+  // =============[ learn ]================
   { path: "banner/learn/add-banner", Component: AddLearnBanner },
-  { path: "banner/learn", Component: BannerLearn },
+  { path: "banner/learn/view/:id", Component: ViewLearnBanner },
 
+  // =============[ build ]================
+  { path: "banner/build/view/:id", Component: BannerBuildView },
+
+  { path: "banner/news/view/:id", Component: BannersNews },
 
   // =============[ blog ]================
   { path: "/blogs-articles", Component: BlogsAndArticles },
@@ -57,15 +68,11 @@ export const RouteLink = [
   { path: "blogs-articles/view/:id", Component: ViewBlogsAndArticles },
   { path: "blogs-articles/edit/:id", Component: EditBlogsAndArticles },
 
-  
   // =============[ news ]================
   { path: "/news/view/:id", Component: ViewNews },
   { path: "/news/add-news", Component: AddNews },
   { path: "/news/edit/:id", Component: EditNews },
 
-
-
-  
-  // =============[ news ]================
+  // =============[ events ]================
   { path: "/events/add-events", Component: AddEvents },
 ];

src/Services/api.service.js

@@ -149,11 +149,15 @@ export const rubixApi = createApi({
 
 
     
-    // ===============[ Learn Banners endpoints ]=======================
+    // ===============[ Build Banners endpoints ]=======================
     getBuildBanner: builder.query({
       query: () => "/admin/build",
       providesTags: ["getBuildBanner"],
     }),
+    getBuildBannerById: builder.query({
+      query: (id) => `/admin/build/${id}`,
+      providesTags: ["getBuildBannerById"],
+    }),
 
 
      
@@ -162,6 +166,10 @@ export const rubixApi = createApi({
       query: () => "/admin/main-news",
       providesTags: ["getNewsBanner"],
     }),
+    getNewsBannerById: builder.query({
+      query: (id) => `/admin/main-news/${id}`,
+      providesTags: ["getNewsBannerById"],
+    }),
 
 
     // ================[ blog endpoints ]====================
@@ -271,6 +279,13 @@ export const rubixApi = createApi({
       }),
       invalidatesTags: ["getEvents"],
     }),
+    deleteEvents: builder.mutation({
+      query: (blogId) => ({
+        url: `/admin/events/${blogId}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getEvents"],
+    }),
 
 
 
@@ -301,8 +316,10 @@ export const {
   useUpdateLearnBannerStatusMutation,
 
   useGetBuildBannerQuery,
+  useGetBuildBannerByIdQuery,
 
   useGetNewsBannerQuery,
+  useGetNewsBannerByIdQuery,
 
   useGetBlogQuery,
   useGetBlogByIdQuery,
@@ -324,4 +341,5 @@ export const {
   useGetEventsQuery,
   useCreateEventsMutation,
   useUpdateEventsStatusMutation,
+  useDeleteEventsMutation,
 } = rubixApi;

src/Validations/Validations.js

@@ -68,7 +68,8 @@ export const addEvents = Yup.object().shape({
   content: Yup.string().required("content is required"),
   location: Yup.string().required("location is required"),
   organizer_name: Yup.string().required("Org name date is required"),
-  organizer_mobile_number: Yup.string().required("Org contact is required"),
+  organizer_mobile_number: Yup.string().required("Org contact is required")
+  .matches(/^[0-9]{10}$/, "Mobile number must be 10 digits"),
   organizer_email: Yup.string().required("Org email is required").email("Please enter valid email"),
   banner_image: Yup.mixed().required("Banner image is required"),