From 4e3ae9511fabc3d5e1c291cc43af2fd671f1bd14 Mon Sep 17 00:00:00 2001 From: Theodor Dumitrache Date: Tue, 8 Mar 2022 21:02:36 +0200 Subject: [PATCH 1/3] refactored the code --- src/components/Navbars/AdminNavbarLinks.js | 2 +- src/components/Navbars/AuthNavbar.js | 2 +- src/components/Sidebar/Sidebar.js | 522 ------------- src/components/Sidebar/SidebarContent.js | 208 +++++ src/components/Sidebar/SidebarResponsive.js | 268 +++++++ src/components/Sidebar/index.js | 64 ++ src/layouts/Admin.js | 2 +- src/layouts/RTL.js | 2 +- src/routes.js | 14 +- src/views/{Pages => Auth}/SignIn.js | 0 src/views/{Pages => Auth}/SignUp.js | 0 src/views/Dashboard/Billing.js | 420 ---------- .../Billing/components/BillingInformation.js | 42 + .../Billing/components/CreditCard.js | 64 ++ .../Dashboard/Billing/components/Invoices.js | 60 ++ .../Billing/components/PaymentMethod.js | 119 +++ .../Billing/components/PaymentStatistics.js | 54 ++ .../Billing/components/Transactions.js | 96 +++ src/views/Dashboard/Billing/index.js | 110 +++ src/views/Dashboard/Dashboard.js | 645 ---------------- .../Dashboard/components/ActiveUsers.js | 78 ++ .../Dashboard/components/BuiltByDevelopers.js | 93 +++ .../Dashboard/components/ChartStatistics.js | 92 +++ .../Dashboard/components/MiniStatistics.js | 58 ++ .../Dashboard/components/OrdersOverview.js | 57 ++ .../Dashboard/components/Projects.js | 81 ++ .../Dashboard/components/SalesOverview.js | 34 + .../components/WorkWithTheRockets.js | 85 ++ src/views/Dashboard/Dashboard/index.js | 118 +++ src/views/Dashboard/Profile.js | 727 ------------------ .../Profile/components/Conversations.js | 183 +++++ .../Dashboard/Profile/components/Header.js | 156 ++++ .../Profile/components/PlatformSettings.js | 108 +++ .../Profile/components/ProfileInformation.js | 129 ++++ .../Profile/components/ProjectCard.js | 70 ++ .../Dashboard/Profile/components/Projects.js | 95 +++ src/views/Dashboard/Profile/index.js | 103 +++ src/views/Dashboard/RTL/index.js | 160 ++++ src/views/Dashboard/Tables.js | 109 --- .../Dashboard/Tables/components/Authors.js | 62 ++ .../Dashboard/Tables/components/Projects.js | 66 ++ src/views/Dashboard/Tables/index.js | 30 + src/views/RTL/RTLPage.js | 661 ---------------- 43 files changed, 2954 insertions(+), 3095 deletions(-) delete mode 100644 src/components/Sidebar/Sidebar.js create mode 100644 src/components/Sidebar/SidebarContent.js create mode 100644 src/components/Sidebar/SidebarResponsive.js create mode 100644 src/components/Sidebar/index.js rename src/views/{Pages => Auth}/SignIn.js (100%) rename src/views/{Pages => Auth}/SignUp.js (100%) delete mode 100644 src/views/Dashboard/Billing.js create mode 100644 src/views/Dashboard/Billing/components/BillingInformation.js create mode 100644 src/views/Dashboard/Billing/components/CreditCard.js create mode 100644 src/views/Dashboard/Billing/components/Invoices.js create mode 100644 src/views/Dashboard/Billing/components/PaymentMethod.js create mode 100644 src/views/Dashboard/Billing/components/PaymentStatistics.js create mode 100644 src/views/Dashboard/Billing/components/Transactions.js create mode 100644 src/views/Dashboard/Billing/index.js delete mode 100644 src/views/Dashboard/Dashboard.js create mode 100644 src/views/Dashboard/Dashboard/components/ActiveUsers.js create mode 100644 src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js create mode 100644 src/views/Dashboard/Dashboard/components/ChartStatistics.js create mode 100644 src/views/Dashboard/Dashboard/components/MiniStatistics.js create mode 100644 src/views/Dashboard/Dashboard/components/OrdersOverview.js create mode 100644 src/views/Dashboard/Dashboard/components/Projects.js create mode 100644 src/views/Dashboard/Dashboard/components/SalesOverview.js create mode 100644 src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js create mode 100644 src/views/Dashboard/Dashboard/index.js delete mode 100644 src/views/Dashboard/Profile.js create mode 100644 src/views/Dashboard/Profile/components/Conversations.js create mode 100644 src/views/Dashboard/Profile/components/Header.js create mode 100644 src/views/Dashboard/Profile/components/PlatformSettings.js create mode 100644 src/views/Dashboard/Profile/components/ProfileInformation.js create mode 100644 src/views/Dashboard/Profile/components/ProjectCard.js create mode 100644 src/views/Dashboard/Profile/components/Projects.js create mode 100644 src/views/Dashboard/Profile/index.js create mode 100644 src/views/Dashboard/RTL/index.js delete mode 100644 src/views/Dashboard/Tables.js create mode 100644 src/views/Dashboard/Tables/components/Authors.js create mode 100644 src/views/Dashboard/Tables/components/Projects.js create mode 100644 src/views/Dashboard/Tables/index.js delete mode 100644 src/views/RTL/RTLPage.js diff --git a/src/components/Navbars/AdminNavbarLinks.js b/src/components/Navbars/AdminNavbarLinks.js index 2667b69b6..ec2eab134 100644 --- a/src/components/Navbars/AdminNavbarLinks.js +++ b/src/components/Navbars/AdminNavbarLinks.js @@ -23,7 +23,7 @@ import avatar3 from "assets/img/avatars/avatar3.png"; import { ProfileIcon, SettingsIcon } from "components/Icons/Icons"; // Custom Components import { ItemContent } from "components/Menu/ItemContent"; -import { SidebarResponsive } from "components/Sidebar/Sidebar"; +import SidebarResponsive from "components/Sidebar/SidebarResponsive"; import PropTypes from "prop-types"; import React from "react"; import { NavLink } from "react-router-dom"; diff --git a/src/components/Navbars/AuthNavbar.js b/src/components/Navbars/AuthNavbar.js index edc9ed60e..5b50f1cf7 100644 --- a/src/components/Navbars/AuthNavbar.js +++ b/src/components/Navbars/AuthNavbar.js @@ -15,7 +15,7 @@ import { PersonIcon, RocketIcon, } from "components/Icons/Icons"; -import { SidebarResponsive } from "components/Sidebar/Sidebar"; +import SidebarResponsive from "components/Sidebar/SidebarResponsive"; import PropTypes from "prop-types"; import React from "react"; import { NavLink } from "react-router-dom"; diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js deleted file mode 100644 index 85eefb8ec..000000000 --- a/src/components/Sidebar/Sidebar.js +++ /dev/null @@ -1,522 +0,0 @@ -/*eslint-disable*/ -import { HamburgerIcon } from "@chakra-ui/icons"; -// chakra imports -import { - Box, - Button, - Drawer, - DrawerBody, - DrawerCloseButton, - DrawerContent, - DrawerOverlay, - Flex, - Link, - Stack, - Text, - useColorModeValue, - useDisclosure, -} from "@chakra-ui/react"; -import IconBox from "components/Icons/IconBox"; -import { CreativeTimLogo } from "components/Icons/Icons"; -import { Separator } from "components/Separator/Separator"; -import { SidebarHelp } from "components/Sidebar/SidebarHelp"; -import PropTypes from "prop-types"; -import React from "react"; -import { NavLink, useLocation } from "react-router-dom"; - -// FUNCTIONS - -function Sidebar(props) { - // to check for active links and opened collapses - let location = useLocation(); - // this is for the rest of the collapses - const [state, setState] = React.useState({}); - const mainPanel = React.useRef(); - let variantChange = "0.2s linear"; - // verifies if routeName is the one active (in browser input) - const activeRoute = (routeName) => { - return location.pathname === routeName ? "active" : ""; - }; - // this function creates the links and collapses that appear in the sidebar (left menu) - const createLinks = (routes) => { - const { sidebarVariant } = props; - // Chakra Color Mode - let activeBg = useColorModeValue("white", "gray.700"); - let inactiveBg = useColorModeValue("white", "gray.700"); - let activeColor = useColorModeValue("gray.700", "white"); - let inactiveColor = useColorModeValue("gray.400", "gray.400"); - let sidebarActiveShadow = "0px 7px 11px rgba(0, 0, 0, 0.04)"; - // Here are all the props that may change depending on sidebar's state.(Opaque or transparent) - if (sidebarVariant === "opaque") { - activeBg = "transparent"; - inactiveBg = useColorModeValue("gray.100", "gray.600"); - activeColor = useColorModeValue("gray.700", "white"); - inactiveColor = useColorModeValue("gray.400", "gray.400"); - sidebarActiveShadow = "none"; - } - - return routes.map((prop, key) => { - if (prop.redirect) { - return null; - } - if (prop.category) { - var st = {}; - st[prop["state"]] = !state[prop.state]; - return ( -
- - {document.documentElement.dir === "rtl" - ? prop.rtlName - : prop.name} - - {createLinks(prop.views)} -
- ); - } - return ( - - {activeRoute(prop.layout + prop.path) === "active" ? ( - - ) : ( - - )} - - ); - }); - }; - const { logoText, routes, sidebarVariant } = props; - - var links = <>{createLinks(routes)}; - // BRAND - // Chakra Color Mode - const mainText = useColorModeValue("gray.700", "gray.200"); - let sidebarBg = "none"; - let sidebarRadius = "0px"; - let sidebarMargins = "0px"; - if (sidebarVariant === "opaque") { - sidebarBg = useColorModeValue("white", "gray.700"); - sidebarRadius = "16px"; - sidebarMargins = "16px 0px 16px 16px"; - } - var brand = ( - - - - - {logoText} - - - - - ); - - // SIDEBAR - return ( - - - - {brand} - - {links} - - - - - - ); -} - -// FUNCTIONS - -export function SidebarResponsive(props) { - // to check for active links and opened collapses - let location = useLocation(); - // this is for the rest of the collapses - const [state, setState] = React.useState({}); - const mainPanel = React.useRef(); - // verifies if routeName is the one active (in browser input) - const activeRoute = (routeName) => { - return location.pathname === routeName ? "active" : ""; - }; - // this function creates the links and collapses that appear in the sidebar (left menu) - const createLinks = (routes) => { - // Chakra Color Mode - const activeBg = useColorModeValue("white", "gray.700"); - const inactiveBg = useColorModeValue("white", "gray.700"); - const activeColor = useColorModeValue("gray.700", "white"); - const inactiveColor = useColorModeValue("gray.400", "gray.400"); - - return routes.map((prop, key) => { - if (prop.redirect) { - return null; - } - if (prop.category) { - var st = {}; - st[prop["state"]] = !state[prop.state]; - return ( -
- - {document.documentElement.dir === "rtl" - ? prop.rtlName - : prop.name} - - {createLinks(prop.views)} -
- ); - } - return ( - - {activeRoute(prop.layout + prop.path) === "active" ? ( - - ) : ( - - )} - - ); - }); - }; - const { logoText, routes, ...rest } = props; - - var links = <>{createLinks(routes)}; - // BRAND - // Chakra Color Mode - const mainText = useColorModeValue("gray.700", "gray.200"); - let hamburgerColor = useColorModeValue("gray.500", "gray.200"); - if (props.secondary === true) { - hamburgerColor = "white"; - } - var brand = ( - - - - - {logoText} - - - - - ); - - // SIDEBAR - const { isOpen, onOpen, onClose } = useDisclosure(); - const btnRef = React.useRef(); - // Color variables - return ( - - - - - - - - - {brand} - - {links} - - - - - - - - ); -} -// PROPS - -Sidebar.propTypes = { - logoText: PropTypes.string, - routes: PropTypes.arrayOf(PropTypes.object), - variant: PropTypes.string, -}; -SidebarResponsive.propTypes = { - logoText: PropTypes.string, - routes: PropTypes.arrayOf(PropTypes.object), -}; - -export default Sidebar; diff --git a/src/components/Sidebar/SidebarContent.js b/src/components/Sidebar/SidebarContent.js new file mode 100644 index 000000000..37ad01e55 --- /dev/null +++ b/src/components/Sidebar/SidebarContent.js @@ -0,0 +1,208 @@ +/*eslint-disable*/ +// chakra imports +import { + Box, + Button, Flex, + Link, + Stack, + Text, + useColorModeValue +} from "@chakra-ui/react"; +import IconBox from "components/Icons/IconBox"; +import { CreativeTimLogo } from "components/Icons/Icons"; +import { Separator } from "components/Separator/Separator"; +import { SidebarHelp } from "components/Sidebar/SidebarHelp"; +import React from "react"; +import { NavLink, useLocation } from "react-router-dom"; + +// this function creates the links and collapses that appear in the sidebar (left menu) + + +const SidebarContent = ({ logoText, routes }) => { + + // to check for active links and opened collapses + let location = useLocation(); + // this is for the rest of the collapses + const [state, setState] = React.useState({}); + + // verifies if routeName is the one active (in browser input) + const activeRoute = (routeName) => { + return location.pathname === routeName ? "active" : ""; + }; + const createLinks = (routes) => { + // Chakra Color Mode + const activeBg = useColorModeValue("white", "gray.700"); + const inactiveBg = useColorModeValue("white", "gray.700"); + const activeColor = useColorModeValue("gray.700", "white"); + const inactiveColor = useColorModeValue("gray.400", "gray.400"); + + return routes.map((prop, key) => { + if (prop.redirect) { + return null; + } + if (prop.category) { + var st = {}; + st[prop["state"]] = !state[prop.state]; + return ( +
+ + {document.documentElement.dir === "rtl" + ? prop.rtlName + : prop.name} + + {createLinks(prop.views)} +
+ ); + } + return ( + + {activeRoute(prop.layout + prop.path) === "active" ? ( + + ) : ( + + )} + + ); + }); + }; + + const links = <>{createLinks(routes)}; + + return ( + <> + + + + + {logoText} + + + + + + {links} + + + + ) +} + +export default SidebarContent \ No newline at end of file diff --git a/src/components/Sidebar/SidebarResponsive.js b/src/components/Sidebar/SidebarResponsive.js new file mode 100644 index 000000000..464d43d46 --- /dev/null +++ b/src/components/Sidebar/SidebarResponsive.js @@ -0,0 +1,268 @@ +/*eslint-disable*/ +import { HamburgerIcon } from "@chakra-ui/icons"; +// chakra imports +import { + Box, + Button, + Drawer, + DrawerBody, + DrawerCloseButton, + DrawerContent, + DrawerOverlay, + Flex, + Link, + Stack, + Text, + useColorModeValue, + useDisclosure +} from "@chakra-ui/react"; +import IconBox from "components/Icons/IconBox"; +import { CreativeTimLogo } from "components/Icons/Icons"; +import { Separator } from "components/Separator/Separator"; +import { SidebarHelp } from "components/Sidebar/SidebarHelp"; +import React from "react"; +import { NavLink, useLocation } from "react-router-dom"; + +function SidebarResponsive(props) { + // to check for active links and opened collapses + let location = useLocation(); + // this is for the rest of the collapses + const [state, setState] = React.useState({}); + const mainPanel = React.useRef(); + // verifies if routeName is the one active (in browser input) + const activeRoute = (routeName) => { + return location.pathname === routeName ? "active" : ""; + }; + + const createLinks = (routes) => { + // Chakra Color Mode + const activeBg = useColorModeValue("white", "gray.700"); + const inactiveBg = useColorModeValue("white", "gray.700"); + const activeColor = useColorModeValue("gray.700", "white"); + const inactiveColor = useColorModeValue("gray.400", "gray.400"); + + return routes.map((prop, key) => { + if (prop.redirect) { + return null; + } + if (prop.category) { + var st = {}; + st[prop["state"]] = !state[prop.state]; + return ( +
+ + {document.documentElement.dir === "rtl" + ? prop.rtlName + : prop.name} + + {createLinks(prop.views)} +
+ ); + } + return ( + + {activeRoute(prop.layout + prop.path) === "active" ? ( + + ) : ( + + )} + + ); + }); + }; + + const { logoText, routes, ...rest } = props; + + var links = <>{createLinks(routes)}; + // BRAND + // Chakra Color Mode + let hamburgerColor = useColorModeValue("gray.500", "gray.200"); + if (props.secondary === true) { + hamburgerColor = "white"; + } + var brand = ( + + + + + {logoText} + + + + + ); + + // SIDEBAR + const { isOpen, onOpen, onClose } = useDisclosure(); + const btnRef = React.useRef(); + // Color variables + return ( + + + + + + + + + {brand} + + {links} + + + + + + + + ); + } + + export default SidebarResponsive \ No newline at end of file diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js new file mode 100644 index 000000000..8c8f20868 --- /dev/null +++ b/src/components/Sidebar/index.js @@ -0,0 +1,64 @@ +/*eslint-disable*/ +// chakra imports +import { + Box, useColorModeValue +} from "@chakra-ui/react"; +import React from "react"; +import SidebarContent from "./SidebarContent"; + +// FUNCTIONS + +function Sidebar(props) { + // to check for active links and opened collapses + const mainPanel = React.useRef(); + let variantChange = "0.2s linear"; + + const { logoText, routes, sidebarVariant } = props; + + // BRAND + // Chakra Color Mode + let sidebarBg = "none"; + let sidebarRadius = "0px"; + let sidebarMargins = "0px"; + if (sidebarVariant === "opaque") { + sidebarBg = useColorModeValue("white", "gray.700"); + sidebarRadius = "16px"; + sidebarMargins = "16px 0px 16px 16px"; + } + + // SIDEBAR + return ( + + + + + + + + ); +} + + + + +export default Sidebar; diff --git a/src/layouts/Admin.js b/src/layouts/Admin.js index d69a5b62f..93584be41 100644 --- a/src/layouts/Admin.js +++ b/src/layouts/Admin.js @@ -4,7 +4,7 @@ import Configurator from "components/Configurator/Configurator"; import Footer from "components/Footer/Footer.js"; // Layout components import AdminNavbar from "components/Navbars/AdminNavbar.js"; -import Sidebar from "components/Sidebar/Sidebar.js"; +import Sidebar from "components/Sidebar"; import React, { useState } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import routes from "routes.js"; diff --git a/src/layouts/RTL.js b/src/layouts/RTL.js index 4ef462ba5..15d51b6ba 100644 --- a/src/layouts/RTL.js +++ b/src/layouts/RTL.js @@ -5,7 +5,7 @@ import Configurator from "components/Configurator/Configurator"; import Footer from "components/Footer/Footer.js"; // Layout components import AdminNavbar from "components/Navbars/AdminNavbar.js"; -import Sidebar from "components/Sidebar/Sidebar.js"; +import Sidebar from "components/Sidebar"; import React, { useState } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import routes from "routes.js"; diff --git a/src/routes.js b/src/routes.js index 83eecf778..ce9a49159 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,11 +1,11 @@ // import -import Dashboard from "views/Dashboard/Dashboard.js"; -import Tables from "views/Dashboard/Tables.js"; -import Billing from "views/Dashboard/Billing.js"; -import RTLPage from "views/RTL/RTLPage.js"; -import Profile from "views/Dashboard/Profile.js"; -import SignIn from "views/Pages/SignIn.js"; -import SignUp from "views/Pages/SignUp.js"; +import Dashboard from "views/Dashboard/Dashboard"; +import Tables from "views/Dashboard/Tables"; +import Billing from "views/Dashboard/Billing"; +import RTLPage from "views/Dashboard/RTL"; +import Profile from "views/Dashboard/Profile"; +import SignIn from "views/Auth/SignIn.js"; +import SignUp from "views/Auth/SignUp.js"; import { HomeIcon, diff --git a/src/views/Pages/SignIn.js b/src/views/Auth/SignIn.js similarity index 100% rename from src/views/Pages/SignIn.js rename to src/views/Auth/SignIn.js diff --git a/src/views/Pages/SignUp.js b/src/views/Auth/SignUp.js similarity index 100% rename from src/views/Pages/SignUp.js rename to src/views/Auth/SignUp.js diff --git a/src/views/Dashboard/Billing.js b/src/views/Dashboard/Billing.js deleted file mode 100644 index 23f32ec9d..000000000 --- a/src/views/Dashboard/Billing.js +++ /dev/null @@ -1,420 +0,0 @@ -// Chakra imports -import { - Box, - Button, - Flex, - Grid, - Icon, - Spacer, - Text, - useColorModeValue, -} from "@chakra-ui/react"; -// Assets -import BackgroundCard1 from "assets/img/BackgroundCard1.png"; -// Custom components -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.js"; -import IconBox from "components/Icons/IconBox"; -import { MastercardIcon, VisaIcon } from "components/Icons/Icons"; -import BillingRow from "components/Tables/BillingRow"; -import InvoicesRow from "components/Tables/InvoicesRow"; -import TransactionRow from "components/Tables/TransactionRow"; -import { Separator } from "components/Separator/Separator"; -import React from "react"; -import { - FaPaypal, - FaPencilAlt, - FaRegCalendarAlt, - FaWallet, -} from "react-icons/fa"; -import { RiMastercardFill } from "react-icons/ri"; -import { - billingData, - invoicesData, - newestTransactions, - olderTransactions, -} from "variables/general"; - -function Billing() { - // Chakra color mode - const iconTeal = useColorModeValue("teal.300", "teal.300"); - const textColor = useColorModeValue("gray.700", "white"); - const borderColor = useColorModeValue("#dee2e6", "gray.500"); - const bgButton = useColorModeValue( - "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)", - "gray.800" - ); - - return ( - - - - - - - - - - Purity UI - - - - - - - - 7812 2139 0823 XXXX - - - - - VALID THRU - - 05/24 - - - - CVV - - 09X - - - - - - - - - - - - - - - - Salary - - - Belong Interactive - - - - - +$2000 - - - - - - - - - - - - - Paypal - - - Freelance Payment - - - - - $455.00 - - - - - - - - - - Payment Method - - - - - - - - - - - - 7812 2139 0823 XXXX - - - - - - - - - - 7812 2139 0823 XXXX - - - - - - - - - - - - - Invoices - - - - - - - {invoicesData.map((row) => { - return ( - - ); - })} - - - - - - - - - - Billing Information - - - - - {billingData.map((row) => { - return ( - - ); - })} - - - - - - - - - - Your Transactions - - - - - 23 - 30 March 2021 - - - - - - - - - NEWEST - - {newestTransactions.map((row) => { - return ( - - ); - })} - - OLDER - - {olderTransactions.map((row) => { - return ( - - ); - })} - - - - - - ); -} - -export default Billing; diff --git a/src/views/Dashboard/Billing/components/BillingInformation.js b/src/views/Dashboard/Billing/components/BillingInformation.js new file mode 100644 index 000000000..be4841253 --- /dev/null +++ b/src/views/Dashboard/Billing/components/BillingInformation.js @@ -0,0 +1,42 @@ +// Chakra imports +import { + Flex, Text, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import BillingRow from "components/Tables/BillingRow"; +import React from "react"; + +const BillingInformation = ({title, data}) => { + const textColor = useColorModeValue("gray.700", "white"); + return ( + + + + + {title} + + + + + {data.map((row) => { + return ( + + ); + })} + + + + + ) +} + +export default BillingInformation \ No newline at end of file diff --git a/src/views/Dashboard/Billing/components/CreditCard.js b/src/views/Dashboard/Billing/components/CreditCard.js new file mode 100644 index 000000000..9b4e14d6a --- /dev/null +++ b/src/views/Dashboard/Billing/components/CreditCard.js @@ -0,0 +1,64 @@ +// Chakra imports +import { + Box, Flex, Spacer, + Text +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import React from "react"; + +const CreditCard = ({backgroundImage, title, icon, number, validity, cvv}) => { + return ( + + + + + + {title} + + {icon} + + + + + + {number} + + + + + {validity.name} + + {validity.date} + + + + {cvv.name} + + {cvv.code} + + + + + + + + ) +} + +export default CreditCard \ No newline at end of file diff --git a/src/views/Dashboard/Billing/components/Invoices.js b/src/views/Dashboard/Billing/components/Invoices.js new file mode 100644 index 000000000..ef465f15c --- /dev/null +++ b/src/views/Dashboard/Billing/components/Invoices.js @@ -0,0 +1,60 @@ +// Chakra imports +import { + Button, + Flex, Text, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import InvoicesRow from "components/Tables/InvoicesRow"; +import React from "react"; + +const Invoices = ({title, data}) => { + + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + {title} + + + + + + + {data.map((row) => { + return ( + + ); + })} + + + + ) +} + +export default Invoices \ No newline at end of file diff --git a/src/views/Dashboard/Billing/components/PaymentMethod.js b/src/views/Dashboard/Billing/components/PaymentMethod.js new file mode 100644 index 000000000..e3d1ff599 --- /dev/null +++ b/src/views/Dashboard/Billing/components/PaymentMethod.js @@ -0,0 +1,119 @@ +// Chakra imports +import { + Button, + Flex, Icon, + Spacer, + Text, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import IconBox from "components/Icons/IconBox"; +import React from "react"; +import { + FaPencilAlt +} from "react-icons/fa"; + +const PaymentMethod = ({title, mastercard, visa}) => { + + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const textColor = useColorModeValue("gray.700", "white"); + const borderColor = useColorModeValue("#dee2e6", "gray.500"); + const bgButton = useColorModeValue( + "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)", + "gray.800" + ); + + return ( + + + + + {title} + + + + + + + + + {mastercard.icon} + + + {mastercard.number} + + + + + + + {visa.icon} + + + {visa.number} + + + + + + + + ) +} + +export default PaymentMethod \ No newline at end of file diff --git a/src/views/Dashboard/Billing/components/PaymentStatistics.js b/src/views/Dashboard/Billing/components/PaymentStatistics.js new file mode 100644 index 000000000..dca9297a8 --- /dev/null +++ b/src/views/Dashboard/Billing/components/PaymentStatistics.js @@ -0,0 +1,54 @@ +// Chakra imports +import { + Flex, Text, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import IconBox from "components/Icons/IconBox"; +import { Separator } from "components/Separator/Separator"; +import React from "react"; + +const PaymentStatistics = ({icon, title, description, amount}) => { + + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + {icon} + + + + {title} + + + {description} + + + + + {`%${amount}`} + + + + + ) +} + +export default PaymentStatistics \ No newline at end of file diff --git a/src/views/Dashboard/Billing/components/Transactions.js b/src/views/Dashboard/Billing/components/Transactions.js new file mode 100644 index 000000000..9acabd0a5 --- /dev/null +++ b/src/views/Dashboard/Billing/components/Transactions.js @@ -0,0 +1,96 @@ +// Chakra imports +import { + Flex, Icon, Text, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import TransactionRow from "components/Tables/TransactionRow"; +import React from "react"; +import { + FaRegCalendarAlt +} from "react-icons/fa"; + +const Transactions = ({title, date, newestTransactions, olderTransactions}) => { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + + {title} + + + + + {date} + + + + + + + + + NEWEST + + {newestTransactions.map((row) => { + return ( + + ); + })} + + OLDER + + {olderTransactions.map((row) => { + return ( + + ); + })} + + + + ) +} + +export default Transactions \ No newline at end of file diff --git a/src/views/Dashboard/Billing/index.js b/src/views/Dashboard/Billing/index.js new file mode 100644 index 000000000..f5751f5e4 --- /dev/null +++ b/src/views/Dashboard/Billing/index.js @@ -0,0 +1,110 @@ +// Chakra imports +import { + Box, Flex, + Grid, + Icon +} from "@chakra-ui/react"; +// Assets +import BackgroundCard1 from "assets/img/BackgroundCard1.png"; +import { MastercardIcon, VisaIcon } from "components/Icons/Icons"; +import React from "react"; +import { + FaPaypal, FaWallet +} from "react-icons/fa"; +import { RiMastercardFill } from "react-icons/ri"; +import { + billingData, + invoicesData, + newestTransactions, + olderTransactions +} from "variables/general"; +import BillingInformation from "./components/BillingInformation"; +import CreditCard from "./components/CreditCard"; +import Invoices from "./components/Invoices"; +import PaymentMethod from "./components/PaymentMethod"; +import PaymentStatistics from "./components/PaymentStatistics"; +import Transactions from "./components/Transactions"; + +function Billing() { + + return ( + + + + + + } + /> + } + title={"Salary"} + description={"Belong interactive"} + amount={2000} + /> + } + title={"Paypal"} + description={"Freelance Payment"} + amount={4550} + /> + + , + number: "7812 2139 0823 XXXX" + }} + visa={{ + icon: , + number: "7812 2139 0823 XXXX" + }} + /> + + + + + + + + + ); +} + +export default Billing; diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js deleted file mode 100644 index 87845971b..000000000 --- a/src/views/Dashboard/Dashboard.js +++ /dev/null @@ -1,645 +0,0 @@ -// Chakra imports -import { - Box, - Button, - Flex, - Grid, - Icon, - Image, - Portal, - Progress, - SimpleGrid, - Spacer, - Stat, - StatHelpText, - StatLabel, - StatNumber, - Table, - Tbody, - Text, - Th, - Thead, - Tr, - useColorMode, - useColorModeValue, -} from "@chakra-ui/react"; -// assets -import peopleImage from "assets/img/people-image.png"; -import logoChakra from "assets/svg/logo-white.svg"; -// Custom components -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.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, - RocketIcon, - StatsIcon, - WalletIcon, -} from "components/Icons/Icons.js"; -import DashboardTableRow from "components/Tables/DashboardTableRow"; -import TimelineRow from "components/Tables/TimelineRow"; -import React, { useState } from "react"; -// react icons -import { BsArrowRight } from "react-icons/bs"; -import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; -import { dashboardTableData, timelineData } from "variables/general"; - -export default function Dashboard() { - const value = "$100.000"; - // Chakra Color Mode - const { colorMode, toggleColorMode } = useColorMode(); - const iconTeal = useColorModeValue("teal.300", "teal.300"); - const iconBoxInside = useColorModeValue("white", "white"); - const textColor = useColorModeValue("gray.700", "white"); - const [series, setSeries] = useState([ - { - type: "area", - name: "Mobile apps", - data: [190, 220, 205, 350, 370, 450, 400, 360, 210, 250, 292, 150], - }, - { - type: "area", - name: "Websites", - data: [400, 291, 121, 117, 25, 133, 121, 211, 147, 25, 201, 203], - }, - ]); - const overlayRef = React.useRef(); - - return ( - - - - - - - - Today's Money - - - - $53,000 - - - +55% - - - - - - - - - - - - - - - Today's Users - - - - 2,300 - - - +5% - - - - - - - - - - - - - - - New Clients - - - - +3,020 - - - -14% - - - - - - - - - - - - - - - - Total Sales - - - - $173,000 - - - +8% - - - - - - - - - - - - - - - - - Built by developers - - - Purity UI Dashboard - - - From colors, cards, typography to complex elements, you will - find the full documentation. - - - - - - - - - chakra image - - - - - - - - - - - Work with the rockets - - - Wealth creation is a revolutionary recent positive-sum game. - It is all about who takes the opportunity first. - - - - - - - - - - - - - - - - - - Active Users - - - - (+23%) - {" "} - than last week - - - - - - - - - - Users - - - - 32,984 - - - - - - - - - - Clicks - - - - 2.42m - - - - - - - - - - Sales - - - - 2,400$ - - - - - - - - - - Items - - - - 320 - - - - - - - - - - - - Sales Overview - - - - (+5%) more - {" "} - in 2021 - - - - - - - - - - - - - - Projects - - - - - - 30 done - {" "} - this month. - - - - - - - - - - - - - - - {dashboardTableData.map((row) => { - return ( - - ); - })} - -
- Companies - MembersBudgetCompletion
- - - - - - Orders overview - - - - +30% - {" "} - this month. - - - - - - {timelineData.map((row, index, arr) => { - return ( - - ); - })} - - - - - - ); -} diff --git a/src/views/Dashboard/Dashboard/components/ActiveUsers.js b/src/views/Dashboard/Dashboard/components/ActiveUsers.js new file mode 100644 index 000000000..7a183d796 --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/ActiveUsers.js @@ -0,0 +1,78 @@ +// Chakra imports +import { + Flex, SimpleGrid, Text, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +// Custom icons +import { + CartIcon, RocketIcon, + StatsIcon, + WalletIcon +} from "components/Icons/Icons.js"; +import React from "react"; +import ChartStatistics from './ChartStatistics'; + +const ActiveUsers = ({title, percentage, chart}) => { + const iconBoxInside = useColorModeValue("white", "white"); + const textColor = useColorModeValue("gray.700", "white"); + return ( + + + + {chart} + + + {title} + + + 0 ? "green.400" : "red.400"} fontWeight="bold"> + {percentage > 0 ? `+${percentage}%` : `-${percentage}%`} + {" "} + than last week + + + + } + /> + } + /> + } + /> + } + /> + + + + + ) +} + +export default ActiveUsers \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js b/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js new file mode 100644 index 000000000..b00fee333 --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js @@ -0,0 +1,93 @@ +// Chakra imports +import { + Button, + Flex, Icon, Spacer, Text, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import React from "react"; +// react icons +import { BsArrowRight } from "react-icons/bs"; + +const BuiltByDevelopers = ({title, name, description, image}) => { + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const iconBoxInside = useColorModeValue("white", "white"); + const textColor = useColorModeValue("gray.700", "white"); + const overlayRef = React.useRef(); + + return ( + + + + + + {title} + + + {name} + + + {description} + + + + + + + + + {image} + + + + + ) +} + +export default BuiltByDevelopers \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/ChartStatistics.js b/src/views/Dashboard/Dashboard/components/ChartStatistics.js new file mode 100644 index 000000000..c4d6081f7 --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/ChartStatistics.js @@ -0,0 +1,92 @@ +import { + Box, + Button, + Flex, + Grid, + Icon, + Image, + Portal, + Progress, + SimpleGrid, + Spacer, + Stat, + StatHelpText, + StatLabel, + StatNumber, + Table, + Tbody, + Text, + Th, + Thead, + Tr, + useColorMode, + useColorModeValue, + } from "@chakra-ui/react"; + // assets + import peopleImage from "assets/img/people-image.png"; + import logoChakra from "assets/svg/logo-white.svg"; + // Custom components + import Card from "components/Card/Card.js"; + import CardBody from "components/Card/CardBody.js"; + import CardHeader from "components/Card/CardHeader.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, + RocketIcon, + StatsIcon, + WalletIcon, + } from "components/Icons/Icons.js"; + import DashboardTableRow from "components/Tables/DashboardTableRow"; + import TimelineRow from "components/Tables/TimelineRow"; + import React, { useState } from "react"; + // react icons + import { BsArrowRight } from "react-icons/bs"; + import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; + import { dashboardTableData, timelineData } from "variables/general"; + +const ChartStatistics = ({title, amount, icon, percentage}) => { + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const iconBoxInside = useColorModeValue("white", "white"); + const textColor = useColorModeValue("gray.700", "white"); + const overlayRef = React.useRef(); + return ( + + + + {icon} + + + {title} + + + + {amount} + + + + ) +} + +export default ChartStatistics \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/MiniStatistics.js b/src/views/Dashboard/Dashboard/components/MiniStatistics.js new file mode 100644 index 000000000..abe26cc66 --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/MiniStatistics.js @@ -0,0 +1,58 @@ +// Chakra imports +import { + Flex, Stat, + StatHelpText, + StatLabel, + StatNumber, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import IconBox from "components/Icons/IconBox"; +import React from "react"; + +const MiniStatistics = ({title, amount, percentage, icon}) => { + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + + {title} + + + + {amount} + + 0 ? "green.400" : "red.400"} + fontWeight="bold" + ps="3px" + fontSize="md" + > + {percentage > 0 ? `+${percentage}%` : `${percentage}%`} + + + + + {icon} + + + + + ) +} + +export default MiniStatistics \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/OrdersOverview.js b/src/views/Dashboard/Dashboard/components/OrdersOverview.js new file mode 100644 index 000000000..40340692e --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/OrdersOverview.js @@ -0,0 +1,57 @@ +// Chakra imports +import { + Flex, Text, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import TimelineRow from "components/Tables/TimelineRow"; +import React from "react"; + +const OrdersOverview = ({title, amount, data}) => { + + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + {title} + + + + {`${amount}%`} + {" "} + this month. + + + + + + {data.map((row, index, arr) => { + return ( + + ); + })} + + + + ) +} + +export default OrdersOverview \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/Projects.js b/src/views/Dashboard/Dashboard/components/Projects.js new file mode 100644 index 000000000..036a88aaf --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/Projects.js @@ -0,0 +1,81 @@ +// Chakra imports +import { + Flex, Icon, Table, + Tbody, + Text, + Th, + Thead, + Tr, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardHeader from "components/Card/CardHeader.js"; +import DashboardTableRow from "components/Tables/DashboardTableRow"; +import React from "react"; +import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; + +const Projects = ({title, amount, captions, data}) => { + + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + {title} + + + + + + {amount} done + {" "} + this month. + + + + + + + + { + captions.map((caption, idx) => { + return ( + + ) + }) + } + + + + {data.map((row) => { + return ( + + ); + })} + +
{caption}
+ + ) +} + +export default Projects \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/SalesOverview.js b/src/views/Dashboard/Dashboard/components/SalesOverview.js new file mode 100644 index 000000000..e45a2403f --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/SalesOverview.js @@ -0,0 +1,34 @@ +// Chakra imports +import { + Box, Flex, Text, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardHeader from "components/Card/CardHeader.js"; +import React from "react"; + +const SalesOverview = ({title, percentage, chart}) => { + const textColor = useColorModeValue("gray.700", "white"); + return ( + + + + + {title} + + + 0 ? "green.400" : "red.400"} fontWeight="bold"> + {`${percentage}%`} more + {" "} + in 2021 + + + + + {chart} + + + ) +} + +export default SalesOverview \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js b/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js new file mode 100644 index 000000000..75df98880 --- /dev/null +++ b/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js @@ -0,0 +1,85 @@ +// Chakra imports +import { + Box, + Button, + Flex, Icon, Portal, Spacer, Text, useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import React from "react"; +// react icons +import { BsArrowRight } from "react-icons/bs"; + +const WorkWithTheRockets = ({title, description, backgroundImage}) => { + + const overlayRef = React.useRef(); + return ( + + + + + + + {title} + + + {description} + + + + + + + + + + ) +} + +export default WorkWithTheRockets \ No newline at end of file diff --git a/src/views/Dashboard/Dashboard/index.js b/src/views/Dashboard/Dashboard/index.js new file mode 100644 index 000000000..748d23427 --- /dev/null +++ b/src/views/Dashboard/Dashboard/index.js @@ -0,0 +1,118 @@ +// Chakra imports +import { + Flex, + Grid, Image, SimpleGrid, useColorModeValue +} from "@chakra-ui/react"; +// assets +import peopleImage from "assets/img/people-image.png"; +import logoChakra from "assets/svg/logo-white.svg"; +import BarChart from "components/Charts/BarChart"; +import LineChart from "components/Charts/LineChart"; +// Custom icons +import { + CartIcon, + DocumentIcon, + GlobeIcon, WalletIcon +} from "components/Icons/Icons.js"; +import React from "react"; +import { dashboardTableData, timelineData } from "variables/general"; +import ActiveUsers from "./components/ActiveUsers"; +import BuiltByDevelopers from "./components/BuiltByDevelopers"; +import MiniStatistics from "./components/MiniStatistics"; +import OrdersOverview from "./components/OrdersOverview"; +import Projects from "./components/Projects"; +import SalesOverview from "./components/SalesOverview"; +import WorkWithTheRockets from "./components/WorkWithTheRockets"; + + export default function Dashboard() { + const iconBoxInside = useColorModeValue("white", "white"); + + return ( + + + } + /> + } + /> + } + /> + } + /> + + + } + /> + + + + } + /> + } + /> + + + + + + + + ); + } + \ No newline at end of file diff --git a/src/views/Dashboard/Profile.js b/src/views/Dashboard/Profile.js deleted file mode 100644 index 18633e820..000000000 --- a/src/views/Dashboard/Profile.js +++ /dev/null @@ -1,727 +0,0 @@ -import React from "react"; -// Chakra imports -import { - Avatar, - AvatarGroup, - Box, - Button, - Flex, - Grid, - Icon, - Image, - Link, - Switch, - 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"; -// 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 ProfileBgImage from "assets/img/ProfileBackground.png"; -import { - FaCube, - FaFacebook, - FaInstagram, - FaPenFancy, - FaPlus, - FaTwitter, -} from "react-icons/fa"; -import { IoDocumentsSharp } from "react-icons/io5"; - -function Profile() { - // Chakra color mode - const textColor = useColorModeValue("gray.700", "white"); - const bgProfile = useColorModeValue( - "hsla(0,0%,100%,.8)", - "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)" - ); - const borderProfileColor = useColorModeValue( - "white", - "rgba(255, 255, 255, 0.31)" - ); - const emailColor = useColorModeValue("gray.400", "gray.300"); - - return ( - - - - - - - - - Esthera Jackson - - - esthera@simmmple.com - - - - - - - - - - - - - - - - Platform Settings - - - - - - ACCOUNT - - - - - Email me when someone follows me - - - - - - Email me when someone answers on my post - - - - - - Email me when someone mentions me - - - - APPLICATION - - - - - New launches and projects - - - - - - Monthly product changes - - - - - - Subscribe to newsletter - - - - - - - - - Profile Information - - - - - - 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). - - - - Full Name:{" "} - - - Esthera Jackson - - - - - Mobile:{" "} - - - (44) 123 1234 123 - - - - - Email:{" "} - - - esthera@simmmple.com - - - - - Location:{" "} - - - United States - - - - - Social Media:{" "} - - - - - - - - - - - - - - - - - - - - Conversations - - - - - - - - - - Sophie B.{" "} - - - Hi! I need more information... - - - - - - - - - - - Sophie B.{" "} - - - Awesome work, can you change... - - - - - - - - - - - Sophie B.{" "} - - - Have a great afternoon... - - - - - - - - - - - Sophie B.{" "} - - - About files I can... - - - - - - - - - - - Sophie B.{" "} - - - About files I can... - - - - - - - - - - - - - - Projects - - - Architects design houses - - - - - - - - - - - - - Project #1 - - - Modern - - - As Uber works through a huge amount of internal management - turmoil. - - - - - - - - - - - - - - - - - - - - Project #2 - - - Scandinavian - - - Music is something that every person has his or her own - specific opinion about. - - - - - - - - - - - - - - - - - - - - Project #3 - - - Minimalist - - - Different people have different taste, especially various - types of music. - - - - - - - - - - - - - - - - - - ); -} - -export default Profile; diff --git a/src/views/Dashboard/Profile/components/Conversations.js b/src/views/Dashboard/Profile/components/Conversations.js new file mode 100644 index 000000000..c7a365246 --- /dev/null +++ b/src/views/Dashboard/Profile/components/Conversations.js @@ -0,0 +1,183 @@ +// Chakra imports +import { + Avatar, Button, + Flex, Text, 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"; +// Custom components +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import React from "react"; + +const Conversations = ({title}) => { + + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + {title} + + + + + + + + + + Sophie B.{" "} + + + Hi! I need more information... + + + + + + + + + + + Sophie B.{" "} + + + Awesome work, can you change... + + + + + + + + + + + Sophie B.{" "} + + + Have a great afternoon... + + + + + + + + + + + Sophie B.{" "} + + + About files I can... + + + + + + + + + + + Sophie B.{" "} + + + About files I can... + + + + + + + + + ) +} + +export default Conversations \ No newline at end of file diff --git a/src/views/Dashboard/Profile/components/Header.js b/src/views/Dashboard/Profile/components/Header.js new file mode 100644 index 000000000..50b56d98b --- /dev/null +++ b/src/views/Dashboard/Profile/components/Header.js @@ -0,0 +1,156 @@ +// Chakra imports +import { + Avatar, Box, + Button, + Flex, Text, + useColorModeValue +} from "@chakra-ui/react"; +import React from "react"; + +const Header = ({backgroundHeader, backgroundProfile,avatarImage, name, email, tabs}) => { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + const bgProfile = useColorModeValue( + "hsla(0,0%,100%,.8)", + "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)" + ); + const borderProfileColor = useColorModeValue( + "white", + "rgba(255, 255, 255, 0.31)" + ); + const emailColor = useColorModeValue("gray.400", "gray.300"); + return ( + + + + + + + + {name} + + + {email} + + + + + + + + + + + + ) +} + +export default Header \ No newline at end of file diff --git a/src/views/Dashboard/Profile/components/PlatformSettings.js b/src/views/Dashboard/Profile/components/PlatformSettings.js new file mode 100644 index 000000000..8cb86be75 --- /dev/null +++ b/src/views/Dashboard/Profile/components/PlatformSettings.js @@ -0,0 +1,108 @@ +// Chakra imports +import { + Flex, Switch, + 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 React from "react"; + +const PlatformSettings = ({title, subtitle1, subtitle2}) => { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + return ( + + + + {title} + + + + + + {subtitle1} + + + + + Email me when someone follows me + + + + + + Email me when someone answers on my post + + + + + + Email me when someone mentions me + + + + {subtitle2} + + + + + New launches and projects + + + + + + Monthly product changes + + + + + + Subscribe to newsletter + + + + + + ) +} + +export default PlatformSettings \ No newline at end of file diff --git a/src/views/Dashboard/Profile/components/ProfileInformation.js b/src/views/Dashboard/Profile/components/ProfileInformation.js new file mode 100644 index 000000000..22b7a59a3 --- /dev/null +++ b/src/views/Dashboard/Profile/components/ProfileInformation.js @@ -0,0 +1,129 @@ +// Chakra imports +import { + Flex, Icon, Link, 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 React from "react"; +import { + FaFacebook, + FaInstagram, FaTwitter +} from "react-icons/fa"; + +const ProfileInformation = ({title, description, name, mobile, email, location}) => { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + {title} + + + + + + {description} + + + + Full Name:{" "} + + + {name} + + + + + Mobile:{" "} + + + {mobile} + + + + + Email:{" "} + + + {email} + + + + + Location:{" "} + + + {location} + + + + + Social Media:{" "} + + + + + + + + + + + + + + + + + ) +} + +export default ProfileInformation \ No newline at end of file diff --git a/src/views/Dashboard/Profile/components/ProjectCard.js b/src/views/Dashboard/Profile/components/ProjectCard.js new file mode 100644 index 000000000..0ab7330d3 --- /dev/null +++ b/src/views/Dashboard/Profile/components/ProjectCard.js @@ -0,0 +1,70 @@ +// Chakra imports +import { + Avatar, + AvatarGroup, + Box, + Button, + Flex, Image, Text, + useColorModeValue +} from "@chakra-ui/react"; +import React from "react"; + +const ProjectCard = ({image, name, category, avatars, description}) => { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + + + + {name} + + + {category} + + + {description} + + + + + { + avatars.map((el, idx) => { + return ( + + ) + }) + } + + + + + ) +} + +export default ProjectCard \ No newline at end of file diff --git a/src/views/Dashboard/Profile/components/Projects.js b/src/views/Dashboard/Profile/components/Projects.js new file mode 100644 index 000000000..1e8edbc96 --- /dev/null +++ b/src/views/Dashboard/Profile/components/Projects.js @@ -0,0 +1,95 @@ +// Chakra imports +import { + Button, + Flex, + Grid, + Icon, + Text, + useColorModeValue, +} from "@chakra-ui/react"; +// Assets +import avatar2 from "assets/img/avatars/avatar2.png"; +import avatar4 from "assets/img/avatars/avatar4.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"; +// Custom components +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import React from "react"; +import { FaPlus } from "react-icons/fa"; +import ProjectCard from "./ProjectCard"; + +const Projects = ({ title, description }) => { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + + return ( + + + + + {title} + + + {description} + + + + + + + + + + + + + ); +}; + +export default Projects; diff --git a/src/views/Dashboard/Profile/index.js b/src/views/Dashboard/Profile/index.js new file mode 100644 index 000000000..336f42cb6 --- /dev/null +++ b/src/views/Dashboard/Profile/index.js @@ -0,0 +1,103 @@ +// Chakra imports +import { + Avatar, + AvatarGroup, + Box, + Button, + Flex, + Grid, + Icon, + Image, + Link, + Switch, + Text, + 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 ProfileBgImage from "assets/img/ProfileBackground.png"; +// Custom components +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import React from "react"; +import { + FaCube, + FaFacebook, + FaInstagram, + FaPenFancy, + FaPlus, + FaTwitter +} from "react-icons/fa"; +import { IoDocumentsSharp } from "react-icons/io5"; +import Conversations from "./components/Conversations"; +import Header from "./components/Header"; +import PlatformSettings from "./components/PlatformSettings"; +import ProfileInformation from "./components/ProfileInformation"; +import Projects from "./components/Projects"; + +function Profile() { + // Chakra color mode + const textColor = useColorModeValue("gray.700", "white"); + const bgProfile = useColorModeValue( + "hsla(0,0%,100%,.8)", + "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)" + ); + + return ( + +
+ }, + { + name: "TEAMS", + icon: + }, + { + name: "PROJECTS", + icon: + } + ]} + /> + + + + + + + + + + ); +} + +export default Profile; diff --git a/src/views/Dashboard/RTL/index.js b/src/views/Dashboard/RTL/index.js new file mode 100644 index 000000000..b09672bff --- /dev/null +++ b/src/views/Dashboard/RTL/index.js @@ -0,0 +1,160 @@ +// Chakra imports +import { + Box, + Button, + Flex, + Grid, + Icon, + Image, + Portal, + Progress, + SimpleGrid, + Spacer, + Stat, + StatHelpText, + StatLabel, + StatNumber, + Table, + Tbody, + Text, + Th, + Thead, + Tr, + useColorMode, + useColorModeValue, + } from "@chakra-ui/react"; + // assets + import peopleImage from "assets/img/people-image.png"; + import logoChakra from "assets/svg/logo-white.svg"; + // Custom components + import Card from "components/Card/Card.js"; + import CardBody from "components/Card/CardBody.js"; + import CardHeader from "components/Card/CardHeader.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, + RocketIcon, + StatsIcon, + WalletIcon, + } from "components/Icons/Icons.js"; + import DashboardTableRow from "components/Tables/DashboardTableRow"; + import TimelineRow from "components/Tables/TimelineRow"; + import React, { useState } from "react"; + // react icons + import { BsArrowRight, BsArrowLeft } from "react-icons/bs"; + import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; + import { rtlDashboardTableData, rtlTimelineData, dashboardTableData, timelineData } from "variables/general"; + import ActiveUsers from "../Dashboard/components/ActiveUsers"; + import BuiltByDevelopers from "../Dashboard/components/BuiltByDevelopers"; + import ChartStatistics from "../Dashboard/components/ChartStatistics"; + import MiniStatistics from "../Dashboard/components/MiniStatistics"; + import OrdersOverview from "../Dashboard/components/OrdersOverview"; + import Projects from "../Dashboard/components/Projects"; + import SalesOverview from "../Dashboard/components/SalesOverview"; + + import WorkWithTheRockets from "../Dashboard/components/WorkWithTheRockets"; + + + export default function Dashboard() { + + // Chakra Color Mode + + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const iconBoxInside = useColorModeValue("white", "white"); + const textColor = useColorModeValue("gray.700", "white"); + const overlayRef = React.useRef(); + + return ( + + + } + /> + } + /> + } + /> + } + /> + + + } + /> + + + + } + /> + } + /> + + + + + + + + ); + } + \ No newline at end of file diff --git a/src/views/Dashboard/Tables.js b/src/views/Dashboard/Tables.js deleted file mode 100644 index 5a230a25a..000000000 --- a/src/views/Dashboard/Tables.js +++ /dev/null @@ -1,109 +0,0 @@ -import React from "react"; -// Chakra imports -import { - Flex, - Table, - Tbody, - Text, - Th, - Thead, - Tr, - useColorModeValue, -} from "@chakra-ui/react"; -// Custom components -import Card from "components/Card/Card.js"; -import CardHeader from "components/Card/CardHeader.js"; -import CardBody from "components/Card/CardBody.js"; -import TablesProjectRow from "components/Tables/TablesProjectRow"; -import TablesTableRow from "components/Tables/TablesTableRow"; -import { tablesProjectData, tablesTableData } from "variables/general"; - -function Tables() { - const textColor = useColorModeValue("gray.700", "white"); - - return ( - - - - - Authors Table - - - - - - - - - - - - - - - {tablesTableData.map((row) => { - return ( - - ); - })} - -
- Author - FunctionStatusEmployed
- - - - - - - Projects Table - - - - - - - - - - - - - - - - {tablesProjectData.map((row) => { - return ( - - ); - })} - -
- Companies - BudgetStatusCompletion
- - - - ); -} - -export default Tables; diff --git a/src/views/Dashboard/Tables/components/Authors.js b/src/views/Dashboard/Tables/components/Authors.js new file mode 100644 index 000000000..3652e5c46 --- /dev/null +++ b/src/views/Dashboard/Tables/components/Authors.js @@ -0,0 +1,62 @@ +// Chakra imports +import { + Table, + Tbody, + Text, + Th, + Thead, + Tr, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import TablesTableRow from "components/Tables/TablesTableRow"; +import React from "react"; + +const Authors = ({title, captions, data}) => { + const textColor = useColorModeValue("gray.700", "white"); + return ( + + + + {title} + + + + + + + { + captions.map((caption, idx) => { + return ( + + ) + }) + } + + + + {data.map((row) => { + return ( + + ); + })} + +
{caption}
+ + + ) +} + +export default Authors \ No newline at end of file diff --git a/src/views/Dashboard/Tables/components/Projects.js b/src/views/Dashboard/Tables/components/Projects.js new file mode 100644 index 000000000..0bdaf577f --- /dev/null +++ b/src/views/Dashboard/Tables/components/Projects.js @@ -0,0 +1,66 @@ +// Chakra imports +import { + Flex, + Table, + Tbody, + Text, + Th, + Thead, + Tr, + useColorModeValue +} from "@chakra-ui/react"; +// Custom components +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import TablesProjectRow from "components/Tables/TablesProjectRow"; +import React from "react"; + +const Projects = ({title, captions, data}) => { + const textColor = useColorModeValue("gray.700", "white"); + return ( + + + + + {title} + + + + + + + + { + captions.map((caption, idx) => { + return ( + + ) + }) + } + + + + {data.map((row) => { + return ( + + ); + })} + +
{caption}
+ + + ) +} + +export default Projects \ No newline at end of file diff --git a/src/views/Dashboard/Tables/index.js b/src/views/Dashboard/Tables/index.js new file mode 100644 index 000000000..6d555a6ac --- /dev/null +++ b/src/views/Dashboard/Tables/index.js @@ -0,0 +1,30 @@ +// Chakra imports +import { + Flex +} from "@chakra-ui/react"; +import React from "react"; +import Authors from "./components/Authors"; +import Projects from "./components/Projects"; +import { tablesTableData, dashboardTableData } from "variables/general"; + +function Tables() { + + return ( + + + + + + + ); +} + +export default Tables; diff --git a/src/views/RTL/RTLPage.js b/src/views/RTL/RTLPage.js deleted file mode 100644 index a80ecffbb..000000000 --- a/src/views/RTL/RTLPage.js +++ /dev/null @@ -1,661 +0,0 @@ -// Chakra imports -import { - Box, - Button, - Flex, - Grid, - Icon, - Image, - Portal, - Progress, - SimpleGrid, - Spacer, - Stat, - StatHelpText, - StatLabel, - StatNumber, - Table, - Tbody, - Text, - Th, - Thead, - Tr, - useColorMode, - useColorModeValue, -} from "@chakra-ui/react"; -// assets -import peopleImage from "assets/img/people-image.png"; -import logoChakra from "assets/svg/logo-white.svg"; -// Custom components -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.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, - RocketIcon, - StatsIcon, - WalletIcon, -} from "components/Icons/Icons.js"; -import DashboardTableRow from "components/Tables/DashboardTableRow"; -import TimelineRow from "components/Tables/TimelineRow"; -import React, { useState } from "react"; -// react icons -import { BsArrowRight, BsArrowLeft } from "react-icons/bs"; -import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; -import { rtlDashboardTableData, rtlTimelineData } from "variables/general"; - -export default function Dashboard() { - const value = "$100.000"; - // Chakra Color Mode - const { colorMode, toggleColorMode } = useColorMode(); - const iconTeal = useColorModeValue("teal.300", "teal.300"); - const iconBoxInside = useColorModeValue("white", "white"); - const textColor = useColorModeValue("gray.700", "white"); - const [series, setSeries] = useState([ - { - type: "area", - name: "Mobile apps", - data: [190, 220, 205, 350, 370, 450, 400, 360, 210, 250, 292, 150], - }, - { - type: "area", - name: "Websites", - data: [400, 291, 121, 117, 25, 133, 121, 211, 147, 25, 201, 203], - }, - ]); - const overlayRef = React.useRef(); - - return ( - - - - - - - - أموال اليوم - - - - $53,000 - - - +55% - - - - - - - - - - - - - - - مستخدمو اليوم - - - - 2,300 - - - +5% - - - - - - - - - - - - - - - عملاء جدد - - - - +3,020 - - - -14% - - - - - - - - - - - - - - - - إجمالي المبيعات - - - - $173,000 - - - +8% - - - - - - - - - - - - - - - - - بناها المطورون - - - لوحة معلومات Purity UI - - - من الألوان والبطاقات والطباعة إلى العناصر المعقدة ، ستجد - الوثائق الكاملة. - - - - - - - - - chakra image - - - - - - - - - - - العمل مع الصواريخ - - - تكوين الثروة هو لعبة ثورية حديثة ذات محصلة إيجابية. الأمر كله - يتعلق بمن يغتنم الفرصة أولاً. - - - - - - - - - - - - - - - - - - المستخدمين النشطين - - - - (+23%) - {" "} - من الأسبوع الماضي - - - - - - - - - - المستخدمون - - - - 32,984 - - - - - - - - - - نقرات - - - - 2.42m - - - - - - - - - - مبيعات - - - - 2,400$ - - - - - - - - - - العناصر - - - - 320 - - - - - - - - - - - - نظرة عامة على المبيعات - - - - (+5%) أكثر - {" "} - في عام 2021 - - - - - - - - - - - - - - المشاريع - - - - - - 30 انتهى - {" "} - هذا الشهر. - - - - - - - - - - - - - - - {rtlDashboardTableData.map((row) => { - return ( - - ); - })} - -
- شركات - أعضاءالدخلانتهاء
- - - - - - نظرة عامة على الطلبات - - - - +30% - {" "} - هذا الشهر. - - - - - - {rtlTimelineData.map((row, index, arr) => { - return ( - - ); - })} - - - - - - ); -} From 5d6fa6ce2050501b26122b498feab7189b4ca9c2 Mon Sep 17 00:00:00 2001 From: simmmpleweb Date: Wed, 9 Mar 2022 19:26:03 +0200 Subject: [PATCH 2/3] Removed unused imports --- src/views/Auth/SignIn.js | 143 ++++----- src/views/Auth/SignUp.js | 263 ++++++++------- .../Billing/components/BillingInformation.js | 59 ++-- .../Billing/components/CreditCard.js | 112 +++---- .../Dashboard/Billing/components/Invoices.js | 87 +++-- .../Billing/components/PaymentMethod.js | 181 +++++------ .../Billing/components/PaymentStatistics.js | 73 ++--- .../Billing/components/Transactions.js | 159 +++++---- src/views/Dashboard/Billing/index.js | 82 ++--- .../Dashboard/components/ActiveUsers.js | 126 ++++---- .../Dashboard/components/BuiltByDevelopers.js | 154 +++++---- .../Dashboard/components/ChartStatistics.js | 119 ++----- .../Dashboard/components/MiniStatistics.js | 91 +++--- .../Dashboard/components/OrdersOverview.js | 84 +++-- .../Dashboard/components/Projects.js | 133 ++++---- .../Dashboard/components/SalesOverview.js | 53 +-- .../components/WorkWithTheRockets.js | 138 ++++---- src/views/Dashboard/Dashboard/index.js | 199 ++++++------ .../Profile/components/Conversations.js | 303 +++++++++--------- .../Dashboard/Profile/components/Header.js | 267 +++++++-------- .../Profile/components/PlatformSettings.js | 159 ++++----- .../Profile/components/ProfileInformation.js | 205 +++++------- .../Profile/components/ProjectCard.js | 113 +++---- .../Dashboard/Profile/components/Projects.js | 34 +- src/views/Dashboard/Profile/index.js | 99 ++---- src/views/Dashboard/RTL/index.js | 273 +++++++--------- .../Dashboard/Tables/components/Authors.js | 92 +++--- .../Dashboard/Tables/components/Projects.js | 99 +++--- src/views/Dashboard/Tables/index.js | 29 +- 29 files changed, 1815 insertions(+), 2114 deletions(-) diff --git a/src/views/Auth/SignIn.js b/src/views/Auth/SignIn.js index d617251aa..0b67b361e 100644 --- a/src/views/Auth/SignIn.js +++ b/src/views/Auth/SignIn.js @@ -21,104 +21,97 @@ function SignIn() { const titleColor = useColorModeValue("teal.300", "teal.200"); const textColor = useColorModeValue("gray.400", "white"); return ( - + + w='100%' + maxW='1044px' + mx='auto' + justifyContent='space-between' + mb='30px' + pt={{ sm: "100px", md: "0px" }}> + w={{ base: "100%", md: "50%", lg: "42%" }}> - + direction='column' + w='100%' + background='transparent' + p='48px' + mt={{ md: "150px", lg: "80px" }}> + Welcome Back + fontWeight='bold' + fontSize='14px'> Enter your email and password to sign in - + Email - + Password - - + + + htmlFor='remember-login' + mb='0' + ms='1' + fontWeight='normal'> Remember me - + flexDirection='column' + justifyContent='center' + alignItems='center' + maxW='100%' + mt='0px'> + Don't have an account? - + Sign Up @@ -127,21 +120,19 @@ function SignIn() { + overflowX='hidden' + h='100%' + w='40vw' + position='absolute' + right='0px'> + w='100%' + h='100%' + bgSize='cover' + bgPosition='50%' + position='absolute' + borderBottomLeftRadius='20px'> diff --git a/src/views/Auth/SignUp.js b/src/views/Auth/SignUp.js index 979f01a77..beb60cc12 100644 --- a/src/views/Auth/SignUp.js +++ b/src/views/Auth/SignUp.js @@ -25,219 +25,206 @@ function SignUp() { const bgIcons = useColorModeValue("teal.200", "rgba(255, 255, 255, 0.5)"); return ( + direction='column' + alignSelf='center' + justifySelf='center' + overflow='hidden'> + mt={{ md: "14px" }}> - + direction='column' + textAlign='center' + justifyContent='center' + align='center' + mt='6.5rem' + mb='30px'> + Welcome! + fontSize='md' + color='white' + fontWeight='normal' + mt='10px' + mb='26px' + w={{ base: "90%", sm: "60%", lg: "40%", xl: "30%" }}> Use these awesome forms to login or create new account in your project for free. - + + boxShadow='0 20px 27px 0 rgb(0 0 0 / 5%)'> + fontWeight='bold' + textAlign='center' + mb='22px'> Register With - + - + justify='center' + align='center' + w='75px' + h='75px' + borderRadius='15px' + border='1px solid lightgray' + cursor='pointer' + transition='all .25s ease' + _hover={{ filter: "brightness(120%)", bg: bgIcons }}> + - + justify='center' + align='center' + w='75px' + h='75px' + borderRadius='15px' + border='1px solid lightgray' + cursor='pointer' + transition='all .25s ease' + _hover={{ filter: "brightness(120%)", bg: bgIcons }}> + - + justify='center' + align='center' + w='75px' + h='75px' + borderRadius='15px' + border='1px solid lightgray' + cursor='pointer' + transition='all .25s ease' + _hover={{ filter: "brightness(120%)", bg: bgIcons }}> + + fontSize='lg' + color='gray.400' + fontWeight='bold' + textAlign='center' + mb='22px'> or - + Name - + Email - + Password - - - + + + Remember me - + flexDirection='column' + justifyContent='center' + alignItems='center' + maxW='100%' + mt='0px'> + Already have an account? + as='span' + ms='5px' + href='#' + fontWeight='bold'> Sign In diff --git a/src/views/Dashboard/Billing/components/BillingInformation.js b/src/views/Dashboard/Billing/components/BillingInformation.js index be4841253..3454a3565 100644 --- a/src/views/Dashboard/Billing/components/BillingInformation.js +++ b/src/views/Dashboard/Billing/components/BillingInformation.js @@ -1,8 +1,5 @@ // Chakra imports -import { - Flex, Text, - useColorModeValue -} from "@chakra-ui/react"; +import { Flex, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; @@ -10,33 +7,33 @@ import CardHeader from "components/Card/CardHeader.js"; import BillingRow from "components/Tables/BillingRow"; import React from "react"; -const BillingInformation = ({title, data}) => { - const textColor = useColorModeValue("gray.700", "white"); +const BillingInformation = ({ title, data }) => { + const textColor = useColorModeValue("gray.700", "white"); return ( - - - - {title} - - - - - {data.map((row) => { - return ( - - ); - })} - - - - - ) -} + + + + {title} + + + + + {data.map((row) => { + return ( + + ); + })} + + + + + ); +}; -export default BillingInformation \ No newline at end of file +export default BillingInformation; diff --git a/src/views/Dashboard/Billing/components/CreditCard.js b/src/views/Dashboard/Billing/components/CreditCard.js index 9b4e14d6a..d06608784 100644 --- a/src/views/Dashboard/Billing/components/CreditCard.js +++ b/src/views/Dashboard/Billing/components/CreditCard.js @@ -1,64 +1,66 @@ // Chakra imports -import { - Box, Flex, Spacer, - Text -} from "@chakra-ui/react"; +import { Box, Flex, Spacer, Text } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; import React from "react"; -const CreditCard = ({backgroundImage, title, icon, number, validity, cvv}) => { +const CreditCard = ({ + backgroundImage, + title, + icon, + number, + validity, + cvv, +}) => { return ( - - - - - {title} - - {icon} - - - - - - {number} - - - - - {validity.name} - - {validity.date} - - - - {cvv.name} - - {cvv.code} - - - - - - - - ) -} + backgroundImage={backgroundImage} + 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" }}> + + + + + {title} + + {icon} + + + + + + {number} + + + + + {validity.name} + + {validity.date} + + + + {cvv.name} + + {cvv.code} + + + + + + + + ); +}; -export default CreditCard \ No newline at end of file +export default CreditCard; diff --git a/src/views/Dashboard/Billing/components/Invoices.js b/src/views/Dashboard/Billing/components/Invoices.js index ef465f15c..e409c36b6 100644 --- a/src/views/Dashboard/Billing/components/Invoices.js +++ b/src/views/Dashboard/Billing/components/Invoices.js @@ -1,9 +1,5 @@ // Chakra imports -import { - Button, - Flex, Text, - useColorModeValue -} from "@chakra-ui/react"; +import { Button, Flex, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; @@ -11,50 +7,47 @@ import CardHeader from "components/Card/CardHeader.js"; import InvoicesRow from "components/Tables/InvoicesRow"; import React from "react"; -const Invoices = ({title, data}) => { - +const Invoices = ({ title, data }) => { const textColor = useColorModeValue("gray.700", "white"); return ( - - - - {title} - - - - - - - {data.map((row) => { - return ( - - ); - })} - - - - ) -} + p='22px' + my={{ sm: "24px", lg: "0px" }} + ms={{ sm: "0px", lg: "24px" }}> + + + + {title} + + + + + + + {data.map((row) => { + return ( + + ); + })} + + + + ); +}; -export default Invoices \ No newline at end of file +export default Invoices; diff --git a/src/views/Dashboard/Billing/components/PaymentMethod.js b/src/views/Dashboard/Billing/components/PaymentMethod.js index e3d1ff599..325c878fd 100644 --- a/src/views/Dashboard/Billing/components/PaymentMethod.js +++ b/src/views/Dashboard/Billing/components/PaymentMethod.js @@ -1,10 +1,11 @@ // Chakra imports import { - Button, - Flex, Icon, - Spacer, - Text, - useColorModeValue + Button, + Flex, + Icon, + Spacer, + Text, + useColorModeValue, } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; @@ -12,12 +13,9 @@ import CardBody from "components/Card/CardBody.js"; import CardHeader from "components/Card/CardHeader.js"; import IconBox from "components/Icons/IconBox"; import React from "react"; -import { - FaPencilAlt -} from "react-icons/fa"; - -const PaymentMethod = ({title, mastercard, visa}) => { +import { FaPencilAlt } from "react-icons/fa"; +const PaymentMethod = ({ title, mastercard, visa }) => { const iconTeal = useColorModeValue("teal.300", "teal.300"); const textColor = useColorModeValue("gray.700", "white"); const borderColor = useColorModeValue("#dee2e6", "gray.500"); @@ -27,93 +25,78 @@ const PaymentMethod = ({title, mastercard, visa}) => { ); return ( - - - - - {title} - - - - - - - - - {mastercard.icon} - - - {mastercard.number} - - - - - - - {visa.icon} - - - {visa.number} - - - - - - - - ) -} + + + + + {title} + + + + + + + + + {mastercard.icon} + + + {mastercard.number} + + + + + + + {visa.icon} + + + {visa.number} + + + + + + + + ); +}; -export default PaymentMethod \ No newline at end of file +export default PaymentMethod; diff --git a/src/views/Dashboard/Billing/components/PaymentStatistics.js b/src/views/Dashboard/Billing/components/PaymentStatistics.js index dca9297a8..68589cceb 100644 --- a/src/views/Dashboard/Billing/components/PaymentStatistics.js +++ b/src/views/Dashboard/Billing/components/PaymentStatistics.js @@ -1,7 +1,5 @@ // Chakra imports -import { - Flex, Text, useColorModeValue -} from "@chakra-ui/react"; +import { Flex, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; @@ -9,46 +7,43 @@ import IconBox from "components/Icons/IconBox"; import { Separator } from "components/Separator/Separator"; import React from "react"; -const PaymentStatistics = ({icon, title, description, amount}) => { - +const PaymentStatistics = ({ icon, title, description, amount }) => { const iconTeal = useColorModeValue("teal.300", "teal.300"); const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - {icon} - - - - {title} - - - {description} + + + + + {icon} + + + + {title} + + + {description} + + + + + {`%${amount}`} - - - {`%${amount}`} - - - - - ) -} + + + ); +}; -export default PaymentStatistics \ No newline at end of file +export default PaymentStatistics; diff --git a/src/views/Dashboard/Billing/components/Transactions.js b/src/views/Dashboard/Billing/components/Transactions.js index 9acabd0a5..907d23ec8 100644 --- a/src/views/Dashboard/Billing/components/Transactions.js +++ b/src/views/Dashboard/Billing/components/Transactions.js @@ -1,96 +1,91 @@ // Chakra imports -import { - Flex, Icon, Text, - useColorModeValue -} from "@chakra-ui/react"; +import { Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; import CardHeader from "components/Card/CardHeader.js"; import TransactionRow from "components/Tables/TransactionRow"; import React from "react"; -import { - FaRegCalendarAlt -} from "react-icons/fa"; +import { FaRegCalendarAlt } from "react-icons/fa"; -const Transactions = ({title, date, newestTransactions, olderTransactions}) => { - // Chakra color mode +const Transactions = ({ + title, + date, + newestTransactions, + olderTransactions, +}) => { + // Chakra color mode const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - - {title} - - - - - {date} - - - - - - - - - NEWEST - - {newestTransactions.map((row) => { - return ( - - ); - })} - - OLDER + + + + + + {title} + + + + + {date} - {olderTransactions.map((row) => { - return ( - - ); - })} - - - ) -} + + + + + + + NEWEST + + {newestTransactions.map((row) => { + return ( + + ); + })} + + OLDER + + {olderTransactions.map((row) => { + return ( + + ); + })} + + + + ); +}; -export default Transactions \ No newline at end of file +export default Transactions; diff --git a/src/views/Dashboard/Billing/index.js b/src/views/Dashboard/Billing/index.js index f5751f5e4..d12443be6 100644 --- a/src/views/Dashboard/Billing/index.js +++ b/src/views/Dashboard/Billing/index.js @@ -1,22 +1,16 @@ // Chakra imports -import { - Box, Flex, - Grid, - Icon -} from "@chakra-ui/react"; +import { Box, Flex, Grid, Icon } from "@chakra-ui/react"; // Assets import BackgroundCard1 from "assets/img/BackgroundCard1.png"; import { MastercardIcon, VisaIcon } from "components/Icons/Icons"; import React from "react"; -import { - FaPaypal, FaWallet -} from "react-icons/fa"; +import { FaPaypal, FaWallet } from "react-icons/fa"; import { RiMastercardFill } from "react-icons/ri"; import { - billingData, - invoicesData, - newestTransactions, - olderTransactions + billingData, + invoicesData, + newestTransactions, + olderTransactions, } from "variables/general"; import BillingInformation from "./components/BillingInformation"; import CreditCard from "./components/CreditCard"; @@ -26,10 +20,9 @@ import PaymentStatistics from "./components/PaymentStatistics"; import Transactions from "./components/Transactions"; function Billing() { - return ( - - + + + gap='26px'> } /> - } - title={"Salary"} - description={"Belong interactive"} - amount={2000} + } + title={"Salary"} + description={"Belong interactive"} + amount={2000} /> - } - title={"Paypal"} - description={"Freelance Payment"} - amount={4550} + } + title={"Paypal"} + description={"Freelance Payment"} + amount={4550} /> - , - number: "7812 2139 0823 XXXX" + icon: , + number: "7812 2139 0823 XXXX", }} visa={{ - icon: , - number: "7812 2139 0823 XXXX" + icon: , + number: "7812 2139 0823 XXXX", }} /> - + - - + diff --git a/src/views/Dashboard/Dashboard/components/ActiveUsers.js b/src/views/Dashboard/Dashboard/components/ActiveUsers.js index 7a183d796..fa62a357e 100644 --- a/src/views/Dashboard/Dashboard/components/ActiveUsers.js +++ b/src/views/Dashboard/Dashboard/components/ActiveUsers.js @@ -1,78 +1,70 @@ // Chakra imports -import { - Flex, SimpleGrid, Text, useColorModeValue -} from "@chakra-ui/react"; +import { Flex, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; // Custom icons import { - CartIcon, RocketIcon, - StatsIcon, - WalletIcon + CartIcon, + RocketIcon, + StatsIcon, + WalletIcon, } from "components/Icons/Icons.js"; import React from "react"; -import ChartStatistics from './ChartStatistics'; +import ChartStatistics from "./ChartStatistics"; -const ActiveUsers = ({title, percentage, chart}) => { - const iconBoxInside = useColorModeValue("white", "white"); - const textColor = useColorModeValue("gray.700", "white"); +const ActiveUsers = ({ title, percentage, chart }) => { + const iconBoxInside = useColorModeValue("white", "white"); + const textColor = useColorModeValue("gray.700", "white"); return ( - - - - {chart} - - - {title} - - - 0 ? "green.400" : "red.400"} fontWeight="bold"> - {percentage > 0 ? `+${percentage}%` : `-${percentage}%`} - {" "} - than last week - - - - } - /> - } - /> - } - /> - } - /> - - - - - ) -} + + + + {chart} + + + {title} + + + 0 ? "green.400" : "red.400"} + fontWeight='bold'> + {percentage > 0 ? `+${percentage}%` : `-${percentage}%`} + {" "} + than last week + + + + } + /> + } + /> + } + /> + } + /> + + + + + ); +}; -export default ActiveUsers \ No newline at end of file +export default ActiveUsers; diff --git a/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js b/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js index b00fee333..0fa09c97c 100644 --- a/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js +++ b/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js @@ -1,7 +1,11 @@ // Chakra imports import { - Button, - Flex, Icon, Spacer, Text, useColorModeValue + Button, + Flex, + Icon, + Spacer, + Text, + useColorModeValue, } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; @@ -10,84 +14,72 @@ import React from "react"; // react icons import { BsArrowRight } from "react-icons/bs"; -const BuiltByDevelopers = ({title, name, description, image}) => { - const iconTeal = useColorModeValue("teal.300", "teal.300"); - const iconBoxInside = useColorModeValue("white", "white"); - const textColor = useColorModeValue("gray.700", "white"); - const overlayRef = React.useRef(); - +const BuiltByDevelopers = ({ title, name, description, image }) => { + const textColor = useColorModeValue("gray.700", "white"); + return ( - - - - - - {title} - - - {name} - - - {description} - - - - - - - - - {image} - - - - - ) -} + + + + + + {title} + + + {name} + + + {description} + + + + + + + + + {image} + + + + + ); +}; -export default BuiltByDevelopers \ No newline at end of file +export default BuiltByDevelopers; diff --git a/src/views/Dashboard/Dashboard/components/ChartStatistics.js b/src/views/Dashboard/Dashboard/components/ChartStatistics.js index c4d6081f7..b6d09eb4c 100644 --- a/src/views/Dashboard/Dashboard/components/ChartStatistics.js +++ b/src/views/Dashboard/Dashboard/components/ChartStatistics.js @@ -1,92 +1,33 @@ -import { - Box, - Button, - Flex, - Grid, - Icon, - Image, - Portal, - Progress, - SimpleGrid, - Spacer, - Stat, - StatHelpText, - StatLabel, - StatNumber, - Table, - Tbody, - Text, - Th, - Thead, - Tr, - useColorMode, - useColorModeValue, - } from "@chakra-ui/react"; - // assets - import peopleImage from "assets/img/people-image.png"; - import logoChakra from "assets/svg/logo-white.svg"; - // Custom components - import Card from "components/Card/Card.js"; - import CardBody from "components/Card/CardBody.js"; - import CardHeader from "components/Card/CardHeader.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, - RocketIcon, - StatsIcon, - WalletIcon, - } from "components/Icons/Icons.js"; - import DashboardTableRow from "components/Tables/DashboardTableRow"; - import TimelineRow from "components/Tables/TimelineRow"; - import React, { useState } from "react"; - // react icons - import { BsArrowRight } from "react-icons/bs"; - import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; - import { dashboardTableData, timelineData } from "variables/general"; +import { Flex, Progress, Text, useColorModeValue } from "@chakra-ui/react"; +import IconBox from "components/Icons/IconBox"; +import React from "react"; -const ChartStatistics = ({title, amount, icon, percentage}) => { - const iconTeal = useColorModeValue("teal.300", "teal.300"); - const iconBoxInside = useColorModeValue("white", "white"); - const textColor = useColorModeValue("gray.700", "white"); - const overlayRef = React.useRef(); +const ChartStatistics = ({ title, amount, icon, percentage }) => { + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const iconBoxInside = useColorModeValue("white", "white"); + const textColor = useColorModeValue("gray.700", "white"); + const overlayRef = React.useRef(); return ( - - - - {icon} - - - {title} - - - - {amount} - - - - ) -} + + + + {icon} + + + {title} + + + + {amount} + + + + ); +}; -export default ChartStatistics \ No newline at end of file +export default ChartStatistics; diff --git a/src/views/Dashboard/Dashboard/components/MiniStatistics.js b/src/views/Dashboard/Dashboard/components/MiniStatistics.js index abe26cc66..feea6ae5e 100644 --- a/src/views/Dashboard/Dashboard/components/MiniStatistics.js +++ b/src/views/Dashboard/Dashboard/components/MiniStatistics.js @@ -1,10 +1,11 @@ // Chakra imports import { - Flex, Stat, - StatHelpText, - StatLabel, - StatNumber, - useColorModeValue + Flex, + Stat, + StatHelpText, + StatLabel, + StatNumber, + useColorModeValue, } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; @@ -12,47 +13,45 @@ import CardBody from "components/Card/CardBody.js"; import IconBox from "components/Icons/IconBox"; import React from "react"; -const MiniStatistics = ({title, amount, percentage, icon}) => { - const iconTeal = useColorModeValue("teal.300", "teal.300"); - const textColor = useColorModeValue("gray.700", "white"); +const MiniStatistics = ({ title, amount, percentage, icon }) => { + const iconTeal = useColorModeValue("teal.300", "teal.300"); + const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - - {title} - - - - {amount} - - 0 ? "green.400" : "red.400"} - fontWeight="bold" - ps="3px" - fontSize="md" - > - {percentage > 0 ? `+${percentage}%` : `${percentage}%`} - - - - - {icon} - - - - - ) -} + + + + + + {title} + + + + {amount} + + 0 ? "green.400" : "red.400"} + fontWeight='bold' + ps='3px' + fontSize='md'> + {percentage > 0 ? `+${percentage}%` : `${percentage}%`} + + + + + {icon} + + + + + ); +}; -export default MiniStatistics \ No newline at end of file +export default MiniStatistics; diff --git a/src/views/Dashboard/Dashboard/components/OrdersOverview.js b/src/views/Dashboard/Dashboard/components/OrdersOverview.js index 40340692e..9cbfd9865 100644 --- a/src/views/Dashboard/Dashboard/components/OrdersOverview.js +++ b/src/views/Dashboard/Dashboard/components/OrdersOverview.js @@ -1,7 +1,5 @@ // Chakra imports -import { - Flex, Text, useColorModeValue -} from "@chakra-ui/react"; +import { Flex, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardBody from "components/Card/CardBody.js"; @@ -9,49 +7,43 @@ import CardHeader from "components/Card/CardHeader.js"; import TimelineRow from "components/Tables/TimelineRow"; import React from "react"; -const OrdersOverview = ({title, amount, data}) => { - - const textColor = useColorModeValue("gray.700", "white"); +const OrdersOverview = ({ title, amount, data }) => { + const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - {title} - - - - {`${amount}%`} - {" "} - this month. - - - - - - {data.map((row, index, arr) => { - return ( - - ); - })} - - - - ) -} + + + + + {title} + + + + {`${amount}%`} + {" "} + this month. + + + + + + {data.map((row, index, arr) => { + return ( + + ); + })} + + + + ); +}; -export default OrdersOverview \ No newline at end of file +export default OrdersOverview; diff --git a/src/views/Dashboard/Dashboard/components/Projects.js b/src/views/Dashboard/Dashboard/components/Projects.js index 036a88aaf..e55464b9b 100644 --- a/src/views/Dashboard/Dashboard/components/Projects.js +++ b/src/views/Dashboard/Dashboard/components/Projects.js @@ -1,11 +1,14 @@ // Chakra imports import { - Flex, Icon, Table, - Tbody, - Text, - Th, - Thead, - Tr, useColorModeValue + Flex, + Icon, + Table, + Tbody, + Text, + Th, + Thead, + Tr, + useColorModeValue, } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; @@ -14,68 +17,62 @@ import DashboardTableRow from "components/Tables/DashboardTableRow"; import React from "react"; import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; -const Projects = ({title, amount, captions, data}) => { - - const textColor = useColorModeValue("gray.700", "white"); +const Projects = ({ title, amount, captions, data }) => { + const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - {title} - - - - - - {amount} done - {" "} - this month. - - - - - - - - { - captions.map((caption, idx) => { - return ( - - ) - }) - } - - - - {data.map((row) => { - return ( - - ); - })} - -
{caption}
- - ) -} + + + + + {title} + + + + + + {amount} done + {" "} + this month. + + + + + + + + {captions.map((caption, idx) => { + return ( + + ); + })} + + + + {data.map((row) => { + return ( + + ); + })} + +
+ {caption} +
+ + ); +}; -export default Projects \ No newline at end of file +export default Projects; diff --git a/src/views/Dashboard/Dashboard/components/SalesOverview.js b/src/views/Dashboard/Dashboard/components/SalesOverview.js index e45a2403f..ca91f5caa 100644 --- a/src/views/Dashboard/Dashboard/components/SalesOverview.js +++ b/src/views/Dashboard/Dashboard/components/SalesOverview.js @@ -1,34 +1,35 @@ // Chakra imports -import { - Box, Flex, Text, useColorModeValue -} from "@chakra-ui/react"; +import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; import CardHeader from "components/Card/CardHeader.js"; import React from "react"; -const SalesOverview = ({title, percentage, chart}) => { - const textColor = useColorModeValue("gray.700", "white"); +const SalesOverview = ({ title, percentage, chart }) => { + const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - {title} - - - 0 ? "green.400" : "red.400"} fontWeight="bold"> - {`${percentage}%`} more - {" "} - in 2021 - - - - - {chart} - - - ) -} + + + + + {title} + + + 0 ? "green.400" : "red.400"} + fontWeight='bold'> + {`${percentage}%`} more + {" "} + in 2021 + + + + + {chart} + + + ); +}; -export default SalesOverview \ No newline at end of file +export default SalesOverview; diff --git a/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js b/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js index 75df98880..0569d4f6d 100644 --- a/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js +++ b/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js @@ -1,8 +1,12 @@ // Chakra imports import { - Box, - Button, - Flex, Icon, Portal, Spacer, Text, useColorModeValue + Box, + Button, + Flex, + Icon, + Portal, + Spacer, + Text, } from "@chakra-ui/react"; // Custom components import Card from "components/Card/Card.js"; @@ -11,75 +15,67 @@ import React from "react"; // react icons import { BsArrowRight } from "react-icons/bs"; -const WorkWithTheRockets = ({title, description, backgroundImage}) => { - - const overlayRef = React.useRef(); +const WorkWithTheRockets = ({ title, description, backgroundImage }) => { + const overlayRef = React.useRef(); return ( - - - - - - - {title} - - - {description} - - + + + + - + flexDirection='column' + color='white' + p='1.5rem 1.2rem 0.3rem 1.2rem' + lineHeight='1.6'> + + {title} + + + {description} + + + + + - - - - - ) -} + + + + ); +}; -export default WorkWithTheRockets \ No newline at end of file +export default WorkWithTheRockets; diff --git a/src/views/Dashboard/Dashboard/index.js b/src/views/Dashboard/Dashboard/index.js index 748d23427..08aa83057 100644 --- a/src/views/Dashboard/Dashboard/index.js +++ b/src/views/Dashboard/Dashboard/index.js @@ -1,7 +1,10 @@ // Chakra imports import { - Flex, - Grid, Image, SimpleGrid, useColorModeValue + Flex, + Grid, + Image, + SimpleGrid, + useColorModeValue, } from "@chakra-ui/react"; // assets import peopleImage from "assets/img/people-image.png"; @@ -10,9 +13,10 @@ import BarChart from "components/Charts/BarChart"; import LineChart from "components/Charts/LineChart"; // Custom icons import { - CartIcon, - DocumentIcon, - GlobeIcon, WalletIcon + CartIcon, + DocumentIcon, + GlobeIcon, + WalletIcon, } from "components/Icons/Icons.js"; import React from "react"; import { dashboardTableData, timelineData } from "variables/general"; @@ -23,96 +27,97 @@ import OrdersOverview from "./components/OrdersOverview"; import Projects from "./components/Projects"; import SalesOverview from "./components/SalesOverview"; import WorkWithTheRockets from "./components/WorkWithTheRockets"; - - export default function Dashboard() { - const iconBoxInside = useColorModeValue("white", "white"); - - return ( - - - } + +export default function Dashboard() { + const iconBoxInside = useColorModeValue("white", "white"); + + return ( + + + } + /> + } + /> + } + /> + } + /> + + + - } - /> - } - /> - } - /> - - - } - /> - - - - } - /> - } - /> - - - - - - - - ); - } - \ No newline at end of file + } + /> + + + + } + /> + } + /> + + + + + + + ); +} diff --git a/src/views/Dashboard/Profile/components/Conversations.js b/src/views/Dashboard/Profile/components/Conversations.js index c7a365246..6e56c1ba5 100644 --- a/src/views/Dashboard/Profile/components/Conversations.js +++ b/src/views/Dashboard/Profile/components/Conversations.js @@ -1,7 +1,10 @@ // Chakra imports import { - Avatar, Button, - Flex, Text, useColorModeValue + Avatar, + Button, + Flex, + Text, + useColorModeValue, } from "@chakra-ui/react"; // Assets import avatar2 from "assets/img/avatars/avatar2.png"; @@ -15,169 +18,163 @@ import CardBody from "components/Card/CardBody"; import CardHeader from "components/Card/CardHeader"; import React from "react"; -const Conversations = ({title}) => { - - // Chakra color mode +const Conversations = ({ title }) => { + // Chakra color mode const textColor = useColorModeValue("gray.700", "white"); return ( - - - - {title} - - - - - - - - - - Sophie B.{" "} - - - Hi! I need more information... - + + + + {title} + + + + + + + + + + Sophie B.{" "} + + + Hi! I need more information... + + - - - - - - - - - Sophie B.{" "} + - - - - - - - - Sophie B.{" "} - - - Have a great afternoon... - + + + + + + Sophie B.{" "} + + + Awesome work, can you change... + + - - - - - - - - - Sophie B.{" "} - - - About files I can... + - - - - - - - - Sophie B.{" "} + + + + + + Sophie B.{" "} + + + Have a great afternoon... + + + + + + + + + + + Sophie B.{" "} + + + About files I can... + + + + + + + + + + + Sophie B.{" "} + + + About files I can... + + + - - - - - ) -} + + + ); +}; -export default Conversations \ No newline at end of file +export default Conversations; diff --git a/src/views/Dashboard/Profile/components/Header.js b/src/views/Dashboard/Profile/components/Header.js index 50b56d98b..de5e3983a 100644 --- a/src/views/Dashboard/Profile/components/Header.js +++ b/src/views/Dashboard/Profile/components/Header.js @@ -1,14 +1,23 @@ // Chakra imports import { - Avatar, Box, - Button, - Flex, Text, - useColorModeValue + Avatar, + Box, + Button, + Flex, + Text, + useColorModeValue, } from "@chakra-ui/react"; import React from "react"; -const Header = ({backgroundHeader, backgroundProfile,avatarImage, name, email, tabs}) => { - // Chakra color mode +const Header = ({ + backgroundHeader, + backgroundProfile, + avatarImage, + name, + email, + tabs, +}) => { + // Chakra color mode const textColor = useColorModeValue("gray.700", "white"); const bgProfile = useColorModeValue( "hsla(0,0%,100%,.8)", @@ -21,136 +30,138 @@ const Header = ({backgroundHeader, backgroundProfile,avatarImage, name, email, t const emailColor = useColorModeValue("gray.400", "gray.300"); return ( - + mb={{ sm: "205px", md: "75px", xl: "70px" }} + borderRadius='15px' + px='0px' + display='flex' + flexDirection='column' + justifyContent='center' + align='center'> + + - - - + w={{ sm: "100%" }} + textAlign={{ sm: "center", md: "start" }}> + + + + {name} + + + {email} + + + + + + - - - + + - + - ) -} + + ); +}; -export default Header \ No newline at end of file +export default Header; diff --git a/src/views/Dashboard/Profile/components/PlatformSettings.js b/src/views/Dashboard/Profile/components/PlatformSettings.js index 8cb86be75..93fe20f98 100644 --- a/src/views/Dashboard/Profile/components/PlatformSettings.js +++ b/src/views/Dashboard/Profile/components/PlatformSettings.js @@ -1,108 +1,73 @@ // Chakra imports -import { - Flex, Switch, - Text, - useColorModeValue -} from "@chakra-ui/react"; +import { Flex, Switch, 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 React from "react"; -const PlatformSettings = ({title, subtitle1, subtitle2}) => { - // Chakra color mode +const PlatformSettings = ({ title, subtitle1, subtitle2 }) => { + // Chakra color mode const textColor = useColorModeValue("gray.700", "white"); return ( - - - - {title} + + + + {title} + + + + + + {subtitle1} + + + + + Email me when someone follows me - - - - - {subtitle1} - - - - - Email me when someone follows me - - - - - - Email me when someone answers on my post - - - - - - Email me when someone mentions me - - - - {subtitle2} - - - - - New launches and projects - - - - - - Monthly product changes - - - - - - Subscribe to newsletter - - - - - - ) -} + + + + + Email me when someone answers on my post + + + + + + Email me when someone mentions me + + + + {subtitle2} + + + + + New launches and projects + + + + + + Monthly product changes + + + + + + Subscribe to newsletter + + + + + + ); +}; -export default PlatformSettings \ No newline at end of file +export default PlatformSettings; diff --git a/src/views/Dashboard/Profile/components/ProfileInformation.js b/src/views/Dashboard/Profile/components/ProfileInformation.js index 22b7a59a3..929e1514f 100644 --- a/src/views/Dashboard/Profile/components/ProfileInformation.js +++ b/src/views/Dashboard/Profile/components/ProfileInformation.js @@ -1,129 +1,102 @@ // Chakra imports -import { - Flex, Icon, Link, Text, - useColorModeValue -} from "@chakra-ui/react"; +import { Flex, Icon, Link, 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 React from "react"; -import { - FaFacebook, - FaInstagram, FaTwitter -} from "react-icons/fa"; +import { FaFacebook, FaInstagram, FaTwitter } from "react-icons/fa"; -const ProfileInformation = ({title, description, name, mobile, email, location}) => { - // Chakra color mode +const ProfileInformation = ({ + title, + description, + name, + mobile, + email, + location, +}) => { + // Chakra color mode const textColor = useColorModeValue("gray.700", "white"); return ( - - - - {title} + + + + {title} + + + + + + {description} + + + + Full Name:{" "} - - - - - {description} - - - - Full Name:{" "} - - - {name} - - - - - Mobile:{" "} - - - {mobile} - - - - - Email:{" "} - - - {email} - - - - - Location:{" "} - - - {location} - - - - - Social Media:{" "} - - - - - - - - - - - - - + + {name} + + + + + Mobile:{" "} + + + {mobile} + + + + + Email:{" "} + + + {email} + + + + + Location:{" "} + + + {location} + + + + + Social Media:{" "} + + + + + + + + + + + - - - ) -} + + + + + ); +}; -export default ProfileInformation \ No newline at end of file +export default ProfileInformation; diff --git a/src/views/Dashboard/Profile/components/ProjectCard.js b/src/views/Dashboard/Profile/components/ProjectCard.js index 0ab7330d3..3b52c5424 100644 --- a/src/views/Dashboard/Profile/components/ProjectCard.js +++ b/src/views/Dashboard/Profile/components/ProjectCard.js @@ -1,70 +1,61 @@ // Chakra imports import { - Avatar, - AvatarGroup, - Box, - Button, - Flex, Image, Text, - useColorModeValue + Avatar, + AvatarGroup, + Box, + Button, + Flex, + Image, + Text, + useColorModeValue, } from "@chakra-ui/react"; import React from "react"; -const ProjectCard = ({image, name, category, avatars, description}) => { - // Chakra color mode +const ProjectCard = ({ image, name, category, avatars, description }) => { + // Chakra color mode const textColor = useColorModeValue("gray.700", "white"); return ( - - - - - - - - {name} - - - {category} - - - {description} - - - - - { - avatars.map((el, idx) => { - return ( - - ) - }) - } - - - - - ) -} + + + + + + + + {name} + + + {category} + + + {description} + + + + + {avatars.map((el, idx) => { + return ; + })} + + + + + ); +}; -export default ProjectCard \ No newline at end of file +export default ProjectCard; diff --git a/src/views/Dashboard/Profile/components/Projects.js b/src/views/Dashboard/Profile/components/Projects.js index 1e8edbc96..bd06db5c2 100644 --- a/src/views/Dashboard/Profile/components/Projects.js +++ b/src/views/Dashboard/Profile/components/Projects.js @@ -27,23 +27,22 @@ const Projects = ({ title, description }) => { const textColor = useColorModeValue("gray.700", "white"); return ( - - - - + + + + {title} - + {description} - + + gap='24px'> { avatars={[avatar2, avatar4, avatar6]} />