├── .env ├── public ├── 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 ├── index.css ├── components │ ├── Footer.jsx │ ├── Header.jsx │ ├── ChartsHeader.jsx │ ├── Button.jsx │ ├── index.jsx │ ├── Charts │ │ ├── SparkLine.jsx │ │ ├── LineChart.jsx │ │ ├── Stacked.jsx │ │ └── Pie.jsx │ ├── Notification.jsx │ ├── UserProfile.jsx │ ├── Chat.jsx │ ├── Sidebar.jsx │ ├── Cart.jsx │ ├── Navbar.jsx │ └── ThemeSettings.jsx ├── index.js ├── pages │ ├── Charts │ │ ├── Line.jsx │ │ ├── Stacked.jsx │ │ ├── Pie.jsx │ │ ├── Area.jsx │ │ ├── Bar.jsx │ │ ├── Pyramid.jsx │ │ ├── Financial.jsx │ │ └── ColorMapping.jsx │ ├── Editor.jsx │ ├── index.jsx │ ├── Kanban.jsx │ ├── Employees.jsx │ ├── ColorPicker.jsx │ ├── Orders.jsx │ ├── Customers.jsx │ ├── Calendar.jsx │ └── Ecommerce.jsx ├── App.css ├── contexts │ └── ContextProvider.js └── App.js ├── craco.config.js ├── .gitignore ├── tailwind.config.js ├── package.json └── .eslintrc.js /.env: -------------------------------------------------------------------------------- 1 | ESLINT_NO_DEV_ERRORS=true -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/data/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/avatar.jpg -------------------------------------------------------------------------------- /src/data/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/avatar2.jpg -------------------------------------------------------------------------------- /src/data/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/avatar3.png -------------------------------------------------------------------------------- /src/data/avatar4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/avatar4.jpg -------------------------------------------------------------------------------- /src/data/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product1.jpg -------------------------------------------------------------------------------- /src/data/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product2.jpg -------------------------------------------------------------------------------- /src/data/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product3.jpg -------------------------------------------------------------------------------- /src/data/product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product4.jpg -------------------------------------------------------------------------------- /src/data/product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product5.jpg -------------------------------------------------------------------------------- /src/data/product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product6.jpg -------------------------------------------------------------------------------- /src/data/product7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product7.jpg -------------------------------------------------------------------------------- /src/data/product8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product8.jpg -------------------------------------------------------------------------------- /src/data/product9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Arbab-Mustafa/Dashboard-React/HEAD/src/data/product9.jpg -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | // craco.config.js 2 | module.exports = { 3 | style: { 4 | postcss: { 5 | plugins: [ 6 | require('tailwindcss'), 7 | require('autoprefixer'), 8 | ], 9 | }, 10 | }, 11 | }; -------------------------------------------------------------------------------- /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; 12 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Header = ({ category, title }) => ( 4 |
5 |

{category}

6 |

7 | {title} 8 |

