├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── Data │ ├── avatar.jpg │ ├── avatar2.jpg │ ├── avatar3.png │ ├── avatar4.jpg │ ├── product1.jpg │ ├── product2.jpg │ ├── product3.jpg │ ├── product4.jpg │ ├── product5.jpg │ ├── product6.jpg │ ├── product7.jpg │ ├── product8.jpg │ ├── product9.jpg │ └── welcome-bg.svg ├── Pages │ ├── Charts │ │ ├── Customer.jsx │ │ ├── Line.jsx │ │ ├── Stacked.jsx │ │ ├── Pie.jsx │ │ ├── Bar.jsx │ │ ├── Area.jsx │ │ ├── Pyramid.jsx │ │ ├── Financial.jsx │ │ └── ColorMapping.jsx │ ├── Editor.jsx │ ├── index.jsx │ ├── Calendar.jsx │ ├── Employees.jsx │ ├── Kanban.jsx │ ├── Orders.jsx │ ├── Customers.jsx │ ├── ColorPicker.jsx │ └── Ecommerce.jsx ├── index.css ├── Components │ ├── Footer.jsx │ ├── Header.jsx │ ├── ChartsHeader.jsx │ ├── Button.jsx │ ├── index.jsx │ ├── Charts │ │ ├── SparkLine.jsx │ │ ├── LineChart.jsx │ │ ├── Stacked.jsx │ │ └── Pie.jsx │ ├── Notification.jsx │ ├── Chat.jsx │ ├── UserProfile.jsx │ ├── Sidebar.jsx │ ├── Cart.jsx │ ├── Navbar.jsx │ └── ThemeSettings.jsx ├── index.js ├── App.css ├── Contexts │ └── ContextProvider.js └── App.js ├── craco.config.js ├── .gitignore ├── tailwind.config.js ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/Data/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/avatar.jpg -------------------------------------------------------------------------------- /src/Data/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/avatar2.jpg -------------------------------------------------------------------------------- /src/Data/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/avatar3.png -------------------------------------------------------------------------------- /src/Data/avatar4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/avatar4.jpg -------------------------------------------------------------------------------- /src/Data/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product1.jpg -------------------------------------------------------------------------------- /src/Data/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product2.jpg -------------------------------------------------------------------------------- /src/Data/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product3.jpg -------------------------------------------------------------------------------- /src/Data/product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product4.jpg -------------------------------------------------------------------------------- /src/Data/product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product5.jpg -------------------------------------------------------------------------------- /src/Data/product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product6.jpg -------------------------------------------------------------------------------- /src/Data/product7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product7.jpg -------------------------------------------------------------------------------- /src/Data/product8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product8.jpg -------------------------------------------------------------------------------- /src/Data/product9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MuradRahmanzada/AdminDashboard/HEAD/src/Data/product9.jpg -------------------------------------------------------------------------------- /src/Pages/Charts/Customer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Customer = () => { 4 | return ( 5 |
Customer
6 | ) 7 | } 8 | 9 | export default Customer -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [ 5 | require('tailwindcss'), 6 | require('autoprefixer'), 7 | ], 8 | }, 9 | }, 10 | }; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); 2 | 3 | body{ 4 | margin: 0; 5 | padding:0; 6 | font-family: "Open Sans", sans-serif; 7 | } 8 | 9 | @tailwind base; 10 | @tailwind components; 11 | @tailwind utilities; -------------------------------------------------------------------------------- /src/Components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => ( 4 |
5 |

6 | © 2022 All rights reserved by Shoppy.com 7 |

8 |
9 | ); 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import "./index.css"; 5 | import App from "./App"; 6 | import { ContextProvider } from "./Contexts/ContextProvider"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") 13 | ); 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/Components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Header = ({category, title}) => { 4 | return ( 5 |
6 |

7 | {category} 8 |

9 |

10 | {title} 11 |

