Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

App.css

@import url('https://cdn.syncfusion.com/ej2/material.css');

.sidebar {
  box-shadow: rgb(113 122 131 / 11%) 0px 7px 30px 0px;
}
.nav-item,
.navbar {
  z-index: 10000;
}
@media  screen and (max-width:800px) {
  .sidebar{
    z-index: 10000000;
  }
}

.e-dlg-center-center, .e-quick-popup-wrapper.e-device{
  z-index: 1000000 !important;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: rgb(216, 216, 216);
  border-radius: 40px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* color-picker style  */

 #preview {
  background: transparent
    url('https://ej2.syncfusion.com/react/demos/src/color-picker/images/pen.png')
    no-repeat;
  display: inline-block;
  height: 80px;
  margin: 10px 0;
  min-width: 300px;
  max-width: 600px;
  background-color: #008000;
}

.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){
  border: none;
}

craco.config.js

// craco.config.js
module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  };

index.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    padding:0;
    font-family: "Open Sans", sans-serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

index.jsx (components)

export { default as Button } from './Button';
export { default as ThemeSettings } from './ThemeSettings';
export { default as Sidebar } from './Sidebar';
export { default as Navbar } from './Navbar';
export { default as Footer } from './Footer';
export { default as Cart } from './Cart';
export { default as Chat } from './Chat';
export { default as Notification } from './Notification';
export { default as UserProfile } from './UserProfile';
export { default as SparkLine } from './Charts/SparkLine';
export { default as LineChart } from './Charts/LineChart';
export { default as Stacked } from './Charts/Stacked';
export { default as Pie } from './Charts/Pie';
export { default as ChartsHeader } from './ChartsHeader';
export { default as Header } from './Header';

index.jsx (pages)

export { default as Ecommerce } from './Ecommerce';
export { default as Kanban } from './Kanban';
export { default as Orders } from './Orders';
export { default as Employees } from './Employees';
export { default as Editor } from './Editor';
export { default as Customers } from './Customers';
export { default as ColorPicker } from './ColorPicker';
export { default as Calendar } from './Calendar';
export { default as Area } from './Charts/Area';
export { default as Bar } from './Charts/Bar';
export { default as ColorMapping } from './Charts/ColorMapping';
export { default as Financial } from './Charts/Financial';
export { default as Line } from './Charts/Line';
export { default as Pie } from './Charts/Pie';
export { default as Pyramid } from './Charts/Pyramid';
export { default as Stacked } from './Charts/Stacked';

package.json

{
  "name": "project_syncfusion_dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2": "^19.4.48",
    "@syncfusion/ej2-react-calendars": "^19.4.48",
    "@syncfusion/ej2-react-charts": "^19.4.50",
    "@syncfusion/ej2-react-dropdowns": "^19.4.52",
    "@syncfusion/ej2-react-grids": "^19.4.50",
    "@syncfusion/ej2-react-inputs": "^19.4.52",
    "@syncfusion/ej2-react-kanban": "^19.4.48",
    "@syncfusion/ej2-react-popups": "^19.4.52",
    "@syncfusion/ej2-react-richtexteditor": "^19.4.50",
    "@syncfusion/ej2-react-schedule": "^19.4.50",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.19"
  }
}

SparkLine.jsx

import React from 'react';
import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';

class SparkLine extends React.PureComponent {
  render() {
    const { id, height, width, color, data, type, currentColor } = this.props;

    return (
      <SparklineComponent
        id={id}
        height={height}
        width={width}
        lineWidth={1}
        valueType="Numeric"
        fill={color}
        border={{ color: currentColor, width: 2 }}
        tooltipSettings={{
          visible: true,
          // eslint-disable-next-line no-template-curly-in-string
          format: '${x} : data ${yval}',
          trackLineSettings: {
            visible: true,
          },
        }}
        markerSettings={{ visible: ['All'], size: 2.5, fill: currentColor }}
        dataSource={data}
        xName="x"
        yName="yval"
        type={type}
      >
        <Inject services={[SparklineTooltip]} />
      </SparklineComponent>
    );
  }
}

