├── public ├── _redirects ├── 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 ├── components │ ├── Cart.jsx │ ├── Chat.jsx │ ├── Footer.jsx │ ├── Notification.jsx │ ├── UserProfile.jsx │ ├── ChartsHeader.jsx │ ├── Header.jsx │ ├── Button.jsx │ ├── index.jsx │ ├── Charts │ │ ├── SparkLine.jsx │ │ ├── LineChart.jsx │ │ ├── Stacked.jsx │ │ └── Pie.jsx │ ├── Sidebar.jsx │ ├── ThemeSettings.jsx │ └── Navbar.jsx ├── index.css ├── index.js ├── pages │ ├── Charts │ │ ├── Line.jsx │ │ ├── Stacked.jsx │ │ ├── Pie.jsx │ │ ├── Area.jsx │ │ ├── Bar.jsx │ │ ├── Pyramid.jsx │ │ ├── Financial.jsx │ │ └── ColorMapping.jsx │ ├── Editor.jsx │ ├── Kanban.jsx │ ├── index.jsx │ ├── Calendar.jsx │ ├── Employees.jsx │ ├── Orders.jsx │ ├── ColorPicker.jsx │ ├── Customers.jsx │ └── Ecommerce.jsx ├── App.css ├── contexts │ └── ContextProvider.js └── App.js ├── netlify.toml ├── craco.config.js ├── .gitignore ├── tailwind.config.js ├── package.json └── README.md /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/data/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/avatar.jpg -------------------------------------------------------------------------------- /src/data/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/avatar2.jpg -------------------------------------------------------------------------------- /src/data/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/avatar3.png -------------------------------------------------------------------------------- /src/data/avatar4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/avatar4.jpg -------------------------------------------------------------------------------- /src/data/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product1.jpg -------------------------------------------------------------------------------- /src/data/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product2.jpg -------------------------------------------------------------------------------- /src/data/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product3.jpg -------------------------------------------------------------------------------- /src/data/product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product4.jpg -------------------------------------------------------------------------------- /src/data/product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product5.jpg -------------------------------------------------------------------------------- /src/data/product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product6.jpg -------------------------------------------------------------------------------- /src/data/product7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product7.jpg -------------------------------------------------------------------------------- /src/data/product8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product8.jpg -------------------------------------------------------------------------------- /src/data/product9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/POORNA-github/syncfusiondashboard-react/HEAD/src/data/product9.jpg -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish="/build' 4 | base = "/" 5 | 6 | [[redirects]] 7 | from = "/*" 8 | to = "/index.html" 9 | status = 200 -------------------------------------------------------------------------------- /src/components/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Cart = () => { 4 | return ( 5 |
6 | Cart 7 |
8 | ) 9 | } 10 | 11 | export default Cart 12 | -------------------------------------------------------------------------------- /src/components/Chat.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Chat = () => { 4 | return ( 5 |
6 | Chat 7 |
8 | ) 9 | } 10 | 11 | export default Chat 12 | 13 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Footer 7 |
8 | ) 9 | } 10 | 11 | export default Footer 12 | -------------------------------------------------------------------------------- /src/components/Notification.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Notification = () => { 4 | return ( 5 |
Notification 6 |
7 | ) 8 | } 9 | 10 | export default Notification 11 | -------------------------------------------------------------------------------- /src/components/UserProfile.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const UserProfile = () => { 4 | return ( 5 |
6 | UserProfile 7 |
8 | ) 9 | } 10 | 11 | export default UserProfile 12 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [ 5 | require('tailwindcss'), 6 | require('autoprefixer'), 7 | ], 8 | }, 9 | }, 10 | }; -------------------------------------------------------------------------------- /src/components/ChartsHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const ChartsHeader = () => { 4 | return ( 5 |
6 | ChartsHeader 7 |
8 | ) 9 | } 10 | 11 | export default ChartsHeader 12 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); 7 | 8 | body { 9 | margin: 0; 10 | padding:0; 11 | font-family: "Open Sans", sans-serif; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | 5 | import './index.css'; 6 | import App from './App'; 7 | import { ContextProvider } from "./contexts/ContextProvider"; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | ,document.getElementById('root')); -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Header = ({ category, title }) => { 4 | return ( 5 |
6 |

{category}

7 |

8 | {title} 9 |

10 |
11 | ) 12 | } 13 | 14 | export default Header 15 | -------------------------------------------------------------------------------- /src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Button = ({bgColor,color,size,text, borderRadius}) => { 4 | return ( 5 | 13 | ) 14 | } 15 | 16 | export default Button 17 | -------------------------------------------------------------------------------- /src/pages/Charts/Line.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Header, LineChart } from '../../components'; 4 | 5 | const Line = () => ( 6 |
7 |
8 |
9 | 10 |
11 |
12 | ); 13 | 14 | export default Line; -------------------------------------------------------------------------------- /.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/Stacked.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Header, Stacked as StackedChart } from '../../components'; 4 | 5 | const Stacked = () => ( 6 |
7 |
8 |
9 | 10 |
11 |
12 | ); 13 | 14 | export default Stacked; -------------------------------------------------------------------------------- /src/pages/Charts/Pie.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { pieChartData } from '../../data/dummy'; 4 | import { Header, 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/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 | return ( 9 |
10 |
11 | 12 | 13 | 14 | 15 |
16 | ) 17 | } 18 | 19 | export default Editor 20 | -------------------------------------------------------------------------------- /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'; -------------------------------------------------------------------------------- /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 | 18 | {kanbanGrid.map((item, index) => )} 19 | 20 | 21 |
22 | ); 23 | 24 | export default Kanban; -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | import { scheduleData } from '../data/dummy'; 5 | import { Header } from '../components'; 6 | 7 | 8 | const Calendar = () => { 9 | return ( 10 |
11 |
12 | 18 | 19 | 20 |
21 | ) 22 | } 23 | 24 | export default Calendar 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 | 30 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | export default SparkLine; -------------------------------------------------------------------------------- /src/pages/Employees.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Search, Page } from '@syncfusion/ej2-react-grids'; 4 | 5 | import { employeesData, employeesGrid } from '../data/dummy'; 6 | import { Header } from '../components'; 7 | 8 | const Employees = () => { 9 | const toolbarOptions = ['Search']; 10 | 11 | const editing = { allowDeleting: true, allowEditing: true }; 12 | 13 | return ( 14 |
15 |
16 | 25 | 26 | {employeesGrid.map((item, index) => )} 27 | 28 | 29 | 30 | 31 |
32 | ); 33 | }; 34 | export default Employees; 35 | -------------------------------------------------------------------------------- /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 | 24 | {ordersGrid.map((item, index) => )} 25 | 26 | 27 | 28 |
29 | ); 30 | }; 31 | export default Orders; -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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 | 8 | const Stacked = ({ width, height }) => { 9 | const { currentMode } = useStateContext(); 10 | return ( 11 | 23 | 24 | 25 | {stackedCustomSeries.map((item, index) => )} 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | export default Stacked 33 | -------------------------------------------------------------------------------- /src/pages/Charts/Area.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, SplineAreaSeries, DateTime, Legend } from '@syncfusion/ej2-react-charts'; 3 | 4 | import { areaCustomSeries, areaPrimaryXAxis, areaPrimaryYAxis } from '../../data/dummy'; 5 | import { useStateContext } from '../../contexts/ContextProvider'; 6 | import { Header } from '../../components'; 7 | const Area = () => { 8 | const { currentMode } = useStateContext(); 9 | 10 | return ( 11 |
12 |
13 | 23 | 24 | 25 | 26 | {areaCustomSeries.map((item, index) => )} 27 | 28 | 29 |
30 | ); 31 | }; 32 | 33 | export default Area; -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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/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/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 { Header } 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; -------------------------------------------------------------------------------- /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 | "gh-pages": "^6.1.1", 49 | "postcss": "^8.4.6", 50 | "tailwindcss": "^3.0.19" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /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 | setThemeSettings(false); 24 | }; 25 | 26 | const setColor = (color) => { 27 | 28 | setCurrentColor(color); 29 | localStorage.setItem('colorMode', color); 30 | setThemeSettings(false); 31 | }; 32 | 33 | const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true }); 34 | 35 | return ( 36 | 37 | 38 | {children} 39 | 40 | ); 41 | }; 42 | 43 | export const useStateContext = () => useContext(StateContext); -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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 { Header } 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 { Header } from '../../components'; 7 | 8 | const date1 = new Date('2017, 1, 1'); 9 | 10 | 11 | function filterValue(value) { 12 | if (value.x >= date1) { 13 | 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 | 4 | import { colorMappingData, ColorMappingPrimaryXAxis, ColorMappingPrimaryYAxis, rangeColorMapping } from '../../data/dummy'; 5 | import { Header } 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; -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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 } = useStateContext(); 11 | 12 | return ( 13 |
14 |
15 |
16 |

Settings

17 | 25 | 26 |
27 |
28 |

Theme Option

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

Theme Colors

63 |
64 | {themeColors.map((item, index) => ( 65 | 66 |
70 | 78 |
79 | 80 | ))} 81 |
82 |
83 |
84 |
85 | ); 86 | }; 87 | 88 | export default ThemeSettings; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | dashboard is hosted https://dashsyncfusiondash.netlify.app/ 2 | 3 | 4 | 5 | 6 | # Getting Started with Create React App 7 | 8 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 9 | 10 | ## Available Scripts 11 | 12 | In the project directory, you can run: 13 | 14 | ### `npm start` 15 | 16 | Runs the app in the development mode.\ 17 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 18 | 19 | The page will reload when you make changes.\ 20 | You may also see any lint errors in the console. 21 | 22 | ### `npm test` 23 | 24 | Launches the test runner in the interactive watch mode.\ 25 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 26 | 27 | ### `npm run build` 28 | 29 | Builds the app for production to the `build` folder.\ 30 | It correctly bundles React in production mode and optimizes the build for the best performance. 31 | 32 | The build is minified and the filenames include the hashes.\ 33 | Your app is ready to be deployed! 34 | 35 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 36 | 37 | ### `npm run eject` 38 | 39 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 40 | 41 | 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. 42 | 43 | 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. 44 | 45 | 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. 46 | 47 | ## Learn More 48 | 49 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 50 | 51 | To learn React, check out the [React documentation](https://reactjs.org/). 52 | 53 | ### Code Splitting 54 | 55 | 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) 56 | 57 | ### Analyzing the Bundle Size 58 | 59 | 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) 60 | 61 | ### Making a Progressive Web App 62 | 63 | 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) 64 | 65 | ### Advanced Configuration 66 | 67 | 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) 68 | 69 | ### Deployment 70 | 71 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 72 | 73 | ### `npm run build` fails to minify 74 | 75 | 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) 76 | -------------------------------------------------------------------------------- /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 { activeMenu, handleClick,setActiveMenu, isClicked, serIsClicked, screenSize, setScreenSize, currentColor } =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 | return ( 51 |
52 | 53 | setActiveMenu((prevActiveMenu) => !prevActiveMenu)} color={currentColor} icon={} /> 54 |
55 | handleClick('cart')} 57 | color={currentColor} 58 | icon={} 59 | /> 60 | handleClick('chat')} 63 | color={currentColor} 64 | icon={} 65 | /> 66 | handleClick('notification')} 69 | color={currentColor} 70 | icon={} 71 | /> 72 | 76 |
handleClick('userProfile')} 79 | > 80 | user-profile 85 |

86 | Hi,{' '} 87 | 88 | Michael 89 | 90 |

91 | 92 |
93 | 94 | {isClicked.cart && ()} 95 | {isClicked.chat && ()} 96 | {isClicked.notification && ()} 97 | {isClicked.userProfile && ()} 98 | 99 |
100 |
101 | ) 102 | } 103 | 104 | export default Navbar 105 | -------------------------------------------------------------------------------- /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, Area, Bar, Pie, Financial, Line, ColorPicker, ColorMapping, Editor } from './pages'; 8 | import { useStateContext } from './contexts/ContextProvider'; 9 | 10 | import './App.css'; 11 | 12 | const App = () => { 13 | const { activeMenu, themeSettings, setThemeSettings, currentColor, currentMode } = useStateContext(); 14 | 15 | 16 | return ( 17 |
18 | 19 |
20 |
21 | 22 | 27 | 28 |
29 | {activeMenu ? ( 30 |
31 | 32 |
33 | ) : ( 34 |
35 | 36 |
37 | )} 38 |
42 |
43 | 44 |
45 | 46 |
47 | {themeSettings && } 48 | 49 | {/* Dashboard */} 50 | } /> 51 | } /> 52 | 53 | {/* Pages */} 54 | } /> 55 | } /> 56 | } /> 57 | 58 | {/* Apps */} 59 | } /> 60 | } /> 61 | } /> 62 | } /> 63 | 64 | {/* Chatrs */} 65 | } /> 66 | } /> 67 | } /> 68 | } /> 69 | } /> 70 | } /> 71 | } /> 72 | } /> 73 | 74 |
75 |
76 |
77 | 78 |
79 | ) 80 | } 81 | 82 | export default App -------------------------------------------------------------------------------- /src/pages/Ecommerce.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BsCurrencyDollar } from 'react-icons/bs'; 3 | import { SiPolkadot } from "react-icons/si"; 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 | import welcomeBackground from '../data/welcome-bg.svg' 12 | 13 | const Ecommerce = () => { 14 | const { currentColor } = useStateContext(); 15 | return ( 16 |
17 |
19 |
22 |
24 |
25 |

Earnings

26 |

$58,995.85

27 |
28 |
29 |
30 |
38 |
39 | 40 |
41 | {earningData.map((item) => ( 42 |
43 | 50 |

51 | 52 | {item.amount} 53 | 54 | 58 | {item.percentage} 59 | 60 |

61 |

{item.title}

63 |
64 | ))} 65 |
66 |
67 | 68 |
69 |
71 |
72 | 73 |

Revenue Updates

74 |
75 |

76 | 77 | Expense 78 |

79 |

80 | 81 | Budget 82 |

83 |
84 |
85 |
87 |
88 |
89 |

90 | $98,253.80 91 | 20% 93 |

94 |

95 | Budget 96 |

97 |
98 |
99 |

100 | $48,951.10 101 | 102 |

103 |

104 | Expense 105 |

106 |
107 |
108 | 117 |
118 |
119 |
127 |
128 | 129 |
130 | 131 |
132 |
133 |
134 | 135 |
136 |
137 | 138 | 139 | ) 140 | } 141 | 142 | export default Ecommerce 143 | -------------------------------------------------------------------------------- /src/data/welcome-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | welcome-bg-2x-svg 3 | 4 | 5 | 6 | 10 | 11 | 12 | --------------------------------------------------------------------------------