Initial commit
This commit is contained in:
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;
|
||||
Reference in New Issue
Block a user