From 5f3be49ed05cfc434bd0333ac640a957730d82a3 Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Wed, 23 Oct 2024 18:00:34 +0530
Subject: [PATCH] update

---
 src/Contexts/GlobalStateContext.jsx          |  1 +
 src/Contexts/GlobalStateProvider.jsx         | 54 +++---------------
 src/components/DataTable/NormalTable.jsx     |  9 +--
 src/components/Doughnut/LineChart.jsx        |  2 +-
 src/components/NavBar/NavBar.jsx             | 10 +++-
 src/pages/Transaction/TransactionDetails.jsx | 59 +++++++++++++++-----
 src/pages/Transaction/TransactionTable.jsx   | 13 ++++-
 7 files changed, 77 insertions(+), 71 deletions(-)

diff --git a/src/Contexts/GlobalStateContext.jsx b/src/Contexts/GlobalStateContext.jsx
index 48a2ae0..a77ed8f 100644
--- a/src/Contexts/GlobalStateContext.jsx
+++ b/src/Contexts/GlobalStateContext.jsx
@@ -1,3 +1,4 @@
+
 // GlobalStateContext.js
 import { createContext } from 'react';
 
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 34bdb9c..c7658b0 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -554,53 +554,13 @@ 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",
+      subnetId: "96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
+      transactionCount: [
+        "96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
+        "96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
+        "96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001",
+        "96717e750ab7944355fa6c8d9289609477c03ef84e7237eca632af62af89d001"
+      ],
     },
   ]);
 
