Updated

src/Components/Banner/BannerTable.jsx

@@ -0,0 +1,339 @@
+import React, { useRef, useState } from "react";
+import {
+  Box,
+  Text,
+  Tooltip,
+  HStack,
+  Input,
+  Select,
+  Image,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Switch,
+  Portal,
+  useToast,
+} from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
+import { HiDotsVertical } from "react-icons/hi";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import DataTable from "../DataTable/DataTable";
+import Header from "../Header";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+
+const BannerCommunity = ({ dataArray, deleteApi, statusUpdateApi, title, addLink }) => {
+  // ====================================================[Hooks]===================================================================
+  const toast = useToast();
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(null);
+  const [deleteIsLoading, setDeleteIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+
+//   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+//   const [currentPage, setCurrentPage] = useState(1);
+//   const [displayRange, setDisplayRange] = useState({
+//     start: TABLE_PAGINATION?.page,
+//     end: pageSize,
+//   });
+
+  // ====================================================[Functions]===================================================================
+  const handleDelete = async (bannerId) => {
+    try {
+      // Trigger the mutation
+      setDeleteIsLoading(true);
+      await deleteApi(bannerId)
+        .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) {
+            setDeleteIsLoading(false);
+            setDeleteAlert(false);
+            toast({
+              title: response?.data?.message,
+              status: "success",
+              duration: 1000,
+              isClosable: true,
+            });
+          }
+        })
+        .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) => {
+    console.log(id);
+
+    try {
+      // Trigger the mutation
+      await statusUpdateApi({ id })
+        .then((response) => {
+          console.log(response?.data);
+          if (response?.data?.statusCode === 201) {
+            console.log("toasted");
+            toast({
+              title: response?.data?.message,
+              status: "success",
+              isClosable: true,
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } catch (error) {
+      // Handle errors
+      console.error("Error updating community status:", error);
+    }
+  };
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = dataArray?.data?.data?.rows?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.Heading;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    const status = item.status;
+
+    const statusMatches =
+      statusFilter === "all" ||
+      (statusFilter === "active" && status === true) ||
+      (statusFilter === "inactive" && status === false);
+
+    return nameMatches && statusMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Banner image",
+    "Heading",
+    "Sub heading",
+    "Button title",
+    "Active",
+    "Created At",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => {
+    return {
+      "Banner image": (
+        <Image
+          w={150}
+          h={14}
+          rounded={4}
+          objectFit="cover"
+          src={`https://rubix.betadelivery.com/${item.banner_image}`}
+          alt="Dan Abramov"
+        />
+      ),
+      Heading: (
+        <Tooltip
+          className="rounded-2 web-text-xsmall"
+          width={"fit-content"}
+          placement="top"
+          hasArrow
+          label={item?.Heading}
+          bg="blue.200"
+        >
+          <Box display={"flex"} alignItems={"center"} w={180}>
+            <Text as={"span"} isTruncated={true}>
+              {item?.Heading}
+            </Text>
+          </Box>
+        </Tooltip>
+      ),
+      "Sub heading": (
+        <Tooltip
+          className="rounded-2 web-text-xsmall"
+          width={"fit-content"}
+          placement="top"
+          hasArrow
+          label={item?.sub_heading}
+          bg="blue.200"
+        >
+          <Box display={"flex"} alignItems={"center"} w={180}>
+            <Text as={"span"} isTruncated={true}>
+              {item?.sub_heading}
+            </Text>
+          </Box>
+        </Tooltip>
+      ),
+      "Button title": item?.CTO_button_title,
+      Active: (
+        <Switch
+          size={"sm"}
+          colorScheme="teal"
+          onChange={() => handleUpdateStatus(item.id)}
+          isChecked={item.status}
+        />
+      ),
+      "Created At": (
+        <span className="d-flex justify-content-between align-items-center">
+          <Text as={"span"} color={"teal.600"} className=" fw-bold">
+            {formatDate(item?.createdAt)}
+          </Text>
+          <Menu>
+            <MenuButton className="link p-1 rounded-1">
+              <HiDotsVertical className="rubix-text-dark fs-6" />
+            </MenuButton>
+            <Portal>
+              <MenuList minWidth="80px">
+                <RouterLink to={`/banner/banner-community/edit/${item.id}`}>
+                  <MenuItem className="web-text-medium">Edit</MenuItem>
+                </RouterLink>
+                <RouterLink to={`/banner/banner-community/view/${item.id}`}>
+                  <MenuItem className="web-text-medium">View</MenuItem>
+                </RouterLink>
+                <MenuItem
+                  onClick={() => {
+                    setActionId(item.id);
+                    setDeleteAlert(true);
+                  }}
+                  className="web-text-medium"
+                >
+                  Delete
+                </MenuItem>
+              </MenuList>
+            </Portal>
+          </Menu>
+        </span>
+      ),
+    };
+  });
+
+  // ====================================================[Pagination Setup]================================================================
+  const paginationPrev = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+      updateDisplayRange(currentPage - 1);
+    }
+  };
+
+  const paginationNext = () => {
+    const totalPages = Math.ceil(community?.data?.data?.totalItems / pageSize);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+      updateDisplayRange(currentPage + 1);
+    }
+  };
+  const updateDisplayRange = (page) => {
+    const start = (page - 1) * pageSize + 1;
+    const end = Math.min(
+      start + pageSize - 1,
+      community?.data?.data?.totalItems
+    );
+    setDisplayRange({ start, end });
+  };
+
+  return (
+    <Box
+      {...OPACITY_ON_LOAD}
+      overflowY={"scroll"}
+      paddingBottom={50}
+      height={"100vh"}
+    >
+      <Header
+        title={title}
+        btnTitle={`Create banner `}
+        link={addLink}
+      />
+      {/* ====================================================[ Top bar ]================================================================ */}
+
+      <Box pt={4}>
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <HStack>
+            <Select
+              className="pointer web-text-small"
+              width={"90px"}
+              rounded="sm"
+              size="sm"
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+            >
+              <option value="all">All</option>
+              <option value="active">Active</option>
+              <option value="inactive">Inactive</option>
+            </Select>
+
+            {/* <Select
+              className="pointer web-text-small"
+              width={"90px"}
+              rounded="sm"
+              size="sm"
+              value={pageSize}
+              onChange={(e) => setPageSize(e.target.value)}
+            >
+              <option value={pageSize}>{pageSize}</option>
+              <option value={20}>20 rows</option>
+              <option value={30}>30 rows</option>
+            </Select> */}
+
+            {/* <HStack>
+              <ChevronLeftIcon
+                onClick={paginationPrev}
+                className=" link rounded-3 pointer"
+              />
+              <Text className="web-text-medium" as={"span"}>
+                {displayRange.start} - {displayRange.end} of{" "}
+                {dataArray?.data?.data?.totalItems}
+              </Text>
+              <ChevronRightIcon
+                onClick={paginationNext}
+                className=" link rounded-3 pointer"
+              />
+            </HStack> */}
+
+
+          </HStack>
+        </HStack>
+      </Box>
+
+      {/* ====================================================[ Table ]================================================================ */}
+      <DataTable
+        emptyMessage={"We don't have any banner of this heading"}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={dataArray?.isLoading}
+      />
+      {/* ====================================================[ Alert ]================================================================ */}
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        alertHandler={() => handleDelete(actionId)}
+        message={"Are you sure you want to delete member?"}
+        isLoading={deleteIsLoading}
+      />
+    </Box>
+  );
+};
+
+export default BannerCommunity;

