update pay function

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

@@ -0,0 +1,11 @@
+'use client';
+import { useStyleConfig, chakra, forwardRef } from '@chakra-ui/react';
+import { CustomCardProps } from '@/theme/theme';
+const CustomCard = forwardRef<CustomCardProps, 'div'>((props, ref) => {
+  const { size, variant, ...rest } = props;
+  const styles = useStyleConfig('Card', { size, variant });
+
+  return <chakra.div ref={ref} __css={styles} {...rest} />;
+});
+
+export default CustomCard;

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>
+  );
+}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import NavLink from '../link/NavLink';
+import Card from '@/components/card/Card';
+import {
+  Box,
+  Button,
+  Flex,
+  useColorModeValue,
+  Text,
+  Icon,
+} from '@chakra-ui/react';
+import { MdEdit } from 'react-icons/md';
+
+export default function Default(props: {
+  illustration: string | JSX.Element;
+  name: string;
+  description: string;
+  link: string;
+  edit?: string;
+  action?: any;
+  admin?: boolean;
+}) {
+  const { illustration, name, description, link, edit, admin } = props;
+  const textColor = useColorModeValue('#120F43', 'white');
+  const gray = useColorModeValue('gray.500', 'white');
+
+  return (
+    <NavLink href={link}>
+      <Card h="100%" py="24px" px="24px">
+        <Flex
+          my="auto"
+          h="100%"
+          direction={'column'}
+          align={{ base: 'center', xl: 'start' }}
+          justify={{ base: 'center', xl: 'center' }}
+        >
+          <Flex align="start" w="100%" mb="30px">
+            <Text fontSize="34px" lineHeight={'120%'}>
+              {illustration}
+            </Text>
+            {admin ? (
+              <Flex ms="auto">
+                <NavLink href={edit ? edit : '/admin/edit-template'}>
+                  <Button
+                    w="24px"
+                    h="24px"
+                    _hover={{}}
+                    _focus={{}}
+                    _active={{}}
+                    bg="none"
+                  >
+                    <Icon w="24px" h="24px" as={MdEdit} color={gray} />
+                  </Button>
+                </NavLink>
+              </Flex>
+            ) : null}
+          </Flex>
+          <Box>
+            <Text fontSize="lg" color={textColor} fontWeight="700" mb="8px">
+              {name}
+            </Text>
+            <Text fontSize="sm" color={gray} fontWeight="500">
+              {description}
+            </Text>
+          </Box>
+        </Flex>
+      </Card>
+    </NavLink>
+  );
+}