update pay function

boilerplate-chakra-pro-main/components/dashboard/main/index.tsx

@@ -0,0 +1,144 @@
+/*eslint-disable*/
+'use client';
+
+import MainChart from '@/components/dashboard/main/cards/MainChart';
+import MainDashboardTable from '@/components/dashboard/main/cards/MainDashboardTable';
+import Statistics from '@/components/dashboard/main/cards/Statistics';
+import DashboardLayout from '@/components/layout';
+import { Database } from '@/types_db';
+import tableDataUserReports from '@/variables/tableDataUserReports';
+import { Box, Flex, Grid, Icon, useColorModeValue } from '@chakra-ui/react';
+import { User } from '@supabase/supabase-js';
+import { HiOutlineChip } from 'react-icons/hi';
+import { MdOutlineGroup, MdOutlineGroupAdd, MdKey } from 'react-icons/md';
+
+type Subscription = Database['public']['Tables']['subscriptions']['Row'];
+type Product = Database['public']['Tables']['products']['Row'];
+type Price = Database['public']['Tables']['prices']['Row'];
+interface ProductWithPrices extends Product {
+  prices: Price[];
+}
+interface PriceWithProduct extends Price {
+  products: Product | null;
+}
+interface SubscriptionWithProduct extends Subscription {
+  prices: PriceWithProduct | null;
+}
+
+interface Props {
+  user: User | null | undefined;
+  products: ProductWithPrices[];
+  subscription: SubscriptionWithProduct | null | any;
+  userDetails: { [x: string]: any } | null | any;
+}
+
+export default function Main(props: Props) {
+  const bg = useColorModeValue('secondaryGray.300', 'whiteAlpha.200');
+  const brandColor = useColorModeValue('brand.500', 'white');
+  console.log(props.user);
+  return (
+    <DashboardLayout
+      userDetails={props.userDetails}
+      user={props?.user}
+      products={props.products}
+      subscription={props.subscription}
+      title="Main Dashboard"
+      description="Manage your dashboard"
+    >
+      <Box h="100%" w="100%">
+        <Grid
+          mb="20px"
+          w="100%"
+          gridTemplateColumns={{
+            base: 'repeat(1, minmax(0, 1fr))',
+            md: 'repeat(2, minmax(0, 1fr))',
+            xl: 'repeat(4, minmax(0, 1fr))'
+          }}
+          borderRadius="14px"
+          gap="20px"
+        >
+          {/* statistics */}
+          <Statistics
+            icon={
+              <Flex
+                h={'56px'}
+                w={'56px'}
+                justifyContent="center"
+                alignItems={'center'}
+                rounded="full"
+                fontSize="36px"
+                color={brandColor}
+                bg={bg}
+              >
+                <Icon as={MdOutlineGroup} w="24px" h="24px" />
+              </Flex>
+            }
+            title="Credits used in the last month"
+            value="46,042"
+          />
+          <Statistics
+            icon={
+              <Flex
+                h={'56px'}
+                w={'56px'}
+                justifyContent="center"
+                alignItems={'center'}
+                rounded="full"
+                fontSize="36px"
+                color={brandColor}
+                bg={bg}
+              >
+                <Icon as={MdOutlineGroupAdd} w="24px" h="24px" />
+              </Flex>
+            }
+            title="Total Credits"
+            value="149,758"
+          />
+          <Statistics
+            icon={
+              <Flex
+                h={'56px'}
+                w={'56px'}
+                justifyContent="center"
+                alignItems={'center'}
+                rounded="full"
+                fontSize="36px"
+                color={brandColor}
+                bg={bg}
+              >
+                <Icon as={HiOutlineChip} w="24px" h="24px" />
+              </Flex>
+            }
+            title="Plan Credits"
+            value="100,000"
+          />
+          <Statistics
+            icon={
+              <Flex
+                h={'56px'}
+                w={'56px'}
+                justifyContent="center"
+                alignItems={'center'}
+                rounded="full"
+                fontSize="36px"
+                color={brandColor}
+                bg={bg}
+              >
+                <Icon as={MdKey} w="24px" h="24px" />
+              </Flex>
+            }
+            title="Current Plan"
+            value="Expert+"
+          />
+        </Grid>
+        <Box mb="20px">
+          <MainChart />
+        </Box>
+        {/* Conversion and talbes*/}
+        <Box w="full" h="full" borderRadius="14px">
+          <MainDashboardTable tableData={tableDataUserReports} />
+        </Box>
+      </Box>
+    </DashboardLayout>
+  );
+}