401 lines
13 KiB
JavaScript
Executable File
401 lines
13 KiB
JavaScript
Executable File
// Chakra imports
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
Grid,
|
|
Progress,
|
|
SimpleGrid,
|
|
Stat,
|
|
StatLabel,
|
|
StatNumber,
|
|
Table,
|
|
Tbody,
|
|
Td,
|
|
Text,
|
|
Th,
|
|
Thead,
|
|
Tr,
|
|
useColorMode,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react';
|
|
// Custom components
|
|
import Card from 'components/Card/Card.js';
|
|
import BarChart from 'components/Charts/BarChart';
|
|
import LineChart from 'components/Charts/LineChart';
|
|
import IconBox from 'components/Icons/IconBox';
|
|
// Custom icons
|
|
import {
|
|
CartIcon,
|
|
DocumentIcon,
|
|
GlobeIcon,
|
|
WalletIcon,
|
|
} from 'components/Icons/Icons.js';
|
|
import React from 'react';
|
|
// Variables
|
|
import {
|
|
barChartDataRTL,
|
|
barChartOptionsRTL,
|
|
lineChartDataRTL,
|
|
lineChartOptionsRTL,
|
|
} from 'variables/charts';
|
|
import { pageVisits, socialTraffic } from 'variables/general';
|
|
|
|
export default function Dashboard() {
|
|
// Chakra Color Mode
|
|
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
|
const iconBoxInside = useColorModeValue('white', 'white');
|
|
const textColor = useColorModeValue('gray.700', 'white');
|
|
const tableRowColor = useColorModeValue('#F7FAFC', 'navy.900');
|
|
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
|
const textTableColor = useColorModeValue('gray.500', 'white');
|
|
|
|
const { colorMode } = useColorMode();
|
|
|
|
return (
|
|
<Flex flexDirection='column' pt={{ base: '120px', md: '75px' }}>
|
|
<SimpleGrid columns={{ sm: 1, md: 2, xl: 4 }} spacing='24px' mb='20px'>
|
|
<Card minH='125px'>
|
|
<Flex direction='column'>
|
|
<Flex
|
|
flexDirection='row'
|
|
align='center'
|
|
justify='center'
|
|
w='100%'
|
|
mb='25px'
|
|
>
|
|
<Stat me='auto'>
|
|
<StatLabel
|
|
fontSize='xs'
|
|
color='gray.400'
|
|
fontWeight='bold'
|
|
textTransform='uppercase'
|
|
>
|
|
Today's Money
|
|
</StatLabel>
|
|
<Flex>
|
|
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
$53,897
|
|
</StatNumber>
|
|
</Flex>
|
|
</Stat>
|
|
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
<WalletIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
</IconBox>
|
|
</Flex>
|
|
<Text color='gray.400' fontSize='sm'>
|
|
<Text as='span' color='green.400' fontWeight='bold'>
|
|
+3.48%{' '}
|
|
</Text>
|
|
Since last month
|
|
</Text>
|
|
</Flex>
|
|
</Card>
|
|
<Card minH='125px'>
|
|
<Flex direction='column'>
|
|
<Flex
|
|
flexDirection='row'
|
|
align='center'
|
|
justify='center'
|
|
w='100%'
|
|
mb='25px'
|
|
>
|
|
<Stat me='auto'>
|
|
<StatLabel
|
|
fontSize='xs'
|
|
color='gray.400'
|
|
fontWeight='bold'
|
|
textTransform='uppercase'
|
|
>
|
|
Today's Users
|
|
</StatLabel>
|
|
<Flex>
|
|
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
$3,200
|
|
</StatNumber>
|
|
</Flex>
|
|
</Stat>
|
|
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
<GlobeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
</IconBox>
|
|
</Flex>
|
|
<Text color='gray.400' fontSize='sm'>
|
|
<Text as='span' color='green.400' fontWeight='bold'>
|
|
+5.2%{' '}
|
|
</Text>
|
|
Since last month
|
|
</Text>
|
|
</Flex>
|
|
</Card>
|
|
<Card minH='125px'>
|
|
<Flex direction='column'>
|
|
<Flex
|
|
flexDirection='row'
|
|
align='center'
|
|
justify='center'
|
|
w='100%'
|
|
mb='25px'
|
|
>
|
|
<Stat me='auto'>
|
|
<StatLabel
|
|
fontSize='xs'
|
|
color='gray.400'
|
|
fontWeight='bold'
|
|
textTransform='uppercase'
|
|
>
|
|
New Clients
|
|
</StatLabel>
|
|
<Flex>
|
|
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
+2,503
|
|
</StatNumber>
|
|
</Flex>
|
|
</Stat>
|
|
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
<DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
</IconBox>
|
|
</Flex>
|
|
<Text color='gray.400' fontSize='sm'>
|
|
<Text as='span' color='red.500' fontWeight='bold'>
|
|
-2.82%{' '}
|
|
</Text>
|
|
Since last month
|
|
</Text>
|
|
</Flex>
|
|
</Card>
|
|
<Card minH='125px'>
|
|
<Flex direction='column'>
|
|
<Flex
|
|
flexDirection='row'
|
|
align='center'
|
|
justify='center'
|
|
w='100%'
|
|
mb='25px'
|
|
>
|
|
<Stat me='auto'>
|
|
<StatLabel
|
|
fontSize='xs'
|
|
color='gray.400'
|
|
fontWeight='bold'
|
|
textTransform='uppercase'
|
|
>
|
|
Total Sales
|
|
</StatLabel>
|
|
<Flex>
|
|
<StatNumber fontSize='lg' color={textColor} fontWeight='bold'>
|
|
$173,000
|
|
</StatNumber>
|
|
</Flex>
|
|
</Stat>
|
|
<IconBox borderRadius='50%' h={'45px'} w={'45px'} bg={iconBlue}>
|
|
<CartIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
|
</IconBox>
|
|
</Flex>
|
|
<Text color='gray.400' fontSize='sm'>
|
|
<Text as='span' color='green.400' fontWeight='bold'>
|
|
+8.12%{' '}
|
|
</Text>
|
|
Since last month
|
|
</Text>
|
|
</Flex>
|
|
</Card>
|
|
</SimpleGrid>
|
|
<Grid
|
|
templateColumns={{ sm: '1fr', lg: '2fr 1fr' }}
|
|
templateRows={{ lg: 'repeat(2, auto)' }}
|
|
gap='20px'
|
|
>
|
|
<Card
|
|
bg={
|
|
colorMode === 'dark'
|
|
? 'navy.800'
|
|
: 'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)'
|
|
}
|
|
p='0px'
|
|
maxW={{ sm: '320px', md: '100%' }}
|
|
>
|
|
<Flex direction='column' mb='40px' p='28px 22px 0px 0px'>
|
|
<Text color='#fff' fontSize='lg' fontWeight='bold' mb='6px'>
|
|
Sales Overview
|
|
</Text>
|
|
<Text color='#fff' fontSize='sm'>
|
|
<Text as='span' color='green.400' fontWeight='bold'>
|
|
(+5) more{' '}
|
|
</Text>
|
|
in 2022
|
|
</Text>
|
|
</Flex>
|
|
<Box minH='300px'>
|
|
<LineChart
|
|
chartData={lineChartDataRTL}
|
|
chartOptions={lineChartOptionsRTL}
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
<Card p='0px' maxW={{ sm: '320px', md: '100%' }}>
|
|
<Flex direction='column' mb='40px' p='28px 22px 0px 0px'>
|
|
<Text color='gray.400' fontSize='sm' fontWeight='bold' mb='6px'>
|
|
PERFORMANCE
|
|
</Text>
|
|
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
|
Total orders
|
|
</Text>
|
|
</Flex>
|
|
<Box minH='300px'>
|
|
<BarChart
|
|
chartData={barChartDataRTL}
|
|
chartOptions={barChartOptionsRTL}
|
|
/>
|
|
</Box>
|
|
</Card>
|
|
<Card p='0px' maxW={{ sm: '320px', md: '100%' }}>
|
|
<Flex direction='column'>
|
|
<Flex align='center' justify='space-between' p='22px'>
|
|
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
Page visits
|
|
</Text>
|
|
<Button variant='primary' maxH='30px'>
|
|
SEE ALL
|
|
</Button>
|
|
</Flex>
|
|
<Box overflow={{ sm: 'scroll', lg: 'hidden' }}>
|
|
<Table>
|
|
<Thead>
|
|
<Tr bg={tableRowColor}>
|
|
<Th color='gray.400' borderColor={borderColor}>
|
|
Page name
|
|
</Th>
|
|
<Th color='gray.400' borderColor={borderColor}>
|
|
Visitors
|
|
</Th>
|
|
<Th color='gray.400' borderColor={borderColor}>
|
|
Unique users
|
|
</Th>
|
|
<Th color='gray.400' borderColor={borderColor}>
|
|
Bounce rate
|
|
</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{pageVisits.map((el, index, arr) => {
|
|
return (
|
|
<Tr key={index}>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
fontWeight='bold'
|
|
borderColor={borderColor}
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
>
|
|
{el.pageName}
|
|
</Td>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
borderColor={borderColor}
|
|
>
|
|
{el.visitors}
|
|
</Td>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
borderColor={borderColor}
|
|
>
|
|
{el.uniqueUsers}
|
|
</Td>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
borderColor={borderColor}
|
|
>
|
|
{el.bounceRate}
|
|
</Td>
|
|
</Tr>
|
|
);
|
|
})}
|
|
</Tbody>
|
|
</Table>
|
|
</Box>
|
|
</Flex>
|
|
</Card>
|
|
<Card p='0px' maxW={{ sm: '320px', md: '100%' }}>
|
|
<Flex direction='column'>
|
|
<Flex align='center' justify='space-between' p='22px'>
|
|
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
Social traffic
|
|
</Text>
|
|
<Button variant='primary' maxH='30px'>
|
|
SEE ALL
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
<Box overflow={{ sm: 'scroll', lg: 'hidden' }}>
|
|
<Table>
|
|
<Thead>
|
|
<Tr bg={tableRowColor}>
|
|
<Th color='gray.400' borderColor={borderColor}>
|
|
Referral
|
|
</Th>
|
|
<Th color='gray.400' borderColor={borderColor}>
|
|
Visitors
|
|
</Th>
|
|
<Th color='gray.400' borderColor={borderColor}></Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{socialTraffic.map((el, index, arr) => {
|
|
return (
|
|
<Tr key={index}>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
fontWeight='bold'
|
|
borderColor={borderColor}
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
>
|
|
{el.referral}
|
|
</Td>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
borderColor={borderColor}
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
>
|
|
{el.visitors}
|
|
</Td>
|
|
<Td
|
|
color={textTableColor}
|
|
fontSize='sm'
|
|
borderColor={borderColor}
|
|
border={index === arr.length - 1 ? 'none' : null}
|
|
>
|
|
<Flex align='center'>
|
|
<Text
|
|
color={textTableColor}
|
|
fontWeight='bold'
|
|
fontSize='sm'
|
|
me='12px'
|
|
>{`${el.percentage}%`}</Text>
|
|
<Progress
|
|
size='xs'
|
|
colorScheme={el.color}
|
|
value={el.percentage}
|
|
minW='120px'
|
|
/>
|
|
</Flex>
|
|
</Td>
|
|
</Tr>
|
|
);
|
|
})}
|
|
</Tbody>
|
|
</Table>
|
|
</Box>
|
|
</Card>
|
|
</Grid>
|
|
</Flex>
|
|
);
|
|
}
|