export default SparkLine;

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      display: ['Open Sans', 'sans-serif'],
      body: ['Open Sans', 'sans-serif'],
    },
    extend: {
      fontSize: {
        14: '14px',
      },
      backgroundColor: {
        'main-bg': '#FAFBFB',
        'main-dark-bg': '#20232A',
        'secondary-dark-bg': '#33373E',
        'light-gray': '#F7F7F7',
        'half-transparent': 'rgba(0, 0, 0, 0.5)',
      },
      borderWidth: {
        1: '1px',
      },
      borderColor: {
        color: 'rgba(0, 0, 0, 0.1)',
      },
      width: {
        400: '400px',
        760: '760px',
        780: '780px',
        800: '800px',
        1000: '1000px',
        1200: '1200px',
        1400: '1400px',
      },
      height: {
        80: '80px',
      },
      minHeight: {
        590: '590px',
      },
      backgroundImage: {
        'hero-pattern':
          "url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')",
      },
    },
  },
  plugins: [],
};

I am facing problem in the welcome-bg.svg img file where I am not able to add the first image
Anyone please tell me where I am doing wrong.

Hey folks, if you're having trouble with tailwind.css not cooperating, here's a slick solution. Simply snag this repository, ditch the 'src' folder, and kickstart the project on your own terms.

For those who tailwind isn't working for them, try move the project's folder to the desktop. That worked for me! Still don't understand why but it worked. 😂 It took me 3 days to make it work. I've literally tried every single solution on the internet but not even one worked. And moving the project's folder to the desktop solved everything! 😂

You saved me!!! Thanks a lot!!

I am getting the line component at the bottom please help me to fix it.

The Close button is not showing for the cart, notification, chat modal in the navbar.. was anyone able to solve this?

Do anyone have the data folder? It showing zip folder is empty for me and it's also not available in this github repo. If anyone have, please provide me.

@adrianhajdin

Do anyone have the data folder? It showing zip folder is empty for me and it's also not available in this github repo. If anyone have, please provide me.

@adrianhajdin

https://github.com/adrianhajdin/project_syncfusion_dashboard/tree/main/src/data
This is a direct link to the data folder in Adrians Github repo for the project

goodmorning @adrianhajdin i need your whatsapp contact sir i have business

so what should i do in the hero-pattern image it's just a white background

hi.
could yo help me, Does anyone else get this error in terminal?

write accurate command npm start

so what should i do in the hero-pattern image it's just a white background

Still has not worked for me, basically, we need to download a random image and render it.

@sajeed11 Its a premium image you can always use normal gradient by reaching out the tailwind website . I have also used Gradient and it is looking fine

