|
| 1 | +'use client'; |
| 2 | +/*! |
| 3 | + _ _ ___ ____ ___ ________ _ _ _ _ ___ |
| 4 | + | | | |/ _ \| _ \|_ _|__ / _ \| \ | | | | | |_ _| |
| 5 | + | |_| | | | | |_) || | / / | | | \| | | | | || | |
| 6 | + | _ | |_| | _ < | | / /| |_| | |\ | | |_| || | |
| 7 | + |_| |_|\___/|_| \_\___/____\___/|_| \_| \___/|___| |
| 8 | + |
| 9 | +========================================================= |
| 10 | +* Horizon UI - v1.1.0 |
| 11 | +========================================================= |
| 12 | +
|
| 13 | +* Product Page: https://www.horizon-ui.com/ |
| 14 | +* Copyright 2022 Horizon UI (https://www.horizon-ui.com/) |
| 15 | +
|
| 16 | +* Designed and Coded by Simmmple |
| 17 | +
|
| 18 | +========================================================= |
| 19 | +
|
| 20 | +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
| 21 | +
|
| 22 | +*/ |
| 23 | + |
| 24 | +import { |
| 25 | + Box, |
| 26 | + Flex, |
| 27 | + FormLabel, |
| 28 | + Image, |
| 29 | + Icon, |
| 30 | + Select, |
| 31 | + SimpleGrid, |
| 32 | + useColorModeValue, |
| 33 | +} from '@chakra-ui/react'; |
| 34 | +// Custom components |
| 35 | +// import MiniCalendar from 'components/calendar/MiniCalendar'; |
| 36 | +import MiniStatistics from 'components/card/MiniStatistics'; |
| 37 | +import IconBox from 'components/icons/IconBox'; |
| 38 | +import { |
| 39 | + MdAddTask, |
| 40 | + MdAttachMoney, |
| 41 | + MdBarChart, |
| 42 | + MdFileCopy, |
| 43 | +} from 'react-icons/md'; |
| 44 | +import CheckTable from 'views/admin/default/components/CheckTable'; |
| 45 | +import ComplexTable from 'views/admin/default/components/ComplexTable'; |
| 46 | +import DailyTraffic from 'views/admin/default/components/DailyTraffic'; |
| 47 | +import PieCard from 'views/admin/default/components/PieCard'; |
| 48 | +import Tasks from 'views/admin/default/components/Tasks'; |
| 49 | +import TotalSpent from 'views/admin/default/components/TotalSpent'; |
| 50 | +import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue'; |
| 51 | +import tableDataCheck from 'views/admin/default/variables/tableDataCheck'; |
| 52 | +import tableDataComplex from 'views/admin/default/variables/tableDataComplex'; |
| 53 | +// Assets |
| 54 | +import Usa from 'img/dashboards/usa.png'; |
| 55 | + |
| 56 | +export default function Default() { |
| 57 | + // Chakra Color Mode |
| 58 | + |
| 59 | + const brandColor = useColorModeValue('brand.500', 'white'); |
| 60 | + const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); |
| 61 | + |
| 62 | + return ( |
| 63 | + <Box pt={{ base: '130px', md: '80px', xl: '80px' }}> |
| 64 | + <SimpleGrid |
| 65 | + columns={{ base: 1, md: 2, lg: 3, '2xl': 6 }} |
| 66 | + gap="20px" |
| 67 | + mb="20px" |
| 68 | + > |
| 69 | + <MiniStatistics |
| 70 | + startContent={ |
| 71 | + <IconBox |
| 72 | + w="56px" |
| 73 | + h="56px" |
| 74 | + bg={boxBg} |
| 75 | + icon={ |
| 76 | + <Icon w="32px" h="32px" as={MdBarChart} color={brandColor} /> |
| 77 | + } |
| 78 | + /> |
| 79 | + } |
| 80 | + name="Earnings" |
| 81 | + value="$350.4" |
| 82 | + /> |
| 83 | + <MiniStatistics |
| 84 | + startContent={ |
| 85 | + <IconBox |
| 86 | + w="56px" |
| 87 | + h="56px" |
| 88 | + bg={boxBg} |
| 89 | + icon={ |
| 90 | + <Icon w="32px" h="32px" as={MdAttachMoney} color={brandColor} /> |
| 91 | + } |
| 92 | + /> |
| 93 | + } |
| 94 | + name="Spend this month" |
| 95 | + value="$642.39" |
| 96 | + /> |
| 97 | + <MiniStatistics growth="+23%" name="Sales" value="$574.34" /> |
| 98 | + <MiniStatistics |
| 99 | + endContent={ |
| 100 | + <Flex me="-16px" mt="10px"> |
| 101 | + <FormLabel htmlFor="balance"> |
| 102 | + <Box boxSize={'12'}> |
| 103 | + <Image alt="" src={Usa.src} w={'100%'} h={'100%'} /> |
| 104 | + </Box> |
| 105 | + </FormLabel> |
| 106 | + <Select |
| 107 | + id="balance" |
| 108 | + variant="mini" |
| 109 | + mt="5px" |
| 110 | + me="0px" |
| 111 | + defaultValue="usd" |
| 112 | + > |
| 113 | + <option value="usd">USD</option> |
| 114 | + <option value="eur">EUR</option> |
| 115 | + <option value="gba">GBA</option> |
| 116 | + </Select> |
| 117 | + </Flex> |
| 118 | + } |
| 119 | + name="Your balance" |
| 120 | + value="$1,000" |
| 121 | + /> |
| 122 | + <MiniStatistics |
| 123 | + startContent={ |
| 124 | + <IconBox |
| 125 | + w="56px" |
| 126 | + h="56px" |
| 127 | + bg="linear-gradient(90deg, #4481EB 0%, #04BEFE 100%)" |
| 128 | + icon={<Icon w="28px" h="28px" as={MdAddTask} color="white" />} |
| 129 | + /> |
| 130 | + } |
| 131 | + name="New Tasks" |
| 132 | + value="154" |
| 133 | + /> |
| 134 | + <MiniStatistics |
| 135 | + startContent={ |
| 136 | + <IconBox |
| 137 | + w="56px" |
| 138 | + h="56px" |
| 139 | + bg={boxBg} |
| 140 | + icon={ |
| 141 | + <Icon w="32px" h="32px" as={MdFileCopy} color={brandColor} /> |
| 142 | + } |
| 143 | + /> |
| 144 | + } |
| 145 | + name="Total Projects" |
| 146 | + value="2935" |
| 147 | + /> |
| 148 | + </SimpleGrid> |
| 149 | + |
| 150 | + <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap="20px" mb="20px"> |
| 151 | + <TotalSpent /> |
| 152 | + <WeeklyRevenue /> |
| 153 | + </SimpleGrid> |
| 154 | + <SimpleGrid columns={{ base: 1, md: 1, xl: 2 }} gap="20px" mb="20px"> |
| 155 | + <CheckTable tableData={tableDataCheck} /> |
| 156 | + <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap="20px"> |
| 157 | + <DailyTraffic /> |
| 158 | + <PieCard /> |
| 159 | + </SimpleGrid> |
| 160 | + </SimpleGrid> |
| 161 | + <SimpleGrid columns={{ base: 1, md: 1, xl: 2 }} gap="20px" mb="20px"> |
| 162 | + <ComplexTable tableData={tableDataComplex} /> |
| 163 | + <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap="20px"> |
| 164 | + <Tasks /> |
| 165 | + {/* <MiniCalendar h="100%" minW="100%" selectRange={false} /> */} |
| 166 | + </SimpleGrid> |
| 167 | + </SimpleGrid> |
| 168 | + </Box> |
| 169 | + ); |
| 170 | +} |
0 commit comments