update pay function

boilerplate-chakra-pro-main/components/card/MiniStatistics.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Card from '@/components/card/Card';
+import {
+  Flex,
+  Stat,
+  StatLabel,
+  StatNumber,
+  useColorModeValue,
+  Text,
+} from '@chakra-ui/react';
+
+export default function Default(props: {
+  startContent?: JSX.Element;
+  endContent?: JSX.Element;
+  name: string;
+  growth?: string | number;
+  value: string | number;
+}) {
+  const { startContent, endContent, name, growth, value } = props;
+  const textColor = useColorModeValue('#120F43', 'white');
+  const textColorSecondary = 'gray.500';
+
+  return (
+    <Card>
+      <Flex
+        my="auto"
+        h="100%"
+        align={{ base: 'center', xl: 'start' }}
+        justify={{ base: 'center', xl: 'center' }}
+        alignItems="center"
+      >
+        {startContent}
+
+        <Stat my="auto" ms={startContent ? '18px' : '0px'}>
+          <StatLabel
+            lineHeight="100%"
+            color={textColorSecondary}
+            fontSize="sm"
+            mb="4px"
+          >
+            {name}
+          </StatLabel>
+          <StatNumber color={textColor} fontWeight="700" fontSize="lg">
+            {value}
+          </StatNumber>
+          {growth ? (
+            <Flex align="center">
+              <Text color="green.500" fontSize="xs" fontWeight="700" me="5px">
+                {growth}
+              </Text>
+              <Text color="gray.500" fontSize="xs" fontWeight="400">
+                since last month
+              </Text>
+            </Flex>
+          ) : null}
+        </Stat>
+        <Flex ms="auto" w="max-content">
+          {endContent}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}