diff --git a/src/components/DataTable/NormalTable.jsx b/src/components/DataTable/NormalTable.jsx
index 6ba4b67..6719e8d 100644
--- a/src/components/DataTable/NormalTable.jsx
+++ b/src/components/DataTable/NormalTable.jsx
@@ -76,9 +76,9 @@ const NormalTable = ({
   };
 
   return (
-    <TableContainer rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll"  bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
+    <TableContainer boxShadow={'md'} rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll"  bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
       <Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "whiteScheme" : "darkPurple"}>
-        <Thead bg="forestGreen.100">
+        <Thead >
           <Tr bg={colorMode === "light"? "#230A79" : "#312F35"}>
             {showRadioButton &&(
               <Th
@@ -103,11 +103,12 @@ const NormalTable = ({
               fontWeight={500}
                 textAlign={
                   tableHeadRow.length - 1 === index || centered
-                    ? "center"
+                    ? "left"
                     : "left"
                 }
                 key={index}
                 p={4}
+                
                 whiteSpace="normal"
                 wordBreak="normal"
                 overflowWrap="normal"
@@ -171,7 +172,7 @@ const NormalTable = ({
                      color={colorMode === "light"? "#000000" : "#FFFFFF"}
                       textAlign={
                         tableHeadRow?.length - 1 === i || centered
-                          ? "center"
+                          ? "left"
                           : "left"
                       }
                       key={i}
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index 495bca7..394937a 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -98,7 +98,7 @@ const LineChart = () => {
       setLabels(dataLableMonthly);
       setDataset(dataSetMonthly);
     }
-  }, [selectedValue, dailyData]);
+  }, [selectedValue, dailyData, dateData, monthlyData]);
 
   const data = {
     labels: labels,
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 9121738..b2fd945 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -45,9 +45,10 @@ const NavBar = () => {
         top={0}
         left={0}
         id="navbar"
-        color={colorMode === "light" ? "light" : "black.900"}
+        // color={colorMode === "light" ? "light" : "light"}
         padding={"16px 0px"}
-        borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
+        borderBottom={colorMode === "light" ? "1px solid #4023A6" : "none"}
+        bg={colorMode === "light"? "#4023A6":""}
       >
         <Container maxW="6xl">
           <Box
@@ -58,7 +59,8 @@ const NavBar = () => {
           >
             <Link to="/">
               <Image
-                src={colorMode === "light" ? logoLight : logo}
+                // src={colorMode === "light" ? logoLight : logo}
+                src={logo}
                 // width={"120px"}
                 width={{base:"95px",md : "120px"}}
               />
@@ -71,6 +73,7 @@ const NavBar = () => {
                     fontSize={{ base: "12px", md: "14px" }}
                     fontWeight="400"
                     borderBottom={isActive ? "1px solid #DE858E" : "0px solid #fff"}
+                    color={'#fff'}
                   >
                     MAIN NET
                   </Text>
@@ -82,6 +85,7 @@ const NavBar = () => {
                     fontSize={{ base: "12px", md: "14px" }}
                     fontWeight="400"
                     borderBottom={isActive ? "1px solid #DE858E" : "0px solid #fff"}
+                    color={'#fff'}
                   >
                     SUBNETS
                   </Text>
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index 1d1f98f..1fd8bb4 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -20,36 +20,28 @@ import TransactionTable from "./TransactionTable";
 import { useGetTransByIdQuery } from "../../Services/api.service";
 // import rbtLogoOutline from "../../src/assets/images/rubix-filled.svg";
 import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
+import { formatUTCToDDMMYYHHMMSS } from "../../Constants/Constants";
+import NormalTable from "../../components/DataTable/NormalTable";
 
 const TransactionDetails = () => {
   const navigate = useNavigate();
   const params = useParams();
   const { colorMode } = useColorMode();
-  console.log(params?.id);
-
-
   const {
     data,
     isLoading,
     refetch,
     errors,
   } = useGetTransByIdQuery(params?.id);
-
-  console.log(data?.data);
-  
-  
   // Scroll to top when component mounts or params change
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
   }, [params]);
-
   const { transactions } = useContext(GlobalStateContext);
   const filteredData = transactions?.find(
     (item) => item?.description === params?.id
   );
-  console.log(filteredData);
   const toast = useToast();
-
   function copyToClipboard(text) {
     navigator.clipboard
       .writeText(text)
@@ -67,6 +59,31 @@ const TransactionDetails = () => {
       });
   }
 
+  console.log(data?.data?.quorumList);
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    // "Sr. no", 
+    "Quorum List"];
+
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+  const extractedArray = data?.data?.quorumList?.map((item, index) => ({
+    "Sr. no": (
+      <Text w={18} as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+        {index + 1}
+      </Text>
+    ),
+    "Quorum List": (
+      <Box
+        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+        onClick={() => navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}
+      >
+        {item}
+      </Box>
+    ),
+  }));
+
   return (
     <>
       <Box
@@ -210,7 +227,7 @@ const TransactionDetails = () => {
             boxShadow={colorMode === "light" && "md"}
             bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
             p={4}
-            mb={5}
+            mb={extractedArray&&5}
             rounded={6}
           >
             {data?.data?.netWorkType && <>
@@ -328,8 +345,9 @@ const TransactionDetails = () => {
             boxShadow={colorMode === "light" && "md"}
             bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
             p={4}
-            mb={0}
+            mb={5}
             rounded={6}
+          
           >
             <HStack fontSize={"sm"} gap={{base:"4rem",md:"8rem"}} mb={2}>
               {data?.data?.amount && <Box>
@@ -346,10 +364,25 @@ const TransactionDetails = () => {
               </Box>}
               {data?.data?.timestamp && <Box>
                 <Text>Timestamp</Text>
-                <Text color={"#A1A1A1"}>{data?.data?.timestamp}</Text>
+                <Text color={"#A1A1A1"}>{formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}</Text>
               </Box>}
             </HStack>
           </Box>
+
+
+
+
+
+      {extractedArray&&<NormalTable
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+      />}
+
+
+
+
+
           <TransactionTable />
         </Container>
       </Box>
diff --git a/src/pages/Transaction/TransactionTable.jsx b/src/pages/Transaction/TransactionTable.jsx
index 9484adb..bfd2763 100644
--- a/src/pages/Transaction/TransactionTable.jsx
+++ b/src/pages/Transaction/TransactionTable.jsx
@@ -19,12 +19,15 @@ const TransactionTable = () => {
   }, []);
 
   // ===============================[ Table Header ]
-  const tableHeadRow = ["Sr. no", "Quorum DID", "Pledge Token(s)"];
+  const tableHeadRow = [
+    // "Sr. no", 
+    "Quorum DID", 
+    "Pledge Token(s)"];
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
   const extractedArray = subnetId.map((item, index) => ({
     "Sr. no": (
-      <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+      <Text w={57} as={"span"} display={"flex"} gap={2} alignItems={"center"}>
         {index + 1}
       </Text>
     ),
@@ -36,7 +39,11 @@ const TransactionTable = () => {
         {item?.subnetId}
       </Box>
     ),
-    "Pledge Token(s)": item?.transactionCount,
+    "Pledge Token(s)": item?.transactionCount?.map((trans, index) => (
+      <Box mb={1} key={index} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+        {trans}
+      </Box>
+    )),
   }));
   return (
     <Box pt={5}>