├── .gitignore ├── .gitpod.yml ├── README.md ├── craco.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.css ├── App.js ├── components │ ├── Button.jsx │ ├── Cart.jsx │ ├── Charts │ │ ├── LineChart.jsx │ │ ├── Pie.jsx │ │ ├── SparkLine.jsx │ │ └── Stacked.jsx │ ├── Chat.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── Navbar.jsx │ ├── Notification.jsx │ ├── Sidebar.jsx │ ├── ThemeSettings.jsx │ ├── UserProfile.jsx │ └── index.js ├── contexts │ └── ContextProvider.jsx ├── data │ ├── avatar.jpg │ ├── avatar2.jpg │ ├── avatar3.png │ ├── avatar4.jpg │ ├── cyber-monday-retail-sales.png │ ├── dummy.js │ ├── product1.jpg │ ├── product2.jpg │ ├── product3.jpg │ ├── product4.jpg │ ├── product5.jpg │ ├── product6.jpg │ ├── product7.jpg │ ├── product8.jpg │ ├── product9.jpg │ └── welcome-bg.svg ├── index.css ├── index.js └── pages │ ├── Calendar.jsx │ ├── Charts │ ├── Area.jsx │ ├── Bar.jsx │ ├── ColorMapping.jsx │ ├── Financial.jsx │ ├── Line.jsx │ ├── Pie.jsx │ ├── Pyramid.jsx │ └── Stacked.jsx │ ├── ColorPicker.jsx │ ├── Customers.jsx │ ├── Ecommerce.jsx │ ├── Editor.jsx │ ├── Employees.jsx │ ├── Kanban.jsx │ ├── Orders.jsx │ └── index.js ├── tailwind.config.js └── yarn.lock /.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 | .env 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: yarn install && yarn run build 7 | command: yarn run start 8 | 9 | 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | # 📊 Shopit Admin Dashboard - React & Syncfusion 3 | 4 | ## Overview 5 | Shopit Admin Dashboard is a data-driven interface for managing e-commerce operations. Built with **React** and **Syncfusion**, it provides a clean, organized way to visualize data through charts, tables, and more. This project showcases my ability to create dynamic dashboards, relevant to Amana’s need for a DeFi yield aggregator dashboard. 6 | 7 | **[Live Demo](https://shopit-admin-dashboard.vercel.app/)** 8 | 9 | ## Features 10 | - **Data Visualization**: Interactive charts and tables for sales, users, and inventory. 11 | - **Customizable UI**: Syncfusion components for flexible data display. 12 | - **Responsive Design**: Works seamlessly on desktop and mobile. 13 | - **E-commerce Focus**: Tracks key metrics like orders and revenue. 14 | 15 | ## Tech Stack 16 | - **React**: For building reusable UI components. 17 | - **Syncfusion**: For data visualization and dashboard components. 18 | - **CSS**: Custom styles for a polished look. 19 | 20 | ## Getting Started 21 | To run this project locally, follow these steps: 22 | 23 | ### Prerequisites 24 | - Node.js (v16 or higher) 25 | - Git 26 | 27 | ### Installation 28 | 1. Clone the repository: 29 | ```bash 30 | git clone https://github.com/RohitKS7/Admin_Dashboard.git 31 | cd Admin_Dashboard 32 | ``` 33 | 34 | 2. Install dependencies: 35 | ``` 36 | npm install 37 | ``` 38 | 39 | 3. Run the app: 40 | ``` 41 | npm run dev 42 | ``` 43 | 44 | 4. Open 45 | ``` 46 | http://localhost:3000 47 | ``` 48 | in your browser to see the site. 49 | 50 | ## Project Structure 51 | ```app/:``` Next.js pages and layouts (using Next.js 13 app folder). 52 | 53 | ```components/:``` Reusable React components for sections and animations. 54 | 55 | ```styles/:``` Custom CSS for styling. 56 | 57 | ```public/:``` Static assets like images. 58 | 59 | # Relevance to Amana: 60 | - This project demonstrates my expertise with Amana’s stack:Built with Next.js and React, matching Amana’s frontend requirements. 61 | - Focuses on modern UI/UX with animations, similar to Amana’s need for a user-friendly DeFi interface. 62 | - Shows my ability to create engaging designs, like the Amana mockup. 63 | 64 | ## Contribution: 65 | I built this project from scratch, designing the UI and implementing the frontend with Next.js 13, React, and Framer-Motion. I focused on creating a seamless user experience with a futuristic feel. 66 | 67 | # License: 68 | This project is open-source under the MIT License—free to use and modify. 69 | 70 | # Contact: 71 | For questions, reach out to me at my LinkedIn, X. 72 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [require("tailwindcss"), require("autoprefixer")], 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "admin_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-icons": "^4.3.1", 17 | "react-scripts": "5.0.1", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2", 20 | "react-router-dom": "^6.2.1" 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 | "postcss": "^8.4.6", 49 | "tailwindcss": "^3.0.19" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 25 | Shopit - Dashboard 26 | 27 | 28 | 29 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /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, 17 | .e-quick-popup-wrapper.e-device { 18 | z-index: 1000000 !important; 19 | } 20 | 21 | ::-webkit-scrollbar { 22 | width: 6px; 23 | } 24 | ::-webkit-scrollbar-thumb { 25 | background-color: rgb(216, 216, 216); 26 | border-radius: 40px; 27 | } 28 | ::-webkit-scrollbar-track { 29 | background-color: transparent; 30 | } 31 | 32 | /* color-picker style */ 33 | 34 | #preview { 35 | background: transparent 36 | url("https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png") 37 | no-repeat; 38 | display: inline-block; 39 | height: 80px; 40 | margin: 10px 0; 41 | min-width: 300px; 42 | max-width: 600px; 43 | background-color: #008000; 44 | } 45 | 46 | .e-input-group:not(.e-float-icon-left), 47 | .e-input-group.e-success:not(.e-float-icon-left), 48 | .e-input-group.e-warning:not(.e-float-icon-left), 49 | .e-input-group.e-error:not(.e-float-icon-left), 50 | .e-input-group.e-control-wrapper:not(.e-float-icon-left), 51 | .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), 52 | .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), 53 | .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) { 54 | border: none; 55 | } 56 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React 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 "./App.css"; 7 | import { Navbar, Footer, Sidebar, ThemeSettings } from "./components"; 8 | import { 9 | Ecommerce, 10 | Orders, 11 | Calendar, 12 | Employees, 13 | Stacked, 14 | Pyramid, 15 | Customers, 16 | Kanban, 17 | Line, 18 | Area, 19 | Bar, 20 | Pie, 21 | Financial, 22 | ColorPicker, 23 | ColorMapping, 24 | Editor, 25 | } from "./pages"; 26 | import { useStateContext } from "./contexts/ContextProvider"; 27 | 28 | const App = () => { 29 | const { activeMenu, themeSettings, setThemeSettings, currentColor, currentMode } = 30 | useStateContext(); 31 | 32 | return ( 33 |
34 | 35 |
36 |
37 | 38 | 46 | 47 |
48 | {activeMenu ? ( 49 |
50 | 51 |
52 | ) : ( 53 |
54 | 55 |
56 | )} 57 | 58 |
63 |
64 | 65 |
66 | 67 |
68 | { themeSettings && } 69 | 70 | 71 | {/* dashboard */} 72 | } /> 73 | } /> 74 | 75 | {/* pages */} 76 | } /> 77 | } /> 78 | } /> 79 | 80 | {/* apps */} 81 | } /> 82 | } /> 83 | } /> 84 | } /> 85 | 86 | {/* charts */} 87 | } /> 88 | } /> 89 | } /> 90 | } /> 91 | } /> 92 | } /> 93 | } /> 94 | } /> 95 | 96 |
97 |
99 |
100 | 101 |
102 | ); 103 | }; 104 | 105 | export default App; 106 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/Cart.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdOutlineCancel } from 'react-icons/md'; 3 | import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai'; 4 | 5 | import { useStateContext } from '../contexts/ContextProvider'; 6 | import { cartData } from '../data/dummy'; 7 | import { Button } from '.'; 8 | 9 | const Cart = () => { 10 | const { currentColor } = useStateContext(); 11 | 12 | return ( 13 |
14 |
15 |
16 |

