Initial commit
This commit is contained in:
415
src/views/Pages/Account/Billing.js
Normal file
415
src/views/Pages/Account/Billing.js
Normal file
@@ -0,0 +1,415 @@
|
||||
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 { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
FaPaypal,
|
||||
FaPencilAlt,
|
||||
FaRegCalendarAlt,
|
||||
FaWallet,
|
||||
FaGem,
|
||||
} 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();
|
||||
const navigate = useNavigate();
|
||||
|
||||
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='purple.500'>
|
||||
<Icon h={'24px'} w={'24px'} color='white' as={FaGem} />
|
||||
</IconBox>
|
||||
<Flex
|
||||
direction='column'
|
||||
m='14px'
|
||||
justify='center'
|
||||
textAlign='center'
|
||||
align='center'
|
||||
w='100%'
|
||||
>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
订阅服务
|
||||
</Text>
|
||||
<Text
|
||||
mb='24px'
|
||||
fontSize='xs'
|
||||
color='gray.400'
|
||||
fontWeight='semibold'
|
||||
>
|
||||
Pro & Max 版本
|
||||
</Text>
|
||||
<HSeparator />
|
||||
</Flex>
|
||||
<Button
|
||||
size='sm'
|
||||
colorScheme='purple'
|
||||
onClick={() => navigate('/home/pages/account/subscription')}
|
||||
>
|
||||
管理订阅
|
||||
</Button>
|
||||
</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;
|
||||
407
src/views/Pages/Account/Invoice.js
Normal file
407
src/views/Pages/Account/Invoice.js
Normal file
@@ -0,0 +1,407 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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,
|
||||
Image,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
useColorMode,
|
||||
} from "@chakra-ui/react";
|
||||
import { ArgonLogoLight, ArgonLogoDark } from "components/Icons/Icons";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import React, { useRef } from "react";
|
||||
import { useReactToPrint } from "react-to-print";
|
||||
|
||||
class ComponentToPrint extends React.Component {
|
||||
// for react-to-print to work, it must be called from a class based component
|
||||
render() {
|
||||
const { textColor, secondaryColor, borderColor, colorMode } = this.props;
|
||||
|
||||
return (
|
||||
<Card
|
||||
w={{ sm: "330px", md: "500px", lg: "900px" }}
|
||||
justifySelf="center"
|
||||
alignSelf="center"
|
||||
mt="50px"
|
||||
p={{ sm: "24px", md: "44px" }}
|
||||
>
|
||||
<CardHeader mb={{ sm: "60px", md: "95px" }}>
|
||||
<Flex direction="column" w="100%">
|
||||
{colorMode === "light" ? (
|
||||
<ArgonLogoDark w="112px" h="41px" />
|
||||
) : (
|
||||
<ArgonLogoLight w="112px" h="41px" />
|
||||
)}
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
mt="22px"
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
maxW={{ sm: "100%", md: "150px", lg: "300px" }}
|
||||
mb={{ sm: "48px", md: "0px" }}
|
||||
>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="bold"
|
||||
fontSize="lg"
|
||||
mb="12px"
|
||||
>
|
||||
St. Independence Embankment, 050105 Bucharest, Romania
|
||||
</Text>
|
||||
<Text color="gray.400" fontWeight="normal" fontSize="md">
|
||||
tel: +4 (074) 1090873
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
textAlign={{ sm: "start", md: "end" }}
|
||||
maxW={{ sm: "100%", md: "170px" }}
|
||||
>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="bold"
|
||||
fontSize="lg"
|
||||
mb="12px"
|
||||
>
|
||||
Billed to: John Doe
|
||||
</Text>
|
||||
<Text color="gray.400" fontWeight="normal" fontSize="md">
|
||||
4006 Locust View Drive San Francisco CA California
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
mb="60px"
|
||||
>
|
||||
<Flex direction="column" mb={{ sm: "16px", md: "0px" }}>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
mb="8px"
|
||||
>
|
||||
Invoice no
|
||||
</Text>
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
#0453119
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Stack direction="row" mb="8px" justify={{ md: "end" }}>
|
||||
<Text color="gray.400" fontWeight="normal" fontSize="md">
|
||||
Invoice date:{" "}
|
||||
</Text>
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
06/03/2022
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" justify={{ md: "end" }}>
|
||||
<Text color="gray.400" fontWeight="normal" fontSize="md">
|
||||
Due date:{" "}
|
||||
</Text>
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
29/07/2022
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box overflowX={{ sm: "scroll", lg: "hidden" }}>
|
||||
<Table mb="85px" overflowX={{ sm: "scroll", lg: "hidden" }}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th
|
||||
borderColor={borderColor}
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
ps="0px"
|
||||
>
|
||||
Item
|
||||
</Th>
|
||||
<Th
|
||||
borderColor={borderColor}
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Quantity
|
||||
</Th>
|
||||
<Th
|
||||
borderColor={borderColor}
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Rate
|
||||
</Th>
|
||||
<Th
|
||||
borderColor={borderColor}
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
fontWeight="normal"
|
||||
>
|
||||
Amount
|
||||
</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
ps="0px"
|
||||
minW={{ sm: "300px" }}
|
||||
>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
Premium Support
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
1
|
||||
</Text>
|
||||
</Td>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW="125px"
|
||||
boxSizing="border-box"
|
||||
>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
$ 9.00
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
$ 9.00
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
ps="0px"
|
||||
minW={{ sm: "300px" }}
|
||||
>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
Chakra UI - Dashboard PRO
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
3
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
$ 99.00
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
$ 297.00
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
ps="0px"
|
||||
minW={{ sm: "300px" }}
|
||||
border="none"
|
||||
>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
Parts for Service
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor} border="none">
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
1
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor} border="none">
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
$ 89.00
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor} border="none">
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
>
|
||||
$ 89.00
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
ps="0px"
|
||||
minW={{ sm: "300px" }}
|
||||
></Td>
|
||||
<Td borderColor={borderColor}></Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text color={textColor} fontWeight="bold" fontSize="xl">
|
||||
Total
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor}>
|
||||
<Text color={textColor} fontWeight="bold" fontSize="xl">
|
||||
$ 9.00
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
>
|
||||
<Flex direction="column" maxW="270px">
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="xl">
|
||||
Thank You!
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="md"
|
||||
mt="6px"
|
||||
mb="30px"
|
||||
>
|
||||
If you encounter any issues related to the invoice you can
|
||||
contact us at:
|
||||
</Text>
|
||||
<Text color="gray.400" fontWeight="normal" fontSize="md">
|
||||
email:{" "}
|
||||
<Text as="span" color={secondaryColor} fontWeight="bold">
|
||||
support@creative-tim.com
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Button
|
||||
onClick={() => this.props.handlePrint()}
|
||||
variant="primary"
|
||||
w="100px"
|
||||
h="35px"
|
||||
alignSelf={{ sm: "flex-start", md: "flex-end" }}
|
||||
mt={{ sm: "16px", md: "0px" }}
|
||||
>
|
||||
PRINT
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Invoice() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const secondaryColor = useColorModeValue("gray.500", "white");
|
||||
const borderColor = useColorModeValue("gray.200", "gray.600");
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
const componentRef = useRef();
|
||||
|
||||
const handlePrint = useReactToPrint({
|
||||
content: () => componentRef.current,
|
||||
});
|
||||
|
||||
return (
|
||||
<Flex direction="column" pt={{ sm: "100px", lg: "50px" }}>
|
||||
<ComponentToPrint
|
||||
ref={componentRef}
|
||||
handlePrint={handlePrint}
|
||||
textColor={textColor}
|
||||
secondaryColor={secondaryColor}
|
||||
borderColor={borderColor}
|
||||
colorMode={colorMode}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Invoice;
|
||||
1708
src/views/Pages/Account/Settings.js
Normal file
1708
src/views/Pages/Account/Settings.js
Normal file
File diff suppressed because it is too large
Load Diff
886
src/views/Pages/Account/Subscription.js
Normal file
886
src/views/Pages/Account/Subscription.js
Normal file
@@ -0,0 +1,886 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Text,
|
||||
Badge,
|
||||
Spacer,
|
||||
VStack,
|
||||
HStack,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
useToast,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
useDisclosure,
|
||||
Image,
|
||||
Progress,
|
||||
Divider,
|
||||
} from '@chakra-ui/react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card.js';
|
||||
import CardHeader from 'components/Card/CardHeader.js';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import { HSeparator } from 'components/Separator/Separator';
|
||||
|
||||
// Icons
|
||||
import {
|
||||
FaWeixin,
|
||||
FaGem,
|
||||
FaStar,
|
||||
FaCheck,
|
||||
FaQrcode,
|
||||
FaClock,
|
||||
FaRedo
|
||||
} from 'react-icons/fa';
|
||||
import { BiScan } from 'react-icons/bi';
|
||||
|
||||
function Subscription() {
|
||||
// Chakra color mode
|
||||
const { colorMode } = useColorMode();
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const borderColor = useColorModeValue('#dee2e6', 'transparent');
|
||||
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
||||
const iconGreen = useColorModeValue('green.500', 'green.500');
|
||||
const bgCard = useColorModeValue('white', 'gray.800');
|
||||
const bgAccent = useColorModeValue('blue.50', 'blue.900');
|
||||
|
||||
const toast = useToast();
|
||||
const { isOpen: isPaymentModalOpen, onOpen: onPaymentModalOpen, onClose: onPaymentModalClose } = useDisclosure();
|
||||
|
||||
// State
|
||||
const [subscriptionPlans, setSubscriptionPlans] = useState([]);
|
||||
const [currentUser, setCurrentUser] = useState(null);
|
||||
const [selectedPlan, setSelectedPlan] = useState(null);
|
||||
const [selectedCycle, setSelectedCycle] = useState('monthly');
|
||||
const [paymentOrder, setPaymentOrder] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [paymentCountdown, setPaymentCountdown] = useState(0);
|
||||
const [checkingPayment, setCheckingPayment] = useState(false);
|
||||
const [autoCheckInterval, setAutoCheckInterval] = useState(null);
|
||||
const [forceUpdating, setForceUpdating] = useState(false);
|
||||
|
||||
// 加载订阅套餐数据
|
||||
useEffect(() => {
|
||||
fetchSubscriptionPlans();
|
||||
fetchCurrentUser();
|
||||
}, []);
|
||||
|
||||
// 倒计时更新
|
||||
useEffect(() => {
|
||||
let timer;
|
||||
if (paymentCountdown > 0) {
|
||||
timer = setInterval(() => {
|
||||
setPaymentCountdown(prev => {
|
||||
if (prev <= 1) {
|
||||
handlePaymentExpired();
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [paymentCountdown]);
|
||||
|
||||
// 组件卸载时清理定时器
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
stopAutoPaymentCheck();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const fetchSubscriptionPlans = async () => {
|
||||
try {
|
||||
console.log('🔄 正在获取订阅套餐...');
|
||||
const response = await fetch('/api/subscription/plans');
|
||||
console.log('📡 套餐API响应状态:', response.status);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('📦 套餐API响应数据:', data);
|
||||
|
||||
if (data.success && Array.isArray(data.data)) {
|
||||
// 确保每个套餐都有必要的字段
|
||||
const validPlans = data.data.filter(plan =>
|
||||
plan &&
|
||||
plan.name &&
|
||||
typeof plan.monthly_price === 'number' &&
|
||||
typeof plan.yearly_price === 'number'
|
||||
);
|
||||
console.log('✅ 有效套餐数量:', validPlans.length);
|
||||
setSubscriptionPlans(validPlans);
|
||||
} else {
|
||||
console.warn('⚠️ 套餐数据格式异常:', data);
|
||||
setSubscriptionPlans([]);
|
||||
}
|
||||
} else {
|
||||
console.error('❌ 获取套餐失败，状态码:', response.status);
|
||||
setSubscriptionPlans([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 获取订阅套餐失败:', error);
|
||||
setSubscriptionPlans([]);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCurrentUser = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/session', {
|
||||
credentials: 'include'
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('👤 用户数据:', data);
|
||||
if (data.success) {
|
||||
setCurrentUser(data.user);
|
||||
console.log('✅ 用户信息已更新:', data.user);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubscribe = (plan) => {
|
||||
if (!currentUser) {
|
||||
toast({
|
||||
title: '请先登录',
|
||||
status: 'warning',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!plan || !plan.name) {
|
||||
toast({
|
||||
title: '套餐信息错误',
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedPlan(plan);
|
||||
onPaymentModalOpen();
|
||||
};
|
||||
|
||||
const handleCreateOrder = async () => {
|
||||
if (!selectedPlan) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/payment/create-order', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
plan_name: selectedPlan.name,
|
||||
billing_cycle: selectedCycle
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
setPaymentOrder(data.data);
|
||||
// 设置30分钟倒计时
|
||||
setPaymentCountdown(30 * 60);
|
||||
|
||||
// 开始自动检查支付状态（每10秒检查一次）
|
||||
startAutoPaymentCheck(data.data.id);
|
||||
|
||||
toast({
|
||||
title: '订单创建成功',
|
||||
description: '请使用微信扫描二维码完成支付',
|
||||
status: 'success',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
} else {
|
||||
throw new Error(data.message || '创建订单失败');
|
||||
}
|
||||
} else {
|
||||
throw new Error('网络错误');
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: '创建订单失败',
|
||||
description: error.message,
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentExpired = () => {
|
||||
setPaymentOrder(null);
|
||||
setPaymentCountdown(0);
|
||||
stopAutoPaymentCheck();
|
||||
toast({
|
||||
title: '支付二维码已过期',
|
||||
description: '请重新创建订单',
|
||||
status: 'warning',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
// 自动检查支付状态
|
||||
const startAutoPaymentCheck = (orderId) => {
|
||||
console.log('🔄 开始自动检查支付状态...');
|
||||
|
||||
const checkInterval = setInterval(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/payment/order/${orderId}/status`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('📡 支付状态检查结果:', data);
|
||||
|
||||
if (data.success && data.payment_success) {
|
||||
// 支付成功
|
||||
clearInterval(checkInterval);
|
||||
setAutoCheckInterval(null);
|
||||
|
||||
toast({
|
||||
title: '支付成功！',
|
||||
description: '订阅已激活，正在跳转...',
|
||||
status: 'success',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// 延迟2秒后跳转到个人中心
|
||||
setTimeout(() => {
|
||||
onPaymentModalClose();
|
||||
window.location.reload(); // 刷新页面以更新订阅状态
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('自动检查支付状态失败:', error);
|
||||
}
|
||||
}, 10000); // 每10秒检查一次
|
||||
|
||||
setAutoCheckInterval(checkInterval);
|
||||
};
|
||||
|
||||
const stopAutoPaymentCheck = () => {
|
||||
if (autoCheckInterval) {
|
||||
clearInterval(autoCheckInterval);
|
||||
setAutoCheckInterval(null);
|
||||
console.log('⏹️ 停止自动检查支付状态');
|
||||
}
|
||||
};
|
||||
|
||||
// 强制刷新用户状态
|
||||
const handleRefreshUserStatus = async () => {
|
||||
try {
|
||||
await fetchCurrentUser();
|
||||
toast({
|
||||
title: '用户状态已刷新',
|
||||
description: '订阅信息已更新',
|
||||
status: 'success',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: '刷新失败',
|
||||
description: '请稍后重试',
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 强制更新支付状态
|
||||
const handleForceUpdatePayment = async () => {
|
||||
if (!paymentOrder) return;
|
||||
|
||||
setForceUpdating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/payment/order/${paymentOrder.id}/force-update`, {
|
||||
method: 'POST',
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('🔧 强制更新支付状态结果:', data);
|
||||
|
||||
if (data.success && data.payment_success) {
|
||||
// 支付成功
|
||||
stopAutoPaymentCheck();
|
||||
|
||||
toast({
|
||||
title: '状态更新成功！',
|
||||
description: '订阅已激活，正在刷新页面...',
|
||||
status: 'success',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
onPaymentModalClose();
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
} else {
|
||||
toast({
|
||||
title: '无法更新状态',
|
||||
description: data.error || '支付状态未更新',
|
||||
status: 'warning',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
throw new Error('网络错误');
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: '强制更新失败',
|
||||
description: error.message,
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setForceUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 手动检查支付状态
|
||||
const handleCheckPaymentStatus = async () => {
|
||||
if (!paymentOrder) return;
|
||||
|
||||
setCheckingPayment(true);
|
||||
try {
|
||||
const response = await fetch(`/api/payment/order/${paymentOrder.id}/status`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('🔍 手动检查支付状态结果:', data);
|
||||
console.log('🔍 支付成功标志:', data.payment_success);
|
||||
console.log('🔍 订单数据:', data.data);
|
||||
|
||||
if (data.success) {
|
||||
if (data.payment_success) {
|
||||
// 支付成功
|
||||
stopAutoPaymentCheck();
|
||||
|
||||
toast({
|
||||
title: '支付成功！',
|
||||
description: '订阅已激活，正在跳转...',
|
||||
status: 'success',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
onPaymentModalClose();
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
|
||||
} else {
|
||||
// 还未支付
|
||||
toast({
|
||||
title: '支付状态检查',
|
||||
description: data.message || '还未检测到支付，请继续等待',
|
||||
status: 'info',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
throw new Error(data.error || '查询失败');
|
||||
}
|
||||
} else {
|
||||
throw new Error('网络错误');
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: '查询失败',
|
||||
description: error.message,
|
||||
status: 'error',
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
} finally {
|
||||
setCheckingPayment(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (seconds) => {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const getCurrentPrice = (plan) => {
|
||||
if (!plan) return 0;
|
||||
return selectedCycle === 'monthly' ? plan.monthly_price : plan.yearly_price;
|
||||
};
|
||||
|
||||
const getSavingsText = (plan) => {
|
||||
if (!plan || selectedCycle !== 'yearly') return null;
|
||||
const yearlyTotal = plan.monthly_price * 12;
|
||||
const savings = yearlyTotal - plan.yearly_price;
|
||||
const percentage = Math.round((savings / yearlyTotal) * 100);
|
||||
return `年付节省 ${percentage}%`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ base: '120px', md: '75px' }}>
|
||||
{/* 当前订阅状态 */}
|
||||
{currentUser && (
|
||||
<Card p='20px' mb='20px'>
|
||||
<CardHeader pb='12px'>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
当前订阅状态
|
||||
</Text>
|
||||
<Button
|
||||
size='sm'
|
||||
leftIcon={<Icon as={FaRedo} />}
|
||||
onClick={handleRefreshUserStatus}
|
||||
colorScheme='blue'
|
||||
variant='outline'
|
||||
>
|
||||
刷新状态
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<Flex align='center' justify='space-between'>
|
||||
<Box>
|
||||
<HStack spacing={2} mb={2}>
|
||||
<Badge
|
||||
colorScheme={currentUser.subscription_status === 'active' ? 'green' : 'gray'}
|
||||
variant='solid'
|
||||
>
|
||||
{currentUser.subscription_type === 'free' ? '免费版' :
|
||||
currentUser.subscription_type === 'pro' ? 'Pro版' : 'Max版'}
|
||||
</Badge>
|
||||
<Badge
|
||||
colorScheme={currentUser.subscription_status === 'active' ? 'green' : 'red'}
|
||||
>
|
||||
{currentUser.subscription_status === 'active' ? '已激活' : '未激活'}
|
||||
</Badge>
|
||||
</HStack>
|
||||
{currentUser.subscription_end_date && (
|
||||
<Text fontSize='sm' color='gray.500'>
|
||||
到期时间: {new Date(currentUser.subscription_end_date).toLocaleDateString()}
|
||||
</Text>
|
||||
)}
|
||||
{/* 调试信息 */}
|
||||
<Text fontSize='xs' color='gray.400' mt={2}>
|
||||
用户ID: {currentUser.id} | 类型: {currentUser.subscription_type} | 状态: {currentUser.subscription_status}
|
||||
</Text>
|
||||
</Box>
|
||||
{currentUser.subscription_status === 'active' && (
|
||||
<Icon as={FaGem} color='yellow.400' boxSize={6} />
|
||||
)}
|
||||
</Flex>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 计费周期选择 */}
|
||||
<Card p='20px' mb='20px'>
|
||||
<Flex justify='center' mb={6}>
|
||||
<HStack spacing={0} bg={bgAccent} borderRadius='lg' p={1}>
|
||||
<Button
|
||||
variant={selectedCycle === 'monthly' ? 'solid' : 'ghost'}
|
||||
colorScheme={selectedCycle === 'monthly' ? 'blue' : 'gray'}
|
||||
size='sm'
|
||||
onClick={() => setSelectedCycle('monthly')}
|
||||
>
|
||||
按月付费
|
||||
</Button>
|
||||
<Button
|
||||
variant={selectedCycle === 'yearly' ? 'solid' : 'ghost'}
|
||||
colorScheme={selectedCycle === 'yearly' ? 'blue' : 'gray'}
|
||||
size='sm'
|
||||
onClick={() => setSelectedCycle('yearly')}
|
||||
rightIcon={<Badge colorScheme='red' fontSize='xs'>省20%</Badge>}
|
||||
>
|
||||
按年付费
|
||||
</Button>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
{/* 订阅套餐 */}
|
||||
<Grid
|
||||
templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }}
|
||||
gap='24px'
|
||||
mb='24px'
|
||||
>
|
||||
{subscriptionPlans.length === 0 ? (
|
||||
// 加载状态或空状态
|
||||
<Box gridColumn={{ base: '1', md: '1 / -1' }} textAlign='center' py={8}>
|
||||
<Text color='gray.500'>正在加载订阅套餐...</Text>
|
||||
</Box>
|
||||
) : (
|
||||
subscriptionPlans.filter(plan => plan && plan.name).map((plan) => (
|
||||
<Card
|
||||
key={plan.id}
|
||||
p='24px'
|
||||
position='relative'
|
||||
border={plan.name === 'max' ? '2px solid' : '1px solid'}
|
||||
borderColor={plan.name === 'max' ? 'blue.500' : borderColor}
|
||||
bg={bgCard}
|
||||
>
|
||||
{plan.name === 'max' && (
|
||||
<Badge
|
||||
position='absolute'
|
||||
top='-12px'
|
||||
left='50%'
|
||||
transform='translateX(-50%)'
|
||||
colorScheme='blue'
|
||||
variant='solid'
|
||||
px={3}
|
||||
py={1}
|
||||
fontSize='xs'
|
||||
>
|
||||
推荐
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
<VStack spacing={4} align='stretch'>
|
||||
{/* 套餐头部 */}
|
||||
<Flex align='center' justify='space-between'>
|
||||
<Box>
|
||||
<Text fontSize='xl' fontWeight='bold' color={textColor}>
|
||||
{plan.display_name}
|
||||
</Text>
|
||||
<Text fontSize='sm' color='gray.500' mt={1}>
|
||||
{plan.description}
|
||||
</Text>
|
||||
</Box>
|
||||
<IconBox bg={plan.name === 'pro' ? iconBlue : iconGreen} color='white'>
|
||||
<Icon as={plan.name === 'pro' ? FaStar : FaGem} />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
|
||||
{/* 价格 */}
|
||||
<Box textAlign='center' py={4}>
|
||||
<HStack justify='center' align='baseline'>
|
||||
<Text fontSize='3xl' fontWeight='bold' color={textColor}>
|
||||
¥{getCurrentPrice(plan).toFixed(2)}
|
||||
</Text>
|
||||
<Text color='gray.500'>
|
||||
/ {selectedCycle === 'monthly' ? '月' : '年'}
|
||||
</Text>
|
||||
</HStack>
|
||||
{getSavingsText(plan) && (
|
||||
<Badge colorScheme='green' mt={2}>
|
||||
{getSavingsText(plan)}
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 功能列表 */}
|
||||
<VStack spacing={3} align='stretch'>
|
||||
<Text fontSize='sm' fontWeight='semibold' color={textColor}>
|
||||
包含功能:
|
||||
</Text>
|
||||
{plan.features.map((feature, index) => (
|
||||
<HStack key={index} spacing={3}>
|
||||
<Icon as={FaCheck} color='green.500' boxSize={3} />
|
||||
<Text fontSize='sm' color={textColor}>
|
||||
{feature}
|
||||
</Text>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
|
||||
{/* 订阅按钮 */}
|
||||
<Button
|
||||
colorScheme={plan.name === 'max' ? 'blue' : 'gray'}
|
||||
variant={plan.name === 'max' ? 'solid' : 'outline'}
|
||||
size='lg'
|
||||
onClick={() => handleSubscribe(plan)}
|
||||
isDisabled={
|
||||
currentUser?.subscription_type === plan.name &&
|
||||
currentUser?.subscription_status === 'active'
|
||||
}
|
||||
>
|
||||
{currentUser?.subscription_type === plan.name &&
|
||||
currentUser?.subscription_status === 'active'
|
||||
? '已订阅'
|
||||
: `选择 ${plan.display_name}`
|
||||
}
|
||||
</Button>
|
||||
</VStack>
|
||||
</Card>
|
||||
)))}
|
||||
</Grid>
|
||||
|
||||
{/* 支付模态框 */}
|
||||
<Modal
|
||||
isOpen={isPaymentModalOpen}
|
||||
onClose={() => {
|
||||
stopAutoPaymentCheck();
|
||||
setPaymentOrder(null);
|
||||
setPaymentCountdown(0);
|
||||
onPaymentModalClose();
|
||||
}}
|
||||
size='lg'
|
||||
closeOnOverlayClick={false}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
<Icon as={FaWeixin} color='green.500' />
|
||||
<Text>微信支付</Text>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
{!paymentOrder ? (
|
||||
/* 订单确认 */
|
||||
<VStack spacing={4} align='stretch'>
|
||||
{selectedPlan ? (
|
||||
<Card p={4} bg={bgAccent}>
|
||||
<Text fontSize='lg' fontWeight='bold' mb={2}>
|
||||
订单确认
|
||||
</Text>
|
||||
<HStack justify='space-between' mb={2}>
|
||||
<Text>套餐:</Text>
|
||||
<Text fontWeight='bold'>{selectedPlan.display_name}</Text>
|
||||
</HStack>
|
||||
<HStack justify='space-between' mb={2}>
|
||||
<Text>计费周期:</Text>
|
||||
<Text>{selectedCycle === 'monthly' ? '按月付费' : '按年付费'}</Text>
|
||||
</HStack>
|
||||
<HStack justify='space-between' mb={2}>
|
||||
<Text>价格:</Text>
|
||||
<Text fontSize='lg' fontWeight='bold' color='blue.500'>
|
||||
¥{getCurrentPrice(selectedPlan).toFixed(2)}
|
||||
</Text>
|
||||
</HStack>
|
||||
{getSavingsText(selectedPlan) && (
|
||||
<Badge colorScheme='green' alignSelf='flex-end'>
|
||||
{getSavingsText(selectedPlan)}
|
||||
</Badge>
|
||||
)}
|
||||
</Card>
|
||||
) : (
|
||||
<Card p={4} bg='red.50'>
|
||||
<Text color='red.600'>请先选择一个订阅套餐</Text>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Button
|
||||
colorScheme='green'
|
||||
size='lg'
|
||||
leftIcon={<Icon as={FaWeixin} />}
|
||||
onClick={handleCreateOrder}
|
||||
isLoading={loading}
|
||||
loadingText='创建订单中...'
|
||||
isDisabled={!selectedPlan}
|
||||
>
|
||||
创建微信支付订单
|
||||
</Button>
|
||||
</VStack>
|
||||
) : (
|
||||
/* 支付二维码 */
|
||||
<VStack spacing={4} align='stretch'>
|
||||
<Text textAlign='center' fontSize='lg' fontWeight='bold'>
|
||||
请使用微信扫码支付
|
||||
</Text>
|
||||
|
||||
{/* 倒计时 */}
|
||||
<Card p={4} bg='orange.50'>
|
||||
<HStack justify='center' spacing={2}>
|
||||
<Icon as={FaClock} color='orange.500' />
|
||||
<Text color='orange.700'>
|
||||
二维码有效时间: {formatTime(paymentCountdown)}
|
||||
</Text>
|
||||
</HStack>
|
||||
<Progress
|
||||
value={(paymentCountdown / (30 * 60)) * 100}
|
||||
colorScheme='orange'
|
||||
size='sm'
|
||||
mt={2}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* 二维码 */}
|
||||
<Box textAlign='center'>
|
||||
{paymentOrder.qr_code_url ? (
|
||||
<Image
|
||||
src={paymentOrder.qr_code_url}
|
||||
alt='微信支付二维码'
|
||||
mx='auto'
|
||||
maxW='200px'
|
||||
border='1px solid'
|
||||
borderColor={borderColor}
|
||||
borderRadius='md'
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
w='200px'
|
||||
h='200px'
|
||||
mx='auto'
|
||||
bg='gray.100'
|
||||
display='flex'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
border='1px solid'
|
||||
borderColor={borderColor}
|
||||
borderRadius='md'
|
||||
>
|
||||
<Icon as={FaQrcode} color='gray.400' boxSize={12} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* 订单信息 */}
|
||||
<Card p={4} bg={bgAccent}>
|
||||
<Text fontSize='sm' color='gray.600' mb={2}>订单号: {paymentOrder.order_no}</Text>
|
||||
<HStack justify='space-between'>
|
||||
<Text>支付金额:</Text>
|
||||
<Text fontSize='lg' fontWeight='bold' color='green.500'>
|
||||
¥{paymentOrder.amount}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Card>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<VStack spacing={3}>
|
||||
<HStack spacing={3} w="100%">
|
||||
<Button
|
||||
variant='outline'
|
||||
leftIcon={<Icon as={FaRedo} />}
|
||||
onClick={handleCheckPaymentStatus}
|
||||
isLoading={checkingPayment}
|
||||
loadingText='检查中...'
|
||||
flex={1}
|
||||
>
|
||||
检查支付状态
|
||||
</Button>
|
||||
<Button
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
onClick={() => {
|
||||
console.log('🔍 当前支付订单:', paymentOrder);
|
||||
console.log('🔍 用户信息:', currentUser);
|
||||
}}
|
||||
>
|
||||
调试信息
|
||||
</Button>
|
||||
</HStack>
|
||||
|
||||
{/* 强制更新按钮 */}
|
||||
<Button
|
||||
colorScheme='orange'
|
||||
variant='solid'
|
||||
size='sm'
|
||||
onClick={handleForceUpdatePayment}
|
||||
isLoading={forceUpdating}
|
||||
loadingText='强制更新中...'
|
||||
w="100%"
|
||||
>
|
||||
🚀 强制更新支付状态
|
||||
</Button>
|
||||
|
||||
<Text fontSize='xs' color='gray.500' textAlign='center'>
|
||||
如果支付完成但页面未更新，请点击上方"强制更新"按钮
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
{/* 支付状态提示 */}
|
||||
{autoCheckInterval && (
|
||||
<Card p={3} bg='blue.50' borderColor='blue.200'>
|
||||
<HStack justify='center' spacing={2}>
|
||||
<Text fontSize='sm' color='blue.700'>
|
||||
🔄 正在自动检查支付状态...
|
||||
</Text>
|
||||
</HStack>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 支付说明 */}
|
||||
<Box fontSize='sm' color='gray.500'>
|
||||
<Text mb={1}>• 请使用微信"扫一扫"功能扫描上方二维码</Text>
|
||||
<Text mb={1}>• 支付完成后系统将自动检测并激活订阅</Text>
|
||||
<Text mb={1}>• 系统每10秒自动检查一次支付状态</Text>
|
||||
<Text>• 如遇问题请联系客服支持</Text>
|
||||
</Box>
|
||||
</VStack>
|
||||
)}
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
{/* 调试面板 */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<Card p='20px' mt='20px' bg='gray.50' borderColor='gray.200'>
|
||||
<Text fontSize='md' fontWeight='bold' mb={3} color='gray.700'>
|
||||
🔧 调试信息
|
||||
</Text>
|
||||
<VStack spacing={2} align='stretch' fontSize='sm'>
|
||||
<HStack justify='space-between'>
|
||||
<Text color='gray.600'>支付订单:</Text>
|
||||
<Text color={paymentOrder ? 'green.600' : 'gray.400'}>
|
||||
{paymentOrder ? `ID: ${paymentOrder.id}` : '无'}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify='space-between'>
|
||||
<Text color='gray.600'>自动检查:</Text>
|
||||
<Text color={autoCheckInterval ? 'blue.600' : 'gray.400'}>
|
||||
{autoCheckInterval ? '运行中' : '已停止'}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify='space-between'>
|
||||
<Text color='gray.600'>订阅状态:</Text>
|
||||
<Text color={currentUser?.subscription_status === 'active' ? 'green.600' : 'red.600'}>
|
||||
{currentUser?.subscription_status || '未知'}
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack justify='space-between'>
|
||||
<Text color='gray.600'>订阅类型:</Text>
|
||||
<Text>{currentUser?.subscription_type || '未知'}</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider my={3} />
|
||||
<HStack spacing={2}>
|
||||
<Button size='sm' onClick={() => console.log('当前状态:', { currentUser, paymentOrder, autoCheckInterval })}>
|
||||
打印状态
|
||||
</Button>
|
||||
<Button size='sm' onClick={handleRefreshUserStatus}>
|
||||
强制刷新
|
||||
</Button>
|
||||
</HStack>
|
||||
</Card>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Subscription;
|
||||
403
src/views/Pages/Alerts.js
Normal file
403
src/views/Pages/Alerts.js
Normal file
@@ -0,0 +1,403 @@
|
||||
// Chakra imports
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertIcon,
|
||||
AlertTitle,
|
||||
CloseButton,
|
||||
Flex,
|
||||
Grid,
|
||||
Stack,
|
||||
Box,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import Card from 'components/Card/Card';
|
||||
import React from 'react';
|
||||
|
||||
function Alerts() {
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
||||
<Grid
|
||||
templateColumns={{ sm: '1fr', lg: 'repeat(2, 1fr)' }}
|
||||
templateRows='repeat(2, 1fr)'
|
||||
gap='24px'
|
||||
mb='24px'
|
||||
>
|
||||
<Card>
|
||||
<Box mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Solid Alert - Left
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction='column' spacing='55px' w='100%'>
|
||||
<Alert borderRadius='8px' status='error' variant='solid'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='warning' variant='solid'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='info' variant='solid'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='success' variant='solid'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card>
|
||||
<Box mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Solid Alert - Center
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction='column' spacing='55px' w='100%'>
|
||||
<Alert
|
||||
status='error'
|
||||
variant='solid'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px' alignSelf='center' justifySelf='center'>
|
||||
Title Here
|
||||
</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert
|
||||
status='warning'
|
||||
variant='solid'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert
|
||||
status='info'
|
||||
variant='solid'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert
|
||||
status='success'
|
||||
variant='solid'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card>
|
||||
<Box mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Subtle Alert - Left
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction='column' spacing='55px' w='100%'>
|
||||
<Alert borderRadius='8px' status='error' variant='subtle'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='warning' variant='subtle'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='info' variant='subtle'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='success' variant='subtle'>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card>
|
||||
<Box mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Subtle Alert - Center
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction='column' spacing='55px' w='100%'>
|
||||
<Alert
|
||||
status='error'
|
||||
variant='subtle'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px' alignSelf='center' justifySelf='center'>
|
||||
Title Here
|
||||
</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert
|
||||
status='warning'
|
||||
variant='subtle'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert
|
||||
status='info'
|
||||
variant='subtle'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
<Alert
|
||||
status='success'
|
||||
variant='subtle'
|
||||
justifyContent='center'
|
||||
alignItems='center'
|
||||
>
|
||||
<AlertIcon />
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
<CloseButton
|
||||
position='absolute'
|
||||
fontSize={{ sm: '8px', md: '12px' }}
|
||||
right={{ sm: '-4px', md: '8px' }}
|
||||
top={{ sm: '-4px', md: '8px' }}
|
||||
/>
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Stack
|
||||
direction={{ sm: 'column', lg: 'row' }}
|
||||
spacing='24px'
|
||||
w='100%'
|
||||
justifySelf='center'
|
||||
alignSelf='center'
|
||||
maxW='1024px'
|
||||
>
|
||||
<Card>
|
||||
<Box mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Solid MultiAlert
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction='column' spacing='55px' w='100%'>
|
||||
<Alert borderRadius='8px' status='error' variant='solid'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='warning' variant='solid'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='info' variant='solid'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='success' variant='solid'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card>
|
||||
<Box mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
Subtle MultiAlert
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction='column' spacing='55px' w='100%'>
|
||||
<Alert borderRadius='8px' status='error' variant='subtle'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='warning' variant='subtle'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='info' variant='subtle'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
<Alert borderRadius='8px' status='success' variant='subtle'>
|
||||
<Flex>
|
||||
<AlertIcon />
|
||||
<Flex direction='column'>
|
||||
<AlertTitle mr='12px'>Title Here</AlertTitle>
|
||||
<AlertDescription>Description here.</AlertDescription>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<CloseButton position='absolute' right='8px' top='8px' />
|
||||
</Alert>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Alerts;
|
||||
221
src/views/Pages/Charts.js
Normal file
221
src/views/Pages/Charts.js
Normal file
@@ -0,0 +1,221 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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, Grid, Text, useColorModeValue } from "@chakra-ui/react";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import BarChart from "components/Charts/BarChart";
|
||||
import BubbleChart from "components/Charts/BubbleChart";
|
||||
import DonutChart from "components/Charts/DonutChart";
|
||||
import LineBarChart from "components/Charts/LineBarChart";
|
||||
import LineChart from "components/Charts/LineChart";
|
||||
import PieChart from "components/Charts/PieChart";
|
||||
import PolarChart from "components/Charts/PolarChart";
|
||||
import RadarChart from "components/Charts/RadarChart";
|
||||
// Assets
|
||||
import React from "react";
|
||||
import {
|
||||
barChartDataCharts1,
|
||||
barChartDataCharts2,
|
||||
barChartOptionsCharts1,
|
||||
barChartOptionsCharts2,
|
||||
bubbleChartData,
|
||||
bubbleChartOptions,
|
||||
donutChartDataCharts1,
|
||||
donutChartOptionsCharts1,
|
||||
lineBarChartData,
|
||||
lineBarChartOptions,
|
||||
lineChartDataCharts1,
|
||||
lineChartDataCharts2,
|
||||
lineChartOptionsCharts1,
|
||||
lineChartOptionsCharts2,
|
||||
pieChartDataCharts1,
|
||||
pieChartOptionsCharts1,
|
||||
polarChartDataCharts,
|
||||
polarChartOptionsCharts,
|
||||
radarChartDataCharts,
|
||||
radarChartOptionsCharts,
|
||||
} from "variables/charts";
|
||||
|
||||
function Charts() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
|
||||
return (
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
|
||||
templateRows={{ sm: "repeat(8, 1fr)", md: "repeat(4, 1fr)" }}
|
||||
gap="24px"
|
||||
pt={{ sm: "125px", lg: "75px" }}
|
||||
>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Line chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<LineChart
|
||||
chartData={lineChartDataCharts1}
|
||||
chartOptions={lineChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Line chart with gradient
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<LineChart
|
||||
chartData={lineChartDataCharts2}
|
||||
chartOptions={lineChartOptionsCharts2}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Bar chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<BarChart
|
||||
chartData={barChartDataCharts1}
|
||||
chartOptions={barChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Bar chart horizontal
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<BarChart
|
||||
chartData={barChartDataCharts2}
|
||||
chartOptions={barChartOptionsCharts2}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Mixed chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<LineBarChart
|
||||
chartData={lineBarChartData}
|
||||
chartOptions={lineBarChartOptions}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Bubble chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" h="100%">
|
||||
<BubbleChart
|
||||
chartData={bubbleChartData}
|
||||
chartOptions={bubbleChartOptions}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Donut chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
|
||||
<DonutChart
|
||||
chartData={donutChartDataCharts1}
|
||||
chartOptions={donutChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Pie chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "200px", lg: "300px" }}>
|
||||
<PieChart
|
||||
chartData={pieChartDataCharts1}
|
||||
chartOptions={pieChartOptionsCharts1}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Radar chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
|
||||
<RadarChart
|
||||
chartData={radarChartDataCharts}
|
||||
chartOptions={radarChartOptionsCharts}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card px="0px" pb="0px">
|
||||
<CardHeader mb="34px" px="22px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Polar chart
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody h="100%">
|
||||
<Box w="100%" minH={{ sm: "300px", lg: "500px" }}>
|
||||
<PolarChart
|
||||
chartData={polarChartDataCharts}
|
||||
chartOptions={polarChartOptionsCharts}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default Charts;
|
||||
652
src/views/Pages/Pricing.js
Normal file
652
src/views/Pages/Pricing.js
Normal file
@@ -0,0 +1,652 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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.
|
||||
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
// Chakra imports
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionIcon,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Image,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Tag,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import basic from "assets/img/basic-auth.png";
|
||||
import deloitteLogo from "assets/svg/deloitte-logo.svg";
|
||||
import georgiaLogo from "assets/svg/georgia-logo.svg";
|
||||
import googleLogo from "assets/svg/google-logo.svg";
|
||||
import microsoftLogo from "assets/svg/microsoft-logo.svg";
|
||||
import msnLogo from "assets/svg/msn-logo.svg";
|
||||
import zohoLogo from "assets/svg/zoho-logo.svg";
|
||||
import Card from "components/Card/Card";
|
||||
import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";
|
||||
|
||||
function Pricing() {
|
||||
const [activeButton, setActiveButton] = useState({
|
||||
monthly: true,
|
||||
yearly: false,
|
||||
});
|
||||
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const secondaryColor = useColorModeValue("gray.500", "white");
|
||||
const borderColor = useColorModeValue("border.200", "border.600");
|
||||
const bgActiveButton = useColorModeValue("#fff", "blue.500");
|
||||
const bgButtonGroup = useColorModeValue("gray.50", "navy.800");
|
||||
const bgTimesIcon = useColorModeValue("gray.700", "white");
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
minH={{ base: "70vh", xl: "50vh" }}
|
||||
w={{ sm: "calc(100vw - 25px)", md: "calc(100vw - 25px)" }}
|
||||
borderRadius={{ sm: "15px" }}
|
||||
left="0"
|
||||
right="0"
|
||||
bgRepeat="no-repeat"
|
||||
overflow="hidden"
|
||||
zIndex="-1"
|
||||
top="0"
|
||||
bgImage={basic}
|
||||
bgSize="cover"
|
||||
mx={{ sm: "auto" }}
|
||||
mt={{ sm: "14px" }}
|
||||
></Box>
|
||||
<Flex
|
||||
direction="column"
|
||||
textAlign="center"
|
||||
justifyContent="center"
|
||||
align="center"
|
||||
mt="6.5rem"
|
||||
mb="38px"
|
||||
>
|
||||
<Text fontSize="3xl" color="white" fontWeight="bold">
|
||||
See our pricing
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="md"
|
||||
color="white"
|
||||
fontWeight="normal"
|
||||
mt="10px"
|
||||
mb="26px"
|
||||
maxW="300px"
|
||||
>
|
||||
You have Free Unlimited Updates and Premium Support on each package.
|
||||
</Text>
|
||||
<Flex bg={bgButtonGroup} p="6px" borderRadius="12px">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
w="135px"
|
||||
h="40px"
|
||||
fontSize="xs"
|
||||
boxShadow={
|
||||
activeButton.monthly
|
||||
? "0px 2px 5.5px rgba(0, 0, 0, 0.06)"
|
||||
: "none"
|
||||
}
|
||||
bg={activeButton.monthly ? bgActiveButton : "transparent"}
|
||||
onClick={() => setActiveButton({ monthly: true, yearly: false })}
|
||||
>
|
||||
MONTHLY
|
||||
</Button>
|
||||
<Button
|
||||
variant="no-effects"
|
||||
w="135px"
|
||||
h="40px"
|
||||
fontSize="xs"
|
||||
boxShadow={
|
||||
activeButton.yearly ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : "none"
|
||||
}
|
||||
bg={activeButton.yearly ? bgActiveButton : "transparent"}
|
||||
onClick={() => setActiveButton({ monthly: false, yearly: true })}
|
||||
>
|
||||
YEARLY
|
||||
</Button>
|
||||
</Flex>
|
||||
<Stack
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
spacing="20px"
|
||||
mt="50px"
|
||||
mb="80px"
|
||||
>
|
||||
<Card
|
||||
boxShadow={"0px 2px 5.5px rgba(0, 0, 0, 0.1)"}
|
||||
w={{ sm: "300px", md: "650px", lg: "300px" }}
|
||||
>
|
||||
<Flex direction="column" mb="30px" w="100%" align="center">
|
||||
<Tag size="sm">STARTER</Tag>
|
||||
<Text color={textColor} fontSize="5xl" fontWeight="bold">
|
||||
{activeButton.monthly ? "$59" : "$119"}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column" w="100%">
|
||||
<Stack direction="column" spacing="16px" w="100%" mb="35px">
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
2 Team Members
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
20GB Cloud Storage
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaTimesCircle}
|
||||
mr="8px"
|
||||
color={bgTimesIcon}
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Integration Help
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaTimesCircle}
|
||||
mr="8px"
|
||||
color={bgTimesIcon}
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Sketch Files
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaTimesCircle}
|
||||
mr="8px"
|
||||
color={bgTimesIcon}
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
API Access
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaTimesCircle}
|
||||
mr="8px"
|
||||
color={bgTimesIcon}
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Complete Documentation
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Button variant="dark">JOIN NOW</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card
|
||||
boxShadow={"0px 2px 5.5px rgba(0, 0, 0, 0.1)"}
|
||||
w={{ sm: "300px", md: "650px", lg: "300px" }}
|
||||
>
|
||||
<Flex direction="column" w="100%" mb="30px" align="center">
|
||||
<Tag size="sm">PREMIUM</Tag>
|
||||
<Text color={textColor} fontSize="5xl" fontWeight="bold">
|
||||
{activeButton.monthly ? "$89" : "$159"}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column" w="100%">
|
||||
<Stack direction="column" spacing="16px" w="100%" mb="35px">
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
10 Team Members
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
40GB Cloud Storage
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Integration Help
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Sketch Files
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaTimesCircle}
|
||||
mr="8px"
|
||||
color={bgTimesIcon}
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
API Access
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaTimesCircle}
|
||||
mr="8px"
|
||||
color={bgTimesIcon}
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Complete Documentation
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Button variant="primary">TRY PREMIUM</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card
|
||||
boxShadow={"0px 2px 5.5px rgba(0, 0, 0, 0.1)"}
|
||||
w={{ sm: "300px", md: "650px", lg: "300px" }}
|
||||
>
|
||||
<Flex direction="column" mb="30px" w="100%" align="center">
|
||||
<Tag size="sm">ENTERPRISE</Tag>
|
||||
<Text color={textColor} fontSize="5xl" fontWeight="bold">
|
||||
{activeButton.monthly ? "$99" : "$399"}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column" w="100%">
|
||||
<Stack direction="column" spacing="16px" w="100%" mb="35px">
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Unlimited Team Members
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
100GB Cloud Storage
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Integration Help
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Sketch Files
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
API Access
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
w="20px"
|
||||
h="20px"
|
||||
as={FaCheckCircle}
|
||||
mr="8px"
|
||||
color="blue.500"
|
||||
/>
|
||||
<Text color="gray.500" fontWeight="normal" fontSize="md">
|
||||
Complete Documentation
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Button variant="dark">JOIN NOW</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Stack>
|
||||
<Flex direction="column" mb="110px" justify="center" align="center">
|
||||
<Text
|
||||
color="gray.300"
|
||||
fontWeight="bold"
|
||||
fontSize="md"
|
||||
mb={{ sm: "32px", xl: "16px" }}
|
||||
maxW={{ sm: "250px", md: "100%" }}
|
||||
textAlign="center"
|
||||
>
|
||||
More than 50+ brands trust Chakra Soft UI
|
||||
</Text>
|
||||
<SimpleGrid
|
||||
columns={{ sm: 2, md: 3, lg: 6 }}
|
||||
rows={{ sm: 3, md: 2, lg: 1 }}
|
||||
spacingX={{ sm: "65px", lg: "40px", xl: "65px" }}
|
||||
spacingY={{ sm: "30px" }}
|
||||
>
|
||||
<Image src={googleLogo} alignSelf="center" justifySelf="center" />
|
||||
<Image src={msnLogo} alignSelf="center" justifySelf="center" />
|
||||
<Image
|
||||
src={microsoftLogo}
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
/>
|
||||
<Image src={zohoLogo} alignSelf="center" justifySelf="center" />
|
||||
<Image src={georgiaLogo} alignSelf="center" justifySelf="center" />
|
||||
<Image src={deloitteLogo} alignSelf="center" justifySelf="center" />
|
||||
</SimpleGrid>
|
||||
</Flex>
|
||||
<Flex direction="column" mb={{ sm: "20px", lg: "60px" }}>
|
||||
<Flex direction="column" align="center" justify="center">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize={{ sm: "3xl", md: "4xl" }}
|
||||
mb="12px"
|
||||
>
|
||||
Frequently Asked Questions
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="md"
|
||||
fontWeight="normal"
|
||||
maxW={{ sm: "300px", lg: "500px" }}
|
||||
>
|
||||
A lot of people don't appreciate the moment until it’s passed. I'm
|
||||
not trying my hardest, and I'm not trying to do
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Accordion
|
||||
allowToggle
|
||||
w={{ sm: "300px", md: "650px", xl: "930px" }}
|
||||
mb="16px"
|
||||
>
|
||||
<AccordionItem border="none">
|
||||
<AccordionButton
|
||||
_focus={{}}
|
||||
_hover={{}}
|
||||
p="40px 0px 20px 0px"
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<Box flex="1" textAlign="left">
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
How do I order?
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={secondaryColor} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel p="18px 0px 40px 0px">
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
textAlign="left"
|
||||
alignSelf="flex-start"
|
||||
justifySelf="flex-start"
|
||||
>
|
||||
We’re not always in the position that we want to be at. We’re
|
||||
constantly growing. We’re constantly making mistakes. We’re
|
||||
constantly trying to express ourselves and actualize our dreams.
|
||||
If you have the opportunity to play this game of life you need
|
||||
to appreciate every moment. A lot of people don’t appreciate the
|
||||
moment until it’s passed.
|
||||
</Text>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem border="none">
|
||||
<AccordionButton
|
||||
_focus={{}}
|
||||
_hover={{}}
|
||||
p="40px 0px 20px 0px"
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<Box flex="1" textAlign="left">
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
How can i make the payment?
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={secondaryColor} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel p="18px 0px 40px 0px">
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
textAlign="left"
|
||||
alignSelf="flex-start"
|
||||
justifySelf="flex-start"
|
||||
>
|
||||
It really matters and then like it really doesn’t matter. What
|
||||
matters is the people who are sparked by it. And the people who
|
||||
are like offended by it, it doesn’t matter. Because it's about
|
||||
motivating the doers. Because I’m here to follow my dreams and
|
||||
inspire other people to follow their dreams, too. We’re not
|
||||
always in the position that we want to be at. We’re constantly
|
||||
growing. We’re constantly making mistakes. We’re constantly
|
||||
trying to express ourselves and actualize our dreams. If you
|
||||
have the opportunity to play this game of life you need to
|
||||
appreciate every moment. A lot of people don’t appreciate the
|
||||
moment until it’s passed.
|
||||
</Text>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem border="none">
|
||||
<AccordionButton
|
||||
_focus={{}}
|
||||
_hover={{}}
|
||||
p="40px 0px 20px 0px"
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<Box flex="1" textAlign="left">
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
How much time does it take to receive the order?
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={secondaryColor} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel p="18px 0px 40px 0px">
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
textAlign="left"
|
||||
alignSelf="flex-start"
|
||||
justifySelf="flex-start"
|
||||
>
|
||||
The time is now for it to be okay to be great. People in this
|
||||
world shun people for being great. For being a bright color. For
|
||||
standing out. But the time is now to be okay to be the greatest
|
||||
you. Would you believe in what you believe in, if you were the
|
||||
only one who believed it? If everything I did failed - which it
|
||||
doesn't, it actually succeeds - just the fact that I'm willing
|
||||
to fail is an inspiration. People are so scared to lose that
|
||||
they don't even try. Like, one thing people can't say is that
|
||||
I'm not trying, and I'm not trying my hardest, and I'm not
|
||||
trying to do the best way I know how.
|
||||
</Text>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem border="none">
|
||||
<AccordionButton
|
||||
_focus={{}}
|
||||
_hover={{}}
|
||||
p="40px 0px 20px 0px"
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<Box flex="1" textAlign="left">
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
Can I resell the products?
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={secondaryColor} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel p="18px 0px 40px 0px">
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
textAlign="left"
|
||||
alignSelf="flex-start"
|
||||
justifySelf="flex-start"
|
||||
>
|
||||
I always felt like I could do anything. That’s the main thing
|
||||
people are controlled by! Thoughts- their perception of
|
||||
themselves! They're slowed down by their perception of
|
||||
themselves. If you're taught you can’t do anything, you won’t do
|
||||
anything. I was taught I could do everything. If everything I
|
||||
did failed - which it doesn't, it actually succeeds - just the
|
||||
fact that I'm willing to fail is an inspiration. People are so
|
||||
scared to lose that they don't even try. Like, one thing people
|
||||
can't say is that I'm not trying, and I'm not trying my hardest,
|
||||
and I'm not trying to do the best way I know how.
|
||||
</Text>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem border="none">
|
||||
<AccordionButton
|
||||
_focus={{}}
|
||||
_hover={{}}
|
||||
p="40px 0px 20px 0px"
|
||||
borderBottom="1px solid"
|
||||
borderColor={borderColor}
|
||||
>
|
||||
<Box flex="1" textAlign="left">
|
||||
<Text color={secondaryColor} fontWeight="bold" fontSize="lg">
|
||||
Where do I find the shipping details?
|
||||
</Text>
|
||||
</Box>
|
||||
<AccordionIcon color={secondaryColor} />
|
||||
</AccordionButton>
|
||||
<AccordionPanel p="18px 0px 40px 0px">
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
textAlign="left"
|
||||
alignSelf="flex-start"
|
||||
justifySelf="flex-start"
|
||||
>
|
||||
There’s nothing I really wanted to do in life that I wasn’t able
|
||||
to get good at. That’s my skill. I’m not really specifically
|
||||
talented at anything except for the ability to learn. That’s
|
||||
what I do. That’s what I’m here for. Don’t be afraid to be wrong
|
||||
because you can’t learn anything from a compliment. I always
|
||||
felt like I could do anything. That’s the main thing people are
|
||||
controlled by! Thoughts- their perception of themselves! They're
|
||||
slowed down by their perception of themselves. If you're taught
|
||||
you can’t do anything, you won’t do anything. I was taught I
|
||||
could do everything.
|
||||
</Text>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Pricing;
|
||||
757
src/views/Pages/Profile/Overview.js
Normal file
757
src/views/Pages/Profile/Overview.js
Normal file
@@ -0,0 +1,757 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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.
|
||||
|
||||
*/
|
||||
|
||||
import { useReducer } from "react";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Link,
|
||||
Switch,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import avatar2 from "assets/img/avatars/avatar2.png";
|
||||
import avatar3 from "assets/img/avatars/avatar3.png";
|
||||
import avatar4 from "assets/img/avatars/avatar4.png";
|
||||
import avatar5 from "assets/img/avatars/avatar5.png";
|
||||
import avatar6 from "assets/img/avatars/avatar6.png";
|
||||
import ImageArchitect1 from "assets/img/ImageArchitect1.png";
|
||||
import ImageArchitect2 from "assets/img/ImageArchitect2.png";
|
||||
import ImageArchitect3 from "assets/img/ImageArchitect3.png";
|
||||
import {
|
||||
FaCube,
|
||||
FaFacebook,
|
||||
FaInstagram,
|
||||
FaPenFancy,
|
||||
FaPlus,
|
||||
FaTwitter,
|
||||
} from "react-icons/fa";
|
||||
import { IoDocumentsSharp } from "react-icons/io5";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import { HSeparator } from "components/Separator/Separator";
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "SWITCH_ACTIVE") {
|
||||
if (action.payload === "overview") {
|
||||
const newState = {
|
||||
overview: true,
|
||||
teams: false,
|
||||
projects: false,
|
||||
};
|
||||
return newState;
|
||||
} else if (action.payload === "teams") {
|
||||
const newState = {
|
||||
overview: false,
|
||||
teams: true,
|
||||
projects: false,
|
||||
};
|
||||
return newState;
|
||||
} else if (action.payload === "projects") {
|
||||
const newState = {
|
||||
overview: false,
|
||||
teams: false,
|
||||
projects: true,
|
||||
};
|
||||
return newState;
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
function Overview() {
|
||||
const [state, dispatch] = useReducer(reducer, {
|
||||
overview: true,
|
||||
teams: false,
|
||||
projects: false,
|
||||
});
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const iconColor = useColorModeValue("blue.500", "white");
|
||||
const bgProfile = useColorModeValue("hsla(0,0%,100%,.8)", "navy.800");
|
||||
const borderProfileColor = useColorModeValue("white", "transparent");
|
||||
|
||||
return (
|
||||
<Flex direction="column" pt={{ base: "120px", md: "75px", lg: "100px" }}>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
mb="24px"
|
||||
maxH="330px"
|
||||
justifyContent={{ sm: "center", md: "space-between" }}
|
||||
align="center"
|
||||
backdropFilter="blur(21px)"
|
||||
boxShadow="0px 2px 5.5px rgba(0, 0, 0, 0.02)"
|
||||
border="1.5px solid"
|
||||
borderColor={borderProfileColor}
|
||||
bg={bgProfile}
|
||||
p="24px"
|
||||
borderRadius="20px"
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
mb={{ sm: "10px", md: "0px" }}
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
w={{ sm: "100%" }}
|
||||
textAlign={{ sm: "center", md: "start" }}
|
||||
>
|
||||
<Avatar
|
||||
me={{ md: "22px" }}
|
||||
src={avatar5}
|
||||
w="80px"
|
||||
h="80px"
|
||||
borderRadius="15px"
|
||||
/>
|
||||
<Flex direction="column" maxWidth="100%" my={{ sm: "14px" }}>
|
||||
<Text
|
||||
fontSize={{ sm: "lg", lg: "xl" }}
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
ms={{ sm: "8px", md: "0px" }}
|
||||
>
|
||||
Alec Thompson
|
||||
</Text>
|
||||
<Text fontSize={{ sm: "sm", md: "md" }} color="gray.400">
|
||||
alec@simmmple.com
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
w={{ sm: "100%", md: "50%", lg: "auto" }}
|
||||
>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex
|
||||
align="center"
|
||||
w={{ sm: "100%", lg: "135px" }}
|
||||
bg={
|
||||
state.overview
|
||||
? colorMode === "dark"
|
||||
? "navy.900"
|
||||
: "#fff"
|
||||
: null
|
||||
}
|
||||
borderRadius="8px"
|
||||
justifyContent="center"
|
||||
py="10px"
|
||||
boxShadow={
|
||||
state.overview ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||||
}
|
||||
cursor="pointer"
|
||||
transition="all .5s ease"
|
||||
onClick={() =>
|
||||
dispatch({ type: "SWITCH_ACTIVE", payload: "overview" })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={FaCube} me="6px" />
|
||||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||||
OVERVIEW
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex
|
||||
align="center"
|
||||
w={{ lg: "135px" }}
|
||||
borderRadius="8px"
|
||||
justifyContent="center"
|
||||
py="10px"
|
||||
mx={{ lg: "1rem" }}
|
||||
cursor="pointer"
|
||||
boxShadow={
|
||||
state.teams ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||||
}
|
||||
bg={
|
||||
state.teams
|
||||
? colorMode === "dark"
|
||||
? "navy.900"
|
||||
: "#fff"
|
||||
: null
|
||||
}
|
||||
transition="all .5s ease"
|
||||
onClick={() =>
|
||||
dispatch({ type: "SWITCH_ACTIVE", payload: "teams" })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={IoDocumentsSharp} me="6px" />
|
||||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||||
TEAMS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex
|
||||
align="center"
|
||||
w={{ lg: "135px" }}
|
||||
borderRadius="8px"
|
||||
justifyContent="center"
|
||||
py="10px"
|
||||
cursor="pointer"
|
||||
boxShadow={
|
||||
state.projects ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||||
}
|
||||
bg={
|
||||
state.projects
|
||||
? colorMode === "dark"
|
||||
? "navy.900"
|
||||
: "#fff"
|
||||
: null
|
||||
}
|
||||
transition="all .5s ease"
|
||||
onClick={() =>
|
||||
dispatch({ type: "SWITCH_ACTIVE", payload: "projects" })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={FaPenFancy} me="6px" />
|
||||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||||
PROJECTS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Grid templateColumns={{ sm: "1fr", xl: "repeat(3, 1fr)" }} gap="22px">
|
||||
<Card p="16px">
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Platform Settings
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="600" mb="20px">
|
||||
ACCOUNT
|
||||
</Text>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Email me when someone follows me
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Email me when someone answers on my post
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Email me when someone mentions me
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.400"
|
||||
fontWeight="600"
|
||||
m="6px 0px 20px 0px"
|
||||
>
|
||||
APPLICATION
|
||||
</Text>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
New launches and projects
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Monthly product changes
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="20px">
|
||||
<Switch colorScheme="blue" me="10px" />
|
||||
<Text
|
||||
noOfLines={1}
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="400"
|
||||
>
|
||||
Subscribe to newsletter
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card p="16px" my={{ sm: "24px", xl: "0px" }}>
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Overview Information
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
Hi, I’m Esthera Jackson, Decisions: If you can’t decide, the
|
||||
answer is no. If two equally difficult paths, choose the one
|
||||
more painful in the short term (pain avoidance is creating an
|
||||
illusion of equality).
|
||||
</Text>
|
||||
<HSeparator my="30px" />
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Full Name:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
Esthera Jackson
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Mobile:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
(44) 123 1234 123
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Email:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
esthera@simmmple.com
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Location:{" "}
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400">
|
||||
United States
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align="center" mb="18px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
me="10px"
|
||||
>
|
||||
Social Media:{" "}
|
||||
</Text>
|
||||
<Flex>
|
||||
<Link
|
||||
href="#"
|
||||
color={iconColor}
|
||||
fontSize="lg"
|
||||
me="10px"
|
||||
_hover={{ color: "blue.500" }}
|
||||
>
|
||||
<Icon as={FaFacebook} />
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
color={iconColor}
|
||||
fontSize="lg"
|
||||
me="10px"
|
||||
_hover={{ color: "blue.500" }}
|
||||
>
|
||||
<Icon as={FaInstagram} />
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
color={iconColor}
|
||||
fontSize="lg"
|
||||
me="10px"
|
||||
_hover={{ color: "blue.500" }}
|
||||
>
|
||||
<Icon as={FaTwitter} />
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card p="16px">
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Conversations
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Flex direction="column" w="100%">
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar2}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
Hi! I need more information...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar3}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
Awesome work, can you change...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar4}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
Have a great afternoon...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar5}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
About files I can...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex justifyContent="space-between" mb="21px">
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
src={avatar6}
|
||||
w="50px"
|
||||
h="50px"
|
||||
borderRadius="15px"
|
||||
me="10px"
|
||||
/>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="sm" color={textColor} fontWeight="bold">
|
||||
Sophie B.{" "}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="400">
|
||||
About files I can...
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="10px"
|
||||
fontWeight="700"
|
||||
color={iconColor}
|
||||
alignSelf="center"
|
||||
>
|
||||
REPLY
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Card p="16px" my="24px">
|
||||
<CardHeader p="12px 5px" mb="12px">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Projects
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="400">
|
||||
Architects design houses
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody px="5px">
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr", md: "1fr 1fr", xl: "repeat(4, 1fr)" }}
|
||||
templateRows={{ sm: "1fr 1fr 1fr auto", md: "1fr 1fr", xl: "1fr" }}
|
||||
gap="24px"
|
||||
>
|
||||
<Flex direction="column">
|
||||
<Box mb="20px" position="relative" borderRadius="15px">
|
||||
<Image src={ImageArchitect1} borderRadius="15px" />
|
||||
<Box
|
||||
w="100%"
|
||||
h="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
borderRadius="15px"
|
||||
bg="linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)"
|
||||
></Box>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="600" mb="10px">
|
||||
Project #1
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Modern
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400" mb="20px">
|
||||
As Uber works through a huge amount of internal management
|
||||
turmoil.
|
||||
</Text>
|
||||
<Flex justifyContent="space-between">
|
||||
<Button variant="dark" minW="110px" h="36px">
|
||||
VIEW ALL
|
||||
</Button>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar name="Ryan Florence" src={avatar6} />
|
||||
<Avatar name="Segun Adebayo" src={avatar2} />
|
||||
<Avatar name="Kent Dodds" src={avatar3} />
|
||||
<Avatar name="Prosper Otemuyiwa" src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Box mb="20px" position="relative" borderRadius="15px">
|
||||
<Image src={ImageArchitect2} borderRadius="15px" />
|
||||
<Box
|
||||
w="100%"
|
||||
h="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
borderRadius="15px"
|
||||
bg="linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)"
|
||||
></Box>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="600" mb="10px">
|
||||
Project #2
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Scandinavian
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400" mb="20px">
|
||||
Music is something that every person has his or her own
|
||||
specific opinion about.
|
||||
</Text>
|
||||
<Flex justifyContent="space-between">
|
||||
<Button variant="dark" minW="110px" h="36px">
|
||||
VIEW ALL
|
||||
</Button>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar name="Ryan Florence" src={avatar6} />
|
||||
<Avatar name="Segun Adebayo" src={avatar2} />
|
||||
<Avatar name="Kent Dodds" src={avatar3} />
|
||||
<Avatar name="Prosper Otemuyiwa" src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Box mb="20px" position="relative" borderRadius="15px">
|
||||
<Image src={ImageArchitect3} borderRadius="15px" />
|
||||
<Box
|
||||
w="100%"
|
||||
h="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
borderRadius="15px"
|
||||
bg="linear-gradient(360deg, rgba(49, 56, 96, 0.16) 0%, rgba(21, 25, 40, 0.88) 100%)"
|
||||
></Box>
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="600" mb="10px">
|
||||
Project #3
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xl"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="10px"
|
||||
>
|
||||
Minimalist
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="400" mb="20px">
|
||||
Different people have different taste, especially various
|
||||
types of music.
|
||||
</Text>
|
||||
<Flex justifyContent="space-between">
|
||||
<Button variant="dark" minW="110px" h="36px">
|
||||
VIEW ALL
|
||||
</Button>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar name="Ryan Florence" src={avatar6} />
|
||||
<Avatar name="Segun Adebayo" src={avatar2} />
|
||||
<Avatar name="Kent Dodds" src={avatar3} />
|
||||
<Avatar name="Prosper Otemuyiwa" src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button
|
||||
p="0px"
|
||||
bg="transparent"
|
||||
border="1px solid lightgray"
|
||||
borderRadius="15px"
|
||||
minHeight={{ sm: "200px", md: "100%" }}
|
||||
>
|
||||
<Flex direction="column" justifyContent="center" align="center">
|
||||
<Icon as={FaPlus} color={textColor} fontSize="lg" mb="12px" />
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Create a New Project
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Overview;
|
||||
181
src/views/Pages/Profile/Profile.js
Normal file
181
src/views/Pages/Profile/Profile.js
Normal file
@@ -0,0 +1,181 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Heading,
|
||||
Avatar,
|
||||
Button,
|
||||
Divider,
|
||||
Badge,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
useColorMode,
|
||||
useToast,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalCloseButton,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { useAuth } from "../../../contexts/AuthContext";
|
||||
|
||||
export default function Profile() {
|
||||
const { colorMode } = useColorMode();
|
||||
const { user, logout, updateUser } = useAuth();
|
||||
const toast = useToast();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
toast({
|
||||
title: "已登出",
|
||||
description: "您已成功退出登录",
|
||||
status: "info",
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogoutConfirm = () => {
|
||||
handleLogout();
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Box p={8}>
|
||||
<Text>加载用户信息中...</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box p={8}>
|
||||
<VStack spacing={8} align="stretch">
|
||||
{/* 用户信息卡片 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<HStack spacing={4}>
|
||||
<Avatar
|
||||
size="lg"
|
||||
name={user.name}
|
||||
src={user.avatar}
|
||||
bg="blue.500"
|
||||
/>
|
||||
<VStack align="start" spacing={2}>
|
||||
<Heading size="md">{user.name}</Heading>
|
||||
<Text color="gray.500">{user.email}</Text>
|
||||
<Badge colorScheme="blue" variant="subtle">
|
||||
{user.role === 'admin' ? '管理员' : '用户'}
|
||||
</Badge>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<HStack justify="space-between">
|
||||
<Text fontWeight="medium">用户ID:</Text>
|
||||
<Text>{user.id}</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text fontWeight="medium">登录时间:</Text>
|
||||
<Text>{new Date(user.loginTime).toLocaleString()}</Text>
|
||||
</HStack>
|
||||
<HStack justify="space-between">
|
||||
<Text fontWeight="medium">账户状态:</Text>
|
||||
<Badge colorScheme="green">活跃</Badge>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 账户设置 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Heading size="md">账户设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
修改个人信息
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
修改密码
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
通知设置
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 安全设置 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Heading size="md">安全设置</Heading>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<VStack spacing={4} align="stretch">
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
两步验证
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
登录历史
|
||||
</Button>
|
||||
<Button variant="outline" colorScheme="blue">
|
||||
设备管理
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 登出按钮 */}
|
||||
<Card>
|
||||
<CardBody>
|
||||
<VStack spacing={4}>
|
||||
<Text color="gray.500" textAlign="center">
|
||||
点击下方按钮退出当前账户
|
||||
</Text>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
variant="outline"
|
||||
onClick={onOpen}
|
||||
w="full"
|
||||
>
|
||||
退出登录
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</VStack>
|
||||
|
||||
{/* 登出确认对话框 */}
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>确认退出</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Text>您确定要退出登录吗？</Text>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant="ghost" mr={3} onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button colorScheme="red" onClick={handleLogoutConfirm}>
|
||||
确认退出
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
744
src/views/Pages/Profile/Projects.js
Normal file
744
src/views/Pages/Profile/Projects.js
Normal file
@@ -0,0 +1,744 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
useColorMode,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
// Assets
|
||||
import avatar1 from "assets/img/avatars/avatar1.png";
|
||||
import avatar2 from "assets/img/avatars/avatar2.png";
|
||||
import avatar3 from "assets/img/avatars/avatar3.png";
|
||||
import avatar5 from "assets/img/avatars/avatar5.png";
|
||||
import avatar4 from "assets/img/avatars/avatar4.png";
|
||||
import avatar7 from "assets/img/avatars/avatar7.png";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import IconBox from "components/Icons/IconBox";
|
||||
import {
|
||||
AdobexdLogo,
|
||||
AtlassianLogo,
|
||||
JiraLogo,
|
||||
SlackLogo,
|
||||
SpotifyLogo,
|
||||
} from "components/Icons/Icons";
|
||||
import { HSeparator } from "components/Separator/Separator";
|
||||
import React, { useReducer } from "react";
|
||||
import { BsPlus } from "react-icons/bs";
|
||||
import { FaCube, FaPenFancy } from "react-icons/fa";
|
||||
import { IoDocumentsSharp, IoEllipsisVerticalSharp } from "react-icons/io5";
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === "SWITCH_ACTIVE") {
|
||||
if (action.payload === "overview") {
|
||||
const newState = {
|
||||
overview: true,
|
||||
teams: false,
|
||||
projects: false,
|
||||
};
|
||||
return newState;
|
||||
} else if (action.payload === "teams") {
|
||||
const newState = {
|
||||
overview: false,
|
||||
teams: true,
|
||||
projects: false,
|
||||
};
|
||||
return newState;
|
||||
} else if (action.payload === "projects") {
|
||||
const newState = {
|
||||
overview: false,
|
||||
teams: false,
|
||||
projects: true,
|
||||
};
|
||||
return newState;
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
function Projects() {
|
||||
const [state, dispatch] = useReducer(reducer, {
|
||||
overview: false,
|
||||
teams: false,
|
||||
projects: true,
|
||||
});
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
const {
|
||||
isOpen: isOpen1,
|
||||
onOpen: onOpen1,
|
||||
onClose: onClose1,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen2,
|
||||
onOpen: onOpen2,
|
||||
onClose: onClose2,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen3,
|
||||
onOpen: onOpen3,
|
||||
onClose: onClose3,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen4,
|
||||
onOpen: onOpen4,
|
||||
onClose: onClose4,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen5,
|
||||
onOpen: onOpen5,
|
||||
onClose: onClose5,
|
||||
} = useDisclosure();
|
||||
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgProfile = useColorModeValue("hsla(0,0%,100%,.8)", "navy.800");
|
||||
const borderProfileColor = useColorModeValue("white", "transparent");
|
||||
const bgIconBox = useColorModeValue(
|
||||
"linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
|
||||
"navy.700"
|
||||
);
|
||||
const secondaryColor = useColorModeValue("gray.500", "white");
|
||||
|
||||
return (
|
||||
<Flex direction="column" mt={{ sm: "150px", md: "100px" }}>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
mb="24px"
|
||||
maxH="330px"
|
||||
justifyContent={{ sm: "center", md: "space-between" }}
|
||||
align="center"
|
||||
backdropFilter="blur(21px)"
|
||||
boxShadow="0px 2px 5.5px rgba(0, 0, 0, 0.02)"
|
||||
border="1.5px solid"
|
||||
borderColor={borderProfileColor}
|
||||
bg={bgProfile}
|
||||
p="24px"
|
||||
borderRadius="20px"
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
mb={{ sm: "10px", md: "0px" }}
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
w={{ sm: "100%" }}
|
||||
textAlign={{ sm: "center", md: "start" }}
|
||||
>
|
||||
<Avatar
|
||||
me={{ md: "22px" }}
|
||||
src={avatar5}
|
||||
w="80px"
|
||||
h="80px"
|
||||
borderRadius="15px"
|
||||
/>
|
||||
<Flex direction="column" maxWidth="100%" my={{ sm: "14px" }}>
|
||||
<Text
|
||||
fontSize={{ sm: "lg", lg: "xl" }}
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
ms={{ sm: "8px", md: "0px" }}
|
||||
>
|
||||
Alec Thompson
|
||||
</Text>
|
||||
<Text fontSize={{ sm: "sm", md: "md" }} color="gray.400">
|
||||
alec@simmmple.com
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
w={{ sm: "100%", md: "50%", lg: "auto" }}
|
||||
>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex
|
||||
align="center"
|
||||
w={{ sm: "100%", lg: "135px" }}
|
||||
bg={
|
||||
state.overview
|
||||
? colorMode === "dark"
|
||||
? "navy.900"
|
||||
: "#fff"
|
||||
: null
|
||||
}
|
||||
borderRadius="8px"
|
||||
justifyContent="center"
|
||||
py="10px"
|
||||
boxShadow={
|
||||
state.overview ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||||
}
|
||||
cursor="pointer"
|
||||
transition="all .5s ease"
|
||||
onClick={() =>
|
||||
dispatch({ type: "SWITCH_ACTIVE", payload: "overview" })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={FaCube} me="6px" />
|
||||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||||
OVERVIEW
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex
|
||||
align="center"
|
||||
w={{ lg: "135px" }}
|
||||
borderRadius="8px"
|
||||
justifyContent="center"
|
||||
py="10px"
|
||||
mx={{ lg: "1rem" }}
|
||||
cursor="pointer"
|
||||
boxShadow={
|
||||
state.teams ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||||
}
|
||||
bg={
|
||||
state.teams
|
||||
? colorMode === "dark"
|
||||
? "navy.900"
|
||||
: "#fff"
|
||||
: null
|
||||
}
|
||||
transition="all .5s ease"
|
||||
onClick={() =>
|
||||
dispatch({ type: "SWITCH_ACTIVE", payload: "teams" })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={IoDocumentsSharp} me="6px" />
|
||||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||||
TEAMS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex
|
||||
align="center"
|
||||
w={{ lg: "135px" }}
|
||||
borderRadius="8px"
|
||||
justifyContent="center"
|
||||
py="10px"
|
||||
cursor="pointer"
|
||||
boxShadow={
|
||||
state.projects ? "0px 2px 5.5px rgba(0, 0, 0, 0.06)" : null
|
||||
}
|
||||
bg={
|
||||
state.projects
|
||||
? colorMode === "dark"
|
||||
? "navy.900"
|
||||
: "#fff"
|
||||
: null
|
||||
}
|
||||
transition="all .5s ease"
|
||||
onClick={() =>
|
||||
dispatch({ type: "SWITCH_ACTIVE", payload: "projects" })
|
||||
}
|
||||
>
|
||||
<Icon color={textColor} as={FaPenFancy} me="6px" />
|
||||
<Text fontSize="xs" color={textColor} fontWeight="bold">
|
||||
PROJECTS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction="column" mb="44px" mt={{ sm: "16px", lg: "0px" }}>
|
||||
<Text fontSize="xl" color="white" fontWeight="bold" mb="16px">
|
||||
Some of Our Awesome Projects
|
||||
</Text>
|
||||
<Text fontSize="sm" color="white" fontWeight="normal">
|
||||
This is the paragraph where you can write more details about your
|
||||
projects. Keep you user engaged by providing meaningful information.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: "1fr",
|
||||
md: "repeat(2, auto)",
|
||||
lg: "repeat(3, auto)",
|
||||
}}
|
||||
templateRows={{ md: "repeat(3, auto)", lg: "repeat(2, auto)" }}
|
||||
gap="30px"
|
||||
>
|
||||
<Card minH="100%" alignSelf="flex-start" minH="100%">
|
||||
<CardHeader mb="18px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex>
|
||||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||||
<SlackLogo
|
||||
w="40px"
|
||||
h="40px"
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
transform="translate(5%)"
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="8px"
|
||||
>
|
||||
Slack Bot
|
||||
</Text>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar3} />
|
||||
<Avatar src={avatar4} />
|
||||
<Avatar src={avatar7} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Menu isOpen={isOpen1} onClose={onClose1}>
|
||||
<MenuButton onClick={onOpen1} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisVerticalSharp}
|
||||
color="gray.400"
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column">
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
If everything I did failed - which it doesn't, I think that it
|
||||
actually succeeds.
|
||||
</Text>
|
||||
<HSeparator my="22px" />
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
5
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Participants
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
02.03.22
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Due Date
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card minH="100%" alignSelf="flex-start">
|
||||
<CardHeader mb="18px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex>
|
||||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||||
<SpotifyLogo
|
||||
w="40px"
|
||||
h="40px"
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
transform="translate(5%)"
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="8px"
|
||||
>
|
||||
Premium Support
|
||||
</Text>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar3} />
|
||||
<Avatar src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Menu isOpen={isOpen2} onClose={onClose2}>
|
||||
<MenuButton onClick={onOpen2} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisVerticalSharp}
|
||||
color="gray.400"
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column">
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Pink is obviously a better color. Everyone’s born confident, and
|
||||
everything’s taken away from you.
|
||||
</Text>
|
||||
<HSeparator my="22px" />
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
3
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Participants
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
22.11.22
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Due Date
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card minH="100%" alignSelf="flex-start">
|
||||
<CardHeader mb="18px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex>
|
||||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||||
<AdobexdLogo
|
||||
w="40px"
|
||||
h="40px"
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
transform="translate(5%)"
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="8px"
|
||||
>
|
||||
Design Tools
|
||||
</Text>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar3} />
|
||||
<Avatar src={avatar4} />
|
||||
<Avatar src={avatar2} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Menu isOpen={isOpen3} onClose={onClose3}>
|
||||
<MenuButton onClick={onOpen3} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisVerticalSharp}
|
||||
color="gray.400"
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column">
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Constantly growing. We’re constantly making mistakes from which
|
||||
we learn and improve.
|
||||
</Text>
|
||||
<HSeparator my="22px" />
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
4
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Participants
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
06.03.21
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Due Date
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card minH="100%" alignSelf="flex-start">
|
||||
<CardHeader mb="18px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex>
|
||||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||||
<AtlassianLogo
|
||||
w="40px"
|
||||
h="40px"
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="8px"
|
||||
>
|
||||
Looking Great
|
||||
</Text>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar src={avatar3} />
|
||||
<Avatar src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Menu isOpen={isOpen4} onClose={onClose4}>
|
||||
<MenuButton onClick={onOpen4} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisVerticalSharp}
|
||||
color="gray.400"
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column">
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
You have the opportunity to play this game of life you need to
|
||||
appreciate every moment.
|
||||
</Text>
|
||||
<HSeparator my="22px" />
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
6
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Participants
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
14.03.24
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Due Date
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card minH="100%" alignSelf="flex-start">
|
||||
<CardHeader mb="18px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex>
|
||||
<IconBox bg={bgIconBox} w="70px" h="70px" me="22px">
|
||||
<JiraLogo
|
||||
w="40px"
|
||||
h="40px"
|
||||
alignSelf="center"
|
||||
justifySelf="center"
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="8px"
|
||||
>
|
||||
Developer First
|
||||
</Text>
|
||||
<AvatarGroup size="xs">
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar3} />
|
||||
<Avatar src={avatar4} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Menu isOpen={isOpen5} onClose={onClose5}>
|
||||
<MenuButton onClick={onOpen5} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisVerticalSharp}
|
||||
color="gray.400"
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column">
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
For standing out. But the time is now to be okay to be the
|
||||
greatest you.
|
||||
</Text>
|
||||
<HSeparator my="22px" />
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
4
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Participants
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
mb="6px"
|
||||
>
|
||||
02.03.22
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm" fontWeight="normal">
|
||||
Due Date
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card minH="100%">
|
||||
<CardBody h="100%">
|
||||
<Flex w="100%" h="100%">
|
||||
<Button variant="no-effects" w="100%" h="100%">
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
color={secondaryColor}
|
||||
>
|
||||
<Icon
|
||||
as={BsPlus}
|
||||
w="30px"
|
||||
h="30px"
|
||||
mb="12px"
|
||||
fontWeight="bold"
|
||||
/>
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
Create a New Project
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Projects;
|
||||
744
src/views/Pages/Profile/Teams.js
Normal file
744
src/views/Pages/Profile/Teams.js
Normal file
@@ -0,0 +1,744 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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.
|
||||
|
||||
*/
|
||||
import React, { useReducer } from 'react';
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Image,
|
||||
Input,
|
||||
Link,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Stack,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
useDisclosure
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import avatar1 from 'assets/img/avatars/avatar1.png';
|
||||
import avatar10 from 'assets/img/avatars/avatar10.png';
|
||||
import avatar2 from 'assets/img/avatars/avatar2.png';
|
||||
import avatar3 from 'assets/img/avatars/avatar3.png';
|
||||
import avatar4 from 'assets/img/avatars/avatar4.png';
|
||||
import avatar5 from 'assets/img/avatars/avatar5.png';
|
||||
import avatar7 from 'assets/img/avatars/avatar7.png';
|
||||
import avatar8 from 'assets/img/avatars/avatar8.png';
|
||||
import avatar9 from 'assets/img/avatars/avatar9.png';
|
||||
import teamsImage from 'assets/img/teams-image.png';
|
||||
import { AiFillLike, AiOutlinePlus } from 'react-icons/ai';
|
||||
import { FaCommentDots, FaCube, FaPenFancy, FaPlus } from 'react-icons/fa';
|
||||
import { IoIosStar, IoMdShareAlt, IoMdStarHalf } from 'react-icons/io';
|
||||
import { IoDocumentsSharp, IoEllipsisVerticalSharp } from 'react-icons/io5';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card.js';
|
||||
import CardBody from 'components/Card/CardBody.js';
|
||||
import CardHeader from 'components/Card/CardHeader.js';
|
||||
import { InvisionLogo, SlackLogo } from 'components/Icons/Icons';
|
||||
import { HSeparator } from 'components/Separator/Separator.js';
|
||||
|
||||
const reducer = (state, action) => {
|
||||
if (action.type === 'SWITCH_ACTIVE') {
|
||||
if (action.payload === 'overview') {
|
||||
const newState = {
|
||||
overview: true,
|
||||
teams: false,
|
||||
projects: false
|
||||
};
|
||||
return newState;
|
||||
} else if (action.payload === 'teams') {
|
||||
const newState = {
|
||||
overview: false,
|
||||
teams: true,
|
||||
projects: false
|
||||
};
|
||||
return newState;
|
||||
} else if (action.payload === 'projects') {
|
||||
const newState = {
|
||||
overview: false,
|
||||
teams: false,
|
||||
projects: true
|
||||
};
|
||||
return newState;
|
||||
}
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
function Teams() {
|
||||
const [ state, dispatch ] = useReducer(reducer, {
|
||||
overview: false,
|
||||
teams: true,
|
||||
projects: false
|
||||
});
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure();
|
||||
|
||||
const { isOpen: isOpen2, onOpen: onOpen2, onClose: onClose2 } = useDisclosure();
|
||||
|
||||
// Chakra color mode
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const bgProfile = useColorModeValue('hsla(0,0%,100%,.8)', 'navy.800');
|
||||
const borderProfileColor = useColorModeValue('white', 'transparent');
|
||||
const bgButton = useColorModeValue('linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)', 'blue.500');
|
||||
const bgBadge = useColorModeValue('gray.100', 'navy.900');
|
||||
|
||||
return (
|
||||
<Flex direction='column' mt={{ sm: '150px', md: '100px' }} overflowX='hidden'>
|
||||
<Box
|
||||
borderRadius='15px'
|
||||
px='0px'
|
||||
display='flex'
|
||||
flexDirection='column'
|
||||
justifyContent='center'
|
||||
align='center'>
|
||||
<Flex
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
mb='24px'
|
||||
maxH='330px'
|
||||
justifyContent={{ sm: 'center', md: 'space-between' }}
|
||||
align='center'
|
||||
backdropFilter='blur(21px)'
|
||||
boxShadow='0px 2px 5.5px rgba(0, 0, 0, 0.02)'
|
||||
border='1.5px solid'
|
||||
borderColor={borderProfileColor}
|
||||
bg={bgProfile}
|
||||
p='24px'
|
||||
borderRadius='20px'>
|
||||
<Flex
|
||||
align='center'
|
||||
mb={{ sm: '10px', md: '0px' }}
|
||||
direction={{ sm: 'column', md: 'row' }}
|
||||
w={{ sm: '100%' }}
|
||||
textAlign={{ sm: 'center', md: 'start' }}>
|
||||
<Avatar me={{ md: '22px' }} src={avatar5} w='80px' h='80px' borderRadius='15px' />
|
||||
<Flex direction='column' maxWidth='100%' my={{ sm: '14px' }}>
|
||||
<Text
|
||||
fontSize={{ sm: 'lg', lg: 'xl' }}
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
ms={{ sm: '8px', md: '0px' }}>
|
||||
Alec Thompson
|
||||
</Text>
|
||||
<Text fontSize={{ sm: 'sm', md: 'md' }} color='gray.400'>
|
||||
alec@simmmple.com
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction={{ sm: 'column', lg: 'row' }} w={{ sm: '100%', md: '50%', lg: 'auto' }}>
|
||||
<Button p='0px' bg='transparent' variant='no-effects'>
|
||||
<Flex
|
||||
align='center'
|
||||
w={{ sm: '100%', lg: '135px' }}
|
||||
bg={state.overview ? colorMode === 'dark' ? 'navy.900' : '#fff' : null}
|
||||
borderRadius='8px'
|
||||
justifyContent='center'
|
||||
py='10px'
|
||||
boxShadow={state.overview ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null}
|
||||
cursor='pointer'
|
||||
transition='all .5s ease'
|
||||
onClick={() => dispatch({ type: 'SWITCH_ACTIVE', payload: 'overview' })}>
|
||||
<Icon color={textColor} as={FaCube} me='6px' />
|
||||
<Text fontSize='xs' color={textColor} fontWeight='bold'>
|
||||
OVERVIEW
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p='0px' bg='transparent' variant='no-effects'>
|
||||
<Flex
|
||||
align='center'
|
||||
w={{ lg: '135px' }}
|
||||
borderRadius='8px'
|
||||
justifyContent='center'
|
||||
py='10px'
|
||||
mx={{ lg: '1rem' }}
|
||||
cursor='pointer'
|
||||
boxShadow={state.teams ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null}
|
||||
bg={state.teams ? colorMode === 'dark' ? 'navy.900' : '#fff' : null}
|
||||
transition='all .5s ease'
|
||||
onClick={() => dispatch({ type: 'SWITCH_ACTIVE', payload: 'teams' })}>
|
||||
<Icon color={textColor} as={IoDocumentsSharp} me='6px' />
|
||||
<Text fontSize='xs' color={textColor} fontWeight='bold'>
|
||||
TEAMS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p='0px' bg='transparent' variant='no-effects'>
|
||||
<Flex
|
||||
align='center'
|
||||
w={{ lg: '135px' }}
|
||||
borderRadius='8px'
|
||||
justifyContent='center'
|
||||
py='10px'
|
||||
cursor='pointer'
|
||||
boxShadow={state.projects ? '0px 2px 5.5px rgba(0, 0, 0, 0.06)' : null}
|
||||
bg={state.projects ? colorMode === 'dark' ? 'navy.900' : '#fff' : null}
|
||||
transition='all .5s ease'
|
||||
onClick={() => dispatch({ type: 'SWITCH_ACTIVE', payload: 'projects' })}>
|
||||
<Icon color={textColor} as={FaPenFancy} me='6px' />
|
||||
<Text fontSize='xs' color={textColor} fontWeight='bold'>
|
||||
PROJECTS
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Card px='0px'>
|
||||
<CardBody overflowX={{ sm: 'scroll', '2xl': 'hidden' }}>
|
||||
<Grid
|
||||
gap={{ sm: '50px', '2xl': '70px' }}
|
||||
templateColumns={{ sm: 'repeat(12, 1fr)', lg: 'repeat(12, 1fr)' }}>
|
||||
<Flex direction='column' mx='auto' align='center' justify='center' ms='20px'>
|
||||
<Link href='#'>
|
||||
<Flex
|
||||
justify='center'
|
||||
align='center'
|
||||
borderRadius='50%'
|
||||
bg={bgButton}
|
||||
w='62px'
|
||||
h='58px'
|
||||
mb='7px'>
|
||||
<Icon as={FaPlus} w='16px' h='16px' color='#fff' />
|
||||
</Flex>
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Add Story
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar4} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Esthera
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar3} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Boris U
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar2} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Tao G
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar1} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Kay R
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar5} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Tom M
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar1} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Nicole N
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar7} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Emma O
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar8} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Marie P
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar9} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Bruce M
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar10} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Sandra A
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column' mx='auto' align='center' me='20px'>
|
||||
<Link
|
||||
href='#'
|
||||
border='1px solid'
|
||||
borderColor='blue.500'
|
||||
borderRadius='50%'
|
||||
mb='6px'
|
||||
p='4px'>
|
||||
<Avatar src={avatar1} size='md' />
|
||||
</Link>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
Katty L
|
||||
</Text>
|
||||
</Flex>
|
||||
</Grid>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '2.1fr 1fr' }} templateRows='auto 1fr' mt='24px' gap='24px'>
|
||||
<Card alignSelf={{ lg: 'flex-start', '2xl': 'stretch' }}>
|
||||
<CardHeader w='100%'>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Flex>
|
||||
<Box>
|
||||
<Avatar src={avatar4} w='40px' h='40px' borderRadius='12px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Esthera Jackson
|
||||
</Text>
|
||||
<Text fontSize='sm' color='gray.500' fontWeight='normal'>
|
||||
3 days ago
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Button variant='primary' p='8px 32px'>
|
||||
<Flex align='center' color='#fff' justifyContent='center'>
|
||||
<Icon as={AiOutlinePlus} w='18px' h='18px' fontWeight='bold' me='4px' />
|
||||
<Text fontSize='10px' fontWeight='bold' mt='4px'>
|
||||
FOLLOW
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<HSeparator my='16px' />
|
||||
<CardBody>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md' mb='24px'>
|
||||
Personal profiles are the perfect way for you to grab their attention and persuade
|
||||
recruiters to continue reading your CV because you’re telling them from the off exactly
|
||||
why they should hire you.
|
||||
</Text>
|
||||
<Image src={teamsImage} minW={{ sm: '270px' }} h='auto' borderRadius='12px' />
|
||||
<Flex justify='space-between' align='center' my='6px'>
|
||||
<Stack spacing='20px' direction='row' my='18px'>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>1502</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={FaCommentDots} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>36</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>12</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Flex align='center' display={{ sm: 'none', md: 'flex' }} direction='row'>
|
||||
<AvatarGroup size='xs' me='6px'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='sm'>
|
||||
and 30+ more
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<HSeparator mb='26px' />
|
||||
<Flex mb='30px'>
|
||||
<Box>
|
||||
<Avatar src={avatar7} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Michael Lewis
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='md' mt='6px' mb='14px'>
|
||||
I always felt like I could do anything. That’s the main thing people are
|
||||
controlled by! Thoughts- their perception of themselves!
|
||||
</Text>
|
||||
<Flex>
|
||||
<Flex align='center' color='gray.500' me='21px'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>3 likes</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>2 shares</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex mb='30px'>
|
||||
<Box>
|
||||
<Avatar src={avatar10} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Jessica Stones
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='md' mt='6px' mb='14px'>
|
||||
Society has put up so many boundaries, so many limitations on what’s right and
|
||||
wrong that it’s almost impossible to get a pure thought out. It’s like a little
|
||||
kid, a little boy.
|
||||
</Text>
|
||||
<Flex>
|
||||
<Flex align='center' color='gray.500' me='21px'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>10 likes</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>1 share</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex mb='30px'>
|
||||
<Box>
|
||||
<Avatar src={avatar8} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Anthony Joshua
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='normal' fontSize='md' mt='6px' mb='14px'>
|
||||
It's all about work ! Great ideas mean nothing if they aren't realised by
|
||||
hungry, desiring people.
|
||||
</Text>
|
||||
<Flex>
|
||||
<Flex align='center' color='gray.500' me='21px'>
|
||||
<Icon as={AiFillLike} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>42 likes</Text>
|
||||
</Flex>
|
||||
<Flex align='center' color='gray.500'>
|
||||
<Icon as={IoMdShareAlt} w='18px' h='18px' me='4px' cursor='pointer' />
|
||||
<Text fontSize='md'>6 shares</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center'>
|
||||
<Box>
|
||||
<Avatar src={avatar4} w='50px' h='50px' me='15px' />
|
||||
</Box>
|
||||
<Input
|
||||
variant='main'
|
||||
placeholder='Write your comment...'
|
||||
_focus={{ borderColor: 'blue.500' }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Digital Marketing
|
||||
</Text>
|
||||
<Flex as='div' variant='no-effects' p='0px'>
|
||||
<Menu isOpen={isOpen1} onClose={onClose1}>
|
||||
<MenuButton onClick={onOpen1} alignSelf='flex-start'>
|
||||
<Icon as={IoEllipsisVerticalSharp} color='gray.400' w='20px' h='20px' />
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' mt='16px'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md' mb='20px'>
|
||||
A group of people who collectively are responsible for all of the work necessary to
|
||||
produce working, validated assets.
|
||||
</Text>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Industry:</Text>
|
||||
<Badge p='12px 16px' borderRadius='12px' bg={bgBadge}>
|
||||
MARKETING TEAM
|
||||
</Badge>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Rating:</Text>
|
||||
<Stack direction='row' spacing='2px'>
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoMdStarHalf} />
|
||||
</Stack>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Members:</Text>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Text fontSize='lg' color={textColor} fontWeight='bold'>
|
||||
Design
|
||||
</Text>
|
||||
<Flex variant='no-effects' p='0px'>
|
||||
<Menu isOpen={isOpen2} onClose={onClose2}>
|
||||
<MenuButton onClick={onOpen2} alignSelf='flex-start'>
|
||||
<Icon as={IoEllipsisVerticalSharp} color='gray.400' w='20px' h='20px' />
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' mt='16px'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md' mb='20px'>
|
||||
Because it's about motivating the doers. Because I’m here to follow my dreams and
|
||||
inspire other people to follow their dreams, too.
|
||||
</Text>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Industry:</Text>
|
||||
<Badge p='12px 16px' borderRadius='12px' bg={bgBadge}>
|
||||
DESIGN TEAM
|
||||
</Badge>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Rating:</Text>
|
||||
<Stack direction='row' spacing='2px'>
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoIosStar} />
|
||||
<Icon as={IoMdStarHalf} />
|
||||
</Stack>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text color='gray.400'>Members:</Text>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex align='center'>
|
||||
<SlackLogo w='34px' h='34px' me='14px' />
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Slack Meet
|
||||
</Text>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='sm'>
|
||||
11:00 AM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='md' mt='16px' mb='8px'>
|
||||
You have an upcoming meet for Marketing Planning
|
||||
</Text>
|
||||
<Text fontWeight='bold' color={textColor} fontSize='md'>
|
||||
Meeting ID:{' '}
|
||||
<Text as='span' color='gray.400' fontWeight='normal'>
|
||||
902-128-281
|
||||
</Text>
|
||||
</Text>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Button variant='primary' p='0px 40px' h='35px'>
|
||||
JOIN
|
||||
</Button>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Flex align='center'>
|
||||
<InvisionLogo w='34px' h='34px' me='14px' />
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='md' color={textColor} fontWeight='bold'>
|
||||
Invision
|
||||
</Text>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='sm'>
|
||||
04:50 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Text fontWeight='normal' color='gray.400' fontSize='md' mt='16px' mb='8px'>
|
||||
You have an upcoming video call for{' '}
|
||||
<Text as='span' color='blue.500'>
|
||||
Chakra Design
|
||||
</Text>{' '}
|
||||
at 04:50 PM.
|
||||
</Text>
|
||||
<Text fontWeight='bold' color={textColor} fontSize='md'>
|
||||
Meeting ID:{' '}
|
||||
<Text as='span' color='gray.400' fontWeight='normal'>
|
||||
902-128-281
|
||||
</Text>
|
||||
</Text>
|
||||
<HSeparator my='14px' />
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Button variant='primary' p='0px 40px' h='35px'>
|
||||
JOIN
|
||||
</Button>
|
||||
<AvatarGroup size='sm'>
|
||||
<Avatar src={avatar1} />
|
||||
<Avatar src={avatar2} />
|
||||
<Avatar src={avatar5} />
|
||||
<Avatar src={avatar8} />
|
||||
</AvatarGroup>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Teams;
|
||||
740
src/views/Pages/Projects/General.js
Normal file
740
src/views/Pages/Projects/General.js
Normal file
@@ -0,0 +1,740 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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.
|
||||
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Progress,
|
||||
Stack,
|
||||
Stat,
|
||||
StatHelpText,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import avatar4 from 'assets/img/avatars/avatar4.png';
|
||||
import basicDark from 'assets/img/BgMusicCard.png';
|
||||
import basicBlue from 'assets/img/basic-auth.png';
|
||||
import { BsCircleFill } from 'react-icons/bs';
|
||||
import { IoEllipsisHorizontalSharp } from 'react-icons/io5';
|
||||
import {
|
||||
CartIcon,
|
||||
DocumentIcon,
|
||||
GlobeIcon,
|
||||
HomeIcon,
|
||||
WalletIcon,
|
||||
} from 'components/Icons/Icons';
|
||||
// Custom components
|
||||
import Card from 'components/Card/Card';
|
||||
import CardHeader from 'components/Card/CardHeader';
|
||||
import DonutChart from 'components/Charts/DonutChart';
|
||||
import LineChart from 'components/Charts/LineChart';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import { HSeparator } from 'components/Separator/Separator';
|
||||
import {
|
||||
donutChartDataGeneral,
|
||||
donutChartOptionsGeneral,
|
||||
lineChartDataGeneral,
|
||||
lineChartOptionsGeneral,
|
||||
} from 'variables/charts';
|
||||
|
||||
function General() {
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const iconBoxInside = useColorModeValue('white', 'white');
|
||||
const iconBlue = useColorModeValue('blue.500', 'blue.500');
|
||||
const bgSalaryCard = useColorModeValue('gray.50', 'navy.900');
|
||||
const bgButton = useColorModeValue('gray.700', 'blue.500');
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: '1fr',
|
||||
lg: '0.5fr 1.5fr 1fr',
|
||||
xl: '1fr 1.7fr 1.5fr',
|
||||
}}
|
||||
gap='24px'
|
||||
mb='24px'
|
||||
>
|
||||
<Card
|
||||
bgImage={colorMode === 'light' ? basicDark : basicBlue}
|
||||
bgSize='cover'
|
||||
bgPosition='50%'
|
||||
>
|
||||
<Flex
|
||||
p={{ sm: '24px 52px', lg: '12px 26px', xl: '24px 52px' }}
|
||||
direction='column'
|
||||
align='center'
|
||||
justify='center'
|
||||
w='100%'
|
||||
h='100%'
|
||||
>
|
||||
<Text color='#fff' fontSize='2xl' fontWeight='normal'>
|
||||
Earnings
|
||||
</Text>
|
||||
<Text color='#fff' fontSize='5xl' fontWeight='bold' mb='12px'>
|
||||
$15,800
|
||||
</Text>
|
||||
<Badge
|
||||
bg='rgba(255, 255, 255, 0.3)'
|
||||
mb='26px'
|
||||
color='#fff'
|
||||
w='150px'
|
||||
borderRadius='8px'
|
||||
display='flex'
|
||||
justify='center'
|
||||
align='center'
|
||||
>
|
||||
<Text
|
||||
textAlign='center'
|
||||
py='6px'
|
||||
fontSize='11px'
|
||||
w='100%'
|
||||
h='100%'
|
||||
alignSelf='center'
|
||||
>
|
||||
+15% SINCE LAST WEEK
|
||||
</Text>
|
||||
</Badge>
|
||||
<Button
|
||||
variant={colorMode === 'light' ? 'primary' : 'light'}
|
||||
py='16px'
|
||||
w='155px'
|
||||
h='25px'
|
||||
>
|
||||
VIEW MORE
|
||||
</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: '1fr',
|
||||
md: 'repeat(2, 1fr)',
|
||||
}}
|
||||
templateRows='repeat(2, 1fr)'
|
||||
gap='24px'
|
||||
>
|
||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
||||
<Flex
|
||||
flexDirection='row'
|
||||
align='center'
|
||||
justify='center'
|
||||
w='100%'
|
||||
h='100%'
|
||||
>
|
||||
<Stat me='auto'>
|
||||
<StatLabel
|
||||
fontSize='sm'
|
||||
color='gray.400'
|
||||
fontWeight='bold'
|
||||
pb='.1rem'
|
||||
>
|
||||
Today's Money
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' color={textColor}>
|
||||
$53,000
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
alignSelf='flex-end'
|
||||
justifySelf='flex-end'
|
||||
m='0px'
|
||||
color='green.400'
|
||||
fontWeight='bold'
|
||||
ps='3px'
|
||||
fontSize='md'
|
||||
>
|
||||
+55%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
||||
<WalletIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
||||
<Flex
|
||||
flexDirection='row'
|
||||
align='center'
|
||||
justify='center'
|
||||
w='100%'
|
||||
h='100%'
|
||||
>
|
||||
<Stat me='auto'>
|
||||
<StatLabel
|
||||
fontSize='sm'
|
||||
color='gray.400'
|
||||
fontWeight='bold'
|
||||
pb='.1rem'
|
||||
>
|
||||
New Clients
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' color={textColor}>
|
||||
+$3,052
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
alignSelf='flex-end'
|
||||
justifySelf='flex-end'
|
||||
m='0px'
|
||||
color='red.500'
|
||||
fontWeight='bold'
|
||||
ps='3px'
|
||||
fontSize='md'
|
||||
>
|
||||
-14%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
||||
<DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
||||
<Flex
|
||||
flexDirection='row'
|
||||
align='center'
|
||||
justify='center'
|
||||
w='100%'
|
||||
h='100%'
|
||||
>
|
||||
<Stat me='auto'>
|
||||
<StatLabel
|
||||
fontSize='sm'
|
||||
color='gray.400'
|
||||
fontWeight='bold'
|
||||
pb='.1rem'
|
||||
>
|
||||
Today's Users
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' color={textColor}>
|
||||
$2,300
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
alignSelf='flex-end'
|
||||
justifySelf='flex-end'
|
||||
m='0px'
|
||||
color='green.400'
|
||||
fontWeight='bold'
|
||||
ps='3px'
|
||||
fontSize='md'
|
||||
>
|
||||
+5%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
||||
<GlobeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card px={{ lg: '8px', xl: '22px' }}>
|
||||
<Flex
|
||||
flexDirection='row'
|
||||
align='center'
|
||||
justify='center'
|
||||
w='100%'
|
||||
h='100%'
|
||||
>
|
||||
<Stat me='auto'>
|
||||
<StatLabel
|
||||
fontSize='sm'
|
||||
color='gray.400'
|
||||
fontWeight='bold'
|
||||
pb='.1rem'
|
||||
>
|
||||
Total Sales
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' color={textColor}>
|
||||
$173,000
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
alignSelf='flex-end'
|
||||
justifySelf='flex-end'
|
||||
m='0px'
|
||||
color='green.400'
|
||||
fontWeight='bold'
|
||||
ps='3px'
|
||||
fontSize='md'
|
||||
>
|
||||
+8%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
<IconBox h={'45px'} w={'45px'} bg={bgButton}>
|
||||
<CartIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Card>
|
||||
<CardHeader mb='28px'>
|
||||
<Flex>
|
||||
<Avatar
|
||||
src={avatar4}
|
||||
w='40px'
|
||||
h='40px'
|
||||
mr='15px'
|
||||
borderRadius='12px'
|
||||
/>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
||||
Esthera Jackson
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
2h ago
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex direction='column' maxW='400px' mb='32px'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='4px'>
|
||||
I need a Ruby developer for my new website.
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
The website was initially built in PHP, I need a professional
|
||||
ruby programmer to shift it.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
justify='space-between'
|
||||
w='100%'
|
||||
bg={bgSalaryCard}
|
||||
borderRadius='12px'
|
||||
p='20px 25px'
|
||||
direction={{ sm: 'row' }}
|
||||
>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
${' '}
|
||||
<Text
|
||||
as='span'
|
||||
fontSize='2xl'
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
>
|
||||
3,000
|
||||
</Text>{' '}
|
||||
/ month
|
||||
</Text>
|
||||
<Button
|
||||
variant='outlined'
|
||||
w={{ sm: '75px', md: '125px', lg: '75px', xl: '125px' }}
|
||||
h='35px'
|
||||
>
|
||||
APPLY
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid
|
||||
templateColumns={{ sm: '1fr', lg: '1.85fr 1fr', xl: '70% 30%' }}
|
||||
gap='24px'
|
||||
>
|
||||
<Card p={{ sm: '16px', md: '22px' }} maxW={{ sm: '330px', md: '100%' }}>
|
||||
<CardHeader>
|
||||
<Flex justify='space-between' w='100%'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
To do List
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='md' fontWeight='normal'>
|
||||
23 - 30 March 2020
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex
|
||||
direction='column'
|
||||
w='100%'
|
||||
overflowX={{ sm: 'scroll', md: 'hidden' }}
|
||||
>
|
||||
<HSeparator my='14px' />
|
||||
<Flex>
|
||||
<Flex
|
||||
bgColor='blue.500'
|
||||
borderRadius='12px'
|
||||
minWidth='3px'
|
||||
h='100%'
|
||||
/>
|
||||
<Flex direction='column' p='12px 22px' w='100%'>
|
||||
<Flex justify='space-between' mb='18px'>
|
||||
<Flex align='center'>
|
||||
<Checkbox
|
||||
me='16px'
|
||||
colorScheme='blue'
|
||||
size='lg'
|
||||
defaultIsChecked
|
||||
/>
|
||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
||||
Check status
|
||||
</Text>
|
||||
</Flex>
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color='gray.400'
|
||||
w='20px'
|
||||
h='20px'
|
||||
cursor='pointer'
|
||||
/>
|
||||
</Flex>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing={{
|
||||
sm: '20px',
|
||||
md: '100px',
|
||||
lg: '80px',
|
||||
xl: '180px',
|
||||
}}
|
||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
||||
>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Date
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
22 July 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Project
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
2414_VR4sf3#
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Company
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
Creative Tim
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex>
|
||||
<Flex
|
||||
bgColor='orange.300'
|
||||
borderRadius='12px'
|
||||
minWidth='3px'
|
||||
h='100%'
|
||||
/>
|
||||
<Flex direction='column' p='12px 22px' w='100%'>
|
||||
<Flex justify='space-between' mb='18px'>
|
||||
<Flex align='center'>
|
||||
<Checkbox me='16px' colorScheme='blue' size='lg' />
|
||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
||||
Management discussion
|
||||
</Text>
|
||||
</Flex>
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color='gray.400'
|
||||
w='20px'
|
||||
h='20px'
|
||||
cursor='pointer'
|
||||
/>
|
||||
</Flex>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing={{
|
||||
sm: '20px',
|
||||
md: '100px',
|
||||
lg: '80px',
|
||||
xl: '180px',
|
||||
}}
|
||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
||||
>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Date
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
22 July 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Project
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
4411_8sIsdd23
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Company
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
Apple
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex>
|
||||
<Flex
|
||||
bgColor='pink.300'
|
||||
borderRadius='12px'
|
||||
minWidth='3px'
|
||||
h='100%'
|
||||
/>
|
||||
<Flex direction='column' p='12px 22px' w='100%'>
|
||||
<Flex justify='space-between' mb='18px'>
|
||||
<Flex align='center'>
|
||||
<Checkbox me='16px' colorScheme='blue' size='lg' />
|
||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
||||
New channel distribution
|
||||
</Text>
|
||||
</Flex>
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color='gray.400'
|
||||
w='20px'
|
||||
h='20px'
|
||||
cursor='pointer'
|
||||
/>
|
||||
</Flex>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing={{
|
||||
sm: '20px',
|
||||
md: '100px',
|
||||
lg: '80px',
|
||||
xl: '180px',
|
||||
}}
|
||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
||||
>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Date
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
22 July 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Project
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
827d_kdl33D1s
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Company
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
Microsoft
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<HSeparator my='14px' />
|
||||
<Flex>
|
||||
<Flex
|
||||
bgColor='purple.500'
|
||||
borderRadius='12px'
|
||||
minWidth='3px'
|
||||
h='100%'
|
||||
/>{' '}
|
||||
<Flex direction='column' p='12px 22px' w='100%'>
|
||||
<Flex justify='space-between' mb='18px'>
|
||||
<Flex align='center'>
|
||||
<Checkbox
|
||||
me='16px'
|
||||
colorScheme='blue'
|
||||
size='lg'
|
||||
defaultIsChecked
|
||||
/>
|
||||
<Text color={textColor} fontSize='md' fontWeight='bold'>
|
||||
IOS App development
|
||||
</Text>
|
||||
</Flex>
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color='gray.400'
|
||||
w='20px'
|
||||
h='20px'
|
||||
cursor='pointer'
|
||||
/>
|
||||
</Flex>
|
||||
<Stack
|
||||
direction='row'
|
||||
spacing={{
|
||||
sm: '20px',
|
||||
md: '100px',
|
||||
lg: '80px',
|
||||
xl: '180px',
|
||||
}}
|
||||
ms={{ sm: '0px', md: '36px', lg: '0px', xl: '36px' }}
|
||||
>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Date
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
22 July 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Project
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
88s1_349DA2sa
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Company
|
||||
</Text>
|
||||
<Text color='gray.500' fontWeight='bold' fontSize='md'>
|
||||
Facebook
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Flex direction='column'>
|
||||
<Card
|
||||
mb='24px'
|
||||
maxW={{ sm: '330px', md: '100%' }}
|
||||
px={{ sm: '0px', lg: '22px' }}
|
||||
>
|
||||
<CardHeader>
|
||||
<Flex direction='column' w='100%'>
|
||||
<Flex
|
||||
justify='space-between'
|
||||
w='100%'
|
||||
px={{ sm: '22px', lg: '0px' }}
|
||||
>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'45px'} w={'45px'} bg={iconBlue} me='16px'>
|
||||
<HomeIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Tasks
|
||||
</Text>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='xl'>
|
||||
480
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction='column' alignSelf='flex-end' minW='125px'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
60%
|
||||
</Text>
|
||||
<Progress
|
||||
colorScheme='blue'
|
||||
size='sm'
|
||||
borderRadius='15px'
|
||||
value={60}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<LineChart
|
||||
chartData={lineChartDataGeneral}
|
||||
chartOptions={lineChartOptionsGeneral}
|
||||
/>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card maxW={{ sm: '330px', md: '100%' }}>
|
||||
<Flex justify='space-between' w='100%' minH='190px'>
|
||||
<Flex direction='column'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'45px'} w={'45px'} bg={iconBlue} me='16px'>
|
||||
<DocumentIcon h={'24px'} w={'24px'} color={iconBoxInside} />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='md'>
|
||||
Projects
|
||||
</Text>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='xl'>
|
||||
115
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction='column' mt='36px'>
|
||||
<Flex align='center'>
|
||||
<Icon
|
||||
as={BsCircleFill}
|
||||
color='blue.500'
|
||||
w='10px'
|
||||
h='10px'
|
||||
me='8px'
|
||||
/>
|
||||
<Text color={textColor} fontWeight='normal' fontSize='md'>
|
||||
Done
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex align='center'>
|
||||
<Icon
|
||||
as={BsCircleFill}
|
||||
color='gray.400'
|
||||
w='10px'
|
||||
h='10px'
|
||||
me='8px'
|
||||
/>
|
||||
<Text color={textColor} fontWeight='normal' fontSize='md'>
|
||||
In progress
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<DonutChart
|
||||
chartData={donutChartDataGeneral}
|
||||
chartOptions={donutChartOptionsGeneral}
|
||||
/>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default General;
|
||||
95
src/views/Pages/Projects/Timeline.js
Normal file
95
src/views/Pages/Projects/Timeline.js
Normal file
@@ -0,0 +1,95 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 { Stack, Text, useColorModeValue } from "@chakra-ui/react";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import TimelineRow from "components/Tables/TimelineRow";
|
||||
import React from "react";
|
||||
import { timelineProjectsData } from "variables/general";
|
||||
|
||||
function Timeline() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgCard = useColorModeValue(
|
||||
"linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
|
||||
"linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
spacing="24px"
|
||||
pt={{ sm: "125px", lg: "75px" }}
|
||||
>
|
||||
<Card>
|
||||
<CardHeader mb="30px">
|
||||
<Text color={textColor} fontSize="lg" fontWeight="bold">
|
||||
Timeline with dotted line
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="10px">
|
||||
<Stack direction="column" spacing="4px">
|
||||
{timelineProjectsData.map((row, index) => {
|
||||
return (
|
||||
<TimelineRow
|
||||
logo={row.logo}
|
||||
title={row.title}
|
||||
date={row.date}
|
||||
color={row.color}
|
||||
description={row.description}
|
||||
tags={row.tags}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card bg={bgCard}>
|
||||
<CardHeader mb="30px">
|
||||
<Text color="#fff" fontSize="lg" fontWeight="bold">
|
||||
Timeline dark with dashed line
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody px="10px">
|
||||
<Stack direction="column" spacing="4px">
|
||||
{timelineProjectsData.map((row, index) => {
|
||||
return (
|
||||
<TimelineRow
|
||||
logo={row.logo}
|
||||
title={row.title}
|
||||
titleColor={row.titleColor}
|
||||
date={row.date}
|
||||
color={row.color}
|
||||
description={row.description}
|
||||
tags={row.tags}
|
||||
isDark={true}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Timeline;
|
||||
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>
|
||||
);
|
||||
}
|
||||
655
src/views/Pages/Users/NewUser.js
Normal file
655
src/views/Pages/Users/NewUser.js
Normal file
@@ -0,0 +1,655 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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.
|
||||
|
||||
*/
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
// Chakra imports
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Grid,
|
||||
Icon,
|
||||
Input,
|
||||
Stack,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Tabs,
|
||||
Text,
|
||||
Textarea,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
// Assets
|
||||
import { BsCircleFill } from "react-icons/bs";
|
||||
|
||||
function NewUser() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgTextarea = useColorModeValue("white", "navy.900");
|
||||
const borderColor = useColorModeValue("gray.200", "transparent");
|
||||
const placeholderColor = useColorModeValue("gray.300", "gray.400");
|
||||
const [activeBullets, setActiveBullets] = useState({
|
||||
userInfo: true,
|
||||
address: false,
|
||||
socials: false,
|
||||
profile: false,
|
||||
});
|
||||
|
||||
const userInfoTab = useRef();
|
||||
const addressTab = useRef();
|
||||
const socialsTab = useRef();
|
||||
const profileTab = useRef();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
minH="89vh"
|
||||
align="center"
|
||||
pt={{ sm: "120px", md: "75px" }}
|
||||
>
|
||||
<Tabs variant="unstyled" mt="24px">
|
||||
<TabList display="flex" align="center" justifyContent="center">
|
||||
<Tab
|
||||
ref={userInfoTab}
|
||||
_focus={{}}
|
||||
w={{ sm: "80px", md: "200px" }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
userInfo: true,
|
||||
address: false,
|
||||
socials: false,
|
||||
profile: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align="center"
|
||||
position="relative"
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: "80px", md: "200px" },
|
||||
height: "3px",
|
||||
bg: activeBullets.address ? "white" : "blue.300",
|
||||
left: { sm: "12px", md: "32px" },
|
||||
top: { sm: activeBullets.userInfo ? "6px" : "4px", md: null },
|
||||
position: "absolute",
|
||||
bottom: activeBullets.userInfo ? "40px" : "38px",
|
||||
|
||||
transition: "all .3s ease",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex="1"
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.userInfo ? "white" : "blue.300"}
|
||||
w={activeBullets.userInfo ? "16px" : "12px"}
|
||||
h={activeBullets.userInfo ? "16px" : "12px"}
|
||||
mb="8px"
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.userInfo ? "white" : "blue.300"}
|
||||
fontWeight={activeBullets.userInfo ? "bold" : "normal"}
|
||||
display={{ sm: "none", md: "block" }}
|
||||
>
|
||||
User Info
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={addressTab}
|
||||
_focus={{}}
|
||||
w={{ sm: "80px", md: "200px" }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
userInfo: true,
|
||||
address: true,
|
||||
socials: false,
|
||||
profile: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align="center"
|
||||
position="relative"
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: "80px", md: "200px" },
|
||||
height: "3px",
|
||||
bg: activeBullets.socials ? "white" : "blue.300",
|
||||
left: { sm: "12px", md: "32px" },
|
||||
top: { sm: activeBullets.address ? "6px" : "4px", md: null },
|
||||
position: "absolute",
|
||||
bottom: activeBullets.address ? "40px" : "38px",
|
||||
|
||||
transition: "all .3s ease",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex="1"
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.address ? "white" : "blue.300"}
|
||||
w={activeBullets.address ? "16px" : "12px"}
|
||||
h={activeBullets.address ? "16px" : "12px"}
|
||||
mb="8px"
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.address ? "white" : "gray.300"}
|
||||
fontWeight={activeBullets.address ? "bold" : "normal"}
|
||||
transition="all .3s ease"
|
||||
_hover={{ color: "white" }}
|
||||
display={{ sm: "none", md: "block" }}
|
||||
>
|
||||
Address
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={socialsTab}
|
||||
_focus={{}}
|
||||
w={{ sm: "80px", md: "200px" }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
userInfo: true,
|
||||
address: true,
|
||||
socials: true,
|
||||
profile: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align="center"
|
||||
position="relative"
|
||||
_before={{
|
||||
content: "''",
|
||||
width: { sm: "80px", md: "200px" },
|
||||
height: "3px",
|
||||
bg: activeBullets.profile ? "white" : "blue.300",
|
||||
left: { sm: "12px", md: "32px" },
|
||||
top: { sm: activeBullets.socials ? "6px" : "4px", md: null },
|
||||
position: "absolute",
|
||||
bottom: activeBullets.socials ? "40px" : "38px",
|
||||
|
||||
transition: "all .3s ease",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
zIndex="1"
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.socials ? "white" : "blue.300"}
|
||||
w={activeBullets.socials ? "16px" : "12px"}
|
||||
h={activeBullets.socials ? "16px" : "12px"}
|
||||
mb="8px"
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.socials ? "white" : "gray.300"}
|
||||
fontWeight={activeBullets.socials ? "bold" : "normal"}
|
||||
transition="all .3s ease"
|
||||
_hover={{ color: "white" }}
|
||||
display={{ sm: "none", md: "block" }}
|
||||
>
|
||||
Socials
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
<Tab
|
||||
ref={profileTab}
|
||||
_focus={{}}
|
||||
w={{ sm: "80px", md: "200px" }}
|
||||
onClick={() =>
|
||||
setActiveBullets({
|
||||
userInfo: true,
|
||||
address: true,
|
||||
socials: true,
|
||||
profile: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
<Flex direction="column" justify="center" align="center">
|
||||
<Icon
|
||||
zIndex="1"
|
||||
as={BsCircleFill}
|
||||
color={activeBullets.profile ? "white" : "blue.300"}
|
||||
w={activeBullets.profile ? "16px" : "12px"}
|
||||
h={activeBullets.profile ? "16px" : "12px"}
|
||||
mb="8px"
|
||||
/>
|
||||
<Text
|
||||
color={activeBullets.profile ? "white" : "gray.300"}
|
||||
fontWeight={activeBullets.profile ? "bold" : "normal"}
|
||||
transition="all .3s ease"
|
||||
_hover={{ color: "white" }}
|
||||
display={{ sm: "none", md: "block" }}
|
||||
>
|
||||
Profile
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels mt="24px" maxW={{ md: "90%", lg: "100%" }} mx="auto">
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb="40px">
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
mb="3px"
|
||||
>
|
||||
About Me
|
||||
</Text>
|
||||
<Text color="gray.400" fontWeight="normal" fontSize="sm">
|
||||
Mandatory Informations
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr", md: "repeat(2, 1fr)" }}
|
||||
templateRows={{ md: "repeat(2, 1fr)" }}
|
||||
gap="24px"
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
First Name
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="eg. Michael"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Last Name
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="eg. Jackson"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Company
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="eg. Simmmple"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Email address
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
type="email"
|
||||
placeholder="eg. example@yahoo.com"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Password
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
type="password"
|
||||
placeholder="******"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Repeat Password
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="******"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Button
|
||||
variant="dark"
|
||||
alignSelf="flex-end"
|
||||
mt="24px"
|
||||
w="100px"
|
||||
h="35px"
|
||||
onClick={() => addressTab.current.click()}
|
||||
>
|
||||
NEXT
|
||||
</Button>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb="40px">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
mb="3px"
|
||||
>
|
||||
Address
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<Stack direction="column" spacing="20px">
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Address 1
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="eg. Street 120"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Address 2
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="eg. Street 220"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<Grid
|
||||
templateColumns={{ sm: "1fr 1fr", lg: "2fr 1fr 1fr" }}
|
||||
gap="30px"
|
||||
>
|
||||
<FormControl gridColumn={{ sm: "1 / 3", lg: "auto" }}>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
City
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="eg. Tokyo"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
State
|
||||
</FormLabel>
|
||||
<Input variant="main" placeholder="..." fontSize="xs" />
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
ZIP
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="7 letters"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Flex justify="space-between">
|
||||
<Button
|
||||
variant="light"
|
||||
alignSelf="flex-end"
|
||||
mt="24px"
|
||||
w="100px"
|
||||
h="35px"
|
||||
onClick={() => userInfoTab.current.click()}
|
||||
>
|
||||
PREV
|
||||
</Button>
|
||||
<Button
|
||||
variant="dark"
|
||||
alignSelf="flex-end"
|
||||
mt="24px"
|
||||
w="100px"
|
||||
h="35px"
|
||||
onClick={() => socialsTab.current.click()}
|
||||
>
|
||||
NEXT
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb="40px">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
mb="3px"
|
||||
>
|
||||
Socials
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<Grid
|
||||
templateColumns="1fr"
|
||||
templateRows="repeat(3, 1fr)"
|
||||
gap="24px"
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Twitter Handle
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="@Argon"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Facebook Account
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="http://..."
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Instagram Account
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="http://..."
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Flex justify="space-between">
|
||||
<Button
|
||||
variant="light"
|
||||
alignSelf="flex-end"
|
||||
mt="24px"
|
||||
w="100px"
|
||||
h="35px"
|
||||
onClick={() => addressTab.current.click()}
|
||||
>
|
||||
PREV
|
||||
</Button>
|
||||
<Button
|
||||
variant="dark"
|
||||
alignSelf="flex-end"
|
||||
mt="24px"
|
||||
w="100px"
|
||||
h="35px"
|
||||
onClick={() => profileTab.current.click()}
|
||||
>
|
||||
NEXT
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Card>
|
||||
<CardHeader mb="40px">
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="lg"
|
||||
fontWeight="bold"
|
||||
mb="3px"
|
||||
>
|
||||
Profile
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<Stack direction="column" spacing="24px">
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Public Email
|
||||
</FormLabel>
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="Use an address you don't use frequently"
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
fontSize="xs"
|
||||
>
|
||||
Bio
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
placeholder="Say a few words about who you are or what you are working on."
|
||||
minH="120px"
|
||||
bg={bgTextarea}
|
||||
borderColor={borderColor}
|
||||
_placeholder={{ color: placeholderColor }}
|
||||
fontSize="xs"
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
<Flex justify="space-between">
|
||||
<Button
|
||||
variant="light"
|
||||
alignSelf="flex-end"
|
||||
mt="24px"
|
||||
w="100px"
|
||||
h="35px"
|
||||
onClick={() => socialsTab.current.click()}
|
||||
>
|
||||
PREV
|
||||
</Button>
|
||||
<Button variant="primary" mt="24px" w="100px" h="35px">
|
||||
<Text fontSize="xs" color="#fff" fontWeight="bold">
|
||||
SEND
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewUser;
|
||||
475
src/views/Pages/Users/Reports.js
Normal file
475
src/views/Pages/Users/Reports.js
Normal file
@@ -0,0 +1,475 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 {
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Progress,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
useColorMode,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import bgCardReports from "assets/img/background-card-reports.png";
|
||||
// Custom components
|
||||
import Card from "components/Card/Card";
|
||||
import CardBody from "components/Card/CardBody";
|
||||
import CardHeader from "components/Card/CardHeader";
|
||||
import IconBox from "components/Icons/IconBox";
|
||||
import { CartIcon, RocketIcon } from "components/Icons/Icons";
|
||||
import TablesReportsRow from "components/Tables/TablesReportsRow";
|
||||
import React from "react";
|
||||
import { AiFillLike } from "react-icons/ai";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { IoEllipsisHorizontalSharp } from "react-icons/io5";
|
||||
import { tablesReportsData } from "variables/general";
|
||||
|
||||
function Reports() {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const secondaryColor = useColorModeValue("gray.400", "white");
|
||||
const iconColor = useColorModeValue("blue.900", "blue.500");
|
||||
const bgProgress = useColorModeValue("gray.200", "navy.900");
|
||||
const borderColor = useColorModeValue("gray.200", "gray.600");
|
||||
const {
|
||||
isOpen: isOpen1,
|
||||
onOpen: onOpen1,
|
||||
onClose: onClose1,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen2,
|
||||
onOpen: onOpen2,
|
||||
onClose: onClose2,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen3,
|
||||
onOpen: onOpen3,
|
||||
onClose: onClose3,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
isOpen: isOpen4,
|
||||
onOpen: onOpen4,
|
||||
onClose: onClose4,
|
||||
} = useDisclosure();
|
||||
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<Flex direction="column" pt={{ base: "150px", lg: "75px" }}>
|
||||
<Grid templateColumns={{ md: "repeat(2, 1fr)" }} gap="24px" mb="24px">
|
||||
<Grid
|
||||
templateColumns={{ md: "repeat(2, 1fr)" }}
|
||||
templateRows={{ md: "repeat(2, 1fr)" }}
|
||||
gap="24px"
|
||||
>
|
||||
<Card
|
||||
bgImage={
|
||||
colorMode === "light"
|
||||
? bgCardReports
|
||||
: "linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
}
|
||||
minH="168px"
|
||||
>
|
||||
<CardBody h="100%">
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
h="100%"
|
||||
>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<IconBox bg="#fff" w="50px" h="50px">
|
||||
<Icon as={FaUser} w="25px" h="25px" color="blue.900" />
|
||||
</IconBox>
|
||||
<Menu isOpen={isOpen1} onClose={onClose1}>
|
||||
<MenuButton onClick={onOpen1} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color={iconColor}
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text color="#fff" fontWeight="bold" fontSize="md">
|
||||
1600
|
||||
</Text>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
>
|
||||
Users Active
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
color="#fff"
|
||||
fontWeight="bold"
|
||||
fontSize="md"
|
||||
alignSelf="flex-end"
|
||||
>
|
||||
+55%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card
|
||||
bgImage={
|
||||
colorMode === "light"
|
||||
? bgCardReports
|
||||
: "linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
}
|
||||
minH="168px"
|
||||
>
|
||||
<CardBody h="100%">
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
h="100%"
|
||||
>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<IconBox bg="#fff" w="50px" h="50px">
|
||||
<Icon as={RocketIcon} w="25px" h="25px" color="blue.900" />
|
||||
</IconBox>
|
||||
<Menu isOpen={isOpen2} onClose={onClose2}>
|
||||
<MenuButton onClick={onOpen2} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color={iconColor}
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text color="#fff" fontWeight="bold" fontSize="md">
|
||||
357
|
||||
</Text>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
>
|
||||
Click Events
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
color="#fff"
|
||||
fontWeight="bold"
|
||||
fontSize="md"
|
||||
alignSelf="flex-end"
|
||||
>
|
||||
+124%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card
|
||||
bgImage={
|
||||
colorMode === "light"
|
||||
? bgCardReports
|
||||
: "linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
}
|
||||
minH="168px"
|
||||
>
|
||||
<CardBody h="100%">
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
h="100%"
|
||||
>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<IconBox bg="#fff" w="50px" h="50px">
|
||||
<Icon as={CartIcon} w="25px" h="25px" color="blue.900" />
|
||||
</IconBox>
|
||||
<Menu isOpen={isOpen3} onClose={onClose3}>
|
||||
<MenuButton onClick={onOpen3} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color={iconColor}
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text color="#fff" fontWeight="bold" fontSize="md">
|
||||
2340
|
||||
</Text>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
>
|
||||
Purchases
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
color="#fff"
|
||||
fontWeight="bold"
|
||||
fontSize="md"
|
||||
alignSelf="flex-end"
|
||||
>
|
||||
+14%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card
|
||||
bgImage={
|
||||
colorMode === "light"
|
||||
? bgCardReports
|
||||
: "linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
|
||||
}
|
||||
bgPosition="cover"
|
||||
minH="168px"
|
||||
>
|
||||
<CardBody h="100%">
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
h="100%"
|
||||
>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<IconBox bg="#fff" w="50px" h="50px">
|
||||
<Icon as={AiFillLike} w="25px" h="25px" color="blue.900" />
|
||||
</IconBox>
|
||||
<Menu isOpen={isOpen4} onClose={onClose4}>
|
||||
<MenuButton onClick={onOpen4} alignSelf="flex-start">
|
||||
<Icon
|
||||
as={IoEllipsisHorizontalSharp}
|
||||
color={iconColor}
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem>Action</MenuItem>
|
||||
<MenuItem>Another action</MenuItem>
|
||||
<MenuItem>Something else here</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column">
|
||||
<Text color="#fff" fontWeight="bold" fontSize="md">
|
||||
940
|
||||
</Text>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
fontSize="sm"
|
||||
>
|
||||
Likes
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
color="#fff"
|
||||
fontWeight="bold"
|
||||
fontSize="md"
|
||||
alignSelf="flex-end"
|
||||
>
|
||||
+90%
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Card>
|
||||
<CardHeader mb="24px">
|
||||
<Text fontSize="lg" color={textColor} fontWeight="bold">
|
||||
Reviews
|
||||
</Text>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Flex direction="column" w="100%">
|
||||
<Stack direction="column" spacing="28px" w="100%" mb="40px">
|
||||
<Flex direction="column">
|
||||
<Flex justify="space-between" mb="8px">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="500">
|
||||
Positive Reviews
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="500">
|
||||
80%
|
||||
</Text>
|
||||
</Flex>
|
||||
<Progress
|
||||
colorScheme="blue"
|
||||
size="xs"
|
||||
bg={bgProgress}
|
||||
value={80}
|
||||
borderRadius="15px"
|
||||
></Progress>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Flex justify="space-between" mb="8px">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="500">
|
||||
Neutral Reviews
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="500">
|
||||
17%
|
||||
</Text>
|
||||
</Flex>
|
||||
<Progress
|
||||
bg={bgProgress}
|
||||
colorScheme="gray"
|
||||
size="xs"
|
||||
value={17}
|
||||
borderRadius="15px"
|
||||
></Progress>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Flex justify="space-between" mb="8px">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="500">
|
||||
Negative Reviews
|
||||
</Text>
|
||||
<Text fontSize="md" color="gray.400" fontWeight="500">
|
||||
3%
|
||||
</Text>
|
||||
</Flex>
|
||||
<Progress
|
||||
bg={bgProgress}
|
||||
colorScheme="red"
|
||||
size="xs"
|
||||
value={3}
|
||||
borderRadius="15px"
|
||||
></Progress>
|
||||
</Flex>
|
||||
</Stack>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
w="100%"
|
||||
direction={{ sm: "column", lg: "row" }}
|
||||
>
|
||||
<Text
|
||||
color="gray.500"
|
||||
fontSize="md"
|
||||
maxW={{ lg: "65%" }}
|
||||
mb={{ sm: "16px", lg: "0px" }}
|
||||
>
|
||||
More than{" "}
|
||||
<Text as="span" color={textColor} fontWeight="bold">
|
||||
1,500,000 developers
|
||||
</Text>{" "}
|
||||
used Creative Tim's products and over{" "}
|
||||
<Text as="span" color={textColor} fontWeight="bold">
|
||||
700,000 projects
|
||||
</Text>{" "}
|
||||
were created.
|
||||
</Text>
|
||||
<Button variant="dark" p="12px 24px" alignSelf="flex-end">
|
||||
VIEW ALL REVIEWS
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Card overflowX={{ sm: "scroll", lg: "hidden" }}>
|
||||
<CardBody>
|
||||
<Table variant="simple" color={textColor}>
|
||||
<Thead>
|
||||
<Tr my=".8rem" ps="0px" color="gray.400">
|
||||
<Th ps="0px" color="gray.400" borderColor={borderColor}>
|
||||
Name
|
||||
</Th>
|
||||
<Th color="gray.400" borderColor={borderColor}>
|
||||
Function
|
||||
</Th>
|
||||
<Th color="gray.400" borderColor={borderColor}>
|
||||
Review
|
||||
</Th>
|
||||
<Th color="gray.400" borderColor={borderColor}>
|
||||
Email
|
||||
</Th>
|
||||
<Th color="gray.400" borderColor={borderColor}>
|
||||
Employed
|
||||
</Th>
|
||||
<Th color="gray.400" borderColor={borderColor}>
|
||||
Id
|
||||
</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody pb="0px">
|
||||
{tablesReportsData.map((row, index, arr) => {
|
||||
return (
|
||||
<TablesReportsRow
|
||||
name={row.name}
|
||||
image={row.image}
|
||||
email={row.email}
|
||||
domain={row.domain}
|
||||
review={row.review}
|
||||
employed={row.employed}
|
||||
id={row.id}
|
||||
isLast={index === arr.length - 1 ? true : false}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Reports;
|
||||
767
src/views/Pages/Widgets.js
Normal file
767
src/views/Pages/Widgets.js
Normal file
@@ -0,0 +1,767 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* 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 {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Grid,
|
||||
Icon,
|
||||
Progress,
|
||||
Spacer,
|
||||
Stack,
|
||||
Stat,
|
||||
StatHelpText,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
Switch,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import BackgroundCard1 from 'assets/img/BackgroundCard1.png';
|
||||
import BgMusicCard from 'assets/img/BgMusicCard.png';
|
||||
import BgMusicCardDark from 'assets/img/bgMusicCardDark.png';
|
||||
import {
|
||||
ClockIcon,
|
||||
DocumentIcon,
|
||||
RocketIcon,
|
||||
SettingsIcon,
|
||||
WalletIcon,
|
||||
} from 'components/Icons/Icons';
|
||||
import { AiFillBackward, AiFillForward } from 'react-icons/ai';
|
||||
import { BsBatteryCharging, BsMusicNoteBeamed } from 'react-icons/bs';
|
||||
// Custom components
|
||||
import EventCalendar from 'components/Calendars/EventCalendar';
|
||||
import Card from 'components/Card/Card';
|
||||
import CardHeader from 'components/Card/CardHeader';
|
||||
import LineChart from 'components/Charts/LineChart';
|
||||
import IconBox from 'components/Icons/IconBox';
|
||||
import { HSeparator } from 'components/Separator/Separator';
|
||||
import TimelineRow from 'components/Tables/TimelineRow';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
FaCheckCircle,
|
||||
FaLightbulb,
|
||||
FaPaypal,
|
||||
FaPlay,
|
||||
FaRegLightbulb,
|
||||
FaShare,
|
||||
FaUser,
|
||||
FaWallet,
|
||||
} from 'react-icons/fa';
|
||||
import { RiArrowDropRightLine, RiMastercardFill } from 'react-icons/ri';
|
||||
import { calendarDataWidgets } from 'variables/calendar';
|
||||
import {
|
||||
lineChartDataWidgets1,
|
||||
lineChartDataWidgets2,
|
||||
lineChartDataWidgets3,
|
||||
lineChartOptionsWidgets1,
|
||||
lineChartOptionsWidgets2,
|
||||
lineChartOptionsWidgets3,
|
||||
} from 'variables/charts';
|
||||
import { timelineData } from 'variables/general';
|
||||
|
||||
function Widgets() {
|
||||
const [toggleSwitch, setToggleSwitch] = useState(false);
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
const textColor = useColorModeValue('gray.700', 'white');
|
||||
const iconBlue = useColorModeValue('blue.500', 'white');
|
||||
const secondaryIconBlue = useColorModeValue('gray.100', 'blue.500');
|
||||
const iconBoxInside = useColorModeValue('white', 'blue.500');
|
||||
const bgCard = useColorModeValue(
|
||||
'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
|
||||
'navy.800'
|
||||
);
|
||||
const iconBoxColor = useColorModeValue(
|
||||
'linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)',
|
||||
'blue.500'
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex direction='column' pt={{ sm: '125px', lg: '75px' }}>
|
||||
<Grid
|
||||
templateColumns={{ sm: '1fr', md: '1fr 1fr', lg: '1fr 1fr 2fr' }}
|
||||
templateRows='1fr'
|
||||
gap='24px'
|
||||
mb='24px'
|
||||
>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card bg={bgCard}>
|
||||
<Flex justify='space-between' w='100%' align='center'>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' color='#fff' fontWeight='normal' mb='2px'>
|
||||
Battery Health
|
||||
</Text>
|
||||
<Text fontSize='lg' color='#fff' fontWeight='bold'>
|
||||
99%
|
||||
</Text>
|
||||
</Flex>
|
||||
<IconBox h={'45px'} w={'45px'} bg={iconBoxInside}>
|
||||
<Icon
|
||||
as={BsBatteryCharging}
|
||||
h={'24px'}
|
||||
w={'24px'}
|
||||
color={iconBlue}
|
||||
/>
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card bg={bgCard}>
|
||||
<Flex justify='space-between' w='100%' align='center'>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' color='#fff' fontWeight='normal' mb='2px'>
|
||||
Music Volume
|
||||
</Text>
|
||||
<Text fontSize='lg' color='#fff' fontWeight='bold'>
|
||||
15/100
|
||||
</Text>
|
||||
</Flex>
|
||||
<IconBox h={'45px'} w={'45px'} bg={iconBoxInside}>
|
||||
<Icon
|
||||
as={BsMusicNoteBeamed}
|
||||
h={'24px'}
|
||||
w={'24px'}
|
||||
color={iconBlue}
|
||||
/>
|
||||
</IconBox>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Stack>
|
||||
<Card px='0px' maxH='230px' pb='0px'>
|
||||
<CardHeader px='22px'>
|
||||
<Stat me='auto'>
|
||||
<StatLabel fontSize='xs' color='gray.400' fontWeight='normal'>
|
||||
Income
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' color={textColor}>
|
||||
$130,912
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
alignSelf='flex-end'
|
||||
justifySelf='flex-end'
|
||||
m='0px'
|
||||
ps='4px'
|
||||
color='green.400'
|
||||
fontWeight='bold'
|
||||
fontSize='sm'
|
||||
>
|
||||
+90%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
</CardHeader>
|
||||
|
||||
<Box w='100%'>
|
||||
<LineChart
|
||||
chartData={lineChartDataWidgets1}
|
||||
chartOptions={lineChartOptionsWidgets1}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
<Card
|
||||
px='0px'
|
||||
maxH='230px'
|
||||
pb='0px'
|
||||
gridColumn={{ md: '1 / 3', lg: 'auto' }}
|
||||
>
|
||||
<CardHeader px='22px'>
|
||||
<Flex justify='space-between' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'45px'} w={'45px'} bg='blue.500' me='16px'>
|
||||
<Icon
|
||||
as={FaCheckCircle}
|
||||
h={'24px'}
|
||||
w={'24px'}
|
||||
color='white'
|
||||
/>
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='normal'>
|
||||
Tasks
|
||||
</Text>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold'>
|
||||
480
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex direction='column' minW='125px' alignSelf='flex-end'>
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='xs'>
|
||||
60%
|
||||
</Text>
|
||||
<Progress
|
||||
colorScheme='blue'
|
||||
borderRadius='15px'
|
||||
h='6px'
|
||||
value={60}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Box w='100%'>
|
||||
<LineChart
|
||||
chartData={lineChartDataWidgets2}
|
||||
chartOptions={lineChartOptionsWidgets2}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: '1fr',
|
||||
md: 'repeat(2, 1fr)',
|
||||
lg: 'repeat(3, 1fr)',
|
||||
}}
|
||||
gap='24px'
|
||||
mb='24px'
|
||||
>
|
||||
<Card>
|
||||
<CardHeader mb='16px'>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='4px'>
|
||||
Upcoming events
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='bold'>
|
||||
Joined
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex direction='column'>
|
||||
<Flex align='center' mb='22px'>
|
||||
<IconBox h={'45px'} w={'45px'} bg={secondaryIconBlue} me='16px'>
|
||||
<Icon as={WalletIcon} h={'24px'} w={'24px'} color={iconBlue} />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Cyber Week
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
27 March 2020, at 12:30 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'45px'} w={'45px'} bg={secondaryIconBlue} me='16px'>
|
||||
<Icon as={ClockIcon} h={'24px'} w={'24px'} color={iconBlue} />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='sm' fontWeight='bold'>
|
||||
Meeting with Marry
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
24 March 2020, at 10:00 PM
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Stack direction={{ sm: 'column', md: 'row' }} spacing='24px'>
|
||||
<Card p='16px' display='flex' align='center' justify='center'>
|
||||
<Flex direction='column' align='center' w='100%' py='14px'>
|
||||
<IconBox h={'60px'} w={'60px'} bg='blue.500'>
|
||||
<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='lg' 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='blue.500'>
|
||||
<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='lg' 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>
|
||||
</Stack>
|
||||
<Card
|
||||
backgroundImage={
|
||||
colorMode === 'light'
|
||||
? BackgroundCard1
|
||||
: 'linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)'
|
||||
}
|
||||
backgroundRepeat='no-repeat'
|
||||
background='cover'
|
||||
bgPosition='10%'
|
||||
p='16px'
|
||||
h={{ sm: '220px', xl: '100%' }}
|
||||
gridColumn={{ md: '1 / 3', lg: 'auto' }}
|
||||
>
|
||||
<Flex
|
||||
direction='column'
|
||||
color='white'
|
||||
h='100%'
|
||||
p='0px 10px 20px 10px'
|
||||
w='100%'
|
||||
>
|
||||
<Flex justify='space-between' align='center'>
|
||||
<Text fontWeight='bold'>Argon x Chakra UI</Text>
|
||||
<Icon as={RiMastercardFill} w='48px' h='auto' color='gray.400' />
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Flex direction='column'>
|
||||
<Box>
|
||||
<Text fontSize='xl' 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>
|
||||
</Grid>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
sm: '1fr',
|
||||
md: '1fr 1fr',
|
||||
lg: '1.5fr 1fr 1.2fr 1fr 1fr',
|
||||
}}
|
||||
gap='24px'
|
||||
mb='24px'
|
||||
>
|
||||
<Card>
|
||||
<CardHeader mb='24px'>
|
||||
<Flex justify='space-between' w='100%' align='center'>
|
||||
<Text color={textColor} fontWeight='bold' fontSize='lg'>
|
||||
Full Body
|
||||
</Text>
|
||||
<Badge
|
||||
bg={colorMode === 'light' ? 'red.100' : 'red.500'}
|
||||
color={colorMode === 'light' ? 'red.500' : 'white'}
|
||||
w='85px'
|
||||
py='6px'
|
||||
borderRadius='12px'
|
||||
textAlign='center'
|
||||
>
|
||||
MODERATE
|
||||
</Badge>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Text color='gray.400' fontWeight='normal' fontSize='sm'>
|
||||
What matters is the people who are sparked by it. And the people who
|
||||
are liked.
|
||||
</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader mb='22px'>
|
||||
<Flex justify='space-between' align='center' w='100%'>
|
||||
<Text fontSize='xs' color='gray.400' fontWeight='bold'>
|
||||
{toggleSwitch ? 'ON' : 'OFF'}
|
||||
</Text>
|
||||
<Switch
|
||||
colorScheme='blue'
|
||||
onChange={() => setToggleSwitch(!toggleSwitch)}
|
||||
/>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
|
||||
<Flex direction='column'>
|
||||
<Icon
|
||||
as={toggleSwitch ? FaLightbulb : FaRegLightbulb}
|
||||
w='52px'
|
||||
h='52px'
|
||||
color='gray.400'
|
||||
mb='16px'
|
||||
/>
|
||||
<Text color={textColor} fontWeight='bold'>
|
||||
Lights
|
||||
</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card px='0px' pb='0px' gridColumn={{ md: '1 / 3', lg: 'auto' }}>
|
||||
<CardHeader px='22px'>
|
||||
<Stat me='auto'>
|
||||
<StatLabel fontSize='xs' color='gray.400' fontWeight='normal'>
|
||||
Calories
|
||||
</StatLabel>
|
||||
<Flex>
|
||||
<StatNumber fontSize='lg' color={textColor}>
|
||||
187
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
alignSelf='flex-end'
|
||||
justifySelf='flex-end'
|
||||
m='0px'
|
||||
ps='4px'
|
||||
color='green.400'
|
||||
fontWeight='bold'
|
||||
fontSize='sm'
|
||||
>
|
||||
+5%
|
||||
</StatHelpText>
|
||||
</Flex>
|
||||
</Stat>
|
||||
</CardHeader>
|
||||
|
||||
<Box w='100%' maxH='100px'>
|
||||
<LineChart
|
||||
chartData={lineChartDataWidgets3}
|
||||
chartOptions={lineChartOptionsWidgets3}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
<Card>
|
||||
<Flex direction='column'>
|
||||
<IconBox h={'45px'} w={'45px'} bg='blue.500' mb='24px'>
|
||||
<Icon as={FaShare} h={'24px'} w={'24px'} color='white' />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='2xl' fontWeight='bold'>
|
||||
754
|
||||
<Text as='span' color='gray.400' fontSize='sm' ms='2px'>
|
||||
m
|
||||
</Text>
|
||||
</Text>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
New York City
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader mb='42px'>
|
||||
<Text color='gray.400' fontSize='xs' fontWeight='normal'>
|
||||
STEPS
|
||||
</Text>
|
||||
</CardHeader>
|
||||
|
||||
<Stat>
|
||||
<StatNumber
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
fontSize='2xl'
|
||||
mb='6px'
|
||||
>
|
||||
11.4K
|
||||
</StatNumber>
|
||||
<StatHelpText
|
||||
bg='green.100'
|
||||
color='green'
|
||||
w='fit-content'
|
||||
borderRadius='12px'
|
||||
fontSize='10px'
|
||||
p='6px 12px'
|
||||
>
|
||||
+4.3%
|
||||
</StatHelpText>
|
||||
</Stat>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid templateColumns={{ sm: '1fr', lg: '1fr .5fr .7fr' }} gap='24px'>
|
||||
<Card minH='550px'>
|
||||
<CardHeader mb='6px'>
|
||||
<Flex direction='column'>
|
||||
<Text color={textColor} fontSize='lg' fontWeight='bold' mb='6px'>
|
||||
Calendar
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
||||
Wednesday, 2022
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<Box position='relative' display='block' height='100%'>
|
||||
<EventCalendar
|
||||
initialDate='2022-10-01'
|
||||
calendarData={calendarDataWidgets}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
<Stack direction='column' spacing='24px'>
|
||||
<Card>
|
||||
<Text fontSize='lg' text={textColor} fontWeight='bold'>
|
||||
Categories
|
||||
</Text>
|
||||
|
||||
<Stack direction='column' spacing='24px' w='100%' pt='28px'>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
||||
<RocketIcon h={'20px'} w={'20px'} color='white' />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Devices
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
250 in stock,{' '}
|
||||
<Text as='span' fontWeight='bold'>
|
||||
346+ sold
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
||||
<SettingsIcon h={'20px'} w={'20px'} color='white' />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Tickets
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
123 closed,{' '}
|
||||
<Text as='span' fontWeight='bold'>
|
||||
15 open
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
||||
<DocumentIcon h={'20px'} w={'20px'} color='white' />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Error logs
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
1 is active,{' '}
|
||||
<Text as='span' fontWeight='bold'>
|
||||
40 closed
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex align='center' w='100%'>
|
||||
<Flex align='center'>
|
||||
<IconBox h={'40px'} w={'40px'} bg={iconBoxColor} me='18px'>
|
||||
<Icon as={FaUser} h={'20px'} w={'20px'} color='white' />
|
||||
</IconBox>
|
||||
<Flex direction='column'>
|
||||
<Text fontSize='sm' fontWeight='bold' color={textColor}>
|
||||
Happy Users
|
||||
</Text>
|
||||
<Text color='gray.400' fontSize='xs'>
|
||||
<Text as='span' fontWeight='bold'>
|
||||
+430
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Button variant='no-effects' px='0px'>
|
||||
<Icon
|
||||
as={RiArrowDropRightLine}
|
||||
color='gray.400'
|
||||
w='30px'
|
||||
h='30px'
|
||||
cursor='pointer'
|
||||
transition='all .25s ease'
|
||||
_hover={{ transform: 'translateX(25%)' }}
|
||||
/>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Card>
|
||||
<Card
|
||||
bgImage={colorMode === 'light' ? BgMusicCard : BgMusicCardDark}
|
||||
bgRepeat='no-repeat'
|
||||
>
|
||||
<Flex direction='column' w='100%' mb='60px'>
|
||||
<Text color='#fff' fontWeight='bold' fontSize='lg'>
|
||||
Some Kind of Blues
|
||||
</Text>
|
||||
<Text color='#fff' fontWeight='normal' fontSize='sm'>
|
||||
Deftones
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Stack direction='row' spacing='18px'>
|
||||
<Button
|
||||
variant='outline'
|
||||
colorScheme='whiteAlpha'
|
||||
borderRadius='50px'
|
||||
w='45px'
|
||||
h='45px'
|
||||
>
|
||||
<Icon as={AiFillBackward} color='#fff' w='26px' h='26px' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
colorScheme='whiteAlpha'
|
||||
borderRadius='50px'
|
||||
w='45px'
|
||||
h='45px'
|
||||
>
|
||||
<Icon as={FaPlay} color='#fff' w='18px' h='18px' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
colorScheme='whiteAlpha'
|
||||
borderRadius='50px'
|
||||
w='45px'
|
||||
h='45px'
|
||||
>
|
||||
<Icon as={AiFillForward} color='#fff' w='26px' h='26px' />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
<Card pb='0px'>
|
||||
<CardHeader mb='34px'>
|
||||
<Flex direction='column'>
|
||||
<Text
|
||||
fontSize='lg'
|
||||
color={textColor}
|
||||
fontWeight='bold'
|
||||
pb='.5rem'
|
||||
>
|
||||
Orders overview
|
||||
</Text>
|
||||
<Text fontSize='sm' color='gray.400' fontWeight='normal'>
|
||||
<Text fontWeight='bold' as='span' color='green.500'>
|
||||
+30%
|
||||
</Text>{' '}
|
||||
this month.
|
||||
</Text>
|
||||
</Flex>
|
||||
</CardHeader>
|
||||
<Flex direction='column' ms='8px' position='relative'>
|
||||
{timelineData.map((row, index, arr) => {
|
||||
return (
|
||||
<TimelineRow
|
||||
logo={row.logo}
|
||||
title={row.title}
|
||||
date={row.date}
|
||||
color={row.color}
|
||||
index={index}
|
||||
arrLength={arr.length}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Widgets;
|
||||
Reference in New Issue
Block a user