banner view updated

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);