Shopping Cart

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

{item.name}

32 |

{item.category}

33 |
34 |

{item.price}

35 |
36 |

37 |

0

38 |

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

Sub Total

49 |

$890

50 |
51 |
52 |

Total

53 |

$890

54 |
55 |
56 |
57 |
65 |
66 |
67 | ); 68 | }; 69 | 70 | export default Cart; -------------------------------------------------------------------------------- /src/components/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 | {lineCustomSeries.map((item, index) => )} 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default LineChart; 30 | -------------------------------------------------------------------------------- /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 Pie = ({ id, data, legendVisiblity, height }) => { 7 | const { currentMode } = useStateContext(); 8 | 9 | return ( 10 | 17 | 18 | 19 | 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default Pie; -------------------------------------------------------------------------------- /src/components/Charts/SparkLine.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | SparklineComponent, 4 | Inject, 5 | SparklineTooltip, 6 | } from "@syncfusion/ej2-react-charts"; 7 | 8 | class SparkLine extends React.PureComponent { 9 | render() { 10 | const { id, height, width, color, data, type, currentColor } = this.props; 11 | 12 | return ( 13 | 34 | 35 | 36 | ); 37 | } 38 | } 39 | 40 | export default SparkLine; 41 | -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /src/components/Chat.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdOutlineCancel } from 'react-icons/md'; 3 | 4 | import { Button } from '.'; 5 | import { chatData } from '../data/dummy'; 6 | import { useStateContext } from '../contexts/ContextProvider'; 7 | 8 | const Chat = () => { 9 | const { currentColor } = useStateContext(); 10 | 11 | return ( 12 |
13 |
14 |
15 |

Messages

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

{item.message}

44 |

{item.desc}

45 |

{item.time}

46 |
47 |
48 | ))} 49 |
50 |
58 |
59 |
60 | ); 61 | }; 62 | 63 | export default Chat; -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => ( 4 |
5 |

6 | Application by Rohit 7 |

8 |

9 | © 2022 All rights reserved by Shopit.com 10 |

11 |
12 | ); 13 | 14 | export default Footer; -------------------------------------------------------------------------------- /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/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 { isClicked, handleClick, screenSize, setActiveMenu, setScreenSize, currentColor } = 32 | useStateContext(); 33 | 34 | 35 | useEffect(() => { 36 | const handleResize = () => setScreenSize(window.innerWidth); 37 | 38 | // whenever window resizes!, use that screen size in handleResize function 39 | window.addEventListener("resize", handleResize); 40 | 41 | handleResize(); 42 | 43 | return () => window.removeEventListener("resize", handleResize); 44 | }, []); 45 | 46 | // SECTION doing something with that screensize 47 | useEffect(() => { 48 | if (screenSize <= 900) { 49 | setActiveMenu(false); 50 | } else { 51 | setActiveMenu(true); 52 | } 53 | }, [screenSize]); 54 | 55 | return ( 56 |
57 | setActiveMenu((prevActiveMenu) => !prevActiveMenu)} 60 | color={currentColor} 61 | icon={} 62 | /> 63 | 64 |
65 | handleClick("cart")} 68 | color={currentColor} 69 | icon={} 70 | /> 71 | handleClick("chat")} 75 | color={currentColor} 76 | icon={} 77 | /> 78 | handleClick("notification")} 82 | color={currentColor} 83 | icon={} 84 | /> 85 | 86 |
handleClick("userProfile")} 89 | > 90 | user 91 |

