update table

2024-10-18 20:11:34 +05:30
parent 925012adf5
commit 4f57198d56
10 changed files with 616 additions and 206 deletions
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
-    "revision": "0.ak3sjq5l2po"
+    "revision": "0.4ngos72cbag"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
--- a/src/Constants/Paginations.js
+++ b/src/Constants/Paginations.js
@@ -0,0 +1,2 @@
+export const TABLE_PAGINATION = { page: 1, size:20 }
+export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -285,6 +285,59 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

+  const [subnetId, setSubnetId] = useState([
+    {
+      id: 1,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 2,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 3,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 4,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 5,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 6,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 7,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 8,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 9,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+    {
+      id: 10,
+      subnetId: "A1B2C3D4E5F6G",
+      transactionCount: "10",
+    },
+  ]);
+
  return (
    <GlobalStateContext.Provider
      value={{
@@ -296,6 +349,8 @@ const GlobalStateProvider = ({ children }) => {
        setOverview,
        subnet,
        setSubnet,
+        subnetId,
+        setSubnetId,
      }}
    >
      {children}
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -26,9 +26,9 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
        <Box
          {...checkbox}
          cursor="pointer"
-          borderWidth="1px"
+          // borderWidth="1px"
          borderRadius="md"
-          boxShadow="md"
+          // boxShadow="md"
          fontSize={{ base: "xs", md: "sm" }}
          _checked={{
            bg: "#4023A6",
@@ -76,6 +76,9 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
        />
      </Text>
      <HStack
+        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
+        p={2}
+        rounded={8}
        justifyContent={{ base: "flex-end" }}
        gap={{ base: 0, md: 1 }}
        {...group}
--- a/src/components/DataTable/NormalTable.jsx
+++ b/src/components/DataTable/NormalTable.jsx
@@ -0,0 +1,196 @@
+import React from "react";
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Skeleton,
+  TableCaption,
+  Checkbox,
+  Radio,
+  useColorMode,
+} from "@chakra-ui/react";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+
+const NormalTable = ({
+  data,
+  isLoading,
+  tableHeadRow,
+  emptyMessage,
+  centered,
+  total,
+  showRadioButton, // Prop for showing the checkboxes
+  selectedRadio,
+  setSelectedRadio, // State for managing selected checkboxes
+
+  handleCheckboxChange: radioChange,
+  radio
+}) => {
+  const columnWidth =
+    data && data[0]
+      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
+      : "auto";
+
+      const { colorMode} = useColorMode();
+
+  // Toggle checkbox selection for individual rows
+  // const handleCheckboxChange = (value) => {
+  //   setSelectedRadio((prev) => {
+  //     if (prev.includes(value)) {
+  //       // Remove if already selected
+  //       return prev.filter((id) => id !== value);
+  //     } else {
+  //       // Add to selected
+  //       return [...prev, value];
+  //     }
+  //   });
+  // };
+
+  // Handle "Check All" checkbox
+  const handleCheckAllChange = () => {
+    if (selectedRadio.length === data.length) {
+      setSelectedRadio([]); // Deselect all if already selected
+    } else {
+      const allIds = data.map((item) => item.id);
+      setSelectedRadio(allIds); // Select all
+    }
+  };
+
+
+
+  const handleCheckboxChange = (value) => {
+    if (radio) {
+      setSelectedRadio([value]);
+    } else {
+      setSelectedRadio((prev) => {
+        if (prev.includes(value)) {
+          return prev.filter((id) => id !== value);
+        } else {
+          return [...prev, value];
+        }
+      });
+    }
+  };
+
+  return (
+    <TableContainer rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll"  bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
+      <Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "lightWhite" : "darkPurple"}>
+        <Thead bg="forestGreen.100">
+          <Tr bg={colorMode === "light"? "#230A79" : "#232127"}>
+            {showRadioButton &&(
+              <Th
+                textAlign={"center"}
+                p={4}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+                textTransform={"none"}
+              >
+                {radio? "Select":<Checkbox
+                isChecked={selectedRadio?.length === data?.length}
+                onChange={handleCheckAllChange}
+                colorScheme="forestGreen"
+
+              />}
+              </Th>
+            )}
+            {tableHeadRow.map((heading, index) => (
+              <Th
+              color={"#fff"}
+              fontWeight={500}
+                textAlign={
+                  tableHeadRow.length - 1 === index || centered
+                    ? "center"
+                    : "left"
+                }
+                key={index}
+                p={4}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+                textTransform={"none"}
+              >
+                {isLoading ? <Skeleton height="20px" /> : heading}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody className="web-text-small">
+          {isLoading
+            ? Array.from({ length: TABLE_PAGINATION?.size }).map(
+                (_, index) => (
+                  <Tr 
+                    bg={index % 2 === 0 ? "white" : "forestGreen.50"}
+                    key={index}
+                  >
+                    {tableHeadRow.map((_, i) => (
+                      <Td 
+                        key={i}
+                        style={{
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        className="web-text-small"
+                      >
+                        <Skeleton height="20px" mb={1} mt={1} />
+                      </Td>
+                    ))}
+                  </Tr>
+                )
+              )
+            : data?.map((item, index) => (
+                <Tr
+                  cursor={"pointer"}
+                  transition={"0.2s all"}
+                  maxH={8}
+                  bg={index % 2 === 0 ? "" : "forestGreen.50"}
+                  key={index}
+                >
+                  {showRadioButton && (
+                    <Td textAlign={"center"} >
+                      {radio ? <Radio
+                        bg={"#fff"}
+                        colorScheme="forestGreen"
+                        value={item.id}
+                        isChecked={selectedRadio.includes(item.id)}
+                        onChange={() => radioChange(item.id, item)}
+                      />:<Checkbox
+                        bg={"#fff"}
+                        colorScheme="forestGreen"
+                        value={item.id}
+                        isChecked={selectedRadio.includes(item.id)}
+                        onChange={() => handleCheckboxChange(item.id)}
+                      />}
+                    </Td>
+                  )}
+                  {tableHeadRow.map((heading, i) => (
+                    <Td p={3}
+                     color={colorMode === "light"? "#000000" : "#FFFFFF"}
+                      textAlign={
+                        tableHeadRow?.length - 1 === i || centered
+                          ? "center"
+                          : "left"
+                      }
+                      key={i}
+                      fontWeight={colorMode === "light"? 500 : 400}
+                      style={{
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                      }}
+                      className="web-text-small"
+                    >
+                      {item[heading]}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default NormalTable;
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -9,6 +9,8 @@ import {
  useColorMode,
 } from "@chakra-ui/react";
 import { FaArrowLeftLong, FaArrowRightLong } from "react-icons/fa6";
+import { TbChevronLeftPipe, TbChevronRightPipe } from "react-icons/tb";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
 // import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';

 const Pagination = ({
@@ -48,64 +50,8 @@ const Pagination = ({

  return (
    <HStack mt={14} display={"flex"} justifyContent={"end"}>
-      {/* <Text className='web-text-small'>Tanami v0.1</Text> */}
-
-      {/* <HStack justifyContent={"space-between"} w={"100%"}> */}
-        {/* <Button
-          mt={1}
-          size={"sm"}
-          rounded="md"
-          leftIcon={<FaArrowLeftLong />} // Icon on the left
-          onClick={paginationPrev}
-          className="link pointer"
-          isDisabled={currentPage === 1}
-          aria-label="Previous Page"
-          bg={colorMode === "light" ? "light.100" : "#232127"}
-          border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
-          _hover={{
-            bg: colorMode === "light" ? "inherit" : "#312F35",
-          }}
-          _focus={{
-            outline:"none"
-          }}
-        >
-          Previous
-        </Button> */}
-        {/* <Text
-          w={"100px"}
-          display={"flex"}
-          justifyContent={"center"}
-          className="web-text-medium"
-          as={"span"}
-        >
-          {isLoading ? "0" : displayRange?.start} - {" "}
-          {isLoading ? "00" : displayRange?.end} of {" "}
-          {isLoading ? "00" : totalItems}
-        </Text> */}
-        {/* <Text><Text as={"span"} me={3}>1</Text> <Text as={"span"} me={3}>2</Text> <Text as={"span"} me={3}>3</Text> <Text as={"span"} me={3}>4</Text><Text as={"span"} >....</Text></Text>
-        <Button
-          mt={1}
-          size={"sm"}
-          rounded="md"
-          rightIcon={<FaArrowRightLong />} // Icon on the left
-          onClick={paginationNext}
-          className="link pointer"
-          isDisabled={currentPage === totalPages}
-          aria-label="Previous Page"
-          bg={colorMode === "light" ? "light.100" : "#232127"}
-          border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
-          _hover={{
-            bg: colorMode === "light" ? "inherit" : "#312F35",
-          }}
-          _focus={{
-            outline:"none"
-          }}
-        >
-          Next
-        </Button> */}
-       {/* </HStack> */}
        <Box className="ttttt" display={"flex"} fontSize={"sm"} alignItems={"center"} >
-          <Text>Rows per page:</Text>
+          <Text>Rows per page :</Text>
            <Select mx={4} width={"60px"} rounded="md" size="xs">
              <option value="option1">10</option>
              <option value="option2">20</option>
@@ -114,65 +60,25 @@ const Pagination = ({
          <Text mx={5}>1-10 of 1024778</Text>
          <Box display={"flex"} alignItems={"center"}>
            <Button bg={"none"} p={0} 
-            _hover={{backgroundColor:"none",border:"none"}}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                role="presentation"
-                style={{ color: colorMode === "light" ? "#000" : "#fff" }}
-              >
-                <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"></path>
-                <path fill="none" d="M24 24H0V0h24v24z"></path>
-              </svg>
+              _hover={{backgroundColor:"none",border:"none"}}
+              _focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
+              <TbChevronLeftPipe />
            </Button>
-            <Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                role="presentation"
-                style={{ color: colorMode === "light" ? "#000" : "#fff" }}
-              >
-                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
-                <path d="M0 0h24v24H0z" fill="none"></path>
-              </svg>
+            <Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}
+              _focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
+              <FiChevronLeft />
            </Button>
-            <Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                role="presentation"
-                style={{ color: colorMode === "light" ? "#000" : "#fff" }}
-              >
-                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
-                <path d="M0 0h24v24H0z" fill="none"></path>
-              </svg>
+            <Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}
+              _focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
+              <FiChevronRight />
            </Button>
-            <Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-                role="presentation"
-              >
-                <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"></path>
-                <path fill="none" d="M0 0h24v24H0V0z"></path>
-              </svg>
+            <Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}
+              _focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
+              <TbChevronRightPipe />
            </Button>
          </Box>
        </Box>
      </HStack>
-   
  );
 };

--- a/src/pages/SubnetId.jsx
+++ b/src/pages/SubnetId.jsx
@@ -1,90 +1,62 @@
 import {
+  Badge,
  Box,
  Button,
  Container,
-  Grid,
-  GridItem,
  Heading,
  HStack,
  Icon,
+  Image,
  Input,
  InputGroup,
-  Link,
  Select,
-  Table,
-  TableCaption,
-  TableContainer,
-  Tbody,
-  Td,
  Text,
-  Th,
-  Thead,
-  Tr,
  useColorMode,
-  useToast,
  VStack,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
-import Pagination from "../components/Pagination";
-import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
-import ToastBox from "../components/ToastBox";
+import NormalTable from "../components/DataTable/NormalTable";
 import bannerImage from "../assets/images/bannerImg.png";
 import { useNavigate, useParams } from "react-router-dom";
+import Pagination from "../components/Pagination";

 const SubnetId = () => {
+  const { subnetId } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
  const { colorMode } = useColorMode();
-  const params = useParams();
  const navigate = useNavigate();

-  const toast = useToast();
  useEffect(() => {
-    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false); 
+    }, 500);
+    return () => clearTimeout(timer);
  }, []);

-  const tableData = [
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
-    {
-      "Subnet Id": "A1B2C3D4E5F6G",
-      "Transaction count": 10,
-    },
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Sr. no",
+    "Subnet ID",
+    "Transaction count",
  ];

+  // const extractedArray = reportsHistory.map((item)=>({ }))
+  const extractedArray = subnetId.map((item, index) => ({
+    "Sr. no": (
+      <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+        {index + 1}
+      </Text>
+    ),
+    "Subnet ID": (
+        <Box color={colorMode === "light"? "#230A79" : "#B09AFF"}  onClick={() =>
+            navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}>
+          {item?.subnetId}
+         </Box>
+     ),
+    "Transaction count": item?.transactionCount,
+  }));
  return (
    <Box
      p={"6rem 0 4rem 0"}
@@ -106,7 +78,7 @@ const SubnetId = () => {
          color={colorMode === "light" ? "#000" : "#fff"}
          mb={{ base: "10px", md: "0px" }}
        >
-          Subnet Overview {params?.id}
+          Subnet Overview {useParams?.id}
        </Heading>
        <Text
          to=""
@@ -134,15 +106,11 @@ const SubnetId = () => {
              boxShadow={"sm"}
              size="sm"
              bg={colorMode === "light" ? "light.100" : "#393939"}
-              // border={"none"}
              rounded={"lg"}
            >
              <Input
                roundedLeft={8}
                w={"76%"}
-                // border={`1px solid ${
-                //   colorMode === "light" ? "#230A79" : "#393939"
-                // }`}
                borderColor={colorMode === "light" ? "#CED4DA" : "#565252"}
                h={"42px"}
                type="search"
@@ -189,35 +157,15 @@ const SubnetId = () => {
          </Box>
        </Container>
      </VStack>
-      <Box>
-        <Container maxW="6xl">
-          <TableContainer roundedTop={5}
-             bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
-            <Table variant="striped" colorScheme="darkPurple">
-              <Thead>
-                <Tr bg={colorMode === "light" ? "#230A79" : "#312f35"}>
-                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Sr. no</Th>
-                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Subnet Id</Th>
-                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Transaction count</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {tableData.map((row, index) => (
-                  <Tr key={index}>
-                    <Td w={50} fontSize={"xs"} py={3}>{index + 1}.</Td>
-                    <Td fontWeight={500} cursor={"pointer"} w={200} color={colorMode === "light" ? "#230A79" : "#B09AFF"} fontSize={"xs"} py={3} onClick={() =>
-                      navigate(`/subnet-id-overview/${row["Subnet Id"]}`)
-                    }>{row["Subnet Id"]}
-                    </Td>
-                    <Td w={100} fontSize={"xs"} py={3}>{row["Transaction count"]}</Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </TableContainer>
-          <Pagination />
-        </Container>
-      </Box>
+      <Container maxW="6xl">
+        <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            isLoading={isLoading}
+        />
+        <Pagination />
+      </Container>
    </Box>
  );
 };
--- a/src/pages/SubnetIdold.jsx
+++ b/src/pages/SubnetIdold.jsx
@@ -0,0 +1,225 @@
+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  GridItem,
+  Heading,
+  HStack,
+  Icon,
+  Input,
+  InputGroup,
+  Link,
+  Select,
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  useColorMode,
+  useToast,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect } from "react";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import Pagination from "../components/Pagination";
+import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
+import ToastBox from "../components/ToastBox";
+import bannerImage from "../assets/images/bannerImg.png";
+import { useNavigate, useParams } from "react-router-dom";
+
+const SubnetId = () => {
+  const { colorMode } = useColorMode();
+  const params = useParams();
+  const navigate = useNavigate();
+
+  const toast = useToast();
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
+  }, []);
+
+  const tableData = [
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+    {
+      "Subnet Id": "A1B2C3D4E5F6G",
+      "Transaction count": 10,
+    },
+  ];
+
+  return (
+    <Box
+      p={"6rem 0 4rem 0"}
+      backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
+      position={"relative"}
+      backgroundSize="contain"
+      backgroundRepeat="no-repeat"
+    >
+      <Container
+        maxW="6xl"
+        color="white"
+        display={{ base: "block", md: "flex" }}
+        justifyContent={"space-between"}
+        mb={10}
+      >
+        <Heading
+          fontSize={"md"}
+          fontWeight={400}
+          color={colorMode === "light" ? "#000" : "#fff"}
+          mb={{ base: "10px", md: "0px" }}
+        >
+          Subnet Overview {params?.id}
+        </Heading>
+        <Text
+          to=""
+          style={{ fontSize: "14px" }}
+          color={colorMode === "light" ? "#000" : "#fff"}
+          display={"flex"}
+          gap={"3"}
+        >
+          View total number of records
+          <Select width={"70px"} rounded="md" size="xs">
+            <option value="option1">10</option>
+            <option value="option2">20</option>
+            <option value="option3">30</option>
+          </Select>
+        </Text>
+      </Container>
+      <VStack
+        pt={{ base: colorMode === "light" ? 10 : 10, md: 10 }}
+        mb={{ base: 8, md: 14 }}
+      >
+        <Container maxW="2xl" position={"relative"}>
+          <Box w={"100%"} display={"flex"} alignItems={"center"}>
+            <InputGroup
+              width={"100%"}
+              boxShadow={"sm"}
+              size="sm"
+              bg={colorMode === "light" ? "light.100" : "#393939"}
+              // border={"none"}
+              rounded={"lg"}
+            >
+              <Input
+                roundedLeft={8}
+                w={"76%"}
+                // border={`1px solid ${
+                //   colorMode === "light" ? "#230A79" : "#393939"
+                // }`}
+                borderColor={colorMode === "light" ? "#CED4DA" : "#565252"}
+                h={"42px"}
+                type="search"
+                placeholder="Search by Subnet ID"
+                onChange={(e) => setSearchTerm(e.target.value)}
+                _hover={{
+                  borderColor: "#7f8c8d",
+                }}
+                _placeholder={{ color: "#737C82" }}
+                _focusVisible={{
+                  borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d",
+                }}
+              />
+              <Button
+                zIndex={99}
+                h={"42px"}
+                w={{ base: "205px", md: "24%" }}
+                fontWeight={400}
+                roundedBottomRight={8}
+                roundedTopRight={8}
+                fontSize={"sm"}
+                rounded={0}
+                border="none"
+                bg={colorMode === "light" ? "#4023A6" : "#565252"}
+                _hover={{
+                  opacity: 0.9,
+                  bg: colorMode !== "light" && "#333248",
+                }}
+                _focus={{
+                  opacity: 1,
+                  outline: "none",
+                  bg: colorMode === "light" ? "#4023A6" : "#565252",
+                }}
+                _active={{
+                  opacity: 0.9,
+                  outline: "none",
+                  bg: colorMode === "light" ? "#4023A6" : "#565252",
+                }}
+                color={"#fff"}
+              >
+                Search
+              </Button>
+            </InputGroup>
+          </Box>
+        </Container>
+      </VStack>
+      <Box>
+        <Container maxW="6xl">
+          <TableContainer roundedTop={5}
+             bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
+            <Table variant="striped" colorScheme="darkPurple">
+              <Thead>
+                <Tr bg={colorMode === "light" ? "#230A79" : "#312f35"}>
+                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Sr. no</Th>
+                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Subnet Id</Th>
+                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Transaction count</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {tableData.map((row, index) => (
+                  <Tr key={index}>
+                    <Td w={50} fontSize={"xs"} py={3}>{index + 1}.</Td>
+                    <Td fontWeight={500} cursor={"pointer"} w={200} color={colorMode === "light" ? "#230A79" : "#B09AFF"} fontSize={"xs"} py={3} onClick={() =>
+                      navigate(`/subnet-id-overview/${row["Subnet Id"]}`)
+                    }>{row["Subnet Id"]}
+                    </Td>
+                    <Td w={100} fontSize={"xs"} py={3}>{row["Transaction count"]}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+          <Pagination />
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default SubnetId;
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -15,6 +15,7 @@ import RelatedTransactions from "../../components/RelatedTransactions/RelatedTra
 import bannerImage from "../../assets/images/bannerImg.png";
 import ToastBox from "../../components/ToastBox";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import TransactionTable from "./TransactionTable";

 const TransactionDetails = () => {
  const navigate = useNavigate();
@@ -392,6 +393,7 @@ const TransactionDetails = () => {
              </Text>
            </HStack>
          </Box>
+          <TransactionTable />
        </Container>
      </Box>
      <RelatedTransactions />
--- a/src/pages/Transaction/TransactionTable.jsx
+++ b/src/pages/Transaction/TransactionTable.jsx
@@ -0,0 +1,73 @@
+import {
+    Badge,
+    Box,
+    Button,
+    Container,
+    Heading,
+    HStack,
+    Icon,
+    Image,
+    Input,
+    InputGroup,
+    Select,
+    Text,
+    useColorMode,
+    VStack,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useState } from "react";
+  import { useNavigate, useParams } from "react-router-dom";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../components/DataTable/NormalTable";
+  
+  const TransactionTable = () => {
+    const { subnetId } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const { colorMode } = useColorMode();
+    const navigate = useNavigate();
+  
+    useEffect(() => {
+      setIsLoading(true);
+      const timer = setTimeout(() => {
+        setIsLoading(false); 
+      }, 500);
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+      "Sr. no",
+      "Subnet ID",
+      "Transaction count",
+    ];
+  
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+    const extractedArray = subnetId.map((item, index) => ({
+      "Sr. no": (
+        <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+          {index + 1}
+        </Text>
+      ),
+      "Subnet ID": (
+          <Box color={colorMode === "light"? "#230A79" : "#B09AFF"}  onClick={() =>
+              navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}>
+            {item?.subnetId}
+           </Box>
+       ),
+      "Transaction count": item?.transactionCount,
+    }));
+    return (
+      <Box
+        pt={"2rem"}
+      >
+          <NormalTable
+              emptyMessage={`We don't have any Sponers `}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              isLoading={isLoading}
+          />
+      </Box>
+    );
+  };
+  
+  export default TransactionTable;
+