src/Components/Banner/BannerView.jsx

@@ -15,7 +15,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 
-const BannerView = ({data, isLoading}) => {
+const BannerView = ({data, isLoading, editLink}) => {
   const banner = data?.data;
 
   return isLoading ? (
@@ -33,7 +33,7 @@ const BannerView = ({data, isLoading}) => {
       <Header
         title={"Banner's"}
         btnTitle={"Edit banner"}
-        link={`/banner/banner-community/edit/${banner.id}`}
+        link={`${editLink}/${banner.id}`}
       />
       <Box display={"flex"}>
         <Box className="col-5 d-flex flex-column gap-2 pt-4">

src/Components/BannerStack.jsx

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

src/Pages/Banners/BannerBuild/BannerBuildView.jsx

@@ -1,19 +1,6 @@
 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 = () => {
@@ -21,7 +8,7 @@ const BannerBuildView = () => {
   const { data, error, isLoading } = useGetBuildBannerByIdQuery(id);
 
   return (
-      <BannerView isLoading={isLoading} data={data} />
+      <BannerView editLink={'/banner/build/edit'} isLoading={isLoading} data={data} />
   );
 };
 

src/Pages/Banners/BannerCommunity/BannerCommunity.jsx

@@ -1,317 +1,25 @@
-import React, { useRef, useState } 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 React from "react";
 import {
   useDeleteCommunityBannerMutation,
-  useDeleteCommunityMutation,
   useGetCommunityBannerQuery,
-  useGetCommunityByIdQuery,
-  useGetCommunityQuery,
   useUpdateCommunityBannerStatusMutation,
-  useUpdateCommunityStatusMutation,
 } from "../../../Services/api.service";
-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 BannerCommunity = () => {
-  // ====================================================[Hooks]===================================================================
-  const toast = useToast();
-  const [deleteAlert, setDeleteAlert] = useState(false);
-  const [actionId, setActionId] = useState(null);
-  const [deleteIsLoading, setDeleteIsLoading] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [statusFilter, setStatusFilter] = useState("all");
-  const community = useGetCommunityQuery();
   const communityBanner = useGetCommunityBannerQuery();
   const [deleteCommunityBanner] = useDeleteCommunityBannerMutation();
   const [updateCommunityBannerStatus] =
     useUpdateCommunityBannerStatusMutation();
 
-  // ====================================================[Functions]===================================================================
-  const handleDelete = async (bannerId) => {
-    try {
-      // Trigger the mutation
-      setDeleteIsLoading(true);
-      await deleteCommunityBanner(bannerId)
-        .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) {
-            setDeleteIsLoading(false);
-            setDeleteAlert(false);
-            toast({
-              title: response?.data?.message,
-              status: "success",
-              duration: 1000,
-              isClosable: true,
-            });
-          }
-        })
-        .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) => {
-    console.log(id);
-
-    try {
-      // Trigger the mutation
-      await updateCommunityBannerStatus({ id })
-        .then((response) => {
-          console.log(response?.data);
-          if (response?.data?.statusCode === 200) {
-            console.log("toasted");
-            toast({
-              title: response?.data?.message,
-              status: "success",
-              isClosable: true,
-            });
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    } catch (error) {
-      // Handle errors
-      console.error("Error updating community status:", error);
-    }
-  };
-
-  // ====================================================[Table Filter]================================================================
-  const filteredData = communityBanner?.data?.data?.rows?.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.Heading;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-
-    return nameMatches;
-  });
-
-  // ====================================================[Table Setup]================================================================
-  const tableHeadRow = [
-    "Banner image",
-    "Heading",
-    "Sub heading",
-    "Button title",
-    "Active",
-    "Created At",
-  ];
-
-  const extractedArray = filteredData?.map((item, index) => {
-    return {
-      "Banner image": (
-        <Image
-          w={150}
-          h={14}
-          rounded={4}
-          objectFit="cover"
-          src={`https://rubix.betadelivery.com/${item.banner_image}`}
-          alt="Dan Abramov"
-        />
-      ),
-      Heading: (
-        <Tooltip
-          className="rounded-2 web-text-xsmall"
-          width={"fit-content"}
-          placement="top"
-          hasArrow
-          label={item?.Heading}
-          bg="blue.200"
-        >
-          <Box display={"flex"} alignItems={"center"} w={180}>
-            <Text as={"span"} isTruncated={true}>
-              {item?.Heading}
-            </Text>
-          </Box>
-        </Tooltip>
-      ),
-      "Sub heading": (
-        <Tooltip
-          className="rounded-2 web-text-xsmall"
-          width={"fit-content"}
-          placement="top"
-          hasArrow
-          label={item?.sub_heading}
-          bg="blue.200"
-        >
-          <Box display={"flex"} alignItems={"center"} w={180}>
-            <Text as={"span"} isTruncated={true}>
-              {item?.sub_heading}
-            </Text>
-          </Box>
-        </Tooltip>
-      ),
-      "Button title": item?.CTO_button_title,
-      Active: (
-        <Switch
-          size={"sm"}
-          colorScheme="teal"
-          onChange={() => handleUpdateStatus(item.id)}
-          isChecked={item.status}
-        />
-      ),
-      "Created At": (
-        <span className="d-flex justify-content-between align-items-center">
-          <Text as={"span"} color={"teal.600"} className=" fw-bold">
-            {formatDate(item?.createdAt)}
-          </Text>
-          <Menu>
-            <MenuButton className="link p-1 rounded-1">
-              <HiDotsVertical className="rubix-text-dark fs-6" />
-            </MenuButton>
-            <Portal>
-              <MenuList minWidth="80px">
-                <RouterLink to={`/banner/banner-community/edit/${item.id}`}>
-                  <MenuItem className="web-text-medium">Edit</MenuItem>
-                </RouterLink>
-                <RouterLink to={`/banner/banner-community/view/${item.id}`}>
-                  <MenuItem className="web-text-medium">View</MenuItem>
-                </RouterLink>
-                <MenuItem
-                  onClick={() => {
-                    setActionId(item.id);
-                    setDeleteAlert(true);
-                  }}
-                  className="web-text-medium"
-                >
-                  Delete
-                </MenuItem>
-              </MenuList>
-            </Portal>
-          </Menu>
-        </span>
-      ),
-    };
-  });
-
   return (
-    <Box
-      {...OPACITY_ON_LOAD}
-      overflowY={"scroll"}
-      paddingBottom={50}
-      height={"100vh"}
-    >
-
-
-
-      <Header
-      title={"Community banner"}
-      btnTitle={'Create banner'}
-      link={'/banner/banner-community/add-banner'}
-      />
-      {/* ====================================================[ Top bar ]================================================================ */}
-
-      {/* <Divider /> */}
-
-      <Box pt={4}>
-        {/* <HStack>
-          <Text color={"teal.800"} className="web-text-large fw-bold">
-            Community Banners
-          </Text>
-        </HStack> */}
-        <HStack
-          display={"flex"}
-          justifyContent={"space-between"}
-          ps={1}
-          pe={1}
-          pb={4}
-          spacing="24px"
-        >
-          <Input
-            type="search"
-            width={300}
-            rounded="md"
-            placeholder="Search..."
-            size="sm"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <HStack>
-            <Select
-              className="pointer"
-              width={300}
-              rounded="md"
-              size="sm"
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
-            >
-              <option value="all">All</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </Select>
-          </HStack>
-        </HStack>
-      </Box>
-
-      {/* ====================================================[ Table ]================================================================ */}
-      <DataTable
-        emptyMessage={"We don't have any banner of this heading"}
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        isLoading={community?.isLoading}
-      />
-      {/* ====================================================[ Alert ]================================================================ */}
-      <CustomAlertDialog
-        onClose={() => setDeleteAlert(false)}
-        isOpen={deleteAlert}
-        alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete member?"}
-        isLoading={deleteIsLoading}
-      />
-    </Box>
+    <BannerTable
+      title={'Community banner'}
+      addLink={"/banner/banner-community/add-banner"}
+      deleteApi={deleteCommunityBanner}
+      dataArray={communityBanner}
+      statusUpdateApi={updateCommunityBannerStatus}
+    />
   );
 };
 

src/Pages/Banners/BannerCommunity/BannerCommunityView.jsx

@@ -14,150 +14,14 @@ 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 BannerComunityViewPage = () => {
   const { id } = useParams();
   const { data, error, isLoading } = useGetCommunityBannerByIdQuery(id);
-  const banner = data?.data;
-  useEffect(() => {}, [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 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 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>
-            <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>
-            <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>
-          </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>
-  );
+  return <BannerView editLink={'/banner/banner-community/edit'} isLoading={isLoading} data={data} />;
+  
 };
 
 export default BannerComunityViewPage;

src/Pages/Banners/BannerLearn/BannerLearn.jsx

@@ -52,6 +52,7 @@ import {
   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";
@@ -62,266 +63,18 @@ import CommunityBannerCard from "../../Community/CommunityBannerCard";
 import Header from "../../../Components/Header";
 
 const BannerLearn = () => {
-  // ====================================================[Hooks]===================================================================
-  const toast = useToast();
-  const [deleteAlert, setDeleteAlert] = useState(false);
-  const [actionId, setActionId] = useState(null);
-  const [deleteIsLoading, setDeleteIsLoading] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [statusFilter, setStatusFilter] = useState("all");
-  const Learn = useGetLearnBannerQuery();
   const learnBanner = useGetLearnBannerQuery();
   const [deleteLearnBanner] = useDeleteLearnBannerMutation();
   const [updateLearnBannerStatus] = useUpdateLearnBannerStatusMutation();
 
-  // ====================================================[Functions]===================================================================
-  const handleDelete = async (bannerId) => {
-    try {
-      // Trigger the mutation
-      setDeleteIsLoading(true);
-      await deleteLearnBanner(bannerId)
-        .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) {
-            setDeleteIsLoading(false);
-            setDeleteAlert(false);
-            toast({
-              title: response?.data?.message,
-              status: "success",
-              duration: 1000,
-              isClosable: true,
-            });
-          }
-        })
-        .catch((error) => {
-          console.error("Error creating Learn:", error);
-          setDeleteIsLoading(false);
-          setDeleteAlert(false);
-        });
-    } catch (error) {
-      // Handle errors
-      console.error("Error deleting Learn:", error);
-    }
-  };
-
-  const handleUpdateStatus = async (id) => {
-    console.log(id);
-
-    try {
-      // Trigger the mutation
-      await updateLearnBannerStatus({ id })
-        .then((response) => {
-          console.log(response?.data);
-          if (response?.data?.statusCode === 201) {
-            console.log("toasted");
-            toast({
-              title: response?.data?.message,
-              status: "success",
-              isClosable: true,
-            });
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    } catch (error) {
-      // Handle errors
-      console.error("Error updating community status:", error);
-    }
-  };
-
-  // ====================================================[Table Filter]================================================================
-  const filteredData = learnBanner?.data?.data?.rows?.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.Heading;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-
-
-    
-    // Filter by status
-    const status = item.status;
-
-    const statusMatches =
-      statusFilter === "all" ||
-      (statusFilter === "active" && status === true) ||
-      (statusFilter === "inactive" && status === false);
-
-    return nameMatches && statusMatches;
-  });
-
-  // ====================================================[Table Setup]================================================================
-  const tableHeadRow = [
-    "Banner image",
-    "Heading",
-    "Sub heading",
-    "Button title",
-    "Active",
-    "Created At",
-  ];
-
-  const extractedArray = filteredData?.map((item, index) => {
-    return {
-      "Banner image": (
-        <Image
-          w={150}
-          h={14}
-          rounded={4}
-          objectFit="cover"
-          src={`https://rubix.betadelivery.com/${item.banner_image}`}
-          alt="Dan Abramov"
-        />
-      ),
-      Heading: (
-        <Tooltip
-          className="rounded-2 web-text-xsmall"
-          width={"fit-content"}
-          placement="top"
-          hasArrow
-          label={item?.Heading}
-          bg="blue.200"
-        >
-          <Box display={"flex"} alignItems={"center"} w={180}>
-            <Text as={"span"} isTruncated={true}>
-              {item?.Heading}
-            </Text>
-          </Box>
-        </Tooltip>
-      ),
-      "Sub heading": (
-        <Tooltip
-          className="rounded-2 web-text-xsmall"
-          width={"fit-content"}
-          placement="top"
-          hasArrow
-          label={item?.sub_heading}
-          bg="blue.200"
-        >
-          <Box display={"flex"} alignItems={"center"} w={180}>
-            <Text as={"span"} isTruncated={true}>
-              {item?.sub_heading}
-            </Text>
-          </Box>
-        </Tooltip>
-      ),
-      "Button title": item?.CTO_button_title,
-      Active: (
-        <Switch
-          size={"sm"}
-          colorScheme="teal"
-          onChange={() => handleUpdateStatus(item.id)}
-          isChecked={item.status}
-        />
-      ),
-      "Created At": (
-        <span className="d-flex justify-content-between align-items-center">
-          <Text as={"span"} color={"teal.600"} className=" fw-bold">
-            {formatDate(item?.createdAt)}
-          </Text>
-          <Menu>
-            <MenuButton className="link p-1 rounded-1">
-              <HiDotsVertical className="rubix-text-dark fs-6" />
-            </MenuButton>
-            <Portal>
-              <MenuList minWidth="80px">
-                <RouterLink to={`/banner/banner-community/edit/${item.id}`}>
-                  <MenuItem className="web-text-medium">Edit</MenuItem>
-                </RouterLink>
-                <RouterLink to={`/banner/banner-community/view/${item.id}`}>
-                  <MenuItem className="web-text-medium">View</MenuItem>
-                </RouterLink>
-                <MenuItem
-                  onClick={() => {
-                    setActionId(item.id);
-                    setDeleteAlert(true);
-                  }}
-                  className="web-text-medium"
-                >
-                  Delete
-                </MenuItem>
-              </MenuList>
-            </Portal>
-          </Menu>
-        </span>
-      ),
-    };
-  });
-
   return (
-    <Box
-      {...OPACITY_ON_LOAD}
-      overflowY={"scroll"}
-      paddingBottom={50}
-      height={"100vh"}
-    >
-      <Header
-        title={"Community banner"}
-        btnTitle={"Create banner"}
-        link={"/banner/learn/add-banner"}
-      />
-      {/* ====================================================[ Top bar ]================================================================ */}
-
-      {/* <Divider /> */}
-
-      <Box pt={4}>
-        {/* <HStack>
-          <Text color={"teal.800"} className="web-text-large fw-bold">
-            Community Banners
-          </Text>
-        </HStack> */}
-        <HStack
-          display={"flex"}
-          justifyContent={"space-between"}
-          ps={1}
-          pe={1}
-          pb={4}
-          spacing="24px"
-        >
-          <Input
-            type="search"
-            width={300}
-            rounded="md"
-            placeholder="Search..."
-            size="sm"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <HStack>
-            <Select
-              className="pointer"
-              width={300}
-              rounded="md"
-              size="sm"
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
-            >
-              <option value="all">All</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </Select>
-          </HStack>
-        </HStack>
-      </Box>
-
-      {/* ====================================================[ Table ]================================================================ */}
-      <DataTable
-        emptyMessage={"We don't have any banner of this heading"}
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        isLoading={learnBanner?.isLoading}
-      />
-      {/* ====================================================[ Alert ]================================================================ */}
-      <CustomAlertDialog
-        onClose={() => setDeleteAlert(false)}
-        isOpen={deleteAlert}
-        alertHandler={() => handleDelete(actionId)}
-        message={"Are you sure you want to delete member?"}
-        isLoading={deleteIsLoading}
-      />
-    </Box>
+    <BannerTable
+      addLink={"/banner/learn/add-banner"}
+      title={"Learn Banner"}
+      deleteApi={deleteLearnBanner}
+      dataArray={learnBanner}
+      statusUpdateApi={updateLearnBannerStatus}
+    />
   );
 };
 

src/Pages/Banners/BannersNew/BannersNews.jsx

@@ -7,7 +7,7 @@ const BannersNews = () => {
   const { id } = useParams();
   const { data, error, isLoading } = useGetNewsBannerByIdQuery(id);
 
-  return <BannerView isLoading={isLoading} data={data} />;
+  return <BannerView editLink={'/banner/news/edit'} isLoading={isLoading} data={data} />;
 }
 
 export default BannersNews

src/Pages/Community/ComunityViewPage.jsx

@@ -4,12 +4,155 @@ import {
   useGetCommunityByIdQuery,
 } from "../../Services/api.service";
 import BannerView from "../../Components/Banner/BannerView";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import { Box, Divider, Image, Tag } from "@chakra-ui/react";
+import Header from "../../Components/Header";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
 
 const ComunityViewPage = () => {
   const { id } = useParams();
   const { data, error, isLoading } = useGetCommunityByIdQuery(id);
 
-  return <BannerView isLoading={isLoading} data={data} />;
+  console.log(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={`community/view/${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={214}
+              h={240}
+              src={`https://rubix.betadelivery.com/${data?.data?.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">
+          <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">
+              Author name
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {data?.data?.member_name}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Designation
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {data?.data?.designation}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Description
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {data?.data?.description}
+            </Box>
+          </Box>
+
+          <Box  className="mb-3">
+            <Box className="web-text-large fw-bold rubix-text-dark">
+              Linked In
+            </Box>
+            <Box className="web-text-medium text-secondary">
+              {data?.data?.linkedin}
+            </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(data?.data?.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(data?.data?.updatedAt)}
+            </Box>
+          </Box>
+
+          <Divider />
+        </Box>
+      </Box>
+    </Box>
+  );
 };
 
 export default ComunityViewPage;

src/Pages/Events/ViewLearnBanner.jsx

@@ -9,7 +9,7 @@ const ViewLearnBanner = () => {
   const { data, error, isLoading } = useGetLearnBannerByIdQuery(id);
 
   
-  return <BannerView isLoading={isLoading} data={data} />;
+  return <BannerView editLink={'/banner/learn/edit'} isLoading={isLoading} data={data} />;
 };
 
 export default ViewLearnBanner;

src/Routes/Routes.js

@@ -31,36 +31,44 @@ import BannersNews from "../Pages/Banners/BannersNew/BannersNews";
 export const RouteLink = [
   { path: "/", Component: Home },
   { path: "/videos", Component: Videos },
-  { path: "/news", Component: News },
-  { path: "/events", Component: Events },
   { path: "/whitepaper", Component: Whitepapers },
-  { path: "/community", Component: Community },
   { path: "/help-and-support", Component: HelpAndSupport },
 
+  { path: "/community", Component: Community },
   { path: "community/view/:id", Component: ComunityViewPage },
   { path: "community/edit/:id", Component: ComunityEditPage },
   { path: "community/add-comunity", Component: AddComunity },
   { path: "community-table-view", Component: CommunityCardsTableView },
 
+  // =============[ 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/edit/:id", Component: BannerComunityEditPage },
+  { path: "banner/banner-community/view/:id", Component: BannerComunityViewPage },
 
-  // =============[ learn ]================
+  // =============[ learn banner ]================
+  { path: "banner/learn", Component: BannerLearn },
   { path: "banner/learn/add-banner", Component: AddLearnBanner },
   { path: "banner/learn/view/:id", Component: ViewLearnBanner },
+  { path: "banner/learn/edit/:id", Component: ViewLearnBanner },
 
-  // =============[ build ]================
+  // =============[ build banner ]================
   { path: "banner/build/view/:id", Component: BannerBuildView },
+  { path: "banner/build/edit/:id", Component: BannerBuildView },
 
+
+  
+  // =============[ news banner ]================
   { path: "banner/news/view/:id", Component: BannersNews },
+  { path: "banner/news/edit/:id", Component: BannersNews },
+
+
+
+
+
+
+
+
 
   // =============[ blog ]================
   { path: "/blogs-articles", Component: BlogsAndArticles },
@@ -69,10 +77,12 @@ export const RouteLink = [
   { path: "blogs-articles/edit/:id", Component: EditBlogsAndArticles },
 
   // =============[ news ]================
+  { path: "/news", Component: News },
   { path: "/news/view/:id", Component: ViewNews },
   { path: "/news/add-news", Component: AddNews },
   { path: "/news/edit/:id", Component: EditNews },
 
   // =============[ events ]================
+  { path: "/events", Component: Events },
   { path: "/events/add-events", Component: AddEvents },
 ];