chore(web): display received sms count in dashboard

web/components/dashboard/UserStats.tsx

@@ -1,4 +1,4 @@
-import { Box, SimpleGrid, chakra } from '@chakra-ui/react'
+import { Box, Grid, GridItem, SimpleGrid, chakra } from '@chakra-ui/react'
 import React, { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { selectAuthUser } from '../../store/authSlice'
@@ -13,8 +13,12 @@ import { useAppDispatch, useAppSelector } from '../../store/hooks'
 const UserStats = () => {
   const authUser = useSelector(selectAuthUser)
 
-  const { totalApiKeyCount, totalDeviceCount, totalSMSCount } =
-    useAppSelector(selectStatsData)
+  const {
+    totalApiKeyCount,
+    totalDeviceCount,
+    totalReceivedSMSCount,
+    totalSentSMSCount,
+  } = useAppSelector(selectStatsData)
   const statsLoading = useAppSelector(selectStatsLoading)
 
   const dispatch = useAppDispatch()
@@ -25,31 +29,47 @@ const UserStats = () => {
 
   return (
     <>
-      <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <SimpleGrid columns={{ base: 1, md: 2 }}>
-          <chakra.h1
-            // textAlign={'center'}
-            fontSize={'2xl'}
-            py={10}
-            fontWeight={'bold'}
-          >
-            Welcome {authUser?.name}
-          </chakra.h1>
-          <SimpleGrid columns={{ base: 3 }} spacing={{ base: 5, lg: 8 }}>
-            <UserStatsCard
-              title={'Registered '}
-              stat={`${statsLoading ? '-:-' : totalDeviceCount} Devices`}
-            />
-            <UserStatsCard
-              title={'Generated'}
-              stat={`${statsLoading ? '-:-' : totalApiKeyCount} API Keys`}
-            />
-            <UserStatsCard
-              title={'Sent'}
-              stat={`${statsLoading ? '-:-' : totalSMSCount} SMS Sent`}
-            />
-          </SimpleGrid>
-        </SimpleGrid>
+      <Box maxW='12xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
+        <Grid
+          templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }}
+          gap={6}
+        >
+          <GridItem colSpan={1}>
+            <chakra.h1
+              textAlign={'center'}
+              fontSize={'2xl'}
+              py={10}
+              fontWeight={'bold'}
+            >
+              Welcome {authUser?.name}
+            </chakra.h1>
+          </GridItem>
+          <GridItem colSpan={2}>
+            <SimpleGrid
+              columns={{ base: 2, md: 4 }}
+              spacing={{ base: 5, lg: 8 }}
+            >
+              <UserStatsCard
+                title={'Registered '}
+                stat={`${statsLoading ? '-:-' : totalDeviceCount} Devices`}
+              />
+              <UserStatsCard
+                title={'Generated'}
+                stat={`${statsLoading ? '-:-' : totalApiKeyCount} API Keys`}
+              />
+              <UserStatsCard
+                title={'Sent'}
+                stat={`${statsLoading ? '-:-' : totalSentSMSCount} SMS Sent`}
+              />
+              <UserStatsCard
+                title={'Received'}
+                stat={`${
+                  statsLoading ? '-:-' : totalReceivedSMSCount
+                } SMS Received`}
+              />
+            </SimpleGrid>
+          </GridItem>
+        </Grid>
       </Box>
     </>
   )

web/store/statsSlice.ts

@@ -11,7 +11,8 @@ const initialState = {
   data: {
     totalApiKeyCount: 0,
     totalDeviceCount: 0,
-    totalSMSCount: 0,
+    totalReceivedSMSCount: 0,
+    totalSentSMSCount: 0,
   },
 }