9 |
10 | ); 11 | 12 | export default Header; 13 | -------------------------------------------------------------------------------- /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 | 13 | , 14 | document.getElementById('root'), 15 | ); 16 | -------------------------------------------------------------------------------- /.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/pages/Charts/Line.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { ChartsHeader, LineChart } from '../../components'; 4 | 5 | const Line = () => ( 6 |
7 | 8 |
9 | 10 |
11 |
12 | ); 13 | 14 | export default Line; 15 | -------------------------------------------------------------------------------- /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; 15 | -------------------------------------------------------------------------------- /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; 14 | -------------------------------------------------------------------------------- /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; 16 | -------------------------------------------------------------------------------- /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/pages/Editor.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; 3 | 4 | import { Header } from '../components'; 5 | import { EditorData } from '../data/dummy'; 6 | 7 | const Editor = () => ( 8 |
9 |
10 | 11 | 12 | 13 | 14 |
15 | ); 16 | export default Editor; 17 | -------------------------------------------------------------------------------- /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; 21 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | Shoppy 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /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 | export { default as Navbar } from './Navbar'; 5 | export { default as Footer } from './Footer'; 6 | export { default as Cart } from './Cart'; 7 | export { default as Chat } from './Chat'; 8 | export { default as Notification } from './Notification'; 9 | export { default as UserProfile } from './UserProfile'; 10 | export { default as SparkLine } from './Charts/SparkLine'; 11 | export { default as LineChart } from './Charts/LineChart'; 12 | export { default as Stacked } from './Charts/Stacked'; 13 | export { default as Pie } from './Charts/Pie'; 14 | export { default as ChartsHeader } from './ChartsHeader'; 15 | export { default as Header } from './Header'; 16 | -------------------------------------------------------------------------------- /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'; 17 | 18 | -------------------------------------------------------------------------------- /src/pages/Kanban.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban'; 3 | 4 | import { kanbanData, kanbanGrid } from '../data/dummy'; 5 | import { Header } from '../components'; 6 | 7 | const Kanban = () => ( 8 |
9 |
10 | 16 | 17 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 18 | {kanbanGrid.map((item, index) => )} 19 | 20 | 21 |
22 | ); 23 | 24 | export default Kanban; 25 | -------------------------------------------------------------------------------- /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 | 31 | 32 | 33 | ); 34 | } 35 | } 36 | 37 | export default SparkLine; 38 | -------------------------------------------------------------------------------- /src/pages/Employees.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Search, Page } from '@syncfusion/ej2-react-grids'; 3 | 4 | import { employeesData, employeesGrid } from '../data/dummy'; 5 | import { Header } from '../components'; 6 | 7 | const Employees = () => { 8 | const toolbarOptions = ['Search']; 9 | 10 | const editing = { allowDeleting: true, allowEditing: true }; 11 | 12 | return ( 13 |
14 |
15 | 24 | 25 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 26 | {employeesGrid.map((item, index) => )} 27 | 28 | 29 | 30 | 31 |
32 | ); 33 | }; 34 | export default Employees; 35 | -------------------------------------------------------------------------------- /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 CustomColorPicker = ({ id, mode }) => ; 11 | 12 | const ColorPicker = () => ( 13 |
14 |
15 |
16 |
17 |
18 |
19 |

Inline Pallete

20 | 21 |
22 |
23 |

Inline Picker

24 | 25 |
26 |
27 |
28 |
29 | ); 30 | 31 | export default ColorPicker; 32 | -------------------------------------------------------------------------------- /src/components/Charts/LineChart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { lineCustomSeries, LinePrimaryXAxis, LinePrimaryYAxis } from '../../data/dummy'; 5 | import { useStateContext } from '../../contexts/ContextProvider'; 6 | 7 | const LineChart = () => { 8 | const { currentMode } = useStateContext(); 9 | 10 | return ( 11 | 21 | 22 | 23 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 24 | {lineCustomSeries.map((item, index) => )} 25 | 26 | 27 | ); 28 | }; 29 | 30 | export default LineChart; 31 | -------------------------------------------------------------------------------- /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://i.ibb.co/MkvLDfb/Rectangle-4389.png')", 44 | }, 45 | }, 46 | }, 47 | plugins: [], 48 | }; 49 | -------------------------------------------------------------------------------- /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 | 7 | const Orders = () => { 8 | const editing = { allowDeleting: true, allowEditing: true }; 9 | return ( 10 |
11 |
12 | 22 | 23 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 24 | {ordersGrid.map((item, index) => )} 25 | 26 | 27 | 28 |
29 | ); 30 | }; 31 | export default Orders; 32 | -------------------------------------------------------------------------------- /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 | import { useStateContext } from '../../contexts/ContextProvider'; 6 | 7 | const Stacked = ({ width, height }) => { 8 | const { currentMode } = useStateContext(); 9 | 10 | return ( 11 | 22 | 23 | 24 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 25 | {stackedCustomSeries.map((item, index) => )} 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default Stacked; 32 | -------------------------------------------------------------------------------- /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 | const selectionsettings = { persistSelection: true }; 9 | const toolbarOptions = ['Delete']; 10 | const editing = { allowDeleting: true, allowEditing: true }; 11 | 12 | return ( 13 |
14 |
15 | 25 | 26 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 27 | {customersGrid.map((item, index) => )} 28 | 29 | 30 | 31 |
32 | ); 33 | }; 34 | 35 | export default Customers; 36 | -------------------------------------------------------------------------------- /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 from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DateTime, SplineAreaSeries, Legend } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { ChartsHeader } from '../../components'; 5 | import { areaCustomSeries, areaPrimaryXAxis, areaPrimaryYAxis } from '../../data/dummy'; 6 | import { useStateContext } from '../../contexts/ContextProvider'; 7 | 8 | const Area = () => { 9 | const { currentMode } = useStateContext(); 10 | 11 | return ( 12 |
13 | 14 |
15 | 23 | 24 | 25 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 26 | {areaCustomSeries.map((item, index) => )} 27 | 28 | 29 |
30 |
31 | ); 32 | }; 33 | 34 | export default Area; 35 | -------------------------------------------------------------------------------- /src/pages/Charts/Bar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy'; 5 | import { ChartsHeader } from '../../components'; 6 | import { useStateContext } from '../../contexts/ContextProvider'; 7 | 8 | const Bar = () => { 9 | const { currentMode } = useStateContext(); 10 | 11 | return ( 12 |
13 | 14 |
15 | 24 | 25 | 26 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 27 | {barCustomSeries.map((item, index) => )} 28 | 29 | 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Bar; 36 | -------------------------------------------------------------------------------- /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); 41 | -------------------------------------------------------------------------------- /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; 47 | -------------------------------------------------------------------------------- /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 } = 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; 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project_syncfusion_dashboard-main", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@syncfusion/ej2": "^19.4.51", 7 | "@syncfusion/ej2-react-calendars": "^19.4.51", 8 | "@syncfusion/ej2-react-charts": "^19.4.51", 9 | "@syncfusion/ej2-react-dropdowns": "^24.1.45", 10 | "@syncfusion/ej2-react-grids": "^19.4.51", 11 | "@syncfusion/ej2-react-inputs": "^19.4.51", 12 | "@syncfusion/ej2-react-kanban": "^19.4.51", 13 | "@syncfusion/ej2-react-popups": "^19.4.51", 14 | "@syncfusion/ej2-react-richtexteditor": "^19.4.51", 15 | "@syncfusion/ej2-react-schedule": "^19.4.51", 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 | "resolve-cwd": "^3.0.0" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "autoprefixer": "^10.4.2", 49 | "eslint": "^8.9.0", 50 | "eslint-config-airbnb": "^19.0.4", 51 | "eslint-plugin-import": "^2.25.4", 52 | "eslint-plugin-jsx-a11y": "^6.5.1", 53 | "eslint-plugin-react": "^7.28.0", 54 | "eslint-plugin-react-hooks": "^4.3.0", 55 | "postcss": "^8.4.6", 56 | "tailwindcss": "^3.0.19" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended', 8 | 'airbnb', 9 | ], 10 | parserOptions: { 11 | ecmaFeatures: { 12 | jsx: true, 13 | }, 14 | ecmaVersion: 12, 15 | sourceType: 'module', 16 | }, 17 | plugins: [ 18 | 'react', 19 | ], 20 | rules: { 21 | 'react/function-component-definition': 0, 22 | 'import/extensions': 0, 23 | 'react/prop-types': 0, 24 | 'linebreak-style': 0, 25 | 'react/state-in-constructor': 0, 26 | 'import/prefer-default-export': 0, 27 | 'max-len': [ 28 | 2, 29 | 550, 30 | ], 31 | 'no-multiple-empty-lines': [ 32 | 'error', 33 | { 34 | max: 1, 35 | maxEOF: 1, 36 | }, 37 | ], 38 | 'no-underscore-dangle': [ 39 | 'error', 40 | { 41 | allow: [ 42 | '_d', 43 | '_dh', 44 | '_h', 45 | '_id', 46 | '_m', 47 | '_n', 48 | '_t', 49 | '_text', 50 | ], 51 | }, 52 | ], 53 | 'object-curly-newline': 0, 54 | 'react/jsx-filename-extension': 0, 55 | 'react/jsx-one-expression-per-line': 0, 56 | 'jsx-a11y/click-events-have-key-events': 0, 57 | 'jsx-a11y/alt-text': 0, 58 | 'jsx-a11y/no-autofocus': 0, 59 | 'jsx-a11y/no-static-element-interactions': 0, 60 | 'react/no-array-index-key': 0, 61 | 'jsx-a11y/anchor-is-valid': [ 62 | 'error', 63 | { 64 | components: [ 65 | 'Link', 66 | ], 67 | specialLink: [ 68 | 'to', 69 | 'hrefLeft', 70 | 'hrefRight', 71 | ], 72 | aspects: [ 73 | 'noHref', 74 | 'invalidHref', 75 | 'preferButton', 76 | ], 77 | }, 78 | ], 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /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; 49 | -------------------------------------------------------------------------------- /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; 54 | -------------------------------------------------------------------------------- /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 | 4 | import { colorMappingData, ColorMappingPrimaryXAxis, ColorMappingPrimaryYAxis, rangeColorMapping } from '../../data/dummy'; 5 | import { ChartsHeader } from '../../components'; 6 | import { useStateContext } from '../../contexts/ContextProvider'; 7 | 8 | const ColorMapping = () => { 9 | const { currentMode } = useStateContext(); 10 | 11 | return ( 12 |
13 | 14 |
15 | 24 | 25 | 26 | 37 | 38 | 39 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 40 | {rangeColorMapping.map((item, index) => )} 41 | 42 | 43 |
44 |
45 | ); 46 | }; 47 | 48 | export default ColorMapping; 49 | -------------------------------------------------------------------------------- /src/pages/Calendar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } 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 | // eslint-disable-next-line react/destructuring-assignment 9 | const PropertyPane = (props) =>
{props.children}
; 10 | 11 | const Scheduler = () => { 12 | const [scheduleObj, setScheduleObj] = useState(); 13 | 14 | const change = (args) => { 15 | scheduleObj.selectedDate = args.value; 16 | scheduleObj.dataBind(); 17 | }; 18 | 19 | const onDragStart = (arg) => { 20 | // eslint-disable-next-line no-param-reassign 21 | arg.navigation.enable = true; 22 | }; 23 | 24 | return ( 25 |
26 |
27 | setScheduleObj(schedule)} 30 | selectedDate={new Date(2021, 0, 10)} 31 | eventSettings={{ dataSource: scheduleData }} 32 | dragStart={onDragStart} 33 | > 34 | 35 | { ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'].map((item) => )} 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 54 | 55 | 56 |
46 | 53 |
57 | 58 |
59 | ); 60 | }; 61 | 62 | export default Scheduler; 63 | -------------------------------------------------------------------------------- /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; 69 | -------------------------------------------------------------------------------- /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 | 22 |
23 |
31 |
32 | {chatData?.map((item, index) => ( 33 |
37 |
38 | {item.message} 43 | 47 |
48 |
49 |

50 | {item.message} 51 |

52 |

53 | {item.desc} 54 |

55 |

56 | {item.time} 57 |

58 |
59 |
60 | ))} 61 |
62 |
70 |
71 |
72 | ); 73 | }; 74 | 75 | export default Chat; 76 | -------------------------------------------------------------------------------- /src/components/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React 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 { currentColor, activeMenu, setActiveMenu, screenSize } = useStateContext(); 12 | 13 | const handleCloseSideBar = () => { 14 | if (activeMenu !== undefined && screenSize <= 900) { 15 | setActiveMenu(false); 16 | } 17 | }; 18 | 19 | const activeLink = 'flex items-center gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-white text-md m-2'; 20 | 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'; 21 | 22 | return ( 23 |
24 | {activeMenu && ( 25 | <> 26 |
27 | 28 | Shoppy 29 | 30 | 31 | 39 | 40 |
41 |
42 | {links.map((item) => ( 43 |
44 |

45 | {item.title} 46 |

47 | {item.links.map((link) => ( 48 | ({ 53 | backgroundColor: isActive ? currentColor : '', 54 | })} 55 | className={({ isActive }) => (isActive ? activeLink : normalLink)} 56 | > 57 | {link.icon} 58 | {link.name} 59 | 60 | ))} 61 |
62 | ))} 63 |
64 | 65 | )} 66 |
67 | ); 68 | }; 69 | 70 | export default Sidebar; 71 | -------------------------------------------------------------------------------- /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 |

