145 lines
4.3 KiB
TypeScript
145 lines
4.3 KiB
TypeScript
/*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>
|
|
);
|
|
}
|