Any 1 has solved the issue ------>ERROR
SparklineComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:96929:27)
at reconcileChildren (http://localhost:3000/static/js/bundle.js:99405:32)
at finishClassComponent (http://localhost:3000/static/js/bundle.js:99845:9)
at updateClassComponent (http://localhost:3000/static/js/bundle.js:99784:28)
at beginWork (http://localhost:3000/static/js/bundle.js:101171:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:88190:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:88234:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:88289:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:105285:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:104296:16)
ERROR
SparklineComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:96929:27)
at reconcileChildren (http://localhost:3000/static/js/bundle.js:99405:32)
at finishClassComponent (http://localhost:3000/static/js/bundle.js:99845:9)
at updateClassComponent (http://localhost:3000/static/js/bundle.js:99784:28)
at beginWork (http://localhost:3000/static/js/bundle.js:101171:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:88190:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:88234:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:88289:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:105285:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:104296:16)
If i copy the class component for github file it is working fine but i cant understand why is the problem in the functional component provided in the video

Any 1 has solved the issue ------>ERROR SparklineComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:96929:27) at reconcileChildren (http://localhost:3000/static/js/bundle.js:99405:32) at finishClassComponent (http://localhost:3000/static/js/bundle.js:99845:9) at updateClassComponent (http://localhost:3000/static/js/bundle.js:99784:28) at beginWork (http://localhost:3000/static/js/bundle.js:101171:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:88190:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:88234:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:88289:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:105285:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:104296:16) ERROR SparklineComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:96929:27) at reconcileChildren (http://localhost:3000/static/js/bundle.js:99405:32) at finishClassComponent (http://localhost:3000/static/js/bundle.js:99845:9) at updateClassComponent (http://localhost:3000/static/js/bundle.js:99784:28) at beginWork (http://localhost:3000/static/js/bundle.js:101171:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:88190:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:88234:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:88289:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:105285:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:104296:16) If i copy the class component for github file it is working fine but i cant understand why is the problem in the functional component provided in the video

I've found this error also but O can solve it. Based on my search results, it seems that the error message “Nothing was returned from render” is a common issue when using the SparkLineComponent from the @syncfusion/ej2-react-charts library in Reactjs. One possible solution is to use a class component and extend React.PureComponent like this :

It's not recognizing my FiSettings

It's not recognizing my FiSettings

@belvpassos for recognized your import by your IDE you should first declare where are you importing from (react-icons/fi)then it will give you the recommendation of FiSettins. If that does not work then you may check your dependencies in package.json ("react-icons": "^4.3.1", Version may differ) it should be present in the package.json file . You may let me know if the problem still persist .

syncfusion tooltipcomponent is not working at all

Show Tooltip

Do anyone have the data folder? It showing zip folder is empty for me and it's also not available in this github repo. If anyone have, please provide me.
@adrianhajdin

https://github.com/adrianhajdin/project_syncfusion_dashboard/tree/main/src/data This is a direct link to the data folder in Adrians Github repo for the project

https://minhaskamal.github.io/DownGit...

try this link

If someone is having difficulty with this, they can refer to the official documentation here:
syncfusion documentation
and this is a demo for all components : syncfusion demos

If someone is experiencing issues with their license, as this is a paid component library, they have the option to register and obtain a Free Community license. This license allows them to use it for commercial projects for Companies and individuals with less than $1 million USD in annual gross revenue, 5 or fewer developers,
and 10 or fewer total employees.
see community licence here : syncfusion communitylicense

For Tailwind issue use @import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities"; use these command instead of

@tailwind base; @tailwind components; @tailwind utilities; in index.css it works for me

please instal tailwind in your project using tailwind command in terminal

It's not recognizing my FiSettings

@belvpassos for recognized your import by your IDE you should first declare where are you importing from (react-icons/fi)then it will give you the recommendation of FiSettins. If that does not work then you may check your dependencies in package.json ("react-icons": "^4.3.1", Version may differ) it should be present in the package.json file . You may let me know if the problem still persist .

@Faizy-khan Same issue. The two points suggested by you,fall in place. However, problem still persists.

so what should i do in the hero-pattern image it's just a white background

same issues here

so what should i do in the hero-pattern image it's just a white background

same issues here

It's a premium image now, you can easily download a good image and replace it!! Or directly replace the URL with another image URL :)

When I used "bg-hero-pattern", I didn't see any background, it was just plain white, and also, other subsequent code which generated icons for the button which has numbers assigned to them didn't work as well.

Hi, my code is not running anything at all, wat should i do

syncfusion components are not working. How I solve this issue? please anyone help.

syncfusion components are not working. How I solve this issue? please anyone help.

What Syncfusion components did not work? Or all of them?

You don't run the server in the right path, run npm run dev in your my-react-app directory!!! Also, you've to move your taillwindcss conf and the other file to the same dir. MAKE SURE ALWAYS TO STRUCTURE YOUR PROJECT :)

handleClick is not working anyone who can slove this?