427 lines
14 KiB
JavaScript
427 lines
14 KiB
JavaScript
/*!
|
|
|
|
=========================================================
|
|
* Argon Dashboard Chakra PRO - v1.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
|
|
* Designed and Coded by Simmmple & Creative Tim
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
|
|
*/
|
|
|
|
// Chakra imports
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
Grid,
|
|
Icon,
|
|
Spacer,
|
|
Text,
|
|
useColorMode,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react';
|
|
// Assets
|
|
import BackgroundCard1 from 'assets/img/BackgroundCard1.png';
|
|
// Custom components
|
|
import Card from 'components/Card/Card.js';
|
|
import CardHeader from 'components/Card/CardHeader.js';
|
|
import IconBox from 'components/Icons/IconBox';
|
|
import { MastercardIcon, VisaIcon } from 'components/Icons/Icons';
|
|
import { HSeparator } from 'components/Separator/Separator';
|
|
import BillingRow from 'components/Tables/BillingRow';
|
|
import InvoicesRow from 'components/Tables/InvoicesRow';
|
|
import TransactionRow from 'components/Tables/TransactionRow';
|
|
import React from 'react';
|
|
import {
|
|
FaPaypal,
|
|
FaPencilAlt,
|
|
FaRegCalendarAlt,
|
|
FaWallet,
|
|
} from 'react-icons/fa';
|
|
import { RiMastercardFill } from 'react-icons/ri';
|
|
import {
|
|
billingData,
|
|
invoicesData,
|
|
newestTransactions,
|
|
olderTransactions,
|
|
} from 'variables/general';
|
|
|
|
function Billing() {
|
|
// Chakra color mode
|
|
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
|
const textColor = useColorModeValue('gray.700', 'white');
|
|
const borderColor = useColorModeValue('#dee2e6', 'transparent');
|
|
const { colorMode } = useColorMode();
|
|
|
|
return (
|
|
<Flex direction='column' pt={{ base: '120px', md: '75px' }}>
|
|
<Grid templateColumns={{ sm: '1fr', lg: '2fr 1.2fr' }} templateRows='1fr'>
|
|
<Box>
|
|
<Grid
|
|
templateColumns={{
|
|
sm: '1fr',
|
|
md: '1fr 1fr',
|
|
xl: '1fr 1fr 1fr 1fr',
|
|
}}
|
|
templateRows={{ sm: 'auto auto auto', md: '1fr auto', xl: '1fr' }}
|
|
gap='26px'
|
|
>
|
|
<Card
|
|
backgroundImage={
|
|
colorMode === 'dark'
|
|
? 'linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
|
|
: BackgroundCard1
|
|
}
|
|
backgroundRepeat='no-repeat'
|
|
background='cover'
|
|
bgPosition='10%'
|
|
p='16px'
|
|
h={{ sm: '220px', xl: '100%' }}
|
|
gridArea={{ md: '1 / 1 / 2 / 3', xl: '1 / 1 / 2 / 3' }}
|
|
>
|
|
<Flex
|
|
direction='column'
|
|
color='white'
|
|
h='100%'
|
|
p='0px 10px 20px 10px'
|
|
w='100%'
|
|
>
|
|
<Flex justify='space-between' align='center'>
|
|
<Text fontSize='md' fontWeight='bold'>
|
|
Argon x Chakra
|
|
</Text>
|
|
<Icon
|
|
as={RiMastercardFill}
|
|
w='48px'
|
|
h='auto'
|
|
color='gray.400'
|
|
/>
|
|
</Flex>
|
|
<Spacer />
|
|
<Flex direction='column'>
|
|
<Box>
|
|
<Text fontSize='2xl' letterSpacing='2px' fontWeight='bold'>
|
|
7812 2139 0823 XXXX
|
|
</Text>
|
|
</Box>
|
|
<Flex mt='14px'>
|
|
<Flex direction='column' me='34px'>
|
|
<Text fontSize='xs'>VALID THRU</Text>
|
|
<Text fontSize='xs' fontWeight='bold'>
|
|
05/24
|
|
</Text>
|
|
</Flex>
|
|
<Flex direction='column'>
|
|
<Text fontSize='xs'>CVV</Text>
|
|
<Text fontSize='xs' fontWeight='bold'>
|
|
09X
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
<Card p='16px' display='flex' align='center' justify='center'>
|
|
<Flex direction='column' align='center' w='100%' py='14px'>
|
|
<IconBox h={'60px'} w={'60px'} bg={iconBlue}>
|
|
<Icon h={'24px'} w={'24px'} color='white' as={FaWallet} />
|
|
</IconBox>
|
|
<Flex
|
|
direction='column'
|
|
m='14px'
|
|
justify='center'
|
|
textAlign='center'
|
|
align='center'
|
|
w='100%'
|
|
>
|
|
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
|
Salary
|
|
</Text>
|
|
<Text
|
|
mb='24px'
|
|
fontSize='xs'
|
|
color='gray.400'
|
|
fontWeight='semibold'
|
|
>
|
|
Belong Interactive
|
|
</Text>
|
|
<HSeparator />
|
|
</Flex>
|
|
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
+$2000
|
|
</Text>
|
|
</Flex>
|
|
</Card>
|
|
<Card p='16px' display='flex' align='center' justify='center'>
|
|
<Flex
|
|
direction='column'
|
|
align='center'
|
|
justify='center'
|
|
w='100%'
|
|
py='14px'
|
|
>
|
|
<IconBox h={'60px'} w={'60px'} bg={iconBlue}>
|
|
<Icon h={'24px'} w={'24px'} color='white' as={FaPaypal} />
|
|
</IconBox>
|
|
<Flex
|
|
direction='column'
|
|
m='14px'
|
|
justify='center'
|
|
textAlign='center'
|
|
align='center'
|
|
w='100%'
|
|
>
|
|
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
|
Paypal
|
|
</Text>
|
|
<Text
|
|
mb='24px'
|
|
fontSize='xs'
|
|
color='gray.400'
|
|
fontWeight='semibold'
|
|
>
|
|
Freelance Payment
|
|
</Text>
|
|
<HSeparator />
|
|
</Flex>
|
|
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
$455.00
|
|
</Text>
|
|
</Flex>
|
|
</Card>
|
|
</Grid>
|
|
<Card p='16px' mt='24px'>
|
|
<CardHeader>
|
|
<Flex
|
|
justify='space-between'
|
|
align='center'
|
|
minHeight='60px'
|
|
w='100%'
|
|
>
|
|
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
Payment Method
|
|
</Text>
|
|
<Button variant={colorMode === 'dark' ? 'primary' : 'dark'}>
|
|
ADD A NEW CARD
|
|
</Button>
|
|
</Flex>
|
|
</CardHeader>
|
|
|
|
<Flex
|
|
direction={{ sm: 'column', md: 'row' }}
|
|
align='center'
|
|
w='100%'
|
|
justify='center'
|
|
py='1rem'
|
|
>
|
|
<Flex
|
|
p='1rem'
|
|
bg={colorMode === 'dark' ? 'navy.900' : 'transparent'}
|
|
borderRadius='15px'
|
|
width='100%'
|
|
border='1px solid'
|
|
borderColor={borderColor}
|
|
align='center'
|
|
mb={{ sm: '24px', md: '0px' }}
|
|
me={{ sm: '0px', md: '24px' }}
|
|
>
|
|
<IconBox me='10px' w='25px' h='22px'>
|
|
<MastercardIcon w='100%' h='100%' />
|
|
</IconBox>
|
|
<Text color='gray.400' fontSize='md' fontWeight='semibold'>
|
|
7812 2139 0823 XXXX
|
|
</Text>
|
|
<Spacer />
|
|
<Button p='0px' w='16px' h='16px' variant='no-effects'>
|
|
<Icon
|
|
as={FaPencilAlt}
|
|
color={colorMode === 'dark' && 'white'}
|
|
/>
|
|
</Button>
|
|
</Flex>
|
|
<Flex
|
|
p='16px'
|
|
bg={colorMode === 'dark' ? 'navy.900' : 'transparent'}
|
|
borderRadius='15px'
|
|
width='100%'
|
|
border='1px solid'
|
|
borderColor={borderColor}
|
|
align='center'
|
|
>
|
|
<IconBox me='10px' w='25px' h='25px'>
|
|
<VisaIcon w='100%' h='100%' />
|
|
</IconBox>
|
|
<Text color='gray.400' fontSize='md' fontWeight='semibold'>
|
|
7812 2139 0823 XXXX
|
|
</Text>
|
|
<Spacer />
|
|
<Button
|
|
p='0px'
|
|
bg='transparent'
|
|
w='16px'
|
|
h='16px'
|
|
variant='no-effects'
|
|
>
|
|
<Icon
|
|
as={FaPencilAlt}
|
|
color={colorMode === 'dark' && 'white'}
|
|
/>
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
</Box>
|
|
<Card
|
|
p='22px'
|
|
my={{ sm: '24px', lg: '0px' }}
|
|
ms={{ sm: '0px', lg: '24px' }}
|
|
>
|
|
<CardHeader>
|
|
<Flex justify='space-between' align='center' mb='1rem' w='100%'>
|
|
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
|
Invoices
|
|
</Text>
|
|
<Button
|
|
variant='outlined'
|
|
color={colorMode === 'dark' && 'white'}
|
|
borderColor={colorMode === 'dark' && 'white'}
|
|
_hover={colorMode === 'dark' && 'none'}
|
|
minW='110px'
|
|
maxH='35px'
|
|
>
|
|
VIEW ALL
|
|
</Button>
|
|
</Flex>
|
|
</CardHeader>
|
|
|
|
<Flex direction='column' w='100%'>
|
|
{invoicesData.map((row, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<InvoicesRow
|
|
date={row.date}
|
|
code={row.code}
|
|
price={row.price}
|
|
logo={row.logo}
|
|
format={row.format}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</Flex>
|
|
</Card>
|
|
</Grid>
|
|
<Grid templateColumns={{ sm: '1fr', lg: '1.6fr 1.2fr' }}>
|
|
<Card my={{ lg: '24px' }} me={{ lg: '24px' }}>
|
|
<Flex direction='column'>
|
|
<CardHeader py='12px'>
|
|
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
|
Billing Information
|
|
</Text>
|
|
</CardHeader>
|
|
|
|
<Flex direction='column' w='100%'>
|
|
{billingData.map((row, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<BillingRow
|
|
name={row.name}
|
|
company={row.company}
|
|
email={row.email}
|
|
number={row.number}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
<Card my='24px' ms={{ lg: '24px' }}>
|
|
<CardHeader mb='12px'>
|
|
<Flex direction='column' w='100%'>
|
|
<Flex
|
|
direction={{ sm: 'column', lg: 'row' }}
|
|
justify={{ sm: 'center', lg: 'space-between' }}
|
|
align={{ sm: 'center' }}
|
|
w='100%'
|
|
my={{ md: '12px' }}
|
|
>
|
|
<Text
|
|
color={textColor}
|
|
fontSize={{ sm: 'lg', md: 'xl', lg: 'lg' }}
|
|
fontWeight='bold'
|
|
>
|
|
Your Transactions
|
|
</Text>
|
|
<Flex align='center'>
|
|
<Icon
|
|
as={FaRegCalendarAlt}
|
|
color='gray.400'
|
|
fontSize='md'
|
|
me='6px'
|
|
></Icon>
|
|
<Text color='gray.400' fontSize='sm' fontWeight='semibold'>
|
|
23 - 30 March 2022
|
|
</Text>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</CardHeader>
|
|
|
|
<Flex direction='column' w='100%'>
|
|
<Text
|
|
color='gray.400'
|
|
fontSize={{ sm: 'sm', md: 'md' }}
|
|
fontWeight='semibold'
|
|
my='12px'
|
|
>
|
|
NEWEST
|
|
</Text>
|
|
{newestTransactions.map((row, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<TransactionRow
|
|
name={row.name}
|
|
logo={row.logo}
|
|
date={row.date}
|
|
price={row.price}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
<Text
|
|
color='gray.400'
|
|
fontSize={{ sm: 'sm', md: 'md' }}
|
|
fontWeight='semibold'
|
|
my='12px'
|
|
>
|
|
OLDER
|
|
</Text>
|
|
{olderTransactions.map((row, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<TransactionRow
|
|
name={row.name}
|
|
logo={row.logo}
|
|
date={row.date}
|
|
price={row.price}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</Flex>
|
|
</Card>
|
|
</Grid>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default Billing;
|