Utilized new components.

src/app/page.tsx

@@ -2,18 +2,21 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Fragment } from "react/jsx-runtime";
+import { Heading, Skeleton, VStack } from "@chakra-ui/react";
-import { Box, Heading, Skeleton, Text } from "@chakra-ui/react";
-import { Icon } from "@iconify/react";
 import { useQuery } from "@urql/next";
-import Get30DayStatsQuery from "@/graphql/queries/get30DayStats";
-import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
 import lineChartArr from "@/lib/lineChartArray";
 import LinksDeletedChart from "./LinksDeletedChart";
 import { LineChartArr } from "@/types/LineChartStats";
+import CommandResponsesChart from "./CommandResponsesChart";
+import TimedTriggeredChart from "./TimesTriggeredChart";
+import GetStatsRange from "@/graphql/queries/getStatsRange";
+import StatsList from "./StatsList";
+import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
+import GetTotalStatsQuery from "@/graphql/queries/getTotalStats";
+import GetTodaysStatsQuery from "@/graphql/queries/getTodaysStats";
 
 export default function Home() {
-  // Total Groups //
+  // * Total Groups * //
 
   const [
     {
@@ -25,7 +28,23 @@ export default function Home() {
     query: GetTotalGroupsQuery
   });
 
-  // 30 Day Stats //
+  // * Total Stats * //
+
+  const [
+    { fetching: totalStatsFetching, data: totalStats, error: totalStatsError }
+  ] = useQuery({
+    query: GetTotalStatsQuery
+  });
+
+  // * Today's Stats * //
+
+  const [
+    { fetching: todaysStatsFetching, data: todayStats, error: todaysStatsError }
+  ] = useQuery({
+    query: GetTodaysStatsQuery
+  });
+
+  // * 30 Day Stats * //
 
   // Dates
   const [currDate, setCurrDate] = useState<Date>();
@@ -43,7 +62,7 @@ export default function Home() {
       error: thirtyDayStatsError
     }
   ] = useQuery({
-    query: Get30DayStatsQuery,
+    query: GetStatsRange,
     variables: {
       stateDate: currDate,
       endDate: date30DaysAgo
@@ -66,25 +85,36 @@ export default function Home() {
   ]);
 
   return (
-    <Fragment>
+    <VStack w="100%" gap={6}>
-      <Heading>{`Total number of groups the bot has helped`}</Heading>
+      <StatsList
-      <Skeleton loading={totalGroupsFetching} width="2rem">
+        title="Total Stats"
-        <Text fontSize="2xl">
+        loading={totalStatsFetching || totalGroupsFetching}
-          {totalGroupsError || !totalGroups || !totalGroups.getTotalGroups ? (
+        error={totalStatsError || totalGroupsError}
-            <Icon
+        groups={totalGroups.getTotalGroups}
-              color="yellow"
+        links={totalStats.getTotalStats.linksDeleted}
-              icon="solar:danger-triangle-broken"
+        commands={totalStats.getTotalStats.commandResponses}
-              width="24"
+        triggers={totalStats.getTotalStats.timesTriggered}
-              height="24"
       />
-          ) : (
+      <StatsList
-            `${totalGroups.getTotalGroups}`
+        title="Today's Stats"
-          )}
+        loading={todaysStatsFetching}
-        </Text>
+        error={todaysStatsError}
-      </Skeleton>
+        links={todayStats.getTodayStats.linksDeleted}
-      <Box w="80%" mx={6}>
+        commands={todayStats.getTodayStats.commandResponses}
+        triggers={todayStats.getTodayStats.timesTriggered}
+      />
+      <VStack w="80vw" gap={6}>
+        <Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading>
+        <Skeleton w="100%" h="auto" loading={thirtyDayStatsFetching}>
           <LinksDeletedChart lineChartData={lineChartArrState} />
-      </Box>
+        </Skeleton>
-    </Fragment>
+        <Skeleton w="100%" h="auto" loading={thirtyDayStatsFetching}>
+          <CommandResponsesChart lineChartData={lineChartArrState} />
+        </Skeleton>
+        <Skeleton w="100%" h="auto" loading={thirtyDayStatsFetching}>
+          <TimedTriggeredChart lineChartData={lineChartArrState} />
+        </Skeleton>
+      </VStack>
+    </VStack>
   );
 }