history.push("/auth/signin")}
15 | onConfirm={() => history.push("/auth/signin")}
16 | confirmBtnCssClass={"px-5"}
17 | />
18 | ) : (
19 |
20 | )}
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/assets/svg/spotify-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/assets/svg/globe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/rocket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # MIT License
2 |
3 | Copyright (c) 2019 - present [CodedThemes](https://codedthemes.com/) / [AppSeed](http://appseed.us/)
4 |
5 |
6 |
7 | ## Licensing Information
8 |
9 |
10 |
11 | | Item | - |
12 | | ---------------------------------- | --- |
13 | | License Type | MIT |
14 | | Use for print | **YES** |
15 | | Create single personal website/app | **YES** |
16 | | Create single website/app for client | **YES** |
17 | | Create multiple website/apps for clients | **YES** |
18 | | Create multiple SaaS applications | **YES** |
19 | | End-product paying users | **YES** |
20 | | Product sale | **YES** |
21 | | Remove footer credits | **YES** |
22 | | --- | --- |
23 | | Remove copyright mentions from source code | NO |
24 | | Production deployment assistance | NO |
25 | | Create HTML/CSS template for sale | NO |
26 | | Create Theme/Template for CMS for sale | NO |
27 | | Separate sale of our UI Elements | NO |
28 |
29 |
30 |
31 | ---
32 | For more information regarding licensing, please contact the AppSeed Service < *support@appseed.us* >
33 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | ## [v1.0.7] 2022-12-03
4 | ### Changes
5 |
6 | - UI/UX Changes
7 | - Minor Fixes
8 |
9 | ## [v1.0.6] 2022-12-03
10 | ### Changes
11 |
12 | - Bump UI: `v2.0.3`
13 | - Updates for [LIVE Deployer](https://appseed.us/go-live/)
14 |
15 | ## [v1.0.5] 2022-11-08
16 | ### Improvements
17 |
18 | - Save Compat matrix in `package.json`
19 | - `build` node
20 | - Yarn, NPM
21 | - NodeJS versions
22 |
23 | ## [1.0.4] 2022-11-05
24 | ### Improvements
25 |
26 | - Added `env.sample`
27 | - `API_URL` can be specified in `env` (optional)
28 | - data used in `src/config.js`
29 | - Added `compatibility matrix` for Node, yarn & NPM
30 | - Testing tool: [Render API Wrapper](https://github.com/app-generator/deploy-automation-render)
31 |
32 | ## [1.0.3] 2021-11-16
33 | ### Improvements
34 |
35 | - Added Docker Support
36 | - Fixes:
37 | - Logout over Flask API Server
38 |
39 | ## [1.0.2] 2021-10-13
40 | ### Improvements
41 |
42 | - Added Usable JWT Authentication Flow
43 | - Login/Logout/Register
44 |
45 | ## [1.0.1] 2021-10-09
46 | ### Initial Import
47 |
48 | - Added RTL Page
49 | - Bug Fixing
50 | - Added Chakra UI - Base Framework
51 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/assets/svg/visa.svg:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/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/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 { AuthProvider } from "./auth-context/auth.context";
23 |
24 | import AuthLayout from "layouts/Auth.js";
25 | import AdminLayout from "layouts/Admin.js";
26 | import RTLLayout from "layouts/RTL.js";
27 |
28 | let user = localStorage.getItem("user");
29 | user = JSON.parse(user);
30 |
31 | ReactDOM.render(
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | ,
42 | document.getElementById("root")
43 | );
44 |
--------------------------------------------------------------------------------
/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 |
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 | |
37 | {caption}
38 | |
39 | );
40 | })}
41 |
42 |
43 |
44 | {data.map((row) => {
45 | return (
46 |
54 | );
55 | })}
56 |
57 |
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 | |
34 | {caption}
35 | |
36 | );
37 | })}
38 |
39 |
40 |
41 | {data.map((row) => {
42 | return (
43 |
53 | );
54 | })}
55 |
56 |
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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "purity-dashboard-react",
3 | "version": "2.0.2",
4 | "private": true,
5 | "dependencies": {
6 | "@chakra-ui/icons": "^1.1.5",
7 | "@chakra-ui/react": "1.8.8",
8 | "@chakra-ui/system": "^1.12.1",
9 | "@chakra-ui/theme-tools": "^1.3.6",
10 | "@emotion/cache": "^11.7.1",
11 | "@emotion/react": "^11.8.1",
12 | "@emotion/styled": "^11.8.1",
13 | "@fontsource/open-sans": "^4.5.0",
14 | "@fontsource/raleway": "^4.5.0",
15 | "@fontsource/roboto": "^4.5.8",
16 | "apexcharts": "^3.27.3",
17 | "axios": "^1.2.0",
18 | "classnames": "2.3.1",
19 | "framer-motion": "^4.1.17",
20 | "match-sorter": "6.3.0",
21 | "moment": "2.29.1",
22 | "node-sass": "7.0.1",
23 | "nouislider": "15.0.0",
24 | "react": "16.14.0",
25 | "react-apexcharts": "^1.3.9",
26 | "react-big-calendar": "0.33.2",
27 | "react-bootstrap-sweetalert": "^5.2.0",
28 | "react-datetime": "3.1.1",
29 | "react-dom": "16.14.0",
30 | "react-github-btn": "^1.2.1",
31 | "react-icons": "^4.2.0",
32 | "react-jvectormap": "0.0.16",
33 | "react-router-dom": "5.2.1",
34 | "react-scripts": "5.0.0",
35 | "react-swipeable-views": "0.14.0",
36 | "react-table": "7.7.0",
37 | "react-tagsinput": "3.19.0",
38 | "stylis": "^4.0.13",
39 | "stylis-plugin-rtl": "^2.1.1"
40 | },
41 | "resolutions": {
42 | "react-error-overlay": "6.0.11"
43 | },
44 | "scripts": {
45 | "start": "react-scripts start",
46 | "build": "react-scripts build && gulp licenses",
47 | "test": "react-scripts test --env=jsdom",
48 | "eject": "react-scripts eject",
49 | "deploy": "npm run build",
50 | "lint:check": "eslint . --ext=js,jsx; exit 0",
51 | "lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
52 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
53 | },
54 | "optionalDependencies": {
55 | "@babel/core": "7.14.0",
56 | "typescript": "4.2.4"
57 | },
58 | "devDependencies": {
59 | "@babel/plugin-transform-react-jsx-source": "^7.14.5",
60 | "eslint-config-prettier": "8.3.0",
61 | "eslint-plugin-prettier": "3.4.0",
62 | "gulp": "4.0.2",
63 | "gulp-append-prepend": "1.0.9",
64 | "prettier": "2.2.1"
65 | },
66 | "browserslist": {
67 | "production": [
68 | "cover 99.8%",
69 | "not dead",
70 | "not OperaMini all"
71 | ],
72 | "development": [
73 | "cover 99.8%",
74 | "not dead",
75 | "not OperaMini all"
76 | ]
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/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 | |
53 | {caption}
54 | |
55 | );
56 | })}
57 |
58 |
59 |
60 | {data.map((row) => {
61 | return (
62 |
70 | );
71 | })}
72 |
73 |
74 |
75 | );
76 | };
77 |
78 | export default Projects;
79 |
--------------------------------------------------------------------------------
/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 | protected: true,
29 | },
30 | {
31 | path: "/tables",
32 | name: "Tables",
33 | rtlName: "لوحة القيادة",
34 | icon: ,
35 | component: Tables,
36 | layout: "/admin",
37 | protected: true,
38 | },
39 | {
40 | path: "/billing",
41 | name: "Billing",
42 | rtlName: "لوحة القيادة",
43 | icon: ,
44 | component: Billing,
45 | layout: "/admin",
46 | protected: true,
47 | },
48 | {
49 | path: "/rtl-support-page",
50 | name: "RTL",
51 | rtlName: "آرتيإل",
52 | icon: ,
53 | component: RTLPage,
54 | layout: "/rtl",
55 | },
56 | {
57 | name: "ACCOUNT PAGES",
58 | category: "account",
59 | rtlName: "صفحات",
60 | state: "pageCollapse",
61 | views: [
62 | {
63 | path: "/profile",
64 | name: "Profile",
65 | rtlName: "لوحة القيادة",
66 | icon: ,
67 | secondaryNavbar: true,
68 | component: Profile,
69 | layout: "/admin",
70 | protected: true,
71 | },
72 | {
73 | path: "/signin",
74 | name: "Sign In",
75 | rtlName: "لوحة القيادة",
76 | icon: ,
77 | component: SignIn,
78 | layout: "/auth",
79 | },
80 | {
81 | path: "/signup",
82 | name: "Sign Up",
83 | rtlName: "لوحة القيادة",
84 | icon: ,
85 | secondaryNavbar: true,
86 | component: SignUp,
87 | layout: "/auth",
88 | },
89 | ],
90 | },
91 | ];
92 | export default dashRoutes;
93 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | ©
31 |
37 | {document.documentElement.dir === "rtl"
38 | ? " توقيت الإبداعية"
39 | : "Creative Tim "}
40 |
41 | &
42 |
48 | {document.documentElement.dir === "rtl" ? "سيممبل " : " Simmmple"}
49 |
50 | {document.documentElement.dir === "rtl"
51 | ? "للحصول على ويب أفضل"
52 | : " for a better web"}
53 |
54 |
55 |
61 |
62 | {document.documentElement.dir === "rtl"
63 | ? "توقيت الإبداعية"
64 | : "Creative Tim"}
65 |
66 |
67 |
73 |
74 | {document.documentElement.dir === "rtl" ? "سيممبل" : "Simmmple"}
75 |
76 |
77 |
83 |
88 | {document.documentElement.dir === "rtl" ? "مدونة" : "Blog"}
89 |
90 |
91 |
92 |
97 | {document.documentElement.dir === "rtl" ? "رخصة" : "License"}
98 |
99 |
100 |
101 |
102 | );
103 | }
104 |
--------------------------------------------------------------------------------
/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/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 |
95 |
96 |
97 |
98 | );
99 | }
100 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/Projects.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Button,
4 | Flex,
5 | Grid,
6 | Icon,
7 | Text,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | // Assets
11 | import avatar2 from "assets/img/avatars/avatar2.png";
12 | import avatar4 from "assets/img/avatars/avatar4.png";
13 | import avatar6 from "assets/img/avatars/avatar6.png";
14 | import imageArchitect1 from "assets/img/ImageArchitect1.png";
15 | import imageArchitect2 from "assets/img/ImageArchitect2.png";
16 | import imageArchitect3 from "assets/img/ImageArchitect3.png";
17 | // Custom components
18 | import Card from "components/Card/Card";
19 | import CardBody from "components/Card/CardBody";
20 | import CardHeader from "components/Card/CardHeader";
21 | import React from "react";
22 | import { FaPlus } from "react-icons/fa";
23 | import ProjectCard from "./ProjectCard";
24 |
25 | const Projects = ({ title, description }) => {
26 | // Chakra color mode
27 | const textColor = useColorModeValue("gray.700", "white");
28 |
29 | return (
30 |
31 |
32 |
33 |
34 | {title}
35 |
36 |
37 | {description}
38 |
39 |
40 |
41 |
42 |
46 |
55 |
64 |
73 |
87 |
88 |
89 |
90 | );
91 | };
92 |
93 | export default Projects;
94 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/PaymentMethod.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 CardHeader from "components/Card/CardHeader.js";
14 | import IconBox from "components/Icons/IconBox";
15 | import React from "react";
16 | import { FaPencilAlt } from "react-icons/fa";
17 |
18 | const PaymentMethod = ({ title, mastercard, visa }) => {
19 | const iconTeal = useColorModeValue("teal.300", "teal.300");
20 | const textColor = useColorModeValue("gray.700", "white");
21 | const borderColor = useColorModeValue("#dee2e6", "gray.500");
22 | const bgButton = useColorModeValue(
23 | "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
24 | "gray.800"
25 | );
26 |
27 | return (
28 |
29 |
30 |
31 |
32 | {title}
33 |
34 |
37 |
38 |
39 |
40 |
46 |
56 |
57 | {mastercard.icon}
58 |
59 |
60 | {mastercard.number}
61 |
62 |
63 |
71 |
72 |
80 |
81 | {visa.icon}
82 |
83 |
84 | {visa.number}
85 |
86 |
87 |
95 |
96 |
97 |
98 |
99 | );
100 | };
101 |
102 | export default PaymentMethod;
103 |
--------------------------------------------------------------------------------
/src/assets/svg/logo.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Box, Flex, Grid, Icon } from "@chakra-ui/react";
3 | // Assets
4 | import BackgroundCard1 from "assets/img/BackgroundCard1.png";
5 | import { MastercardIcon, VisaIcon } from "components/Icons/Icons";
6 | import React from "react";
7 | import { FaPaypal, FaWallet } from "react-icons/fa";
8 | import { RiMastercardFill } from "react-icons/ri";
9 | import {
10 | billingData,
11 | invoicesData,
12 | newestTransactions,
13 | olderTransactions,
14 | } from "variables/general";
15 | import BillingInformation from "./components/BillingInformation";
16 | import CreditCard from "./components/CreditCard";
17 | import Invoices from "./components/Invoices";
18 | import PaymentMethod from "./components/PaymentMethod";
19 | import PaymentStatistics from "./components/PaymentStatistics";
20 | import Transactions from "./components/Transactions";
21 |
22 | function Billing() {
23 | return (
24 |
25 |
26 |
27 |
35 |
54 | }
55 | />
56 | }
58 | title={"Salary"}
59 | description={"Belong interactive"}
60 | amount={2000}
61 | />
62 | }
64 | title={"Paypal"}
65 | description={"Freelance Payment"}
66 | amount={4550}
67 | />
68 |
69 | ,
73 | number: "7812 2139 0823 XXXX",
74 | }}
75 | visa={{
76 | icon: ,
77 | number: "7812 2139 0823 XXXX",
78 | }}
79 | />
80 |
81 |
82 |
83 |
84 |
85 |
91 |
92 |
93 | );
94 | }
95 |
96 | export default Billing;
97 |
--------------------------------------------------------------------------------
/src/assets/svg/logo-colored.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/variables/charts.js:
--------------------------------------------------------------------------------
1 | export const barChartData = [
2 | {
3 | name: "Sales",
4 | data: [330, 250, 110, 300, 490, 350, 270, 130, 425],
5 | },
6 | ];
7 |
8 | export const barChartOptions = {
9 | chart: {
10 | toolbar: {
11 | show: false,
12 | },
13 | },
14 | tooltip: {
15 | style: {
16 | backgroundColor: "red",
17 | fontSize: "12px",
18 | fontFamily: undefined,
19 | },
20 | onDatasetHover: {
21 | style: {
22 | backgroundColor: "red",
23 | fontSize: "12px",
24 | fontFamily: undefined,
25 | },
26 | },
27 | theme: "dark",
28 | },
29 | xaxis: {
30 | categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
31 | show: false,
32 | labels: {
33 | show: false,
34 | style: {
35 | colors: "#fff",
36 | fontSize: "12px",
37 | },
38 | },
39 | axisBorder: {
40 | show: false,
41 | },
42 | axisTicks: {
43 | show: false,
44 | },
45 | },
46 | yaxis: {
47 | show: true,
48 | color: "#fff",
49 | labels: {
50 | show: true,
51 | style: {
52 | colors: "#fff",
53 | fontSize: "14px",
54 | },
55 | },
56 | },
57 | grid: {
58 | show: false,
59 | },
60 | fill: {
61 | colors: "#fff",
62 | },
63 | dataLabels: {
64 | enabled: false,
65 | },
66 | plotOptions: {
67 | bar: {
68 | borderRadius: 8,
69 | columnWidth: "12px",
70 | },
71 | },
72 | responsive: [
73 | {
74 | breakpoint: 768,
75 | options: {
76 | plotOptions: {
77 | bar: {
78 | borderRadius: 0,
79 | },
80 | },
81 | },
82 | },
83 | ],
84 | };
85 |
86 | export const lineChartData = [
87 | {
88 | name: "Mobile apps",
89 | data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
90 | },
91 | {
92 | name: "Websites",
93 | data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
94 | },
95 | ];
96 |
97 | export const lineChartOptions = {
98 | chart: {
99 | toolbar: {
100 | show: false,
101 | },
102 | },
103 | tooltip: {
104 | theme: "dark",
105 | },
106 | dataLabels: {
107 | enabled: false,
108 | },
109 | stroke: {
110 | curve: "smooth",
111 | },
112 | xaxis: {
113 | type: "datetime",
114 | categories: [
115 | "Jan",
116 | "Feb",
117 | "Mar",
118 | "Apr",
119 | "May",
120 | "Jun",
121 | "Jul",
122 | "Aug",
123 | "Sep",
124 | "Oct",
125 | "Nov",
126 | "Dec",
127 | ],
128 | labels: {
129 | style: {
130 | colors: "#c8cfca",
131 | fontSize: "12px",
132 | },
133 | },
134 | },
135 | yaxis: {
136 | labels: {
137 | style: {
138 | colors: "#c8cfca",
139 | fontSize: "12px",
140 | },
141 | },
142 | },
143 | legend: {
144 | show: false,
145 | },
146 | grid: {
147 | strokeDashArray: 5,
148 | },
149 | fill: {
150 | type: "gradient",
151 | gradient: {
152 | shade: "light",
153 | type: "vertical",
154 | shadeIntensity: 0.5,
155 | gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
156 | inverseColors: true,
157 | opacityFrom: 0.8,
158 | opacityTo: 0,
159 | stops: [],
160 | },
161 | colors: ["#4FD1C5", "#2D3748"],
162 | },
163 | colors: ["#4FD1C5", "#2D3748"],
164 | };
165 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/ProfileInformation.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Icon, Link, 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 | import { FaFacebook, FaInstagram, FaTwitter } from "react-icons/fa";
9 |
10 | const ProfileInformation = ({
11 | title,
12 | description,
13 | name,
14 | mobile,
15 | email,
16 | location,
17 | }) => {
18 | // Chakra color mode
19 | const textColor = useColorModeValue("gray.700", "white");
20 |
21 | return (
22 |
23 |
24 |
25 | {title}
26 |
27 |
28 |
29 |
30 |
31 | {description}
32 |
33 |
34 |
35 | Full Name:{" "}
36 |
37 |
38 | {name}
39 |
40 |
41 |
42 |
43 | Mobile:{" "}
44 |
45 |
46 | {mobile}
47 |
48 |
49 |
50 |
51 | Email:{" "}
52 |
53 |
54 | {email}
55 |
56 |
57 |
58 |
59 | Location:{" "}
60 |
61 |
62 | {location}
63 |
64 |
65 |
66 |
67 | Social Media:{" "}
68 |
69 |
70 |
76 |
77 |
78 |
84 |
85 |
86 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | );
100 | };
101 |
102 | export default ProfileInformation;
103 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
23 |
24 |
28 |
29 |
33 |
34 |
35 |
40 |
44 |
45 |
51 |
57 |
58 |
62 |
67 |
71 |
72 |
73 |
82 | Purity UI Dashboard by Creative Tim & Simmmple
83 |
84 |
85 |
86 |
87 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Grid,
5 | Image,
6 | SimpleGrid,
7 | useColorModeValue,
8 | } from "@chakra-ui/react";
9 | // assets
10 | import peopleImage from "assets/img/people-image.png";
11 | import logoChakra from "assets/svg/logo-white.svg";
12 | import BarChart from "components/Charts/BarChart";
13 | import LineChart from "components/Charts/LineChart";
14 | // Custom icons
15 | import {
16 | CartIcon,
17 | DocumentIcon,
18 | GlobeIcon,
19 | WalletIcon,
20 | } from "components/Icons/Icons.js";
21 | import React from "react";
22 | import { dashboardTableData, timelineData } from "variables/general";
23 | import ActiveUsers from "./components/ActiveUsers";
24 | import BuiltByDevelopers from "./components/BuiltByDevelopers";
25 | import MiniStatistics from "./components/MiniStatistics";
26 | import OrdersOverview from "./components/OrdersOverview";
27 | import Projects from "./components/Projects";
28 | import SalesOverview from "./components/SalesOverview";
29 | import WorkWithTheRockets from "./components/WorkWithTheRockets";
30 |
31 | export default function Dashboard() {
32 | const iconBoxInside = useColorModeValue("white", "white");
33 |
34 | return (
35 |
36 |
37 | }
42 | />
43 | }
48 | />
49 | }
54 | />
55 | }
60 | />
61 |
62 |
67 |
79 | }
80 | />
81 |
88 |
89 |
94 | }
98 | />
99 | }
103 | />
104 |
105 |
109 |
115 |
120 |
121 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/src/views/Dashboard/RTL/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Grid,
5 | Image,
6 | SimpleGrid,
7 | useColorModeValue,
8 | } from "@chakra-ui/react";
9 | // assets
10 | import peopleImage from "assets/img/people-image.png";
11 | import logoChakra from "assets/svg/logo-white.svg";
12 | import BarChart from "components/Charts/BarChart";
13 | import LineChart from "components/Charts/LineChart";
14 | // Custom icons
15 | import {
16 | CartIcon,
17 | DocumentIcon,
18 | GlobeIcon,
19 | WalletIcon,
20 | } from "components/Icons/Icons.js";
21 | import React from "react";
22 | import { rtlDashboardTableData, rtlTimelineData } from "variables/general";
23 | import ActiveUsers from "../Dashboard/components/ActiveUsers";
24 | import BuiltByDevelopers from "../Dashboard/components/BuiltByDevelopers";
25 | import MiniStatistics from "../Dashboard/components/MiniStatistics";
26 | import OrdersOverview from "../Dashboard/components/OrdersOverview";
27 | import Projects from "../Dashboard/components/Projects";
28 | import SalesOverview from "../Dashboard/components/SalesOverview";
29 | import WorkWithTheRockets from "../Dashboard/components/WorkWithTheRockets";
30 |
31 | export default function Dashboard() {
32 | // Chakra Color Mode
33 |
34 | const iconBoxInside = useColorModeValue("white", "white");
35 |
36 | return (
37 |
38 |
39 | }
44 | />
45 | }
50 | />
51 | }
56 | />
57 | }
62 | />
63 |
64 |
69 |
81 | }
82 | />
83 |
90 |
91 |
96 | }
100 | />
101 | }
105 | />
106 |
107 |
111 |
117 |
122 |
123 |
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/src/layouts/RTL.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react';
3 | import { RtlProvider } from 'components/RTLProvider/RTLProvider';
4 | import Configurator from 'components/Configurator/Configurator';
5 | import Footer from 'components/Footer/Footer.js';
6 | // Layout components
7 | import AdminNavbar from 'components/Navbars/AdminNavbar.js';
8 | import Sidebar from 'components/Sidebar';
9 | import React, { useState } from 'react';
10 | import { Redirect, Route, Switch } from 'react-router-dom';
11 | import routes from 'routes.js';
12 | // Custom Chakra theme
13 | import theme from 'theme/theme.js';
14 | import FixedPlugin from '../components/FixedPlugin/FixedPlugin';
15 | // Custom components
16 | import MainPanel from '../components/Layout/MainPanel';
17 | import PanelContainer from '../components/Layout/PanelContainer';
18 | import '@fontsource/roboto/400.css';
19 | import '@fontsource/roboto/500.css';
20 | import '@fontsource/roboto/700.css';
21 | import PanelContent from '../components/Layout/PanelContent';
22 | export default function Dashboard(props) {
23 | const { ...rest } = props;
24 | // states and functions
25 | const [ sidebarVariant, setSidebarVariant ] = useState('transparent');
26 | const [ fixed, setFixed ] = useState(false);
27 | const getRoute = () => {
28 | return window.location.pathname !== '/admin/full-screen-maps';
29 | };
30 | const getActiveRoute = (routes) => {
31 | let activeRoute = 'Default Brand Text';
32 | for (let i = 0; i < routes.length; i++) {
33 | if (routes[i].collapse) {
34 | let collapseActiveRoute = getActiveRoute(routes[i].views);
35 | if (collapseActiveRoute !== activeRoute) {
36 | return collapseActiveRoute;
37 | }
38 | } else if (routes[i].category) {
39 | let categoryActiveRoute = getActiveRoute(routes[i].views);
40 | if (categoryActiveRoute !== activeRoute) {
41 | return categoryActiveRoute;
42 | }
43 | } else {
44 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
45 | return routes[i].name;
46 | }
47 | }
48 | }
49 | return activeRoute;
50 | };
51 | // This changes navbar state(fixed or not)
52 | const getActiveNavbar = (routes) => {
53 | let activeNavbar = false;
54 | for (let i = 0; i < routes.length; i++) {
55 | if (routes[i].category) {
56 | let categoryActiveNavbar = getActiveNavbar(routes[i].views);
57 | if (categoryActiveNavbar !== activeNavbar) {
58 | return categoryActiveNavbar;
59 | }
60 | } else {
61 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
62 | if (routes[i].secondaryNavbar) {
63 | return routes[i].secondaryNavbar;
64 | }
65 | }
66 | }
67 | }
68 | return activeNavbar;
69 | };
70 | const getRoutes = (routes) => {
71 | return routes.map((prop, key) => {
72 | if (prop.collapse) {
73 | return getRoutes(prop.views);
74 | }
75 | if (prop.category === 'account') {
76 | return getRoutes(prop.views);
77 | }
78 | if (prop.layout === '/rtl' || prop.layout === '/admin') {
79 | return ;
80 | } else {
81 | return null;
82 | }
83 | });
84 | };
85 | const { isOpen, onOpen, onClose } = useDisclosure();
86 | document.documentElement.dir = 'rtl';
87 | // Chakra Color Mode
88 | return (
89 |
90 |
91 |
98 |
104 |
105 |
113 |
114 | {getRoute() ? (
115 |
116 |
117 |
118 | {getRoutes(routes)}
119 |
120 |
121 |
122 |
123 | ) : null}
124 |
125 |
126 |
127 |
128 | {
134 | setFixed(value);
135 | }}
136 | onOpaque={() => setSidebarVariant('opaque')}
137 | onTransparent={() => setSidebarVariant('transparent')}
138 | />
139 |
140 |
141 |
142 | );
143 | }
144 |
--------------------------------------------------------------------------------
/src/layouts/Admin.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react';
3 | import Configurator from 'components/Configurator/Configurator';
4 | import Footer from 'components/Footer/Footer.js';
5 | // Layout components
6 | import AdminNavbar from 'components/Navbars/AdminNavbar.js';
7 | import Sidebar from 'components/Sidebar';
8 | import React, { useState } from 'react';
9 | import { Redirect, Route, Switch } from 'react-router-dom';
10 | import routes from 'routes.js';
11 | import '@fontsource/roboto/400.css';
12 | import '@fontsource/roboto/500.css';
13 | import '@fontsource/roboto/700.css';
14 |
15 | import { ProtectedRoute } from '../ProtectedRoute';
16 | // Custom Chakra theme
17 | import theme from 'theme/theme.js';
18 | import FixedPlugin from '../components/FixedPlugin/FixedPlugin';
19 | // Custom components
20 | import MainPanel from '../components/Layout/MainPanel';
21 | import PanelContainer from '../components/Layout/PanelContainer';
22 | import PanelContent from '../components/Layout/PanelContent';
23 | export default function Dashboard(props) {
24 | const { ...rest } = props;
25 | // states and functions
26 | const [ sidebarVariant, setSidebarVariant ] = useState('transparent');
27 | const [ fixed, setFixed ] = useState(false);
28 | // functions for changing the states from components
29 | const getRoute = () => {
30 | return window.location.pathname !== '/admin/full-screen-maps';
31 | };
32 | const getActiveRoute = (routes) => {
33 | let activeRoute = 'Default Brand Text';
34 | for (let i = 0; i < routes.length; i++) {
35 | if (routes[i].collapse) {
36 | let collapseActiveRoute = getActiveRoute(routes[i].views);
37 | if (collapseActiveRoute !== activeRoute) {
38 | return collapseActiveRoute;
39 | }
40 | } else if (routes[i].category) {
41 | let categoryActiveRoute = getActiveRoute(routes[i].views);
42 | if (categoryActiveRoute !== activeRoute) {
43 | return categoryActiveRoute;
44 | }
45 | } else {
46 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
47 | return routes[i].name;
48 | }
49 | }
50 | }
51 | return activeRoute;
52 | };
53 | // This changes navbar state(fixed or not)
54 | const getActiveNavbar = (routes) => {
55 | let activeNavbar = false;
56 | for (let i = 0; i < routes.length; i++) {
57 | if (routes[i].category) {
58 | let categoryActiveNavbar = getActiveNavbar(routes[i].views);
59 | if (categoryActiveNavbar !== activeNavbar) {
60 | return categoryActiveNavbar;
61 | }
62 | } else {
63 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
64 | if (routes[i].secondaryNavbar) {
65 | return routes[i].secondaryNavbar;
66 | }
67 | }
68 | }
69 | }
70 | return activeNavbar;
71 | };
72 | const getRoutes = (routes) => {
73 | return routes.map((prop, key) => {
74 | if (prop.collapse) {
75 | return getRoutes(prop.views);
76 | }
77 | if (prop.category === 'account') {
78 | return getRoutes(prop.views);
79 | }
80 | if (prop.layout === '/admin') {
81 | if(prop.protected){
82 | return
83 | }
84 | return ;
85 | } else {
86 | return null;
87 | }
88 | });
89 | };
90 | const { isOpen, onOpen, onClose } = useDisclosure();
91 | document.documentElement.dir = 'ltr';
92 | // Chakra Color Mode
93 | return (
94 |
95 |
102 |
107 |
108 |
116 |
117 | {getRoute() ? (
118 |
119 |
120 |
121 | {getRoutes(routes)}
122 |
123 |
124 |
125 |
126 | ) : null}
127 |
128 |
129 |
130 |
131 | {
137 | setFixed(value);
138 | }}
139 | onOpaque={() => setSidebarVariant('opaque')}
140 | onTransparent={() => setSidebarVariant('transparent')}
141 | />
142 |
143 |
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/)
2 |
3 | Start your Development with an Innovative Admin Template for **Chakra UI** and **React**. [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using Chakra's style props. The product comes with a simple JWT authentication flow: login/register/logout.
4 |
5 | - 👉 [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) - product page
6 | - 👉 [React Purity Dashboard](https://node-js-react-purity-dashboard.appseed-srv1.com/#/auth/signin) - LIVE Demo
7 |
8 |
9 |
10 | > 🚀 Provided by **[App Generator](https://app-generator.dev/)**
11 |
12 | - ✅ Innovative Chakra Design - **Crafted by [Creative-Tim](https://app-generator.dev/agency/creative-tim/)**
13 | - ✅ React, Redux, Redux-persist
14 | - ✅ Authentication: JWT Login/Register/Logout
15 | - ✅ Full-stack ready using **[Node JS API Server](https://github.com/app-generator/api-server-nodejs)** (open-source project)
16 | - Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library - `passport-jwt` strategy.
17 |
18 |
19 |
20 | 
21 |
22 |
23 |
24 | ## Tests
25 |
26 | > `Compatibility matrix` using Ubuntu `18.04 LTS` as reference.
27 |
28 | | NodeJS | NPM | YARN |
29 | | --- | --- | --- |
30 | | `v12.0.0` | ✅ | ✅ |
31 | | `v14.0.0` | ✅ | ✅ |
32 | | `v16.0.0` | ✅ | ✅ |
33 | | `v18.0.0` | ✅ | ✅ |
34 |
35 |
36 |
37 | ## How to use it
38 |
39 | To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository.
40 |
41 | > 👉 **Step 1** - Clone the project
42 |
43 | ```bash
44 | $ git clone https://github.com/app-generator/react-purity-dashboard.git
45 | $ cd react-purity-dashboard
46 | ```
47 |
48 |
49 |
50 | > 👉 **Step 2** - Install dependencies via NPM or yarn
51 |
52 | ```bash
53 | $ npm i
54 | // OR
55 | $ yarn
56 | ```
57 |
58 |
59 |
60 | > 👉 **Step 3** - Edit the `.env` using the template `.env.sample`.
61 |
62 | ```env
63 |
64 | REACT_APP_BACKEND_SERVER='http://localhost:5000/api/'
65 |
66 | REACT_APP_GITHUB_OAUTH_CLIENT_ID = ... # Github OAuth Client
67 | REACT_APP_GITHUB_OAUTH_CLIENT_SECRET = ... # Github OAuth Secret
68 | REACT_APP_GITHUB_OAUTH_REDIRECT_URL = ... # Github OAuth Callback URL
69 | ```
70 |
71 |
72 |
73 | > 👉 **Step 4** - Start in development mode
74 |
75 | ```bash
76 | $ npm run start
77 | // OR
78 | $ yarn start
79 | ```
80 |
81 |
82 |
83 | ## Configure the backend server
84 |
85 | The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register.
86 |
87 | > 👉 **API Server URL** - `src/config/constant.js`
88 |
89 | ```javascript
90 | const config = {
91 | ...
92 | API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
93 | };
94 | ```
95 |
96 |
97 |
98 | **API Server Descriptor** - POSTMAN Collection
99 |
100 | The API Server signature is provided by the [Unified API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition)
101 |
102 | - [API POSTMAN Collection](https://github.com/app-generator/api-server-unified/blob/main/api.postman_collection.json) - can be used to mock (simulate) the backend server or code a new one in your preferred framework.
103 |
104 |
105 |
106 | ## Node JS API Server
107 |
108 | The product is also open-source and is already configured to work with Berry Dashboard Template - product features:
109 |
110 | - Typescript / Node js / Express server
111 | - JWT authentication (`passport-jwt` strategy)
112 | - Persistence: SQLite
113 |
114 | > Links
115 |
116 | - [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code
117 | - [Node JS API](https://appseed.us/boilerplate-code/nodejs-starter) - product page
118 |
119 |
120 |
121 | 
122 |
123 |
124 |
125 | ### Compile the API Server
126 |
127 | **Step #1** - Clone the project
128 |
129 | ```bash
130 | $ git clone https://github.com/app-generator/api-server-nodejs.git
131 | $ cd api-server-nodejs
132 | ```
133 |
134 | **Step #2** - Install dependencies via NPM or Yarn
135 |
136 | ```bash
137 | $ npm i
138 | // OR
139 | $ yarn
140 | ```
141 |
142 | **Step #3** - Run the SQLite migration via TypeORM
143 |
144 | ```
145 | $ yarn typeorm migration:run
146 | ```
147 |
148 | **Step #4** - Start the API server (development mode)
149 |
150 | ```bash
151 | $ npm dev
152 | // OR
153 | $ yarn dev
154 | ```
155 |
156 | The API server will start using the `PORT` specified in `.env` file (default 5000).
157 |
158 |
159 |
160 | ---
161 | [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) - Provided by **[App-Generator](https://app-generator.dev/)**.
162 |
--------------------------------------------------------------------------------
/src/components/Navbars/AdminNavbar.js:
--------------------------------------------------------------------------------
1 | // Chakra Imports
2 | import {
3 | Box,
4 | Breadcrumb,
5 | BreadcrumbItem,
6 | BreadcrumbLink,
7 | Flex,
8 | Link,
9 | useColorModeValue,
10 | } from "@chakra-ui/react";
11 | import PropTypes from "prop-types";
12 | import React, { useState } from "react";
13 | import AdminNavbarLinks from "./AdminNavbarLinks";
14 |
15 | export default function AdminNavbar(props) {
16 | const [scrolled, setScrolled] = useState(false);
17 | const {
18 | variant,
19 | children,
20 | fixed,
21 | secondary,
22 | brandText,
23 | onOpen,
24 | ...rest
25 | } = props;
26 |
27 | // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
28 | let mainText = useColorModeValue("gray.700", "gray.200");
29 | let secondaryText = useColorModeValue("gray.400", "gray.200");
30 | let navbarPosition = "absolute";
31 | let navbarFilter = "none";
32 | let navbarBackdrop = "blur(21px)";
33 | let navbarShadow = "none";
34 | let navbarBg = "none";
35 | let navbarBorder = "transparent";
36 | let secondaryMargin = "0px";
37 | let paddingX = "15px";
38 | if (props.fixed === true)
39 | if (scrolled === true) {
40 | navbarPosition = "fixed";
41 | navbarShadow = useColorModeValue(
42 | "0px 7px 23px rgba(0, 0, 0, 0.05)",
43 | "none"
44 | );
45 | navbarBg = useColorModeValue(
46 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)",
47 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
48 | );
49 | navbarBorder = useColorModeValue("#FFFFFF", "rgba(255, 255, 255, 0.31)");
50 | navbarFilter = useColorModeValue(
51 | "none",
52 | "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
53 | );
54 | }
55 | if (props.secondary) {
56 | navbarBackdrop = "none";
57 | navbarPosition = "absolute";
58 | mainText = "white";
59 | secondaryText = "white";
60 | secondaryMargin = "22px";
61 | paddingX = "30px";
62 | }
63 | const changeNavbar = () => {
64 | if (window.scrollY > 1) {
65 | setScrolled(true);
66 | } else {
67 | setScrolled(false);
68 | }
69 | };
70 | window.addEventListener("scroll", changeNavbar);
71 | return (
72 |
107 |
115 |
116 |
117 |
118 |
119 | Pages
120 |
121 |
122 |
123 |
124 |
125 | {brandText}
126 |
127 |
128 |
129 | {/* Here we create navbar brand, based on route name */}
130 |
146 | {brandText}
147 |
148 |
149 |
150 |
156 |
157 |
158 |
159 | );
160 | }
161 |
162 | AdminNavbar.propTypes = {
163 | brandText: PropTypes.string,
164 | variant: PropTypes.string,
165 | secondary: PropTypes.bool,
166 | fixed: PropTypes.bool,
167 | onOpen: PropTypes.func,
168 | };
169 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/Header.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Avatar,
4 | Box,
5 | Button,
6 | Flex,
7 | Text,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | import React from "react";
11 |
12 | const Header = ({
13 | backgroundHeader,
14 | backgroundProfile,
15 | avatarImage,
16 | name,
17 | email,
18 | tabs,
19 | }) => {
20 | // Chakra color mode
21 | const textColor = useColorModeValue("gray.700", "white");
22 | const borderProfileColor = useColorModeValue(
23 | "white",
24 | "rgba(255, 255, 255, 0.31)"
25 | );
26 | const emailColor = useColorModeValue("gray.400", "gray.300");
27 | return (
28 |
36 |
46 |
66 |
72 |
79 |
80 |
85 | {name}
86 |
87 |
91 | {email}
92 |
93 |
94 |
95 |
98 |
119 |
138 |
156 |
157 |
158 |
159 |
160 | );
161 | };
162 |
163 | export default Header;
164 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/Conversations.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Avatar,
4 | Button,
5 | Flex,
6 | Text,
7 | useColorModeValue,
8 | } from "@chakra-ui/react";
9 | // Assets
10 | import avatar2 from "assets/img/avatars/avatar2.png";
11 | import avatar3 from "assets/img/avatars/avatar3.png";
12 | import avatar4 from "assets/img/avatars/avatar4.png";
13 | import avatar5 from "assets/img/avatars/avatar5.png";
14 | import avatar6 from "assets/img/avatars/avatar6.png";
15 | // Custom components
16 | import Card from "components/Card/Card";
17 | import CardBody from "components/Card/CardBody";
18 | import CardHeader from "components/Card/CardHeader";
19 | import React from "react";
20 |
21 | const Conversations = ({ title }) => {
22 | // Chakra color mode
23 | const textColor = useColorModeValue("gray.700", "white");
24 |
25 | return (
26 |
27 |
28 |
29 | {title}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
43 |
44 |
45 | Sophie B.{" "}
46 |
47 |
48 | Hi! I need more information...
49 |
50 |
51 |
52 |
61 |
62 |
63 |
64 |
71 |
72 |
73 | Sophie B.{" "}
74 |
75 |
76 | Awesome work, can you change...
77 |
78 |
79 |
80 |
89 |
90 |
91 |
92 |
99 |
100 |
101 | Sophie B.{" "}
102 |
103 |
104 | Have a great afternoon...
105 |
106 |
107 |
108 |
117 |
118 |
119 |
120 |
127 |
128 |
129 | Sophie B.{" "}
130 |
131 |
132 | About files I can...
133 |
134 |
135 |
136 |
145 |
146 |
147 |
148 |
155 |
156 |
157 | Sophie B.{" "}
158 |
159 |
160 | About files I can...
161 |
162 |
163 |
164 |
173 |
174 |
175 |
176 |
177 | );
178 | };
179 |
180 | export default Conversations;
181 |
--------------------------------------------------------------------------------
/src/components/Navbars/AuthNavbar.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Box,
4 | Button,
5 | Flex,
6 | HStack,
7 | Link,
8 | Text,
9 | useColorModeValue,
10 | } from "@chakra-ui/react";
11 | import {
12 | CreativeTimLogo,
13 | DocumentIcon,
14 | HomeIcon,
15 | PersonIcon,
16 | RocketIcon,
17 | } from "components/Icons/Icons";
18 | import SidebarResponsive from "components/Sidebar/SidebarResponsive";
19 | import PropTypes from "prop-types";
20 | import React from "react";
21 | import { NavLink } from "react-router-dom";
22 | import routes from "routes.js";
23 | export default function AuthNavbar(props) {
24 | const [open, setOpen] = React.useState(false);
25 | const handleDrawerToggle = () => {
26 | setOpen(!open);
27 | };
28 | const { logo, logoText, secondary, ...rest } = props;
29 | // verifies if routeName is the one active (in browser input)
30 | const activeRoute = (routeName) => {
31 | return window.location.href.indexOf(routeName) > -1 ? true : false;
32 | };
33 | // Chakra color mode
34 | let navbarIcon = useColorModeValue("gray.700", "gray.200");
35 | let mainText = useColorModeValue("gray.700", "gray.200");
36 | let navbarBg = useColorModeValue(
37 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)",
38 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
39 | );
40 | let navbarBorder = useColorModeValue(
41 | "1.5px solid #FFFFFF",
42 | "1.5px solid rgba(255, 255, 255, 0.31)"
43 | );
44 | let navbarShadow = useColorModeValue(
45 | "0px 7px 23px rgba(0, 0, 0, 0.05)",
46 | "none"
47 | );
48 | let navbarFilter = useColorModeValue(
49 | "none",
50 | "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"
51 | );
52 | let navbarBackdrop = "blur(21px)";
53 | let bgButton = useColorModeValue(
54 | "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
55 | "gray.800"
56 | );
57 | let navbarPosition = "fixed";
58 | let colorButton = "white";
59 | if (props.secondary === true) {
60 | navbarIcon = "white";
61 | navbarBg = "none";
62 | navbarBorder = "none";
63 | navbarShadow = "initial";
64 | navbarFilter = "initial";
65 | navbarBackdrop = "none";
66 | bgButton = "white";
67 | colorButton = "gray.700";
68 | mainText = "white";
69 | navbarPosition = "absolute";
70 | }
71 | var brand = (
72 |
82 |
83 |
84 | {logoText}
85 |
86 |
87 | );
88 | var linksAuth = (
89 |
90 |
91 | }
100 | >
101 | Dashboard
102 |
103 |
104 |
105 |
115 | }
116 | >
117 | Profile
118 |
119 |
120 |
121 |
131 | }
132 | >
133 | Sign Up
134 |
135 |
136 |
137 |
146 | }
147 | >
148 | Sign In
149 |
150 |
151 |
152 | );
153 | return (
154 |
172 |
173 | {brand}
174 |
178 |
185 |
186 | {linksAuth}
187 |
188 |
202 |
203 |
204 |
205 | );
206 | }
207 |
208 | AuthNavbar.propTypes = {
209 | color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]),
210 | brandText: PropTypes.string,
211 | };
212 |
--------------------------------------------------------------------------------
/src/components/Sidebar/SidebarContent.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | // chakra imports
3 | import {
4 | Box,
5 | Button, Flex,
6 | Link,
7 | Stack,
8 | Text,
9 | useColorModeValue
10 | } from "@chakra-ui/react";
11 | import IconBox from "components/Icons/IconBox";
12 | import { CreativeTimLogo } from "components/Icons/Icons";
13 | import { Separator } from "components/Separator/Separator";
14 | import { SidebarHelp } from "components/Sidebar/SidebarHelp";
15 | import React from "react";
16 | import { NavLink, useLocation } from "react-router-dom";
17 |
18 | // this function creates the links and collapses that appear in the sidebar (left menu)
19 |
20 |
21 | const SidebarContent = ({ logoText, routes }) => {
22 |
23 | // to check for active links and opened collapses
24 | let location = useLocation();
25 | // this is for the rest of the collapses
26 | const [state, setState] = React.useState({});
27 |
28 | // verifies if routeName is the one active (in browser input)
29 | const activeRoute = (routeName) => {
30 | return location.pathname === routeName ? "active" : "";
31 | };
32 | const createLinks = (routes) => {
33 | // Chakra Color Mode
34 | const activeBg = useColorModeValue("white", "gray.700");
35 | const inactiveBg = useColorModeValue("white", "gray.700");
36 | const activeColor = useColorModeValue("gray.700", "white");
37 | const inactiveColor = useColorModeValue("gray.400", "gray.400");
38 |
39 | return routes.map((prop, key) => {
40 | if (prop.redirect) {
41 | return null;
42 | }
43 | if (prop.category) {
44 | var st = {};
45 | st[prop["state"]] = !state[prop.state];
46 | return (
47 |
48 |
61 | {document.documentElement.dir === "rtl"
62 | ? prop.rtlName
63 | : prop.name}
64 |
65 | {createLinks(prop.views)}
66 |
67 | );
68 | }
69 | return (
70 |
71 | {activeRoute(prop.layout + prop.path) === "active" ? (
72 |
121 | ) : (
122 |
171 | )}
172 |
173 | );
174 | });
175 | };
176 |
177 | const links = <>{createLinks(routes)};
178 |
179 | return (
180 | <>
181 |
182 |
193 |
194 |
195 | {logoText}
196 |
197 |
198 |
199 |
200 |
201 | {links}
202 |
203 |
204 |
205 | )
206 | }
207 |
208 | export default SidebarContent
--------------------------------------------------------------------------------
/src/components/Navbars/AdminNavbarLinks.js:
--------------------------------------------------------------------------------
1 | // Chakra Icons
2 | import { BellIcon, SearchIcon } from "@chakra-ui/icons";
3 | // Chakra Imports
4 | import {
5 | Button,
6 | Flex,
7 | IconButton,
8 | Input,
9 | InputGroup,
10 | InputLeftElement,
11 | Menu,
12 | MenuButton,
13 | MenuItem,
14 | MenuList,
15 | Text,
16 | useColorModeValue,
17 | } from "@chakra-ui/react";
18 | // Assets
19 | import avatar1 from "assets/img/avatars/avatar1.png";
20 | import avatar2 from "assets/img/avatars/avatar2.png";
21 | import avatar3 from "assets/img/avatars/avatar3.png";
22 | // Custom Icons
23 | import { ProfileIcon, SettingsIcon } from "components/Icons/Icons";
24 | // Custom Components
25 | import { ItemContent } from "components/Menu/ItemContent";
26 | import SidebarResponsive from "components/Sidebar/SidebarResponsive";
27 | import PropTypes from "prop-types";
28 | import React from "react";
29 | import { NavLink } from "react-router-dom";
30 | import routes from "routes.js";
31 |
32 | import { useAuth } from "../../auth-context/auth.context";
33 | import AuthApi from "../../api/auth";
34 | import { useHistory } from "react-router-dom";
35 |
36 | export default function HeaderLinks(props) {
37 | const { variant, children, fixed, secondary, onOpen, ...rest } = props;
38 | const { user, setUser } = useAuth();
39 | const history = useHistory();
40 |
41 | // Chakra Color Mode
42 | let mainTeal = useColorModeValue("teal.300", "teal.300");
43 | let inputBg = useColorModeValue("white", "gray.800");
44 | let mainText = useColorModeValue("gray.700", "gray.200");
45 | let navbarIcon = useColorModeValue("gray.500", "gray.200");
46 | let searchIcon = useColorModeValue("gray.700", "gray.200");
47 |
48 | if (secondary) {
49 | navbarIcon = "white";
50 | mainText = "white";
51 | }
52 | const settingsRef = React.useRef();
53 |
54 | const handleLogout = () => {
55 | AuthApi.Logout(user)
56 | setUser(null);
57 | localStorage.removeItem("user");
58 | return history.push("/auth/signin");
59 | }
60 |
61 | return (
62 |
68 |
84 | }
99 | >
100 | }
101 | />
102 |
109 |
110 | {user && user.token ? (
111 |
123 | )
124 | }
125 | leftIcon={
126 | document.documentElement.dir ? (
127 |
128 | ) : (
129 | ""
130 | )
131 | }
132 | >
133 | Logout
134 |
135 | ) : (
136 |
137 |
148 | )
149 | }
150 | leftIcon={
151 | document.documentElement.dir ? (
152 |
153 | ) : (
154 | ""
155 | )
156 | }
157 | >
158 | Sign In
159 |
160 |
161 | ) }
162 |
169 |
179 |
215 |
216 | );
217 | }
218 |
219 | HeaderLinks.propTypes = {
220 | variant: PropTypes.string,
221 | fixed: PropTypes.bool,
222 | secondary: PropTypes.bool,
223 | onOpen: PropTypes.func,
224 | };
225 |
--------------------------------------------------------------------------------