12 |
13 | ) 14 | } 15 | 16 | export default Header -------------------------------------------------------------------------------- /src/Pages/Charts/Line.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {ChartsHeader, LineChart} from '../../Components' 3 | 4 | const Line = () => { 5 | return ( 6 |
7 | 8 |
9 | 10 |
11 |
12 | ) 13 | } 14 | 15 | export default Line -------------------------------------------------------------------------------- /src/Pages/Charts/Stacked.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { ChartsHeader, Stacked as StackedChart } from '../../Components'; 4 | 5 | const Stacked = () => ( 6 |
7 | 8 |
9 | 10 |
11 |
12 | ); 13 | 14 | export default Stacked; -------------------------------------------------------------------------------- /src/Components/ChartsHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ChartsHeader = ({ category, title }) => ( 4 |
5 |
6 |

Chart

7 |

{category}

8 |
9 |

{title}

10 |
11 | ); 12 | 13 | export default ChartsHeader; -------------------------------------------------------------------------------- /src/Pages/Charts/Pie.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { pieChartData } from '../../Data/dummy'; 4 | import { ChartsHeader, Pie as PieChart } from '../../Components'; 5 | 6 | const Pie = () => ( 7 |
8 | 9 |
10 | 11 |
12 |
13 | ); 14 | 15 | export default Pie; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/Components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { useStateContext } from '../Contexts/ContextProvider'; 4 | 5 | const Button = ({ icon, bgColor, color, bgHoverColor, size, text, borderRadius, width }) => { 6 | const { setIsClicked, initialState } = useStateContext(); 7 | 8 | return ( 9 | 17 | ); 18 | }; 19 | 20 | export default Button; -------------------------------------------------------------------------------- /src/Pages/Editor.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | HtmlEditor, 4 | Image, 5 | Inject, 6 | Link, 7 | QuickToolbar, 8 | RichTextEditorComponent, 9 | Toolbar 10 | } from "@syncfusion/ej2-react-richtexteditor"; 11 | 12 | import { EditorData } from "../Data/dummy"; 13 | import { Header } from "../Components"; 14 | 15 | const Editor = () => { 16 | return ( 17 |
18 |
19 | 20 | 23 | 24 |
25 | ); 26 | }; 27 | 28 | export default Editor; 29 | -------------------------------------------------------------------------------- /src/Components/index.jsx: -------------------------------------------------------------------------------- 1 | export { default as Button } from './Button'; 2 | export { default as ThemeSettings } from './ThemeSettings'; 3 | export { default as Sidebar } from './Sidebar'; 4 | // eslint-disable-next-line import/no-cycle 5 | export { default as Navbar } from './Navbar'; 6 | export { default as Footer } from './Footer'; 7 | export { default as Cart } from './Cart'; 8 | export { default as Chat } from './Chat'; 9 | export { default as Notification } from './Notification'; 10 | export { default as UserProfile } from './UserProfile'; 11 | export { default as SparkLine } from './Charts/SparkLine'; 12 | export { default as LineChart } from './Charts/LineChart'; 13 | export { default as Stacked } from './Charts/Stacked'; 14 | export { default as Pie } from './Charts/Pie'; 15 | export { default as ChartsHeader } from './ChartsHeader'; 16 | export { default as Header } from './Header'; -------------------------------------------------------------------------------- /src/Pages/index.jsx: -------------------------------------------------------------------------------- 1 | export { default as Ecommerce } from './Ecommerce'; 2 | export { default as Kanban } from './Kanban'; 3 | export { default as Orders } from './Orders'; 4 | export { default as Employees } from './Employees'; 5 | export { default as Editor } from './Editor'; 6 | export { default as Customers } from './Customers'; 7 | export { default as ColorPicker } from './ColorPicker'; 8 | export { default as Calendar } from './Calendar'; 9 | export { default as Area } from './Charts/Area'; 10 | export { default as Bar } from './Charts/Bar'; 11 | export { default as ColorMapping } from './Charts/ColorMapping'; 12 | export { default as Financial } from './Charts/Financial'; 13 | export { default as Line } from './Charts/Line'; 14 | export { default as Pie } from './Charts/Pie'; 15 | export { default as Pyramid } from './Charts/Pyramid'; 16 | export { default as Stacked } from './Charts/Stacked'; -------------------------------------------------------------------------------- /src/Pages/Calendar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop} from '@syncfusion/ej2-react-schedule'; 3 | import { DatePickerComponent } from '@syncfusion/ej2-react-calendars'; 4 | 5 | import {scheduleData} from '../Data/dummy'; 6 | import {Header} from '../Components'; 7 | 8 | const Calendar = () => { 9 | return ( 10 |
11 |
12 | 16 | 19 | 20 |
21 | ) 22 | } 23 | 24 | export default Calendar -------------------------------------------------------------------------------- /src/Pages/Employees.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { GridComponent, ColumnsDirective, ColumnDirective,Page, Search, Inject, Toolbar } from '@syncfusion/ej2-react-grids'; 3 | 4 | import {employeesData, employeesGrid } from '../Data/dummy'; 5 | import {Header} from '../Components' 6 | const Employees = () => { 7 | return ( 8 |
9 |
10 | 17 | 18 | {employeesGrid.map((item, index) => )} 19 | 20 | 21 | 22 |
23 | ); 24 | }; 25 | export default Employees; -------------------------------------------------------------------------------- /src/Pages/Kanban.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | KanbanComponent, 4 | ColumnsDirective, 5 | ColumnDirective, 6 | } from "@syncfusion/ej2-react-kanban"; 7 | import { kanbanData, kanbanGrid } from "../Data/dummy"; 8 | import { Header } from "../Components"; 9 | import { kanban } from "@syncfusion/ej2"; 10 | 11 | const Kanban = () => { 12 | return ( 13 |
14 |
15 | 21 | 22 | {kanbanGrid.map((item, index) => ( 23 | 24 | ))} 25 | 26 | 27 |
28 | ); 29 | }; 30 | 31 | export default Kanban; 32 | -------------------------------------------------------------------------------- /src/Pages/Orders.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { GridComponent, ColumnsDirective, ColumnDirective, Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject } from '@syncfusion/ej2-react-grids'; 3 | 4 | import { ordersData, contextMenuItems, ordersGrid } from '../Data/dummy'; 5 | import {Header} from '../Components' 6 | const Orders = () => { 7 | return ( 8 |
9 |
10 | 16 | 17 | {ordersGrid.map((item, index) => )} 18 | 19 | 20 | 21 |
22 | ); 23 | }; 24 | export default Orders; -------------------------------------------------------------------------------- /src/Pages/Customers.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { GridComponent, ColumnsDirective, ColumnDirective, Page, Selection, Inject, Edit, Toolbar, Sort, Filter } from '@syncfusion/ej2-react-grids'; 3 | 4 | import {customersData, customersGrid} from '../Data/dummy'; 5 | import {Header} from '../Components'; 6 | 7 | const Customers = () => { 8 | return ( 9 |
10 |
11 | 19 | 20 | {customersGrid.map((item, index) => )} 21 | 22 | 23 | 24 |
25 | ) 26 | } 27 | 28 | export default Customers -------------------------------------------------------------------------------- /src/Components/Charts/SparkLine.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts'; 3 | 4 | class SparkLine extends React.PureComponent { 5 | render() { 6 | const { id, height, width, color, data, type, currentColor } = this.props; 7 | 8 | return ( 9 | 30 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | export default SparkLine; -------------------------------------------------------------------------------- /src/Components/Charts/LineChart.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | ChartComponent, 4 | SeriesCollectionDirective, 5 | SeriesDirective, 6 | Inject, 7 | DateTme, 8 | Legend, 9 | Tooltip, 10 | LineSeries, 11 | DateTime, 12 | } from "@syncfusion/ej2-react-charts"; 13 | 14 | import { 15 | lineCustomSeries, 16 | LinePrimaryYAxis, 17 | LinePrimaryXAxis, 18 | } from "../../Data/dummy"; 19 | 20 | import { useStateContext } from "../../Contexts/ContextProvider"; 21 | 22 | const LineChart = () => { 23 | const {currentMode} = useStateContext() 24 | return ( 25 | 33 | 34 | 35 | {lineCustomSeries.map((item, index) => ( 36 | 37 | ))} 38 | 39 | 40 | ); 41 | }; 42 | 43 | export default LineChart; 44 | -------------------------------------------------------------------------------- /src/Components/Charts/Stacked.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, StackingColumnSeries, Tooltip } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { stackedCustomSeries, stackedPrimaryXAxis, stackedPrimaryYAxis } from '../../Data/dummy'; 5 | 6 | import { useStateContext } from '../../Contexts/ContextProvider'; 7 | 8 | const Stacked = ({ width, height }) => { 9 | const { currentMode } = useStateContext(); 10 | 11 | return ( 12 | 23 | 24 | 25 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 26 | {stackedCustomSeries.map((item, index) => )} 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default Stacked -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ['./src/**/*.{js,jsx,ts,tsx}'], 3 | darkMode: 'class', 4 | theme: { 5 | fontFamily: { 6 | display: ['Open Sans', 'sans-serif'], 7 | body: ['Open Sans', 'sans-serif'], 8 | }, 9 | extend: { 10 | fontSize: { 11 | 14: '14px', 12 | }, 13 | backgroundColor: { 14 | 'main-bg': '#FAFBFB', 15 | 'main-dark-bg': '#20232A', 16 | 'secondary-dark-bg': '#33373E', 17 | 'light-gray': '#F7F7F7', 18 | 'half-transparent': 'rgba(0, 0, 0, 0.5)', 19 | }, 20 | borderWidth: { 21 | 1: '1px', 22 | }, 23 | borderColor: { 24 | color: 'rgba(0, 0, 0, 0.1)', 25 | }, 26 | width: { 27 | 400: '400px', 28 | 760: '760px', 29 | 780: '780px', 30 | 800: '800px', 31 | 1000: '1000px', 32 | 1200: '1200px', 33 | 1400: '1400px', 34 | }, 35 | height: { 36 | 80: '80px', 37 | }, 38 | minHeight: { 39 | 590: '590px', 40 | }, 41 | backgroundImage: { 42 | 'hero-pattern': 43 | "url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')", 44 | }, 45 | }, 46 | }, 47 | plugins: [], 48 | }; -------------------------------------------------------------------------------- /src/Pages/Charts/Bar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel 4 | } from "@syncfusion/ej2-react-charts"; 5 | 6 | import { 7 | barCustomSeries, 8 | barPrimaryXAxis, 9 | barPrimaryYAxis, 10 | } from "../../Data/dummy"; 11 | 12 | import { useStateContext } from "../../Contexts/ContextProvider"; 13 | import { ChartsHeader } from "../../Components"; 14 | 15 | const Area = () => { 16 | const { currentMode } = useStateContext(); 17 | return ( 18 |
19 | 20 | 29 | 30 | 31 | {barCustomSeries.map((item, index) => ( 32 | 33 | ))} 34 | 35 | 36 |
37 | ); 38 | }; 39 | 40 | export default Area; 41 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://cdn.syncfusion.com/ej2/material.css'); 2 | 3 | .sidebar { 4 | box-shadow: rgb(113 122 131 / 11%) 0px 7px 30px 0px; 5 | } 6 | .nav-item, 7 | .navbar { 8 | z-index: 10000; 9 | } 10 | @media screen and (max-width:800px) { 11 | .sidebar{ 12 | z-index: 10000000; 13 | } 14 | } 15 | 16 | .e-dlg-center-center, .e-quick-popup-wrapper.e-device{ 17 | z-index: 1000000 !important; 18 | } 19 | 20 | ::-webkit-scrollbar { 21 | width: 6px; 22 | } 23 | ::-webkit-scrollbar-thumb { 24 | background-color: rgb(216, 216, 216); 25 | border-radius: 40px; 26 | } 27 | ::-webkit-scrollbar-track { 28 | background-color: transparent; 29 | } 30 | 31 | /* color-picker style */ 32 | 33 | #preview { 34 | background: transparent 35 | url('https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png') 36 | no-repeat; 37 | display: inline-block; 38 | height: 80px; 39 | margin: 10px 0; 40 | min-width: 300px; 41 | max-width: 600px; 42 | background-color: #008000; 43 | } 44 | 45 | .e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){ 46 | border: none; 47 | } -------------------------------------------------------------------------------- /src/Pages/Charts/Area.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | ChartComponent, 4 | SeriesCollectionDirective, 5 | SeriesDirective, 6 | Inject, 7 | DateTime, 8 | SplineAreaSeries, 9 | Legend 10 | } from "@syncfusion/ej2-react-charts"; 11 | 12 | import { 13 | areaCustomSeries, 14 | areaPrimaryXAxis, 15 | areaPrimaryYAxis, 16 | } from "../../Data/dummy"; 17 | 18 | import { useStateContext } from "../../Contexts/ContextProvider"; 19 | import { ChartsHeader } from "../../Components"; 20 | 21 | const Area = () => { 22 | const { currentMode } = useStateContext(); 23 | return ( 24 |
25 | 26 | 35 | 36 | 37 | {areaCustomSeries.map((item, index) => ( 38 | 39 | ))} 40 | 41 | 42 |
43 | ); 44 | }; 45 | 46 | export default Area; 47 | -------------------------------------------------------------------------------- /src/Contexts/ContextProvider.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useState } from 'react'; 2 | 3 | const StateContext = createContext(); 4 | 5 | const initialState = { 6 | chat: false, 7 | cart: false, 8 | userProfile: false, 9 | notification: false, 10 | }; 11 | 12 | export const ContextProvider = ({ children }) => { 13 | const [screenSize, setScreenSize] = useState(undefined); 14 | const [currentColor, setCurrentColor] = useState('#03C9D7'); 15 | const [currentMode, setCurrentMode] = useState('Light'); 16 | const [themeSettings, setThemeSettings] = useState(false); 17 | const [activeMenu, setActiveMenu] = useState(true); 18 | const [isClicked, setIsClicked] = useState(initialState); 19 | 20 | const setMode = (e) => { 21 | setCurrentMode(e.target.value); 22 | localStorage.setItem('themeMode', e.target.value); 23 | }; 24 | 25 | const setColor = (color) => { 26 | setCurrentColor(color); 27 | localStorage.setItem('colorMode', color); 28 | }; 29 | 30 | const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true }); 31 | 32 | return ( 33 | // eslint-disable-next-line react/jsx-no-constructed-context-values 34 | 35 | {children} 36 | 37 | ); 38 | }; 39 | 40 | export const useStateContext = () => useContext(StateContext); -------------------------------------------------------------------------------- /src/Pages/ColorPicker.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ColorPickerComponent } from "@syncfusion/ej2-react-inputs"; 3 | 4 | import { Header } from "../Components"; 5 | 6 | const change = (args) => { 7 | document.getElementById('preview').style.backgroundColor = args.currentValue.hex 8 | } 9 | 10 | const ColorPicker = () => { 11 | return ( 12 |
13 |
14 |
15 |
16 |
17 |
18 |

Inline Pallete

19 | 27 |
28 |
29 |

Inline Picker

30 | 38 |
39 |
40 |
41 |
42 | ); 43 | }; 44 | 45 | export default ColorPicker; 46 | -------------------------------------------------------------------------------- /src/Components/Charts/Pie.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationDataLabel, Inject, AccumulationTooltip } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { useStateContext } from '../../Contexts/ContextProvider'; 5 | 6 | const Doughnut = ({ id, data, legendVisiblity, height }) => { 7 | const { currentMode } = useStateContext(); 8 | 9 | return ( 10 | 17 | 18 | 19 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default Doughnut; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project_syncfusion_dashboard", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@syncfusion/ej2": "^19.4.48", 7 | "@syncfusion/ej2-react-calendars": "^19.4.48", 8 | "@syncfusion/ej2-react-charts": "^19.4.50", 9 | "@syncfusion/ej2-react-dropdowns": "^19.4.52", 10 | "@syncfusion/ej2-react-grids": "^19.4.50", 11 | "@syncfusion/ej2-react-inputs": "^19.4.52", 12 | "@syncfusion/ej2-react-kanban": "^19.4.48", 13 | "@syncfusion/ej2-react-popups": "^19.4.52", 14 | "@syncfusion/ej2-react-richtexteditor": "^19.4.50", 15 | "@syncfusion/ej2-react-schedule": "^19.4.50", 16 | "react": "^17.0.2", 17 | "react-dom": "^17.0.2", 18 | "react-icons": "^4.3.1", 19 | "react-router-dom": "^6.2.1", 20 | "react-scripts": "5.0.0" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "autoprefixer": "^10.4.2", 48 | "eslint": "^8.9.0", 49 | "eslint-config-airbnb": "^19.0.4", 50 | "eslint-plugin-import": "^2.25.4", 51 | "eslint-plugin-jsx-a11y": "^6.5.1", 52 | "eslint-plugin-react": "^7.28.0", 53 | "eslint-plugin-react-hooks": "^4.3.0", 54 | "postcss": "^8.4.6", 55 | "tailwindcss": "^3.0.19" 56 | } 57 | } -------------------------------------------------------------------------------- /src/Components/Notification.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdOutlineCancel } from 'react-icons/md'; 3 | 4 | import { Button } from '.'; 5 | import { chatData } from '../Data/dummy'; 6 | import { useStateContext } from '../Contexts/ContextProvider'; 7 | 8 | const Notification = () => { 9 | const { currentColor, close, setClose} = useStateContext(); 10 | 11 | return ( 12 |
13 |
14 |
15 |

Notifications

16 | 17 |
18 |
20 |
21 | {chatData?.map((item, index) => ( 22 |
23 | {item.message} 24 |
25 |

{item.message}

26 |

{item.desc}

27 |
28 |
29 | ))} 30 |
31 |
33 |
34 |
35 | ); 36 | }; 37 | 38 | export default Notification; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/Pages/Charts/Pyramid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, AccumulationDataLabel, AccumulationTooltip, PyramidSeries, AccumulationSelection } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { PyramidData } from '../../Data/dummy'; 5 | import { useStateContext } from '../../Contexts/ContextProvider'; 6 | import { ChartsHeader } from '../../Components'; 7 | 8 | const Pyramid = () => { 9 | const { currentMode } = useStateContext(); 10 | 11 | return ( 12 |
13 | 14 |
15 | 21 | 22 | 23 | 41 | 42 | 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default Pyramid; -------------------------------------------------------------------------------- /src/Pages/Charts/Financial.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { financialChartData, FinancialPrimaryXAxis, FinancialPrimaryYAxis } from '../../Data/dummy'; 5 | import { useStateContext } from '../../Contexts/ContextProvider'; 6 | import { ChartsHeader } from '../../Components'; 7 | 8 | const date1 = new Date('2017, 1, 1'); 9 | 10 | // eslint-disable-next-line consistent-return 11 | function filterValue(value) { 12 | if (value.x >= date1) { 13 | // eslint-disable-next-line no-sequences 14 | return value.x, value.high, value.low; 15 | } 16 | } 17 | const returnValue = financialChartData.filter(filterValue); 18 | 19 | const Financial = () => { 20 | const { currentMode } = useStateContext(); 21 | 22 | return ( 23 |
24 | 25 |
26 | 35 | 36 | 37 | 46 | 47 | 48 |
49 |
50 | ); 51 | }; 52 | 53 | export default Financial; -------------------------------------------------------------------------------- /src/Pages/Charts/ColorMapping.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Tooltip, Legend, RangeColorSettingsDirective, RangeColorSettingDirective } from '@syncfusion/ej2-react-charts' 3 | import { colorMappingData, ColorMappingPrimaryXAxis, ColorMappingPrimaryYAxis, rangeColorMapping } from '../../Data/dummy'; 4 | import { ChartsHeader } from '../../Components'; 5 | import { useStateContext } from '../../Contexts/ContextProvider'; 6 | 7 | const ColorMapping = () => { 8 | const { currentMode } = useStateContext(); 9 | 10 | return ( 11 |
12 | 13 |
14 | 23 | 24 | 25 | 36 | 37 | 38 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 39 | {rangeColorMapping.map((item, index) => )} 40 | 41 | 42 |
43 |
44 | ); 45 | }; 46 | 47 | export default ColorMapping; -------------------------------------------------------------------------------- /src/Components/Chat.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdOutlineCancel } from 'react-icons/md'; 3 | 4 | import { Button } from '.'; 5 | import { chatData } from '../Data/dummy'; 6 | import { useStateContext } from '../Contexts/ContextProvider'; 7 | 8 | const Chat = () => { 9 | const { currentColor } = useStateContext(); 10 | 11 | return ( 12 |
13 |
14 |
15 |

Messages

16 | 19 |
20 |
28 |
29 | {chatData?.map((item, index) => ( 30 |
31 |
32 | {item.message} 37 | 41 |
42 |
43 |

{item.message}

44 |

{item.desc}

45 |

{item.time}

46 |
47 |
48 | ))} 49 |
50 |
58 |
59 |
60 | ); 61 | }; 62 | 63 | export default Chat; -------------------------------------------------------------------------------- /src/Components/UserProfile.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdOutlineCancel } from 'react-icons/md'; 3 | 4 | import { Button } from '.'; 5 | import { userProfileData } from '../Data/dummy'; 6 | import { useStateContext } from '../Contexts/ContextProvider'; 7 | import avatar from '../Data/avatar.jpg'; 8 | 9 | const UserProfile = () => { 10 | const { currentColor } = useStateContext(); 11 | 12 | return ( 13 |
14 |
15 |

User Profile

16 |
24 |
25 | user-profile 30 |
31 |

Michael Roberts

32 |

Administrator

33 |

info@shop.com

34 |
35 |
36 |
37 | {userProfileData.map((item, index) => ( 38 |
39 | 46 | 47 |
48 |

{item.title}

49 |

{item.desc}

50 |
51 |
52 | ))} 53 |
54 |
55 |
63 |
64 | 65 | ); 66 | }; 67 | 68 | export default UserProfile; -------------------------------------------------------------------------------- /src/Components/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Link, NavLink } from "react-router-dom"; 3 | import { SiShopware } from "react-icons/si"; 4 | import { MdOutlineCancel } from "react-icons/md"; 5 | import { TooltipComponent } from "@syncfusion/ej2-react-popups"; 6 | 7 | import { links } from "../Data/dummy"; 8 | import { useStateContext } from "../Contexts/ContextProvider"; 9 | 10 | const Sidebar = () => { 11 | const { activeMenu, setActiveMenu, screenSize, currentColor } = useStateContext(); 12 | 13 | 14 | const handleCloseSidebar = () => { 15 | if(activeMenu && screenSize <=900) { 16 | setActiveMenu(false) 17 | } 18 | } 19 | 20 | const activeLink = 'flex items-center gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-white text-md m-2'; 21 | const normalLink = 'flex items-center gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-md text-gray-700 dark:text-gray-200 dark:hover:text-black hover:bg-light-gray m-2'; 22 | 23 | return ( 24 |
25 | {activeMenu && ( 26 | <> 27 |
28 | 29 | Shoppy 30 | 31 | 32 | 40 | 41 |
42 |
43 | {links.map((item) => ( 44 |
45 |

46 | {item.title} 47 |

48 | {item.links.map((link) => ( 49 | ({ 54 | backgroundColor: isActive ? currentColor : '', 55 | })} 56 | className={({ isActive }) => (isActive ? activeLink : normalLink)} 57 | > 58 | {link.icon} 59 | {link.name} 60 | 61 | ))} 62 |
63 | ))} 64 |
65 | 66 | )} 67 |
68 | ); 69 | }; 70 | 71 | export default Sidebar; 72 | -------------------------------------------------------------------------------- /src/Components/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdOutlineCancel } from 'react-icons/md'; 3 | import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai'; 4 | 5 | import { useStateContext } from '../Contexts/ContextProvider'; 6 | import { cartData } from '../Data/dummy'; 7 | import { Button } from '.'; 8 | 9 | const Cart = () => { 10 | const { currentColor } = useStateContext(); 11 | 12 | return ( 13 |
14 |
15 |
16 |