92 | Hi,{" "} 93 | 94 | Rohit 95 | 96 |

97 | 98 |
99 | 100 | 101 | {isClicked.cart && } 102 | {isClicked.chat && } 103 | {isClicked.notification && } 104 | {isClicked.userProfile && } 105 |
106 |
107 | ); 108 | }; 109 | 110 | export default Navbar; 111 | -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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 { activeMenu, setActiveMenu, screenSize, currentColor } = useStateContext(); 12 | 13 | const handleCloseSidebar = () => { 14 | if (activeMenu && screenSize <= 900) { 15 | setActiveMenu(false); 16 | } 17 | }; 18 | 19 | const activeLink = 20 | " flex items-center gap-5 pl-4 py-2.5 rounded-lg text-white text-md m-2 "; 21 | 22 | const normalLink = 23 | " flex items-center gap-5 pl-4 py-2.5 rounded-lg text-md text-gray-700 dark:text-gray-200 dark:hover:text-black hover:bg-light-gray m-2"; 24 | 25 | return ( 26 |
27 | {activeMenu && ( 28 | <> 29 |
30 | 35 | Shopit 36 | 37 | 38 | 47 | 48 |
49 |
50 | {links.map((item, i) => ( 51 |
52 |

{item.title}

53 | {item.links.map((link) => ( 54 | ({ 59 | backgroundColor: isActive ? currentColor : '' 60 | }) } 61 | className={({ isActive }) => 62 | isActive ? activeLink : normalLink 63 | } 64 | > 65 | {link.icon} 66 | {link.name} 67 | 68 | ))} 69 |
70 | ))} 71 |
72 | 73 | )} 74 |
75 | ); 76 | }; 77 | 78 | export default Sidebar; 79 | -------------------------------------------------------------------------------- /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 |

