api update

src/components/Doughnut/LineChart.jsx

@@ -13,6 +13,8 @@ import {
 import { Box, Heading, useColorMode } from "@chakra-ui/react";
 import ChartsTabs from "../ChartsTabs";
 import dayjs from "dayjs"; // Import for date handling
+import { useGetDailyDataQuery, useGetDateWiseDataQuery, useGetMonthlyDataQuery } from "../../Services/api.service";
+import { timeZone } from "../../Constants/Constants";
 
 // Register the components of Chart.js you need
 ChartJS.register(
@@ -25,56 +27,77 @@ ChartJS.register(
   Legend
 );
 
+
+
+function formatAndSortDataByDayName(data=[]) {
+  console.log("======", data);
+
+  // Create a shallow copy of the data array before sorting
+  const sortedData = [...data]?.sort((a, b) => a.dayId - b.dayId);
+
+  return sortedData?.map(item => {
+    return {
+      dayName: item.dayName,
+      year: item.year,
+      transactionCount: item.transactionCount,
+      totalPrice: item.totalPrice,
+      totalGasFee: item.totalGasFee,
+    };
+  });
+}
+
+
 const LineChart = () => {
   const { colorMode } = useColorMode();
   const [selectedValue, setSelectedValue] = useState("24 Hrs");
   const [labels, setLabels] = useState([]);
   const [dataset, setDataset] = useState([]);
 
+  const {
+    data: monthlyData,
+    isLoading: monthlyDataLoading,
+    refetch
+  } = useGetMonthlyDataQuery(timeZone)
+  const dataSetMonthly = monthlyData?.map((data)=>data?.transactionCount)
+  const dataLableMonthly = monthlyData?.map((data) => data?.monthName)
+
+  const {
+    data: dailyData,
+    isLoading: dailyDataLoading,
+  } = useGetDailyDataQuery(timeZone)
+  const dataSetDaily = dailyData?.map((data)=>data?.transactionCount)
+  const dataLableDaily = dailyData?.map((data) => data?.hour)
+  
+  const {
+    data: dateData,
+    isLoading: dateDataLoading,
+  } = useGetDateWiseDataQuery(timeZone)
+
+  console.log(formatAndSortDataByDayName(dateData?.data));
+  // console.log(formatAndSortDataByDayName(dateData?.data));
+
+  const dataSetDate = dateData?.data?.map((data)=>data?.transactionCount)
+  const dataLableDate = dateData?.data?.map((data) => data?.dayName)
+  // const dataSetDate = [...(dateData?.data || [])].reverse().map((data) => data?.transactionCount);
+  // const dataLableDate = [...(dateData?.data || [])].reverse().map((data) => data?.dayName);
+ 
+
+
   useEffect(() => {
     if (selectedValue === "24 Hrs") {
       // Create hourly labels for 24 hours
-      const hours = Array.from({ length: 24 }, (_, index) => `${index}:00`);
-      setLabels(hours);
-      // Generate random data for each hour
-      const dailyData = Array.from({ length: 24 }, () =>
-        Math.floor(Math.random() * 5000 + 1000)
-      );
-      setDataset(dailyData);
+      setLabels(dataLableDaily);
+      // Generate random data for each day
+      setDataset(dataSetDaily);
     } else if (selectedValue === `${dayjs().daysInMonth()} Days`) {
       // Create labels for the current month (days)
-      const daysInMonth = dayjs().daysInMonth();
-      const days = Array.from(
-        { length: daysInMonth },
-        (_, index) => `Day ${index + 1}`
-      );
-      setLabels(days);
+      setLabels(dataLableDate);
       // Generate random data for each day
-      const monthlyData = Array.from({ length: daysInMonth }, () =>
-        Math.floor(Math.random() * 5000 + 1000)
-      );
-      setDataset(monthlyData);
+      setDataset(dataSetDate);
     } else if (selectedValue === "12 Months") {
       // Labels for months (already set up)
-      setLabels([
-        "Jan",
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-        "Nov",
-        "Dec",
-      ]);
-      // Generate random data for each month
-      const yearlyData = Array.from({ length: 12 }, () =>
-        Math.floor(Math.random() * 5000 + 1000)
-      );
-      setDataset(yearlyData);
+      setLabels(dataLableMonthly);
+      setDataset(dataSetMonthly);
     }
   }, [selectedValue]);
 
@@ -146,6 +169,8 @@ const LineChart = () => {
     },
   };
 
+  console.log(data);
+
   return (
     <>
       <Box

src/components/FullScreenLoaader/FullScreenLoaader.jsx

@@ -0,0 +1,30 @@
+import { Box, Spinner, Text, useColorMode } from "@chakra-ui/react";
+import React from "react";
+import bannerImage from "../../assets/images/bannerImg.png";
+
+const FullScreenLoaader = () => {
+  const { colorMode } = useColorMode();
+  return (
+    <Box
+      backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
+      position={"relative"}
+      backgroundSize="contain"
+      backgroundRepeat="no-repeat"
+      h={"100vh"}
+      w={"100vw"}
+      display={"flex"}
+      justifyContent={"center"}
+      alignItems={"center"}
+    >
+      <Spinner
+        thickness="2px"
+        speed="0.65s"
+        emptyColor={colorMode === "light" ? "#fff" : "#000"}
+        color="purple.700"
+        size="lg"
+      />
+    </Box>
+  );
+};
+
+export default FullScreenLoaader;

src/components/LatestTransactions/LatestTransactions.jsx

@@ -27,7 +27,7 @@ import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
 import { HiOutlineRefresh } from "react-icons/hi";
 
 // Define the keyframes
-const rotate = keyframes`
+export const rotate = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -369,7 +369,7 @@ rounded={"full"}
                       Date and Time Stamp :
                     </Text>
                     <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      {formatRelativeDate(timestamp)}
+                      {timestamp}
                     </Text>
                   </Box>
                   <Box>
@@ -423,11 +423,13 @@ rounded={"full"}
                       </Text>
                     </HStack>
 
-                    <HStack>
+                    
+
+                    <HStack w={"100%"} justifyContent={'flex-start'}>
                       <Text
                         color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                       >
-                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
+                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}
                         :
                       </Text>
                       <Text