├── commit.sh ├── .gitignore ├── .gitattributes ├── .DS_Store ├── src ├── .DS_Store ├── assets │ ├── .DS_Store │ ├── img │ │ ├── BgSignUp.png │ │ ├── people-image.png │ │ ├── signInImage.png │ │ ├── BackgroundCard1.png │ │ ├── ImageArchitect1.png │ │ ├── ImageArchitect2.png │ │ ├── ImageArchitect3.png │ │ ├── avatars │ │ │ ├── avatar1.png │ │ │ ├── avatar2.png │ │ │ ├── avatar3.png │ │ │ ├── avatar4.png │ │ │ ├── avatar5.png │ │ │ ├── avatar6.png │ │ │ ├── avatar7.png │ │ │ ├── avatar8.png │ │ │ ├── avatar9.png │ │ │ └── avatar10.png │ │ ├── ProfileBackground.png │ │ └── SidebarHelpImage.png │ └── svg │ │ ├── settings.svg │ │ ├── mastercard-icon.svg │ │ ├── person.svg │ │ ├── watch.svg │ │ ├── search.svg │ │ ├── account-circle.svg │ │ ├── credit.svg │ │ ├── document.svg │ │ ├── cart.svg │ │ ├── profile.svg │ │ ├── person-auth.svg │ │ ├── build.svg │ │ ├── paypal.svg │ │ ├── key.svg │ │ ├── notifications.svg │ │ ├── wallet.svg │ │ ├── help.svg │ │ ├── box-3d.svg │ │ ├── atlassian-logo.svg │ │ ├── stats.svg │ │ ├── home.svg │ │ ├── cube.svg │ │ ├── spotify-logo.svg │ │ ├── person-circle-auth.svg │ │ ├── globe.svg │ │ ├── rocket.svg │ │ ├── jira-logo.svg │ │ ├── invision-logo.svg │ │ ├── visa.svg │ │ ├── slack-logo.svg │ │ ├── adobexd-logo.svg │ │ ├── logo-white.svg │ │ ├── logo.svg │ │ └── logo-colored.svg ├── components │ ├── .DS_Store │ ├── Card │ │ ├── Card.js │ │ ├── CardBody.js │ │ └── CardHeader.js │ ├── Icons │ │ └── IconBox.js │ ├── Layout │ │ ├── MainPanel.js │ │ ├── PanelContent.js │ │ └── PanelContainer.js │ ├── Separator │ │ └── Separator.js │ ├── RTLProvider │ │ └── RTLProvider.js │ ├── Charts │ │ ├── LineChart.js │ │ └── BarChart.js │ ├── Menu │ │ └── ItemContent.js │ ├── Tables │ │ ├── InvoicesRow.js │ │ ├── TimelineRow.js │ │ ├── TransactionRow.js │ │ ├── TablesProjectRow.js │ │ ├── DashboardTableRow.js │ │ ├── TablesTableRow.js │ │ └── BillingRow.js │ ├── FixedPlugin │ │ └── FixedPlugin.js │ ├── Navbars │ │ ├── SearchBar │ │ │ └── SearchBar.js │ │ ├── AdminNavbar.js │ │ ├── AdminNavbarLinks.js │ │ └── AuthNavbar.js │ ├── Sidebar │ │ ├── index.js │ │ ├── SidebarHelp.js │ │ └── SidebarContent.js │ └── Footer │ │ └── Footer.js ├── theme │ ├── additions │ │ ├── card │ │ │ ├── CardBody.js │ │ │ ├── CardHeader.js │ │ │ └── Card.js │ │ └── layout │ │ │ ├── PanelContainer.js │ │ │ ├── PanelContent.js │ │ │ └── MainPanel.js │ ├── foundations │ │ ├── text.js │ │ └── breakpoints.js │ ├── components │ │ ├── drawer.js │ │ ├── link.js │ │ ├── badge.js │ │ └── button.js │ ├── styles.js │ └── theme.js ├── views │ ├── Dashboard │ │ ├── Tables │ │ │ ├── index.js │ │ │ └── components │ │ │ │ ├── Projects.js │ │ │ │ └── Authors.js │ │ ├── Dashboard │ │ │ ├── components │ │ │ │ ├── ChartStatistics.js │ │ │ │ ├── SalesOverview.js │ │ │ │ ├── OrdersOverview.js │ │ │ │ ├── MiniStatistics.js │ │ │ │ ├── Projects.js │ │ │ │ ├── ActiveUsers.js │ │ │ │ ├── WorkWithTheRockets.js │ │ │ │ └── BuiltByDevelopers.js │ │ │ └── index.js │ │ ├── Billing │ │ │ ├── components │ │ │ │ ├── BillingInformation.js │ │ │ │ ├── Invoices.js │ │ │ │ ├── PaymentStatistics.js │ │ │ │ ├── CreditCard.js │ │ │ │ ├── Transactions.js │ │ │ │ └── PaymentMethod.js │ │ │ └── index.js │ │ ├── Profile │ │ │ ├── components │ │ │ │ ├── ProjectCard.js │ │ │ │ ├── PlatformSettings.js │ │ │ │ ├── Projects.js │ │ │ │ ├── ProfileInformation.js │ │ │ │ ├── Header.js │ │ │ │ └── Conversations.js │ │ │ └── index.js │ │ └── RTL │ │ │ └── index.js │ └── Auth │ │ └── SignIn.js ├── index.js ├── routes.js ├── layouts │ ├── Auth.js │ ├── Admin.js │ └── RTL.js └── variables │ └── charts.js ├── public ├── favicon.ico ├── apple-icon.png ├── manifest.json └── index.html ├── jsconfig.json ├── .gitpod.yml ├── ISSUE_TEMPLATE.md ├── genezio.yaml ├── LICENSE.md ├── package.json ├── gulpfile.js └── CHANGELOG.md /commit.sh: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock 3 | package-lock.json 4 | build 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/public/apple-icon.png -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/components/.DS_Store -------------------------------------------------------------------------------- /src/assets/img/BgSignUp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/BgSignUp.png -------------------------------------------------------------------------------- /src/assets/img/people-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/people-image.png -------------------------------------------------------------------------------- /src/assets/img/signInImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/signInImage.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/img/BackgroundCard1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/BackgroundCard1.png -------------------------------------------------------------------------------- /src/assets/img/ImageArchitect1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/ImageArchitect1.png -------------------------------------------------------------------------------- /src/assets/img/ImageArchitect2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/ImageArchitect2.png -------------------------------------------------------------------------------- /src/assets/img/ImageArchitect3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/ImageArchitect3.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar1.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar4.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar6.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar7.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar8.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar9.png -------------------------------------------------------------------------------- /src/assets/img/ProfileBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/ProfileBackground.png -------------------------------------------------------------------------------- /src/assets/img/SidebarHelpImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/SidebarHelpImage.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/purity-ui-dashboard/HEAD/src/assets/img/avatars/avatar10.png -------------------------------------------------------------------------------- /src/assets/svg/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/theme/additions/card/CardBody.js: -------------------------------------------------------------------------------- 1 | const CardBody = { 2 | baseStyle: { 3 | display: "flex", 4 | width: "100%", 5 | }, 6 | }; 7 | 8 | export const CardBodyComponent = { 9 | components: { 10 | CardBody, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/theme/additions/card/CardHeader.js: -------------------------------------------------------------------------------- 1 | const CardHeader = { 2 | baseStyle: { 3 | display: "flex", 4 | width: "100%" 5 | }, 6 | }; 7 | 8 | export const CardHeaderComponent = { 9 | components: { 10 | CardHeader, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/assets/svg/mastercard-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/theme/additions/layout/PanelContainer.js: -------------------------------------------------------------------------------- 1 | const PanelContainer = { 2 | baseStyle: { 3 | p: "30px 15px", 4 | minHeight: "calc(100vh - 123px)", 5 | }, 6 | }; 7 | 8 | export const PanelContainerComponent = { 9 | components: { 10 | PanelContainer, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/theme/additions/layout/PanelContent.js: -------------------------------------------------------------------------------- 1 | const PanelContent = { 2 | baseStyle: { 3 | ms: "auto", 4 | me: "auto", 5 | ps: "15px", 6 | pe: "15px", 7 | }, 8 | }; 9 | 10 | export const PanelContentComponent = { 11 | components: { 12 | PanelContent, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/theme/foundations/text.js: -------------------------------------------------------------------------------- 1 | export const buttonStyles = { 2 | components: { 3 | Button: { 4 | // 3. We can add a new visual variant 5 | variants: { 6 | "with-shadow": { 7 | boxShadow: "0 0 2px 2px #efdfde", 8 | }, 9 | }, 10 | }, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/assets/svg/person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme/foundations/breakpoints.js: -------------------------------------------------------------------------------- 1 | // 1. Import the utilities 2 | import { createBreakpoints } from "@chakra-ui/theme-tools"; 3 | // 2. Update the breakpoints as key-value pairs 4 | export const breakpoints = createBreakpoints({ 5 | sm: "320px", 6 | md: "768px", 7 | lg: "960px", 8 | xl: "1200px", 9 | }); 10 | -------------------------------------------------------------------------------- /src/assets/svg/watch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install && npm run build 7 | command: npm run start 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/theme/components/drawer.js: -------------------------------------------------------------------------------- 1 | export const drawerStyles = { 2 | components: { 3 | Drawer: { 4 | // 3. We can add a new visual variant 5 | variants: { 6 | "with-shadow": { 7 | placement: "right", 8 | boxShadow: "0 0 2px 2px #efdfde", 9 | bgColor: "red", 10 | }, 11 | }, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /src/assets/svg/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/theme/components/link.js: -------------------------------------------------------------------------------- 1 | export const linkStyles = { 2 | components: { 3 | Link: { 4 | // 3. We can add a new visual variant 5 | decoration: "none", 6 | baseStyle: { 7 | _hover: { 8 | textDecoration: "none", 9 | }, 10 | _focus: { 11 | boxShadow: "none", 12 | }, 13 | }, 14 | }, 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/svg/account-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function Card(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("Card", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default Card; 14 | -------------------------------------------------------------------------------- /src/components/Icons/IconBox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | 4 | export default function IconBox(props) { 5 | const { children, ...rest } = props; 6 | 7 | return ( 8 | 14 | {children} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Card/CardBody.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function CardBody(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("CardBody", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default CardBody; 14 | -------------------------------------------------------------------------------- /src/theme/styles.js: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | 3 | export const globalStyles = { 4 | colors: { 5 | gray: { 6 | 700: '#1f2733' 7 | } 8 | }, 9 | styles: { 10 | global: (props) => ({ 11 | body: { 12 | bg: mode('gray.50', 'gray.800')(props), 13 | fontFamily: "'Roboto', sans-serif" 14 | }, 15 | html: { 16 | fontFamily: "'Roboto', sans-serif" 17 | } 18 | }) 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /src/components/Card/CardHeader.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function CardHeader(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("CardHeader", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default CardHeader; 14 | -------------------------------------------------------------------------------- /src/components/Layout/MainPanel.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function MainPanel(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("MainPanel", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default MainPanel; 14 | -------------------------------------------------------------------------------- /src/assets/svg/credit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/Layout/PanelContent.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function PanelContent(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("PanelContent", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default PanelContent; 14 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/components/Layout/PanelContainer.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function PanelContainer(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("PanelContainer", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default PanelContainer; 14 | -------------------------------------------------------------------------------- /src/theme/components/badge.js: -------------------------------------------------------------------------------- 1 | import { baseStyle } from "@chakra-ui/react"; 2 | 3 | export const badgeStyles = { 4 | components: { 5 | Badge: { 6 | sizes: { 7 | md: { 8 | width: "65px", 9 | height: "25px" 10 | } 11 | }, 12 | baseStyle: { 13 | textTransform: "capitalize" 14 | } 15 | 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/components/Separator/Separator.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | 4 | export function Separator(props) { 5 | const { variant, children, ...rest } = props; 6 | return ( 7 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/svg/document.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/person-auth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/build.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/RTLProvider/RTLProvider.js: -------------------------------------------------------------------------------- 1 | import { CacheProvider } from "@emotion/react"; 2 | import createCache from "@emotion/cache"; 3 | import rtl from "stylis-plugin-rtl"; 4 | // NB: A unique `key` is important for it to work! 5 | const options = { 6 | rtl: { key: "css-ar", stylisPlugins: [rtl] }, 7 | ltr: { key: "css-en" }, 8 | }; 9 | export function RtlProvider({ children }) { 10 | const dir = document.documentElement.dir == "ar" ? "rtl" : "ltr"; 11 | const cache = createCache(options[dir]); 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: purity-ui-dashboard 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: build 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | - npm run build 16 | yamlVersion: 2 -------------------------------------------------------------------------------- /src/assets/svg/paypal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/wallet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/box-3d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/atlassian-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/theme/additions/card/Card.js: -------------------------------------------------------------------------------- 1 | const Card = { 2 | baseStyle: { 3 | p: "22px", 4 | display: "flex", 5 | flexDirection: "column", 6 | width: "100%", 7 | position: "relative", 8 | minWidth: "0px", 9 | wordWrap: "break-word", 10 | backgroundClip: "border-box", 11 | }, 12 | variants: { 13 | panel: (props) => ({ 14 | bg: props.colorMode === "dark" ? "gray.700" : "white", 15 | width: "100%", 16 | boxShadow: "0px 3.5px 5.5px rgba(0, 0, 0, 0.02)", 17 | borderRadius: "15px", 18 | }), 19 | }, 20 | defaultProps: { 21 | variant: "panel", 22 | }, 23 | }; 24 | 25 | export const CardComponent = { 26 | components: { 27 | Card, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/assets/svg/stats.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/theme/additions/layout/MainPanel.js: -------------------------------------------------------------------------------- 1 | const MainPanel = { 2 | baseStyle: { 3 | float: "right", 4 | maxWidth: "100%", 5 | overflow: "auto", 6 | position: "relative", 7 | maxHeight: "100%", 8 | transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)", 9 | transitionDuration: ".2s, .2s, .35s", 10 | transitionProperty: "top, bottom, width", 11 | transitionTimingFunction: "linear, linear, ease", 12 | }, 13 | variants: { 14 | main: (props) => ({ 15 | float: "right", 16 | }), 17 | rtl: (props) => ({ 18 | float: "left", 19 | }), 20 | }, 21 | defaultProps: { 22 | variant: "main", 23 | }, 24 | }; 25 | 26 | export const MainPanelComponent = { 27 | components: { 28 | MainPanel, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/assets/svg/cube.svg: -------------------------------------------------------------------------------- 1 | Cube -------------------------------------------------------------------------------- /src/assets/svg/spotify-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/views/Dashboard/Tables/index.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex } from "@chakra-ui/react"; 3 | import React from "react"; 4 | import Authors from "./components/Authors"; 5 | import Projects from "./components/Projects"; 6 | import { tablesTableData, dashboardTableData } from "variables/general"; 7 | 8 | function Tables() { 9 | return ( 10 | 11 | 16 | 21 | 22 | ); 23 | } 24 | 25 | export default Tables; 26 | -------------------------------------------------------------------------------- /src/components/Charts/LineChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactApexChart from "react-apexcharts"; 3 | import { lineChartData, lineChartOptions } from "variables/charts"; 4 | 5 | class LineChart extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | chartData: [], 11 | chartOptions: {}, 12 | }; 13 | } 14 | 15 | componentDidMount() { 16 | this.setState({ 17 | chartData: lineChartData, 18 | chartOptions: lineChartOptions, 19 | }); 20 | } 21 | 22 | render() { 23 | return ( 24 | 31 | ); 32 | } 33 | } 34 | 35 | export default LineChart; 36 | -------------------------------------------------------------------------------- /src/assets/svg/person-circle-auth.svg: -------------------------------------------------------------------------------- 1 | Person Circle -------------------------------------------------------------------------------- /src/assets/svg/globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/rocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/theme/components/button.js: -------------------------------------------------------------------------------- 1 | export const buttonStyles = { 2 | components: { 3 | Button: { 4 | variants: { 5 | "no-hover": { 6 | _hover: { 7 | boxShadow: "none", 8 | }, 9 | }, 10 | "transparent-with-icon": { 11 | bg: "transparent", 12 | fontWeight: "bold", 13 | borderRadius: "inherit", 14 | cursor: "pointer", 15 | _hover: "none", 16 | _active: { 17 | bg: "transparent", 18 | transform: "none", 19 | borderColor: "transparent", 20 | }, 21 | _focus: { 22 | boxShadow: "none", 23 | }, 24 | _hover: { 25 | boxShadow: "none", 26 | }, 27 | }, 28 | }, 29 | baseStyle: { 30 | borderRadius: "15px", 31 | _focus: { 32 | boxShadow: "none", 33 | }, 34 | }, 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/Charts/BarChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Card from "components/Card/Card"; 3 | import Chart from "react-apexcharts"; 4 | import { barChartData, barChartOptions } from "variables/charts"; 5 | 6 | class BarChart extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | chartData: [], 11 | chartOptions: {}, 12 | }; 13 | } 14 | 15 | componentDidMount() { 16 | this.setState({ 17 | chartData: barChartData, 18 | chartOptions: barChartOptions, 19 | }); 20 | } 21 | 22 | render() { 23 | return ( 24 | 31 | 38 | 39 | ); 40 | } 41 | } 42 | 43 | export default BarChart; 44 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Creative Tim (https://www.creative-tim.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/ChartStatistics.js: -------------------------------------------------------------------------------- 1 | import { Flex, Progress, Text, useColorModeValue } from "@chakra-ui/react"; 2 | import IconBox from "components/Icons/IconBox"; 3 | import React from "react"; 4 | 5 | const ChartStatistics = ({ title, amount, icon, percentage }) => { 6 | const iconTeal = useColorModeValue("teal.300", "teal.300"); 7 | const iconBoxInside = useColorModeValue("white", "white"); 8 | const textColor = useColorModeValue("gray.700", "white"); 9 | const overlayRef = React.useRef(); 10 | return ( 11 | 12 | 13 | 14 | {icon} 15 | 16 | 17 | {title} 18 | 19 | 20 | 21 | {amount} 22 | 23 | 29 | 30 | ); 31 | }; 32 | 33 | export default ChartStatistics; 34 | -------------------------------------------------------------------------------- /src/assets/svg/jira-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/Menu/ItemContent.js: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Avatar, Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | import { ClockIcon } from "components/Icons/Icons"; 4 | import PropTypes from "prop-types"; 5 | import React from "react"; 6 | 7 | export function ItemContent(props) { 8 | const navbarIcon = useColorModeValue("gray.500", "gray.200"); 9 | const notificationColor = useColorModeValue("gray.700", "white"); 10 | const spacing = " "; 11 | return ( 12 | <> 13 | 19 | 20 | 21 | 22 | {props.boldInfo} 23 | {spacing} 24 | 25 | {props.info} 26 | 27 | 28 | 29 | 30 | {props.time} 31 | 32 | 33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/svg/invision-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/svg/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/SalesOverview.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardHeader from "components/Card/CardHeader.js"; 6 | import React from "react"; 7 | 8 | const SalesOverview = ({ title, percentage, chart }) => { 9 | const textColor = useColorModeValue("gray.700", "white"); 10 | return ( 11 | 12 | 13 | 14 | 15 | {title} 16 | 17 | 18 | 0 ? "green.400" : "red.400"} 21 | fontWeight='bold'> 22 | {`${percentage}%`} more 23 | {" "} 24 | in 2021 25 | 26 | 27 | 28 | 29 | {chart} 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default SalesOverview; 36 | -------------------------------------------------------------------------------- /src/components/Tables/InvoicesRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | Icon, 6 | Spacer, 7 | Text, 8 | useColorModeValue, 9 | } from "@chakra-ui/react"; 10 | import React from "react"; 11 | 12 | function InvoicesRow(props) { 13 | const textColor = useColorModeValue("gray.700", "white"); 14 | const { date, code, price, format, logo } = props; 15 | 16 | return ( 17 | 18 | 19 | 20 | {date} 21 | 22 | 23 | {code} 24 | 25 | 26 | 27 | 28 | 29 | {price} 30 | 31 | 32 | 40 | 41 | ); 42 | } 43 | 44 | export default InvoicesRow; 45 | -------------------------------------------------------------------------------- /src/assets/svg/slack-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Purity UI Dashboard - v1.0.1 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/purity-ui-dashboard 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md) 10 | 11 | * Design by Creative Tim & Coded by Simmmple 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import ReactDOM from "react-dom"; 20 | import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; 21 | 22 | import AuthLayout from "layouts/Auth.js"; 23 | import AdminLayout from "layouts/Admin.js"; 24 | import RTLLayout from "layouts/RTL.js"; 25 | 26 | ReactDOM.render( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | , 35 | document.getElementById("root") 36 | ); 37 | -------------------------------------------------------------------------------- /src/views/Dashboard/Billing/components/BillingInformation.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | import CardHeader from "components/Card/CardHeader.js"; 7 | import BillingRow from "components/Tables/BillingRow"; 8 | import React from "react"; 9 | 10 | const BillingInformation = ({ title, data }) => { 11 | const textColor = useColorModeValue("gray.700", "white"); 12 | return ( 13 | 14 | 15 | 16 | 17 | {title} 18 | 19 | 20 | 21 | 22 | {data.map((row) => { 23 | return ( 24 | 30 | ); 31 | })} 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default BillingInformation; 40 | -------------------------------------------------------------------------------- /src/theme/theme.js: -------------------------------------------------------------------------------- 1 | import { extendTheme } from '@chakra-ui/react'; 2 | import { globalStyles } from './styles'; 3 | import { breakpoints } from './foundations/breakpoints'; 4 | import { buttonStyles } from './components/button'; 5 | import { badgeStyles } from './components/badge'; 6 | import { linkStyles } from './components/link'; 7 | import { drawerStyles } from './components/drawer'; 8 | import { CardComponent } from './additions/card/Card'; 9 | import { CardBodyComponent } from './additions/card/CardBody'; 10 | import { CardHeaderComponent } from './additions/card/CardHeader'; 11 | import { MainPanelComponent } from './additions/layout/MainPanel'; 12 | import { PanelContentComponent } from './additions/layout/PanelContent'; 13 | import { PanelContainerComponent } from './additions/layout/PanelContainer'; 14 | // import { mode } from "@chakra-ui/theme-tools"; 15 | export default extendTheme( 16 | { breakpoints }, // Breakpoints 17 | globalStyles, 18 | buttonStyles, // Button styles 19 | badgeStyles, // Badge styles 20 | linkStyles, // Link styles 21 | drawerStyles, // Sidebar variant for Chakra's drawer 22 | CardComponent, // Card component 23 | CardBodyComponent, // Card Body component 24 | CardHeaderComponent, // Card Header component 25 | MainPanelComponent, // Main Panel component 26 | PanelContentComponent, // Panel Content component 27 | PanelContainerComponent // Panel Container component 28 | ); 29 | -------------------------------------------------------------------------------- /src/components/Tables/TimelineRow.js: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; 2 | import React from "react"; 3 | 4 | function TimelineRow(props) { 5 | const { logo, title, date, color, index, arrLength } = props; 6 | const textColor = useColorModeValue("gray.700", "white.300"); 7 | const bgIconColor = useColorModeValue("white.300", "gray.700"); 8 | 9 | return ( 10 | 11 | 12 | 24 | 29 | 30 | 31 | 32 | {title} 33 | 34 | 35 | {date} 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default TimelineRow; 43 | -------------------------------------------------------------------------------- /src/components/FixedPlugin/FixedPlugin.js: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { Button, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom Icons 4 | import { SettingsIcon } from "components/Icons/Icons"; 5 | import PropTypes from "prop-types"; 6 | import React from "react"; 7 | 8 | export default function FixedPlugin(props) { 9 | const { secondary, onChange, onSwitch, fixed, ...rest } = props; 10 | // Chakra Color Mode 11 | let navbarIcon = useColorModeValue("gray.500", "gray.200"); 12 | let bgButton = useColorModeValue("white", "gray.600"); 13 | let fixedDisplay = "flex"; 14 | if (props.secondary) { 15 | fixedDisplay = "none"; 16 | } 17 | 18 | const settingsRef = React.useRef(); 19 | return ( 20 | <> 21 | 42 | 43 | ); 44 | } 45 | 46 | FixedPlugin.propTypes = { 47 | fixed: PropTypes.bool, 48 | onChange: PropTypes.func, 49 | onSwitch: PropTypes.func, 50 | }; 51 | -------------------------------------------------------------------------------- /src/components/Navbars/SearchBar/SearchBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | IconButton, 4 | Input, 5 | InputGroup, 6 | InputLeftElement, 7 | useColorModeValue, 8 | } from "@chakra-ui/react"; 9 | import { SearchIcon } from "@chakra-ui/icons"; 10 | export function SearchBar(props) { 11 | // Pass the computed styles into the `__css` prop 12 | const { variant, children, ...rest } = props; 13 | // Chakra Color Mode 14 | const mainTeal = useColorModeValue("teal.300", "teal.300"); 15 | const searchIconColor = useColorModeValue("gray.700", "gray.200"); 16 | const inputBg = useColorModeValue("white", "gray.800"); 17 | return ( 18 | 29 | } 44 | > 45 | } 46 | /> 47 | 53 | 54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/components/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | // chakra imports 3 | import { 4 | Box, useColorModeValue 5 | } from "@chakra-ui/react"; 6 | import React from "react"; 7 | import SidebarContent from "./SidebarContent"; 8 | 9 | // FUNCTIONS 10 | 11 | function Sidebar(props) { 12 | // to check for active links and opened collapses 13 | const mainPanel = React.useRef(); 14 | let variantChange = "0.2s linear"; 15 | 16 | const { logoText, routes, sidebarVariant } = props; 17 | 18 | // BRAND 19 | // Chakra Color Mode 20 | let sidebarBg = "none"; 21 | let sidebarRadius = "0px"; 22 | let sidebarMargins = "0px"; 23 | if (sidebarVariant === "opaque") { 24 | sidebarBg = useColorModeValue("white", "gray.700"); 25 | sidebarRadius = "16px"; 26 | sidebarMargins = "16px 0px 16px 16px"; 27 | } 28 | 29 | // SIDEBAR 30 | return ( 31 | 32 | 33 | 50 | 55 | 56 | 57 | 58 | ); 59 | } 60 | 61 | 62 | 63 | 64 | export default Sidebar; 65 | -------------------------------------------------------------------------------- /src/views/Dashboard/Billing/components/Invoices.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Button, Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | import CardHeader from "components/Card/CardHeader.js"; 7 | import InvoicesRow from "components/Tables/InvoicesRow"; 8 | import React from "react"; 9 | 10 | const Invoices = ({ title, data }) => { 11 | const textColor = useColorModeValue("gray.700", "white"); 12 | 13 | return ( 14 | 18 | 19 | 20 | 21 | {title} 22 | 23 | 32 | 33 | 34 | 35 | 36 | {data.map((row) => { 37 | return ( 38 | 45 | ); 46 | })} 47 | 48 | 49 | 50 | ); 51 | }; 52 | 53 | export default Invoices; 54 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/OrdersOverview.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | import CardHeader from "components/Card/CardHeader.js"; 7 | import TimelineRow from "components/Tables/TimelineRow"; 8 | import React from "react"; 9 | 10 | const OrdersOverview = ({ title, amount, data }) => { 11 | const textColor = useColorModeValue("gray.700", "white"); 12 | 13 | return ( 14 | 15 | 16 | 17 | 18 | {title} 19 | 20 | 21 | 22 | {`${amount}%`} 23 | {" "} 24 | this month. 25 | 26 | 27 | 28 | 29 | 30 | {data.map((row, index, arr) => { 31 | return ( 32 | 41 | ); 42 | })} 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default OrdersOverview; 50 | -------------------------------------------------------------------------------- /src/components/Sidebar/SidebarHelp.js: -------------------------------------------------------------------------------- 1 | import { QuestionIcon } from "@chakra-ui/icons"; 2 | import { Button, Flex, Link, Text } from "@chakra-ui/react"; 3 | import SidebarHelpImage from "assets/img/SidebarHelpImage.png"; 4 | import IconBox from "components/Icons/IconBox"; 5 | import React from "react"; 6 | 7 | export function SidebarHelp(props) { 8 | // Pass the computed styles into the `__css` prop 9 | const { children, ...rest } = props; 10 | return ( 11 | 22 | 23 | 24 | 25 | 26 | Need help? 27 | 28 | 29 | Please check our docs 30 | 31 | 35 | 53 | 54 | 55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /src/views/Dashboard/Billing/components/PaymentStatistics.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | import IconBox from "components/Icons/IconBox"; 7 | import { Separator } from "components/Separator/Separator"; 8 | import React from "react"; 9 | 10 | const PaymentStatistics = ({ icon, title, description, amount }) => { 11 | const iconTeal = useColorModeValue("teal.300", "teal.300"); 12 | const textColor = useColorModeValue("gray.700", "white"); 13 | 14 | return ( 15 | 16 | 17 | 18 | 19 | {icon} 20 | 21 | 28 | 29 | {title} 30 | 31 | 36 | {description} 37 | 38 | 39 | 40 | 41 | {`%${amount}`} 42 | 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default PaymentStatistics; 50 | -------------------------------------------------------------------------------- /src/components/Tables/TransactionRow.js: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; 2 | import React from "react"; 3 | 4 | function TransactionRow(props) { 5 | const textColor = useColorModeValue("gray.700", "white"); 6 | const { name, date, logo, price } = props; 7 | 8 | return ( 9 | 10 | 11 | 28 | 29 | 30 | 31 | 36 | {name} 37 | 38 | 43 | {date} 44 | 45 | 46 | 47 | 56 | 57 | {price} 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | export default TransactionRow; 65 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/MiniStatistics.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Flex, 4 | Stat, 5 | StatHelpText, 6 | StatLabel, 7 | StatNumber, 8 | useColorModeValue, 9 | } from "@chakra-ui/react"; 10 | // Custom components 11 | import Card from "components/Card/Card.js"; 12 | import CardBody from "components/Card/CardBody.js"; 13 | import IconBox from "components/Icons/IconBox"; 14 | import React from "react"; 15 | 16 | const MiniStatistics = ({ title, amount, percentage, icon }) => { 17 | const iconTeal = useColorModeValue("teal.300", "teal.300"); 18 | const textColor = useColorModeValue("gray.700", "white"); 19 | 20 | return ( 21 | 22 | 23 | 24 | 25 | 30 | {title} 31 | 32 | 33 | 34 | {amount} 35 | 36 | 0 ? "green.400" : "red.400"} 41 | fontWeight='bold' 42 | ps='3px' 43 | fontSize='md'> 44 | {percentage > 0 ? `+${percentage}%` : `${percentage}%`} 45 | 46 | 47 | 48 | 49 | {icon} 50 | 51 | 52 | 53 | 54 | ); 55 | }; 56 | 57 | export default MiniStatistics; 58 | -------------------------------------------------------------------------------- /src/assets/svg/adobexd-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/views/Dashboard/Profile/components/ProjectCard.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Avatar, 4 | AvatarGroup, 5 | Box, 6 | Button, 7 | Flex, 8 | Image, 9 | Text, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import React from "react"; 13 | 14 | const ProjectCard = ({ image, name, category, avatars, description }) => { 15 | // Chakra color mode 16 | const textColor = useColorModeValue("gray.700", "white"); 17 | 18 | return ( 19 | 20 | 21 | 22 | 29 | 30 | 31 | 32 | {name} 33 | 34 | 35 | {category} 36 | 37 | 38 | {description} 39 | 40 | 41 | 50 | 51 | {avatars.map((el, idx) => { 52 | return ; 53 | })} 54 | 55 | 56 | 57 | 58 | ); 59 | }; 60 | 61 | export default ProjectCard; 62 | -------------------------------------------------------------------------------- /src/components/Tables/TablesProjectRow.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Tr, 4 | Td, 5 | Flex, 6 | Text, 7 | Progress, 8 | Icon, 9 | Button, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import { FaEllipsisV } from "react-icons/fa"; 13 | 14 | function DashboardTableRow(props) { 15 | const { logo, name, status, budget, progression } = props; 16 | const textColor = useColorModeValue("gray.700", "white"); 17 | return ( 18 | 19 | 20 | 21 | 22 | 28 | {name} 29 | 30 | 31 | 32 | 33 | 34 | {budget} 35 | 36 | 37 | 38 | 39 | {status} 40 | 41 | 42 | 43 | 44 | {`${progression}%`} 50 | 56 | 57 | 58 | 59 | 62 | 63 | 64 | ); 65 | } 66 | 67 | export default DashboardTableRow; 68 | -------------------------------------------------------------------------------- /src/views/Dashboard/Tables/components/Projects.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Flex, 4 | Table, 5 | Tbody, 6 | Text, 7 | Th, 8 | Thead, 9 | Tr, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | // Custom components 13 | import Card from "components/Card/Card.js"; 14 | import CardBody from "components/Card/CardBody.js"; 15 | import CardHeader from "components/Card/CardHeader.js"; 16 | import TablesProjectRow from "components/Tables/TablesProjectRow"; 17 | import React from "react"; 18 | 19 | const Projects = ({ title, captions, data }) => { 20 | const textColor = useColorModeValue("gray.700", "white"); 21 | return ( 22 | 23 | 24 | 25 | 26 | {title} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | {captions.map((caption, idx) => { 35 | return ( 36 | 39 | ); 40 | })} 41 | 42 | 43 | 44 | {data.map((row) => { 45 | return ( 46 | 54 | ); 55 | })} 56 | 57 |
37 | {caption} 38 |
58 | 59 | 60 | ); 61 | }; 62 | 63 | export default Projects; 64 | -------------------------------------------------------------------------------- /src/views/Dashboard/Tables/components/Authors.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Table, 4 | Tbody, 5 | Text, 6 | Th, 7 | Thead, 8 | Tr, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | // Custom components 12 | import Card from "components/Card/Card.js"; 13 | import CardBody from "components/Card/CardBody.js"; 14 | import CardHeader from "components/Card/CardHeader.js"; 15 | import TablesTableRow from "components/Tables/TablesTableRow"; 16 | import React from "react"; 17 | 18 | const Authors = ({ title, captions, data }) => { 19 | const textColor = useColorModeValue("gray.700", "white"); 20 | return ( 21 | 22 | 23 | 24 | {title} 25 | 26 | 27 | 28 | 29 | 30 | 31 | {captions.map((caption, idx) => { 32 | return ( 33 | 36 | ); 37 | })} 38 | 39 | 40 | 41 | {data.map((row) => { 42 | return ( 43 | 53 | ); 54 | })} 55 | 56 |
34 | {caption} 35 |
57 | 58 | 59 | ); 60 | }; 61 | 62 | export default Authors; 63 | -------------------------------------------------------------------------------- /src/components/Tables/DashboardTableRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Avatar, 3 | AvatarGroup, 4 | Flex, 5 | Icon, 6 | Progress, 7 | Td, 8 | Text, 9 | Tr, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import React from "react"; 13 | 14 | function DashboardTableRow(props) { 15 | const { logo, name, members, budget, progression } = props; 16 | const textColor = useColorModeValue("gray.700", "white"); 17 | return ( 18 | 19 | 20 | 21 | 22 | 28 | {name} 29 | 30 | 31 | 32 | 33 | 34 | 35 | {members.map((member) => { 36 | return ( 37 | 43 | ); 44 | })} 45 | 46 | 47 | 48 | 49 | {budget} 50 | 51 | 52 | 53 | 54 | {`${progression}%`} 60 | 66 | 67 | 68 | 69 | ); 70 | } 71 | 72 | export default DashboardTableRow; 73 | -------------------------------------------------------------------------------- /src/views/Dashboard/Billing/components/CreditCard.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Spacer, Text } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | import React from "react"; 7 | 8 | const CreditCard = ({ 9 | backgroundImage, 10 | title, 11 | icon, 12 | number, 13 | validity, 14 | cvv, 15 | }) => { 16 | return ( 17 | 25 | 26 | 32 | 33 | 34 | {title} 35 | 36 | {icon} 37 | 38 | 39 | 40 | 41 | 42 | {number} 43 | 44 | 45 | 46 | 47 | {validity.name} 48 | 49 | {validity.date} 50 | 51 | 52 | 53 | {cvv.name} 54 | 55 | {cvv.code} 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | ); 64 | }; 65 | 66 | export default CreditCard; 67 | -------------------------------------------------------------------------------- /src/assets/svg/logo-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | // import 2 | import Dashboard from "views/Dashboard/Dashboard"; 3 | import Tables from "views/Dashboard/Tables"; 4 | import Billing from "views/Dashboard/Billing"; 5 | import RTLPage from "views/Dashboard/RTL"; 6 | import Profile from "views/Dashboard/Profile"; 7 | import SignIn from "views/Auth/SignIn.js"; 8 | import SignUp from "views/Auth/SignUp.js"; 9 | 10 | import { 11 | HomeIcon, 12 | StatsIcon, 13 | CreditIcon, 14 | PersonIcon, 15 | DocumentIcon, 16 | RocketIcon, 17 | SupportIcon, 18 | } from "components/Icons/Icons"; 19 | 20 | var dashRoutes = [ 21 | { 22 | path: "/dashboard", 23 | name: "Dashboard", 24 | rtlName: "لوحة القيادة", 25 | icon: , 26 | component: Dashboard, 27 | layout: "/admin", 28 | }, 29 | { 30 | path: "/tables", 31 | name: "Tables", 32 | rtlName: "لوحة القيادة", 33 | icon: , 34 | component: Tables, 35 | layout: "/admin", 36 | }, 37 | { 38 | path: "/billing", 39 | name: "Billing", 40 | rtlName: "لوحة القيادة", 41 | icon: , 42 | component: Billing, 43 | layout: "/admin", 44 | }, 45 | { 46 | path: "/rtl-support-page", 47 | name: "RTL", 48 | rtlName: "آرتيإل", 49 | icon: , 50 | component: RTLPage, 51 | layout: "/rtl", 52 | }, 53 | { 54 | name: "ACCOUNT PAGES", 55 | category: "account", 56 | rtlName: "صفحات", 57 | state: "pageCollapse", 58 | views: [ 59 | { 60 | path: "/profile", 61 | name: "Profile", 62 | rtlName: "لوحة القيادة", 63 | icon: , 64 | secondaryNavbar: true, 65 | component: Profile, 66 | layout: "/admin", 67 | }, 68 | { 69 | path: "/signin", 70 | name: "Sign In", 71 | rtlName: "لوحة القيادة", 72 | icon: , 73 | component: SignIn, 74 | layout: "/auth", 75 | }, 76 | { 77 | path: "/signup", 78 | name: "Sign Up", 79 | rtlName: "لوحة القيادة", 80 | icon: , 81 | secondaryNavbar: true, 82 | component: SignUp, 83 | layout: "/auth", 84 | }, 85 | ], 86 | }, 87 | ]; 88 | export default dashRoutes; 89 | -------------------------------------------------------------------------------- /src/components/Tables/TablesTableRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Avatar, 3 | Badge, 4 | Button, 5 | Flex, 6 | Td, 7 | Text, 8 | Tr, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | import React from "react"; 12 | 13 | function TablesTableRow(props) { 14 | const { logo, name, email, subdomain, domain, status, date } = props; 15 | const textColor = useColorModeValue("gray.700", "white"); 16 | const bgStatus = useColorModeValue("gray.400", "#1a202c"); 17 | const colorStatus = useColorModeValue("white", "gray.400"); 18 | 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | 31 | {name} 32 | 33 | 34 | {email} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | {domain} 44 | 45 | 46 | {subdomain} 47 | 48 | 49 | 50 | 51 | 58 | {status} 59 | 60 | 61 | 62 | 63 | {date} 64 | 65 | 66 | 67 | 77 | 78 | 79 | ); 80 | } 81 | 82 | export default TablesTableRow; 83 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/Projects.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Flex, 4 | Icon, 5 | Table, 6 | Tbody, 7 | Text, 8 | Th, 9 | Thead, 10 | Tr, 11 | useColorModeValue, 12 | } from "@chakra-ui/react"; 13 | // Custom components 14 | import Card from "components/Card/Card.js"; 15 | import CardHeader from "components/Card/CardHeader.js"; 16 | import DashboardTableRow from "components/Tables/DashboardTableRow"; 17 | import React from "react"; 18 | import { IoCheckmarkDoneCircleSharp } from "react-icons/io5"; 19 | 20 | const Projects = ({ title, amount, captions, data }) => { 21 | const textColor = useColorModeValue("gray.700", "white"); 22 | 23 | return ( 24 | 25 | 26 | 27 | 28 | {title} 29 | 30 | 31 | 38 | 39 | 40 | {amount} done 41 | {" "} 42 | this month. 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | {captions.map((caption, idx) => { 51 | return ( 52 | 55 | ); 56 | })} 57 | 58 | 59 | 60 | {data.map((row) => { 61 | return ( 62 | 70 | ); 71 | })} 72 | 73 |
53 | {caption} 54 |
74 | 75 | ); 76 | }; 77 | 78 | export default Projects; 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "purity-dashboard-react", 3 | "version": "2.0.2", 4 | "private": true, 5 | "homepage": "https://demos.creative-tim.com/purity-ui-dashboard/#/", 6 | "dependencies": { 7 | "@chakra-ui/icons": "^1.1.5", 8 | "@chakra-ui/react": "1.8.8", 9 | "@chakra-ui/system": "^1.12.1", 10 | "@chakra-ui/theme-tools": "^1.3.6", 11 | "@emotion/cache": "^11.7.1", 12 | "@emotion/react": "^11.8.1", 13 | "@emotion/styled": "^11.8.1", 14 | "@fontsource/open-sans": "^4.5.0", 15 | "@fontsource/raleway": "^4.5.0", 16 | "@fontsource/roboto": "^4.5.8", 17 | "ajv": "^8.17.1", 18 | "apexcharts": "^3.27.3", 19 | "classnames": "2.3.1", 20 | "cross-env": "^7.0.3", 21 | "framer-motion": "^4.1.17", 22 | "match-sorter": "6.3.0", 23 | "moment": "2.29.1", 24 | "node-sass": "^9.0.0", 25 | "nouislider": "15.0.0", 26 | "react": "16.14.0", 27 | "react-apexcharts": "^1.3.9", 28 | "react-big-calendar": "0.33.2", 29 | "react-bootstrap-sweetalert": "5.2.0", 30 | "react-datetime": "3.1.1", 31 | "react-dom": "16.14.0", 32 | "react-github-btn": "^1.2.1", 33 | "react-icons": "^4.2.0", 34 | "react-jvectormap": "0.0.16", 35 | "react-router-dom": "5.2.1", 36 | "react-scripts": "5.0.0", 37 | "react-swipeable-views": "0.14.0", 38 | "react-table": "7.7.0", 39 | "react-tagsinput": "3.19.0", 40 | "stylis": "^4.0.13", 41 | "stylis-plugin-rtl": "^2.1.1" 42 | }, 43 | "resolutions": { 44 | "react-error-overlay": "6.0.11" 45 | }, 46 | "scripts": { 47 | "start": "react-scripts start", 48 | "build": "cross-env CI=false cross-env PUBLIC_URL=/ react-scripts build && gulp licenses", 49 | "test": "react-scripts test --env=jsdom", 50 | "eject": "react-scripts eject", 51 | "deploy": "npm run build", 52 | "lint:check": "eslint . --ext=js,jsx; exit 0", 53 | "lint:fix": "eslint . --ext=js,jsx --fix; exit 0", 54 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 55 | }, 56 | "optionalDependencies": { 57 | "@babel/core": "7.14.0", 58 | "typescript": "4.2.4" 59 | }, 60 | "devDependencies": { 61 | "@babel/plugin-transform-react-jsx-source": "^7.14.5", 62 | "eslint-config-prettier": "8.3.0", 63 | "eslint-plugin-prettier": "3.4.0", 64 | "gulp": "4.0.2", 65 | "gulp-append-prepend": "1.0.9", 66 | "prettier": "2.2.1" 67 | }, 68 | "browserslist": { 69 | "production": [ 70 | "cover 99.8%", 71 | "not dead", 72 | "not OperaMini all" 73 | ], 74 | "development": [ 75 | "cover 99.8%", 76 | "not dead", 77 | "not OperaMini all" 78 | ] 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/ActiveUsers.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | // Custom icons 7 | import { 8 | CartIcon, 9 | RocketIcon, 10 | StatsIcon, 11 | WalletIcon, 12 | } from "components/Icons/Icons.js"; 13 | import React from "react"; 14 | import ChartStatistics from "./ChartStatistics"; 15 | 16 | const ActiveUsers = ({ title, percentage, chart }) => { 17 | const iconBoxInside = useColorModeValue("white", "white"); 18 | const textColor = useColorModeValue("gray.700", "white"); 19 | return ( 20 | 21 | 22 | 23 | {chart} 24 | 25 | 26 | {title} 27 | 28 | 29 | 0 ? "green.400" : "red.400"} 32 | fontWeight='bold'> 33 | {percentage > 0 ? `+${percentage}%` : `-${percentage}%`} 34 | {" "} 35 | than last week 36 | 37 | 38 | 39 | } 44 | /> 45 | } 50 | /> 51 | } 56 | /> 57 | } 62 | /> 63 | 64 | 65 | 66 | 67 | ); 68 | }; 69 | 70 | export default ActiveUsers; 71 | -------------------------------------------------------------------------------- /src/components/Tables/BillingRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | Icon, 6 | Text, 7 | useColorModeValue, 8 | } from "@chakra-ui/react"; 9 | import React from "react"; 10 | import { FaPencilAlt, FaTrashAlt } from "react-icons/fa"; 11 | 12 | function BillingRow(props) { 13 | const textColor = useColorModeValue("gray.700", "white"); 14 | const bgColor = useColorModeValue("#F8F9FA", "gray.800"); 15 | const nameColor = useColorModeValue("gray.500", "white"); 16 | const { name, company, email, number } = props; 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | {name} 24 | 25 | 26 | Company Name:{" "} 27 | 28 | {company} 29 | 30 | 31 | 32 | Email Address:{" "} 33 | 34 | {email} 35 | 36 | 37 | 38 | VAT Number:{" "} 39 | 40 | {number} 41 | 42 | 43 | 44 | 49 | 62 | 70 | 71 | 72 | 73 | ); 74 | } 75 | 76 | export default BillingRow; 77 | -------------------------------------------------------------------------------- /src/views/Dashboard/Profile/index.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Grid, useColorModeValue } from "@chakra-ui/react"; 3 | import avatar4 from "assets/img/avatars/avatar4.png"; 4 | import ProfileBgImage from "assets/img/ProfileBackground.png"; 5 | import React from "react"; 6 | import { FaCube, FaPenFancy } from "react-icons/fa"; 7 | import { IoDocumentsSharp } from "react-icons/io5"; 8 | import Conversations from "./components/Conversations"; 9 | import Header from "./components/Header"; 10 | import PlatformSettings from "./components/PlatformSettings"; 11 | import ProfileInformation from "./components/ProfileInformation"; 12 | import Projects from "./components/Projects"; 13 | 14 | function Profile() { 15 | // Chakra color mode 16 | const textColor = useColorModeValue("gray.700", "white"); 17 | const bgProfile = useColorModeValue( 18 | "hsla(0,0%,100%,.8)", 19 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)" 20 | ); 21 | 22 | return ( 23 | 24 |
, 34 | }, 35 | { 36 | name: "TEAMS", 37 | icon: , 38 | }, 39 | { 40 | name: "PROJECTS", 41 | icon: , 42 | }, 43 | ]} 44 | /> 45 | 46 | 51 | 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | 68 | export default Profile; 69 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Box, 4 | Button, 5 | Flex, 6 | Icon, 7 | Portal, 8 | Spacer, 9 | Text, 10 | } from "@chakra-ui/react"; 11 | // Custom components 12 | import Card from "components/Card/Card.js"; 13 | import CardBody from "components/Card/CardBody.js"; 14 | import React from "react"; 15 | // react icons 16 | import { BsArrowRight } from "react-icons/bs"; 17 | 18 | const WorkWithTheRockets = ({ title, description, backgroundImage }) => { 19 | const overlayRef = React.useRef(); 20 | return ( 21 | 22 | 32 | 39 | 40 | 45 | 46 | {title} 47 | 48 | 49 | {description} 50 | 51 | 52 | 53 | 73 | 74 | 75 | 76 | 77 | 78 | ); 79 | }; 80 | 81 | export default WorkWithTheRockets; 82 | -------------------------------------------------------------------------------- /src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Button, 4 | Flex, 5 | Icon, 6 | Spacer, 7 | Text, 8 | useColorModeValue, 9 | } from "@chakra-ui/react"; 10 | // Custom components 11 | import Card from "components/Card/Card.js"; 12 | import CardBody from "components/Card/CardBody.js"; 13 | import React from "react"; 14 | // react icons 15 | import { BsArrowRight } from "react-icons/bs"; 16 | 17 | const BuiltByDevelopers = ({ title, name, description, image }) => { 18 | const textColor = useColorModeValue("gray.700", "white"); 19 | 20 | return ( 21 | 22 | 23 | 24 | 29 | 30 | {title} 31 | 32 | 33 | {name} 34 | 35 | 36 | {description} 37 | 38 | 39 | 40 | 67 | 68 | 69 | 70 | 77 | {image} 78 | 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | export default BuiltByDevelopers; 86 | -------------------------------------------------------------------------------- /src/views/Dashboard/Profile/components/PlatformSettings.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Switch, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card"; 5 | import CardBody from "components/Card/CardBody"; 6 | import CardHeader from "components/Card/CardHeader"; 7 | import React from "react"; 8 | 9 | const PlatformSettings = ({ title, subtitle1, subtitle2 }) => { 10 | // Chakra color mode 11 | const textColor = useColorModeValue("gray.700", "white"); 12 | return ( 13 | 14 | 15 | 16 | {title} 17 | 18 | 19 | 20 | 21 | 22 | {subtitle1} 23 | 24 | 25 | 26 | 27 | Email me when someone follows me 28 | 29 | 30 | 31 | 32 | 33 | Email me when someone answers on my post 34 | 35 | 36 | 37 | 38 | 39 | Email me when someone mentions me 40 | 41 | 42 | 47 | {subtitle2} 48 | 49 | 50 | 51 | 52 | New launches and projects 53 | 54 | 55 | 56 | 57 | 58 | Monthly product changes 59 | 60 | 61 | 62 | 63 | 64 | Subscribe to newsletter 65 | 66 | 67 | 68 | 69 | 70 | ); 71 | }; 72 | 73 | export default PlatformSettings; 74 | -------------------------------------------------------------------------------- /src/views/Dashboard/Billing/components/Transactions.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom components 4 | import Card from "components/Card/Card.js"; 5 | import CardBody from "components/Card/CardBody.js"; 6 | import CardHeader from "components/Card/CardHeader.js"; 7 | import TransactionRow from "components/Tables/TransactionRow"; 8 | import React from "react"; 9 | import { FaRegCalendarAlt } from "react-icons/fa"; 10 | 11 | const Transactions = ({ 12 | title, 13 | date, 14 | newestTransactions, 15 | olderTransactions, 16 | }) => { 17 | // Chakra color mode 18 | const textColor = useColorModeValue("gray.700", "white"); 19 | 20 | return ( 21 | 22 | 23 | 24 | 30 | 34 | {title} 35 | 36 | 37 | 42 | 43 | {date} 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 56 | NEWEST 57 | 58 | {newestTransactions.map((row) => { 59 | return ( 60 | 66 | ); 67 | })} 68 | 73 | OLDER 74 | 75 | {olderTransactions.map((row) => { 76 | return ( 77 | 83 | ); 84 | })} 85 | 86 | 87 | 88 | ); 89 | }; 90 | 91 | export default Transactions; 92 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const gap = require("gulp-append-prepend"); 3 | 4 | gulp.task("licenses", async function () { 5 | // this is to add Creative Tim licenses in the production mode for the minified js 6 | gulp 7 | .src("build/static/js/*chunk.js", { base: "./" }) 8 | .pipe( 9 | gap.prependText(`/*! 10 | 11 | ========================================================= 12 | * Purity UI Dashboard - v1.0.1 13 | ========================================================= 14 | 15 | * Product Page: https://www.creative-tim.com/product/purity-ui-dashboard 16 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 17 | * Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md) 18 | 19 | * Design by Creative Tim & Coded by Simmmple 20 | 21 | ========================================================= 22 | 23 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 24 | 25 | */`) 26 | ) 27 | .pipe(gulp.dest("./", { overwrite: true })); 28 | 29 | // this is to add Creative Tim licenses in the production mode for the minified html 30 | gulp 31 | .src("build/index.html", { base: "./" }) 32 | .pipe( 33 | gap.prependText(``) 52 | ) 53 | .pipe(gulp.dest("./", { overwrite: true })); 54 | 55 | // this is to add Creative Tim licenses in the production mode for the minified css 56 | gulp 57 | .src("build/static/css/*chunk.css", { base: "./" }) 58 | .pipe( 59 | gap.prependText(`/*! 60 | 61 | ========================================================= 62 | * Purity UI Dashboard - v1.0.1 63 | ========================================================= 64 | 65 | * Product Page: https://www.creative-tim.com/product/purity-ui-dashboard 66 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 67 | * Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md) 68 | 69 | * Design by Creative Tim & Coded by Simmmple 70 | 71 | ========================================================= 72 | 73 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 74 | 75 | */`) 76 | ) 77 | .pipe(gulp.dest("./", { overwrite: true })); 78 | return; 79 | }); 80 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { Flex, Link, List, ListItem, Text } from "@chakra-ui/react"; 4 | import PropTypes from "prop-types"; 5 | 6 | export default function Footer(props) { 7 | // const linkTeal = useColorModeValue("teal.400", "red.200");= 8 | return ( 9 | 22 | 30 | © {1900 + new Date().getYear()},{" "} 31 | 32 | {document.documentElement.dir === "rtl" 33 | ? " مصنوع من ❤️ بواسطة" 34 | : "Made with ❤️ by "} 35 | 36 | 42 | {document.documentElement.dir === "rtl" 43 | ? " توقيت الإبداعية" 44 | : "Creative Tim "} 45 | 46 | & 47 | 53 | {document.documentElement.dir === "rtl" ? "سيممبل " : " Simmmple"} 54 | 55 | {document.documentElement.dir === "rtl" 56 | ? "للحصول على ويب أفضل" 57 | : " for a better web"} 58 | 59 | 60 | 66 | 67 | {document.documentElement.dir === "rtl" 68 | ? "توقيت الإبداعية" 69 | : "Creative Tim"} 70 | 71 | 72 | 78 | 79 | {document.documentElement.dir === "rtl" ? "سيممبل" : "Simmmple"} 80 | 81 | 82 | 88 | 93 | {document.documentElement.dir === "rtl" ? "مدونة" : "Blog"} 94 | 95 | 96 | 97 | 102 | {document.documentElement.dir === "rtl" ? "رخصة" : "License"} 103 | 104 | 105 | 106 | 107 | ); 108 | } 109 | -------------------------------------------------------------------------------- /src/layouts/Auth.js: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Box, ChakraProvider, Portal } from '@chakra-ui/react'; 3 | import Footer from 'components/Footer/Footer.js'; 4 | // core components 5 | import AuthNavbar from 'components/Navbars/AuthNavbar.js'; 6 | import React from 'react'; 7 | import { Redirect, Route, Switch } from 'react-router-dom'; 8 | import routes from 'routes.js'; 9 | import '@fontsource/roboto/400.css'; 10 | import '@fontsource/roboto/500.css'; 11 | import '@fontsource/roboto/700.css'; 12 | import theme from 'theme/theme.js'; 13 | 14 | export default function Pages(props) { 15 | const { ...rest } = props; 16 | // ref for the wrapper div 17 | const wrapper = React.createRef(); 18 | React.useEffect(() => { 19 | document.body.style.overflow = 'unset'; 20 | // Specify how to clean up after this effect: 21 | return function cleanup() {}; 22 | }); 23 | const getActiveRoute = (routes) => { 24 | let activeRoute = 'Default Brand Text'; 25 | for (let i = 0; i < routes.length; i++) { 26 | if (routes[i].collapse) { 27 | let collapseActiveRoute = getActiveRoute(routes[i].views); 28 | if (collapseActiveRoute !== activeRoute) { 29 | return collapseActiveRoute; 30 | } 31 | } else if (routes[i].category) { 32 | let categoryActiveRoute = getActiveRoute(routes[i].views); 33 | if (categoryActiveRoute !== activeRoute) { 34 | return categoryActiveRoute; 35 | } 36 | } else { 37 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 38 | return routes[i].name; 39 | } 40 | } 41 | } 42 | return activeRoute; 43 | }; 44 | const getActiveNavbar = (routes) => { 45 | let activeNavbar = false; 46 | for (let i = 0; i < routes.length; i++) { 47 | if (routes[i].category) { 48 | let categoryActiveNavbar = getActiveNavbar(routes[i].views); 49 | if (categoryActiveNavbar !== activeNavbar) { 50 | return categoryActiveNavbar; 51 | } 52 | } else { 53 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 54 | if (routes[i].secondaryNavbar) { 55 | return routes[i].secondaryNavbar; 56 | } 57 | } 58 | } 59 | } 60 | return activeNavbar; 61 | }; 62 | const getRoutes = (routes) => { 63 | return routes.map((prop, key) => { 64 | if (prop.collapse) { 65 | return getRoutes(prop.views); 66 | } 67 | if (prop.category === 'account') { 68 | return getRoutes(prop.views); 69 | } 70 | if (prop.layout === '/auth') { 71 | return ; 72 | } else { 73 | return null; 74 | } 75 | }); 76 | }; 77 | const navRef = React.useRef(); 78 | document.documentElement.dir = 'ltr'; 79 | return ( 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | {getRoutes(routes)} 89 | 90 | 91 | 92 | 93 | 94 |