update pay function

boilerplate-chakra-pro-main/components/dashboard/users-list/cards/Statistics.tsx

@@ -0,0 +1,49 @@
+import Card from '@/components/card/Card';
+import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+
+const Statistics = (props: {
+  icon?: JSX.Element;
+  title: string;
+  value: number | string;
+  endContent?: JSX.Element;
+}) => {
+  const { icon, title, value, endContent } = props;
+  const textColorSecondary = useColorModeValue('gray.700', 'white');
+  const textColor = useColorModeValue('#120F43', 'white');
+  return (
+    <Card
+      w="100%"
+      justifyContent="space-between"
+      borderRadius="14px"
+      bg="white"
+      py="30px"
+    >
+      <Flex gap="12px" alignItems={'center'}>
+        {icon}
+        <Box>
+          <Text
+            as="h5"
+            fontSize="sm"
+            fontWeight={'500'}
+            color={textColorSecondary}
+          >
+            {title}
+          </Text>
+          <Text
+            color={textColor}
+            fontWeight="700"
+            mt="4px"
+            fontSize="24px"
+            lineHeight={'24px'}
+          >
+            {value}
+          </Text>
+        </Box>
+      </Flex>
+
+      {endContent}
+    </Card>
+  );
+};
+
+export default Statistics;