17 | Settings 18 |

19 | 27 |
28 | 29 |
30 |

Theme Option

31 | 32 |
33 | 42 | 45 |
46 |
47 | 56 | 59 |
60 |
61 | 62 |
63 |

Theme Colors

64 |
65 | {themeColors.map((item, index) => ( 66 | 67 |
71 | 79 |
80 | 81 | ))} 82 |
83 |
84 |
85 |
86 | ) 87 | }; 88 | 89 | export default ThemeSettings; 90 | -------------------------------------------------------------------------------- /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 |

Rohit Kumar Suman

32 |

Administrator

33 |

info@shop.com

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

{item.title}

49 |

{item.desc}

50 |
51 |
52 | ))} 53 |
54 |
55 |
63 |
64 | 65 | ); 66 | }; 67 | 68 | export default UserProfile; -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 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 Header } from "./Header"; 15 | -------------------------------------------------------------------------------- /src/contexts/ContextProvider.jsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useState } from 'react'; 2 | 3 | const StateContext = createContext(); 4 | 5 | const initialState = { 6 | chat: false, 7 | cart: false, 8 | userProfile: false, 9 | notification: false, 10 | }; 11 | 12 | export const ContextProvider = ({ children }) => { 13 | const [screenSize, setScreenSize] = useState(undefined); 14 | const [currentColor, setCurrentColor] = useState('#03C9D7'); 15 | const [currentMode, setCurrentMode] = useState('Light'); 16 | const [themeSettings, setThemeSettings] = useState(false); 17 | const [activeMenu, setActiveMenu] = useState(true); 18 | const [isClicked, setIsClicked] = useState(initialState); 19 | 20 | const setMode = (e) => { 21 | setCurrentMode(e.target.value); 22 | localStorage.setItem('themeMode', e.target.value); 23 | }; 24 | 25 | const setColor = (color) => { 26 | setCurrentColor(color); 27 | localStorage.setItem('colorMode', color); 28 | }; 29 | 30 | const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true }); 31 | 32 | return ( 33 | // eslint-disable-next-line react/jsx-no-constructed-context-values 34 | 35 | {children} 36 | 37 | ); 38 | }; 39 | 40 | export const useStateContext = () => useContext(StateContext); -------------------------------------------------------------------------------- /src/data/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/avatar.jpg -------------------------------------------------------------------------------- /src/data/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/avatar2.jpg -------------------------------------------------------------------------------- /src/data/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/avatar3.png -------------------------------------------------------------------------------- /src/data/avatar4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/avatar4.jpg -------------------------------------------------------------------------------- /src/data/cyber-monday-retail-sales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/cyber-monday-retail-sales.png -------------------------------------------------------------------------------- /src/data/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product1.jpg -------------------------------------------------------------------------------- /src/data/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product2.jpg -------------------------------------------------------------------------------- /src/data/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product3.jpg -------------------------------------------------------------------------------- /src/data/product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product4.jpg -------------------------------------------------------------------------------- /src/data/product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product5.jpg -------------------------------------------------------------------------------- /src/data/product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product6.jpg -------------------------------------------------------------------------------- /src/data/product7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product7.jpg -------------------------------------------------------------------------------- /src/data/product8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product8.jpg -------------------------------------------------------------------------------- /src/data/product9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/0d0f1514b2b2b1b78eb8c2b99b9528251a99e523/src/data/product9.jpg -------------------------------------------------------------------------------- /src/data/welcome-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | welcome-bg-2x-svg 3 | 4 | 5 | 6 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /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; 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/pages/Calendar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ScheduleComponent, Day, Week, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule'; 3 | 4 | import { scheduleData } from '../data/dummy'; 5 | import { Header } from '../components'; 6 | 7 | const Calendar = () => { 8 | return( 9 | 10 |
11 |
12 | 17 | 18 | 19 |
20 | ) 21 | }; 22 | 23 | export default Calendar; 24 | -------------------------------------------------------------------------------- /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 { Header } 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 | {areaCustomSeries.map((item, index) => )} 26 | 27 | 28 |
29 |
30 | ); 31 | }; 32 | 33 | export default Area; -------------------------------------------------------------------------------- /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 | {barCustomSeries.map((item, index) => )} 27 | 28 | 29 |
30 |
31 | ); 32 | }; 33 | 34 | export default Bar; -------------------------------------------------------------------------------- /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/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 | // eslint-disable-next-line consistent-return 11 | function filterValue(value) { 12 | if (value.x >= date1) { 13 | // eslint-disable-next-line no-sequences 14 | return value.x, value.high, value.low; 15 | } 16 | } 17 | const returnValue = financialChartData.filter(filterValue); 18 | 19 | const Financial = () => { 20 | const { currentMode } = useStateContext(); 21 | 22 | return ( 23 |
24 |
25 |
26 | 35 | 36 | 37 | 46 | 47 | 48 |
49 |
50 | ); 51 | }; 52 | 53 | export default Financial; -------------------------------------------------------------------------------- /src/pages/Charts/Line.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Header, LineChart } from '../../components'; 3 | 4 | const Line = () => ( 5 |
6 |
7 |
8 | 9 |
10 |
11 | ); 12 | 13 | export default Line; 14 | -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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/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/ColorPicker.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs'; 4 | 5 | import { Header } from '../components'; 6 | 7 | const change = (args) => { 8 | document.getElementById('preview').style.backgroundColor = args.currentValue.hex; 9 | }; 10 | 11 | const CustomColorPicker = ({ id, mode }) => ; 12 | 13 | const ColorPicker = () => ( 14 |
15 |
16 |
17 |
18 |
19 |
20 |

