Initial commit
This commit is contained in:
400
src/views/Pages/RTLPage.js
Normal file
400
src/views/Pages/RTLPage.js
Normal file
@@ -0,0 +1,400 @@
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user