Shopping Cart

17 |
25 | {cartData?.map((item, index) => ( 26 |
27 |
28 |
29 | 30 |
31 |

{item.name}

32 |

{item.category}

33 |
34 |

{item.price}

35 |
36 |

37 |

0

38 |

39 |
40 |
41 |
42 |
43 |
44 |
45 | ))} 46 |
47 |
48 |

Sub Total

49 |

$890

50 |
51 |
52 |

Total

53 |

$890

54 |
55 |
56 |
57 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default Cart; -------------------------------------------------------------------------------- /src/Components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { AiOutlineMenu } from 'react-icons/ai'; 3 | import { FiShoppingCart } from 'react-icons/fi'; 4 | import { BsChatLeft } from 'react-icons/bs'; 5 | import { RiNotification3Line } from 'react-icons/ri'; 6 | import { MdKeyboardArrowDown } from 'react-icons/md'; 7 | import { TooltipComponent } from '@syncfusion/ej2-react-popups'; 8 | 9 | import avatar from '../Data/avatar.jpg'; 10 | import { Cart, Chat, Notification, UserProfile } from '.'; 11 | import { useStateContext } from '../Contexts/ContextProvider'; 12 | 13 | const NavButton = ({ title, customFunc, icon, color, dotColor }) => ( 14 | 15 | 27 | 28 | ); 29 | 30 | const Navbar = () => { 31 | const { currentColor, activeMenu, setActiveMenu, handleClick, isClicked, setScreenSize, screenSize } = useStateContext(); 32 | 33 | useEffect(() => { 34 | const handleResize = () => setScreenSize(window.innerWidth); 35 | 36 | window.addEventListener('resize', handleResize); 37 | 38 | handleResize(); 39 | 40 | return () => window.removeEventListener('resize', handleResize); 41 | }, []); 42 | 43 | useEffect(() => { 44 | if (screenSize <= 900) { 45 | setActiveMenu(false); 46 | } else { 47 | setActiveMenu(true); 48 | } 49 | }, [screenSize]); 50 | 51 | const handleActiveMenu = () => setActiveMenu(!activeMenu); 52 | 53 | return ( 54 |
55 | 56 | } /> 57 |
58 | handleClick('cart')} color={currentColor} icon={} /> 59 | handleClick('chat')} color={currentColor} icon={} /> 60 | handleClick('notification')} color={currentColor} icon={} /> 61 | 62 |
handleClick('userProfile')} 65 | > 66 | user-profile 71 |