Inline Pallete

21 | 22 |
23 |
24 |

Inline Picker

25 | 26 |
27 |
28 |
29 |
30 | ); 31 | 32 | export default ColorPicker; 33 | -------------------------------------------------------------------------------- /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/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 { 9 | earningData, 10 | medicalproBranding, 11 | recentTransactions, 12 | weeklyStats, 13 | dropdownData, 14 | SparklineAreaData, 15 | ecomPieChartData, 16 | } from "../data/dummy"; 17 | import { useStateContext } from "../contexts/ContextProvider"; 18 | import product9 from "../data/product9.jpg"; 19 | 20 | const Ecommerce = () => { 21 | const { currentColor } = useStateContext(); 22 | 23 | return ( 24 |
25 |
26 |
27 |
28 |
29 |

Earnings

30 |

$107,890.84

31 |
32 |
33 |
34 |
42 |
43 | 44 |
45 | {earningData.map((item) => ( 46 |
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 | $81,948 94 | 95 | 23% 96 | 97 |

98 |

Budget

99 |
100 |
101 |

$48,487

102 | 103 |

Expense

104 |
105 | 106 |
107 | 116 |
117 |
118 |
125 |
126 | 127 |
128 | 129 |
130 |
131 |
132 |
133 |
134 | ); 135 | }; 136 | 137 | export default Ecommerce; 138 | -------------------------------------------------------------------------------- /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/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 | 8 | const Employees = () => { 9 | const toolbarOptions = ['Search']; 10 | 11 | const editing = { allowDeleting: true, allowEditing: true }; 12 | 13 | return ( 14 |
15 |
16 | 25 | 26 | {/* eslint-disable-next-line react/jsx-props-no-spreading */} 27 | {employeesGrid.map((item, index) => )} 28 | 29 | 30 | 31 | 32 |
33 | ); 34 | }; 35 | 36 | export default Employees; 37 | -------------------------------------------------------------------------------- /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 | {kanbanGrid.map((item, index) => )} 18 | 19 | 20 |
21 | ); 22 | 23 | export default Kanban; -------------------------------------------------------------------------------- /src/pages/Orders.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | GridComponent, 4 | ColumnsDirective, 5 | ColumnDirective, 6 | Resize, 7 | Sort, 8 | ContextMenu, 9 | Filter, 10 | Page, 11 | ExcelExport, 12 | PdfExport, 13 | Edit, 14 | Inject, 15 | } from "@syncfusion/ej2-react-grids"; 16 | 17 | import { ordersData, contextMenuItems, ordersGrid } from "../data/dummy"; 18 | import { Header } from "../components"; 19 | 20 | const Orders = () => { 21 | const editing = { allowDeleting: true, allowEditing: true }; 22 | return ( 23 |
24 |
25 | 35 | 36 | {ordersGrid.map((item, index) => ( 37 | 38 | ))} 39 | 40 | 41 | 42 |
43 | ); 44 | }; 45 | 46 | export default Orders; 47 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /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://raw.githubusercontent.com/RohitKS7/Admin_Dashboard/master/src/data/cyber-monday-retail-sales.png')", 44 | }, 45 | }, 46 | }, 47 | plugins: [], 48 | }; 49 | --------------------------------------------------------------------------------