33 | {item.category} 34 |

35 |
36 |

{item.price}

37 |
38 |

39 | 40 |

41 |

42 | 0 43 |

44 |

45 | 46 |

47 |
48 |
49 |
50 |
51 |
52 |
53 | ))} 54 |
55 |
56 |

Sub Total

57 |

$890

58 |
59 |
60 |

Total

61 |

$890

62 |
63 |
64 |
65 |
73 |
74 |
75 | ); 76 | }; 77 | 78 | export default Cart; 79 | -------------------------------------------------------------------------------- /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; 91 | -------------------------------------------------------------------------------- /src/components/ThemeSettings.jsx: -------------------------------------------------------------------------------- 1 | import React 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 | 13 | return ( 14 |
15 |
16 |
17 |

Settings

18 | 26 |
27 |
28 |

Theme Option

29 | 30 |
31 | 40 | {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} 41 | 44 |
45 |
46 | 55 | {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} 56 | 59 |
60 |
61 |
62 |

Theme Colors

63 |
64 | {themeColors.map((item, index) => ( 65 | 70 |
74 | 86 |
87 | 88 | ))} 89 |
90 |
91 |
92 |
93 | ); 94 | }; 95 | 96 | export default ThemeSettings; 97 | -------------------------------------------------------------------------------- /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 { 8 | Ecommerce, 9 | Orders, 10 | Calendar, 11 | Employees, 12 | Stacked, 13 | Pyramid, 14 | Customers, 15 | Kanban, 16 | Line, 17 | Area, 18 | Bar, 19 | Pie, 20 | Financial, 21 | ColorPicker, 22 | ColorMapping, 23 | Editor, 24 | } from './pages'; 25 | import './App.css'; 26 | 27 | import { useStateContext } from './contexts/ContextProvider'; 28 | 29 | const App = () => { 30 | const { 31 | setCurrentColor, 32 | setCurrentMode, 33 | currentMode, 34 | activeMenu, 35 | currentColor, 36 | themeSettings, 37 | setThemeSettings, 38 | } = useStateContext(); 39 | 40 | useEffect(() => { 41 | const currentThemeColor = localStorage.getItem('colorMode'); 42 | const currentThemeMode = localStorage.getItem('themeMode'); 43 | if (currentThemeColor && currentThemeMode) { 44 | setCurrentColor(currentThemeColor); 45 | setCurrentMode(currentThemeMode); 46 | } 47 | }, []); 48 | 49 | return ( 50 |
51 | 52 |
53 |
54 | 55 | 63 | 64 |
65 | {activeMenu ? ( 66 |
67 | 68 |
69 | ) : ( 70 |
71 | 72 |
73 | )} 74 |
81 |
82 | 83 |
84 |
85 | {themeSettings && } 86 | 87 | 88 | {/* dashboard */} 89 | } /> 90 | } /> 91 | 92 | {/* pages */} 93 | } /> 94 | } /> 95 | } /> 96 | 97 | {/* apps */} 98 | } /> 99 | } /> 100 | } /> 101 | } /> 102 | 103 | {/* charts */} 104 | } /> 105 | } /> 106 | } /> 107 | } /> 108 | } /> 109 | } /> 110 | } /> 111 | } /> 112 | 113 |
114 |
115 |
116 |
117 | 118 |
119 | ); 120 | }; 121 | 122 | export default App; 123 | -------------------------------------------------------------------------------- /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; 334 | -------------------------------------------------------------------------------- /src/data/welcome-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | welcome-bg-2x-svg 3 | 4 | 5 | 6 | 10 | 11 | 12 | --------------------------------------------------------------------------------