72 | Hi,{' '} 73 | 74 | Michael 75 | 76 |

77 | 78 |
79 | 80 | 81 | {isClicked.cart && ()} 82 | {isClicked.chat && ()} 83 | {isClicked.notification && ()} 84 | {isClicked.userProfile && ()} 85 |
86 |
87 | ); 88 | }; 89 | 90 | export default Navbar; -------------------------------------------------------------------------------- /src/Components/ThemeSettings.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { MdOutlineCancel } from "react-icons/md"; 3 | import { BsCheck } from "react-icons/bs"; 4 | import { TooltipComponent } from "@syncfusion/ej2-react-popups"; 5 | 6 | import { themeColors } from "../Data/dummy"; 7 | import { useStateContext } from "../Contexts/ContextProvider"; 8 | 9 | const ThemeSettings = () => { 10 | const { setColor, setMode, currentMode, currentColor, setThemeSettings } = 11 | useStateContext(); 12 | return ( 13 |
14 |
15 |
16 |

Settings

17 | 25 |
26 | 27 |
28 |

Theme Options

29 | 30 |
31 | 40 | 43 |
44 |
45 | 54 | 57 |
58 |
59 |
60 |

Theme Colors

61 |
62 | {themeColors.map((item, index) => ( 63 | 68 |
72 | 84 |
85 | 86 | ))} 87 |
88 |
89 |
90 |
91 | ); 92 | }; 93 | 94 | export default ThemeSettings; 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Admin-Dashboard Front End clone made with React JS 2 | H! This a Admin-Dashboard front end clone that i´ve built using ReactJS. 3 | __You can visit the website clicking [here!](https://react-admin-dashboard01.netlify.app/)__ 4 | 5 | ![dashboard](https://user-images.githubusercontent.com/97960285/173236612-ef63c5d8-173b-4f7d-a345-6d82bac560ec.jpg) 6 | 7 | 8 | 9 | # Getting Started with Create React App 10 | 11 | This project was bootstrapped with [Create React App](https://cryptobase-01.netlify.app/). 12 | 13 | ## Available Scripts 14 | 15 | In the project directory, you can run: 16 | 17 | ### `npm start` 18 | 19 | Runs the app in the development mode.\ 20 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 21 | 22 | The page will reload when you make changes.\ 23 | You may also see any lint errors in the console. 24 | 25 | ### `npm test` 26 | 27 | Launches the test runner in the interactive watch mode.\ 28 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 29 | 30 | ### `npm run build` 31 | 32 | Builds the app for production to the `build` folder.\ 33 | It correctly bundles React in production mode and optimizes the build for the best performance. 34 | 35 | The build is minified and the filenames include the hashes.\ 36 | Your app is ready to be deployed! 37 | 38 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 39 | 40 | ### `npm run eject` 41 | 42 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 43 | 44 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 45 | 46 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 47 | 48 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 49 | 50 | ## Learn More 51 | 52 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 53 | 54 | To learn React, check out the [React documentation](https://reactjs.org/). 55 | 56 | ### Code Splitting 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 59 | 60 | ### Analyzing the Bundle Size 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 63 | 64 | ### Making a Progressive Web App 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 67 | 68 | ### Advanced Configuration 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 71 | 72 | ### Deployment 73 | 74 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 75 | 76 | ### `npm run build` fails to minify 77 | 78 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 79 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { BrowserRouter, Routes, Route } from 'react-router-dom'; 3 | import { FiSettings } from 'react-icons/fi'; 4 | import { TooltipComponent } from '@syncfusion/ej2-react-popups'; 5 | 6 | import { Navbar, Footer, Sidebar, ThemeSettings } from './Components'; 7 | import { Ecommerce, Orders, Calendar, Employees, Stacked, Pyramid, Customers, Kanban, Line, Area, Bar, Pie, Financial, ColorPicker, ColorMapping, Editor } from './Pages'; 8 | import './App.css'; 9 | 10 | import { useStateContext } from './Contexts/ContextProvider'; 11 | 12 | const App = () => { 13 | const { setCurrentColor, setCurrentMode, currentMode, activeMenu, currentColor, themeSettings, setThemeSettings } = useStateContext(); 14 | 15 | useEffect(() => { 16 | const currentThemeColor = localStorage.getItem('colorMode'); 17 | const currentThemeMode = localStorage.getItem('themeMode'); 18 | if (currentThemeColor && currentThemeMode) { 19 | setCurrentColor(currentThemeColor); 20 | setCurrentMode(currentThemeMode); 21 | } 22 | }, []); 23 | 24 | return ( 25 |
26 | 27 |
28 |
29 | 33 | 41 | 42 | 43 |
44 | {activeMenu ? ( 45 |
46 | 47 |
48 | ) : ( 49 |
50 | 51 |
52 | )} 53 |
60 |
61 | 62 |
63 |
64 | {themeSettings && ()} 65 | 66 | 67 | {/* dashboard */} 68 | )} /> 69 | )} /> 70 | 71 | {/* pages */} 72 | } /> 73 | } /> 74 | } /> 75 | 76 | {/* apps */} 77 | } /> 78 | } /> 79 | } /> 80 | } /> 81 | 82 | {/* charts */} 83 | } /> 84 | } /> 85 | } /> 86 | } /> 87 | } /> 88 | } /> 89 | } /> 90 | } /> 91 | 92 | 93 |
94 |
95 |
96 |
97 | 98 |
99 | ); 100 | }; 101 | 102 | export default App; -------------------------------------------------------------------------------- /src/Pages/Ecommerce.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BsCurrencyDollar } from 'react-icons/bs'; 3 | import { GoPrimitiveDot } from 'react-icons/go'; 4 | import { IoIosMore } from 'react-icons/io'; 5 | import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; 6 | 7 | import { Stacked, Pie, Button, LineChart, SparkLine } from '../Components'; 8 | import { earningData, medicalproBranding, recentTransactions, weeklyStats, dropdownData, SparklineAreaData, ecomPieChartData } from '../Data/dummy'; 9 | import { useStateContext } from '../Contexts/ContextProvider'; 10 | import product9 from '../Data/product9.jpg'; 11 | 12 | const DropDown = ({ currentMode }) => ( 13 |
14 | 15 |
16 | ); 17 | 18 | const Ecommerce = () => { 19 | const { currentColor, currentMode } = useStateContext(); 20 | 21 | return ( 22 |
23 |
24 |
25 |
26 |
27 |

Earnings

28 |

$63,448.78

29 |
30 | 37 |
38 |
39 |
46 |
47 |
48 | {earningData.map((item) => ( 49 |
50 | 57 |

58 | {item.amount} 59 | 60 | {item.percentage} 61 | 62 |

63 |

{item.title}

64 |
65 | ))} 66 |
67 |
68 | 69 |
70 |
71 |
72 |

Revenue Updates

73 |
74 |

75 | 76 | 77 | 78 | Expense 79 |

80 |

81 | 82 | 83 | 84 | Budget 85 |

86 |
87 |
88 |
89 |
90 |
91 |

92 | $93,438 93 | 94 | 23% 95 | 96 |

97 |

Budget

98 |
99 |
100 |

$48,487

101 | 102 |

Expense

103 |
104 | 105 |
106 | 107 |
108 |
109 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |
127 |
128 |

Earnings

129 | 130 |
131 |

$63,448.78

132 |

Monthly revenue

133 |
134 |
135 | 136 |
137 | 138 |
139 |
140 | 141 |
142 |
143 |

$43,246

144 |

Yearly sales

145 |
146 | 147 |
148 | 149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 |
157 |

Recent Transactions

158 | 159 |
160 |
161 | {recentTransactions.map((item) => ( 162 |
163 |
164 | 174 |
175 |

{item.title}

176 |

{item.desc}

177 |
178 |
179 |

{item.amount}

180 |
181 | ))} 182 |
183 |
184 |
185 |
192 | 193 |

36 Recent Transactions

194 |
195 |
196 |
197 |
198 |

Sales Overview

199 | 200 |
201 |
202 | 203 |
204 |
205 |
206 | 207 |
208 |
209 |
210 |

Weekly Stats

211 | 214 |
215 | 216 |
217 | {weeklyStats.map((item) => ( 218 |
219 |
220 | 227 |
228 |

{item.title}

229 |

{item.desc}

230 |
231 |
232 | 233 |

{item.amount}

234 |
235 | ))} 236 |
237 | 238 |
239 |
240 | 241 |
242 |
243 |
244 |

MedicalPro Branding

245 | 248 |
249 |

250 | 16 APR, 2021 251 |

252 | 253 |
254 | {medicalproBranding.data.map((item) => ( 255 |
256 |

{item.title}

257 |

{item.desc}

258 |
259 | ))} 260 |
261 |
262 |

Teams

263 | 264 |
265 | {medicalproBranding.teams.map((item) => ( 266 |

271 | {item.name} 272 |

273 | ))} 274 |
275 |
276 |
277 |

Leaders

278 |
279 | {medicalproBranding.leaders.map((item, index) => ( 280 | 281 | ))} 282 |
283 |
284 |
285 |
286 |
293 | 294 |

36 Recent Transactions

295 |
296 |
297 |
298 |
299 |

Daily Activities

300 | 303 |
304 |
305 | 310 |
311 |

React 18 coming soon!

312 |

By Johnathan Doe

313 |

314 | This will be the small description for the news you have shown 315 | here. There could be some great info. 316 |

317 |
318 |
325 |
326 |
327 |
328 |
329 |
330 | ); 331 | }; 332 | 333 | export default Ecommerce; -------------------------------------------------------------------------------- /src/Data/welcome-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | welcome-bg-2x-svg 3 | 4 | 5 | 6 | 10 | 11 | 12 | --------------------------------------------------------------------------------