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,17 +29,26 @@ const UserStats = () => {
 
   return (
     <>
-      <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <SimpleGrid columns={{ base: 1, md: 2 }}>
+      <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'}
+              textAlign={'center'}
               fontSize={'2xl'}
               py={10}
               fontWeight={'bold'}
             >
               Welcome {authUser?.name}
             </chakra.h1>
-          <SimpleGrid columns={{ base: 3 }} spacing={{ base: 5, lg: 8 }}>
+          </GridItem>
+          <GridItem colSpan={2}>
+            <SimpleGrid
+              columns={{ base: 2, md: 4 }}
+              spacing={{ base: 5, lg: 8 }}
+            >
               <UserStatsCard
                 title={'Registered '}
                 stat={`${statsLoading ? '-:-' : totalDeviceCount} Devices`}
@@ -46,10 +59,17 @@ const UserStats = () => {
               />
               <UserStatsCard
                 title={'Sent'}
-              stat={`${statsLoading ? '-:-' : totalSMSCount} SMS Sent`}
+                stat={`${statsLoading ? '-:-' : totalSentSMSCount} SMS Sent`}
+              />
+              <UserStatsCard
+                title={'Received'}
+                stat={`${
+                  statsLoading ? '-:-' : totalReceivedSMSCount
+                } SMS Received`}
               />
             </SimpleGrid>
-        </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,
   },
 }