149 |
165 | setSearchOpen(!isSearchOpen)}
154 | >
155 |
157 |
113 |
129 |
119 |
121 |
37 | <>
38 |
63 | );
64 | }
65 |
66 | export default withRouter(Layout);
67 |
--------------------------------------------------------------------------------
/src/components/Layout/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Layout",
3 | "version": "1.0.0",
4 | "private": true,
5 | "main": "Layout.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Layout/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/styles";
2 |
3 | export default makeStyles(theme => ({
4 | root: {
5 | display: "flex",
6 | maxWidth: "100vw",
7 | overflowX: "hidden",
8 | },
9 | content: {
10 | flexGrow: 1,
11 | padding: theme.spacing(3),
12 | width: `calc(100vw - 240px)`,
13 | minHeight: "100vh",
14 | },
15 | contentShift: {
16 | width: `calc(100vw - ${240 + theme.spacing(6)}px)`,
17 | transition: theme.transitions.create(["width", "margin"], {
18 | easing: theme.transitions.easing.sharp,
19 | duration: theme.transitions.duration.enteringScreen,
20 | }),
21 | },
22 | fakeToolbar: {
23 | ...theme.mixins.toolbar,
24 | },
25 | }));
26 |
--------------------------------------------------------------------------------
/src/components/Notification/Notification.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Button } from "@material-ui/core";
3 | import {
4 | NotificationsNone as NotificationsIcon,
5 | ThumbUp as ThumbUpIcon,
6 | ShoppingCart as ShoppingCartIcon,
7 | LocalOffer as TicketIcon,
8 | BusinessCenter as DeliveredIcon,
9 | SmsFailed as FeedbackIcon,
10 | DiscFull as DiscIcon,
11 | Email as MessageIcon,
12 | Report as ReportIcon,
13 | Error as DefenceIcon,
14 | AccountBox as CustomerIcon,
15 | Done as ShippedIcon,
16 | Publish as UploadIcon,
17 | } from "@material-ui/icons";
18 | import { useTheme } from "@material-ui/styles";
19 | import classnames from "classnames";
20 | import tinycolor from "tinycolor2";
21 |
22 | // styles
23 | import useStyles from "./styles";
24 |
25 | // components
26 | import { Typography } from "../Wrappers";
27 |
28 | const typesIcons = {
29 | "e-commerce":
45 |
46 |
47 |
60 |
61 |
62 |
74 |
111 | );
112 | }
113 |
114 | // ####################################################################
115 | function getIconByType(type = "offer") {
116 | return typesIcons[type];
117 | }
118 |
--------------------------------------------------------------------------------
/src/components/Notification/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Notification",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "Notification.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Notification/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/styles";
2 |
3 | export default makeStyles(theme => ({
4 | notificationContainer: {
5 | display: "flex",
6 | alignItems: "center",
7 | },
8 | notificationContained: {
9 | borderRadius: 45,
10 | height: 45,
11 | boxShadow: theme.customShadows.widgetDark,
12 | },
13 | notificationContainedShadowless: {
14 | boxShadow: "none",
15 | },
16 | notificationIconContainer: {
17 | minWidth: 45,
18 | height: 45,
19 | borderRadius: 45,
20 | display: "flex",
21 | alignItems: "center",
22 | justifyContent: "center",
23 | fontSize: 24,
24 | },
25 | notificationIconContainerContained: {
26 | fontSize: 18,
27 | color: "#FFFFFF80",
28 | },
29 | notificationIconContainerRounded: {
30 | marginRight: theme.spacing(2),
31 | },
32 | containedTypography: {
33 | color: "white",
34 | },
35 | messageContainer: {
36 | display: "flex",
37 | alignItems: "center",
38 | justifyContent: "space-between",
39 | flexGrow: 1,
40 | },
41 | extraButton: {
42 | color: "white",
43 | "&:hover, &:focus": {
44 | background: "transparent",
45 | },
46 | },
47 | }));
48 |
--------------------------------------------------------------------------------
/src/components/PageTitle/PageTitle.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Button } from "@material-ui/core";
3 |
4 | // styles
5 | import useStyles from "./styles";
6 |
7 | // components
8 | import { Typography } from "../Wrappers";
9 |
10 | export default function PageTitle(props) {
11 | var classes = useStyles();
12 |
13 | return (
14 |
88 | {iconWithStyles}
89 |
90 |
91 |
98 | {props.message}
99 |
100 | {props.extraButton && props.extraButtonClick && (
101 |
108 | )}
109 |
110 |
15 |
16 | {props.title}
17 |
18 | {props.button && (
19 |
27 | )}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/PageTitle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "PageTitle",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "PageTitle.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/PageTitle/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/styles";
2 |
3 | export default makeStyles(theme => ({
4 | pageTitleContainer: {
5 | display: "flex",
6 | justifyContent: "space-between",
7 | marginBottom: theme.spacing(4),
8 | marginTop: theme.spacing(5),
9 | },
10 | typo: {
11 | color: theme.palette.text.hint,
12 | },
13 | button: {
14 | boxShadow: theme.customShadows.widget,
15 | textTransform: "none",
16 | "&:active": {
17 | boxShadow: theme.customShadows.widgetWide,
18 | },
19 | },
20 | }));
21 |
--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { Drawer, IconButton, List } from "@material-ui/core";
3 | import {
4 | Home as HomeIcon,
5 | NotificationsNone as NotificationsIcon,
6 | FormatSize as TypographyIcon,
7 | FilterNone as UIElementsIcon,
8 | BorderAll as TableIcon,
9 | QuestionAnswer as SupportIcon,
10 | LibraryBooks as LibraryIcon,
11 | HelpOutline as FAQIcon,
12 | ArrowBack as ArrowBackIcon,
13 | } from "@material-ui/icons";
14 | import { useTheme } from "@material-ui/styles";
15 | import { withRouter } from "react-router-dom";
16 | import classNames from "classnames";
17 |
18 | // styles
19 | import useStyles from "./styles";
20 |
21 | // components
22 | import SidebarLink from "./components/SidebarLink/SidebarLink";
23 | import Dot from "./components/Dot";
24 |
25 | // context
26 | import {
27 | useLayoutState,
28 | useLayoutDispatch,
29 | toggleSidebar,
30 | } from "../../context/LayoutContext";
31 |
32 | const structure = [
33 | { id: 0, label: "Dashboard", link: "/app/dashboard", icon:
121 | toggleSidebar(layoutDispatch)}>
122 |
128 |
129 | -
130 | {structure.map(link => (
131 |
68 |
71 |
73 |
74 | -
75 | {structure.map(link =>
-
121 | {children.map(childrenLink => (
122 |
24 | {letters}
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/UserAvatar/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "UserAvatar",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "UserAvatar.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/UserAvatar/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/styles";
2 |
3 | export default makeStyles(() => ({
4 | avatar: {
5 | width: 30,
6 | height: 30,
7 | display: "flex",
8 | alignItems: "center",
9 | justifyContent: "center",
10 | borderRadius: "50%",
11 | },
12 | text: {
13 | color: "white",
14 | },
15 | }));
16 |
--------------------------------------------------------------------------------
/src/components/Widget/Widget.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | Paper,
4 | IconButton,
5 | Menu,
6 | MenuItem,
7 | Typography,
8 | } from "@material-ui/core";
9 | import { MoreVert as MoreIcon } from "@material-ui/icons";
10 | import classnames from "classnames";
11 |
12 | // styles
13 | import useStyles from "./styles";
14 |
15 | export default function Widget({
16 | children,
17 | title,
18 | noBodyPadding,
19 | bodyClass,
20 | disableWidgetMenu,
21 | header,
22 | ...props
23 | }) {
24 | var classes = useStyles();
25 |
26 | // local
27 | var [moreButtonRef, setMoreButtonRef] = useState(null);
28 | var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
29 |
30 | return (
31 |
32 |
33 |
65 |
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/Widget/WidgetView.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classnames from "classnames";
3 | import {
4 | Paper,
5 | IconButton,
6 | Menu,
7 | MenuItem,
8 | withStyles
9 | } from "@material-ui/core";
10 | import { MoreVert as MoreIcon } from "@material-ui/icons";
11 | import Typography from "@material-ui/core/es/Typography/Typography";
12 |
13 | const Widget = ({
14 | classes,
15 | children,
16 | title,
17 | noBodyPadding,
18 | bodyClass,
19 | className,
20 | disableWidgetMenu,
21 | ...props
22 | }) => (
23 |
34 | {header ? (
35 | header
36 | ) : (
37 |
38 |
39 | {title}
40 |
41 | {!disableWidgetMenu && (
42 | setMoreMenuOpen(true)}
48 | buttonRef={setMoreButtonRef}
49 | >
50 |
52 | )}
53 |
54 | )}
55 |
56 |
62 | {children}
63 |
64 |
24 |
25 |
57 |
77 |
78 | );
79 |
80 | const styles = theme => ({
81 | widgetWrapper: {
82 | display: "flex",
83 | minHeight: "100%"
84 | },
85 | widgetHeader: {
86 | padding: theme.spacing.unit * 3,
87 | paddingBottom: theme.spacing.unit,
88 | display: "flex",
89 | justifyContent: "space-between",
90 | alignItems: "center"
91 | },
92 | widgetRoot: {
93 | boxShadow: theme.customShadows.widget
94 | },
95 | widgetBody: {
96 | paddingBottom: theme.spacing.unit * 3,
97 | paddingRight: theme.spacing.unit * 3,
98 | paddingLeft: theme.spacing.unit * 3
99 | },
100 | noPadding: {
101 | padding: 0
102 | },
103 | paper: {
104 | display: "flex",
105 | flexDirection: "column",
106 | flexGrow: 1,
107 | overflow: "hidden"
108 | },
109 | moreButton: {
110 | margin: -theme.spacing.unit,
111 | padding: 0,
112 | width: 40,
113 | height: 40,
114 | color: theme.palette.text.hint,
115 | "&:hover": {
116 | backgroundColor: theme.palette.primary.main,
117 | color: "rgba(255, 255, 255, 0.35)"
118 | }
119 | }
120 | });
121 |
122 | export default withStyles(styles, { withTheme: true })(Widget);
123 |
--------------------------------------------------------------------------------
/src/components/Widget/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Widget",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "Widget.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Widget/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/styles";
2 |
3 | export default makeStyles(theme => ({
4 | widgetWrapper: {
5 | display: "flex",
6 | minHeight: "100%",
7 | },
8 | widgetHeader: {
9 | padding: theme.spacing(3),
10 | paddingBottom: theme.spacing(1),
11 | display: "flex",
12 | justifyContent: "space-between",
13 | alignItems: "center",
14 | },
15 | widgetRoot: {
16 | boxShadow: theme.customShadows.widget,
17 | },
18 | widgetBody: {
19 | paddingBottom: theme.spacing(3),
20 | paddingRight: theme.spacing(3),
21 | paddingLeft: theme.spacing(3),
22 | },
23 | noPadding: {
24 | padding: 0,
25 | },
26 | paper: {
27 | display: "flex",
28 | flexDirection: "column",
29 | flexGrow: 1,
30 | overflow: "hidden",
31 | },
32 | moreButton: {
33 | margin: -theme.spacing(1),
34 | padding: 0,
35 | width: 40,
36 | height: 40,
37 | color: theme.palette.text.hint,
38 | "&:hover": {
39 | backgroundColor: theme.palette.primary.main,
40 | color: "rgba(255, 255, 255, 0.35)",
41 | },
42 | },
43 | }));
44 |
--------------------------------------------------------------------------------
/src/components/Wrappers/Wrappers.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | withStyles,
4 | Badge as BadgeBase,
5 | Typography as TypographyBase,
6 | Button as ButtonBase,
7 | } from "@material-ui/core";
8 | import { useTheme, makeStyles } from "@material-ui/styles";
9 | import classnames from "classnames";
10 |
11 | // styles
12 | var useStyles = makeStyles(theme => ({
13 | badge: {
14 | fontWeight: 600,
15 | height: 16,
16 | minWidth: 16,
17 | },
18 | }));
19 |
20 | function Badge({ children, colorBrightness, color, ...props }) {
21 | var classes = useStyles();
22 | var theme = useTheme();
23 | var Styled = createStyled({
24 | badge: {
25 | backgroundColor: getColor(color, theme, colorBrightness),
26 | },
27 | });
28 |
29 | return (
30 |
26 | {props.header ? (
27 | props.header
28 | ) : (
29 |
30 |
31 | {title}
32 |
33 | {!disableWidgetMenu && (
34 | props.setMoreMenuOpen(true)}
40 | buttonRef={props.setMoreButtonRef}
41 | >
42 |
44 | )}
45 |
46 | )}
47 |
48 |
54 | {children}
55 |
56 |
63 |
64 | 12, 678
65 |
66 |
78 |
86 |
87 |
122 |
143 |
123 |
129 | Integration
130 |
131 |
132 |
133 |
139 | SDK
140 |
141 |
142 |
144 |
150 | Integration
151 |
152 |
159 |
160 |
166 | SDK
167 |
168 |
175 |
185 |
190 | 60% / 37°С / 3.3 Ghz
191 |
192 |
207 |
193 |
194 |
195 |
203 |
204 |
205 |
206 |
208 |
213 | 54% / 31°С / 3.3 Ghz
214 |
215 |
230 |
216 |
217 |
218 |
226 |
227 |
228 |
229 |
231 |
236 | 57% / 21°С / 3.3 Ghz
237 |
238 |
253 |
239 |
240 |
241 |
249 |
250 |
251 |
252 |
279 | {PieChartData.map(({ name, value, color }, index) => (
280 |
291 |
281 |
283 | {name}
284 |
285 |
286 | {value}
287 |
288 |
289 | ))}
290 |
308 |
327 |
345 |
346 | }
347 | >
348 |
309 |
311 | Tablet
312 |
313 |
314 |
315 |
317 | Mobile
318 |
319 |
320 |
321 |
323 | Desktop
324 |
325 |
326 |
49 |
59 |
66 |
67 |
50 |
51 | {total[value]}
52 |
53 |
54 | {total.percent.profit ? "+" : "-"}
55 | {total.percent.value}%
56 |
57 |
58 |
68 |
110 |
69 |
70 | {registrations[value].value}
71 |
77 |
78 | Registrations
79 |
80 |
81 |
82 |
83 | {bounce[value].value}%
84 |
90 |
91 | Bounce Rate
92 |
93 |
94 |
95 |
96 |
97 | {registrations[value].value * 10}
98 |
99 |
105 |
106 | Views
107 |
108 |
109 |
18 | 
19 |
20 | Material Admin
21 |
22 |
23 |
42 |
43 | Material Admin
44 |
45 |
46 |
248 | © 2014-2019 Flatlogic, LLC. All rights reserved.
249 |
250 |
251 |
47 | setActiveTabId(id)}
50 | indicatorColor="primary"
51 | textColor="primary"
52 | centered
53 | >
54 |
57 | {activeTabId === 0 && (
58 |
59 |
60 | Good Morning, User
61 |
62 |
66 |
72 |
73 | Something is wrong with your login or password :(
74 |
75 |
76 | setLoginValue(e.target.value)}
86 | margin="normal"
87 | placeholder="Email Adress"
88 | type="email"
89 | fullWidth
90 | />
91 | setPasswordValue(e.target.value)}
101 | margin="normal"
102 | placeholder="Password"
103 | type="password"
104 | fullWidth
105 | />
106 |
140 | )}
141 | {activeTabId === 1 && (
142 |
143 |
144 | Welcome!
145 |
146 |
147 | Create your account
148 |
149 |
150 |
151 | Something is wrong with your login or password :(
152 |
153 |
154 | setNameValue(e.target.value)}
164 | margin="normal"
165 | placeholder="Full Name"
166 | type="text"
167 | fullWidth
168 | />
169 | setLoginValue(e.target.value)}
179 | margin="normal"
180 | placeholder="Email Adress"
181 | type="email"
182 | fullWidth
183 | />
184 | setPasswordValue(e.target.value)}
194 | margin="normal"
195 | placeholder="Password"
196 | type="password"
197 | fullWidth
198 | />
199 |
245 | )}
246 |
247 |
67 |
68 | or
69 |
70 |
71 |
107 | {isLoading ? (
108 |
139 |
200 | {isLoading ? (
201 |
229 |
230 |
231 | or
232 |
233 |
234 |
244 |
31 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/maps/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Maps",
3 | "version": "0.0.0",
4 | "main": "Maps.js",
5 | "private": true
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/maps/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/styles";
2 |
3 | export default makeStyles(theme => ({
4 | mapContainer: {
5 | height: "100%",
6 | margin: -theme.spacing(1) * 3,
7 | },
8 | }));
--------------------------------------------------------------------------------
/src/pages/notifications/Notifications.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Grid } from "@material-ui/core";
3 | import { Close as CloseIcon } from "@material-ui/icons";
4 | import { ToastContainer, toast } from "react-toastify";
5 | import SyntaxHighlighter from "react-syntax-highlighter";
6 | import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
7 | import classnames from "classnames";
8 |
9 | // styles
10 | import "react-toastify/dist/ReactToastify.css";
11 | import useStyles from "./styles";
12 |
13 | // components
14 | import Widget from "../../components/Widget/Widget";
15 | import PageTitle from "../../components/PageTitle/PageTitle";
16 | import Notification from "../../components/Notification";
17 | import { Typography, Button } from "../../components/Wrappers/Wrappers";
18 |
19 | const positions = [
20 | toast.POSITION.TOP_LEFT,
21 | toast.POSITION.TOP_CENTER,
22 | toast.POSITION.TOP_RIGHT,
23 | toast.POSITION.BOTTOM_LEFT,
24 | toast.POSITION.BOTTOM_CENTER,
25 | toast.POSITION.BOTTOM_RIGHT,
26 | ];
27 |
28 | export default function NotificationsPage(props) {
29 | var classes = useStyles();
30 |
31 | // local
32 | var [notificationsPosition, setNotificationPosition] = useState(2);
33 | var [errorToastId, setErrorToastId] = useState(null);
34 |
35 | return (
36 | <>
37 |
54 |
75 | Click any position
76 |
77 |
98 |
55 |
74 |
78 |
97 |
107 |
115 |
123 |
131 |
132 |
143 | {`
148 | // import needed components, functions and styles
149 | import { ToastContainer, toast } from 'react-toastify';
150 | import 'react-toastify/dist/ReactToastify.css';
151 |
152 | const Page = () => {
153 |
161 |
162 | For more API information refer to the library documentation
163 |
164 |
165 |
154 |
159 | };
160 | `}
32 | Click any position
38 |
44 |
33 |
37 |
39 |
43 |
50 |
51 |
52 |
53 |
54 |
60 | {`
61 | // import needed components, functions and styles
62 | import { ToastContainer, toast } from 'react-toastify';
63 | import 'react-toastify/dist/ReactToastify.css';
64 |
65 | const Page = () => {
66 |
74 | For more API information refer to the library documentation
75 |
76 |
67 |
72 | };
73 | `}
22 |
23 | h1. Heading
24 |
25 |
26 | h2. Heading
27 |
28 |
29 | h3. Heading
30 |
31 |
32 | h4. Heading
33 |
34 |
35 | h5. Heading
36 |
37 | h6. Heading
38 |
39 |
44 |
45 | h1. Heading
46 |
47 |
48 | h2. Heading
49 |
50 |
55 | h3. Heading
56 |
57 |
58 | h4. Heading
59 |
60 |
66 | h5. Heading
67 |
68 |
69 | h6. Heading
70 |
71 |
72 |
77 | Basic text
78 |
79 | Basic light text
80 |
81 |
82 | Basic medium text
83 |
84 |
85 | Basic bold text
86 |
87 |
88 | BASIC UPPERCASE TEXT
89 |
90 |
91 | basic lowercase text
92 |
93 |
94 | Basic Capitalized Text
95 |
96 |
97 | Basic Cursive Text
98 |
99 |
100 |
105 |
106 | Heading Typography SM Font Size
107 |
108 |
109 | Heading Typography Regular Font Size
110 |
111 |
112 | Heading Typography MD Font Size
113 |
114 |
115 | Heading Typography XL Font Size
116 |
117 |
118 | Heading Typography XXL Font Size
119 |
120 |
121 |