Description

Admin / Central Dashboard made in react

Getting Started

In the terminal run

npx create-react-app ./

Install the Material Icons
yarn add @material-ui/icons
yarn add @material-ui/core
Install recharts
yarn add recharts
Clean application directories by removing the files we don't need from the public directory
Clean the file from the src directory that we dont need
Clean the index.html file of some code
Install the fonts from google fonts and copy them in index.html
In index.js delete the imports for the file that we're deleted before
Your App.js file should look like this

Creating the components

1. TopBar
a. Create Topbar.jsx - we are using JSX because it's more easier to use html inside of the components.
b. Topbar.jsx - Type in rfc - this is a special command for React, which can be installed from the VS Extension tab. It's called ES7 React/Redux
Your code should look like:

import React from 'react'

export default function Topbar() {
  return (
    <div>Topbar</div>
  )
}

c. App.js - Import the Topbar component in App.js

import Topbar from './components/topbar/Topbar'
function App() {
  return (
    <div>
      <Topbar/>
    </div>
  )
}
export default App;

d. topbar.css - inside the topbar folder create a new file topbar.css
e. Topbar.jsx - import the topbar.css file created
import './topbar.css'

Features

1. Reports with webdata-rocks
Install yarn add webdata-rocks
Create Report.jsx and add code :

import React from 'react'
import * as WebDataRocksReact from 'react-webdatarocks';
import "./reports.css"
import 'webdatarocks/webdatarocks.css'

export default function Reports() {
  return (
    <div className="reports">
      <div className="App">
        <WebDataRocksReact.Pivot 
         toolbar={true}
         componentFolder="https://cdn.webdatarocks.com/"
         width="100%"
         report="https://cdn.webdatarocks.com/reports/report.json"
        />
      </div>
      
      </div>
  )
}

Errors

Unreachable code no-unreachable in App.js and the Topbar.jsx component is not loading in the App.js screen
Possible you forgot to add the parenthesis's to the return ()
react-router-dom
Please install the react-router-dom@5.2.0 instead of the latest version of react-router-dom
yarn add @mui-material
You might have an error regarding the material ui icons,
Install the @mui-material package as well because the latest version was renamed to mui from material
Can't resolve '@mui/data-grid'
Import as
import { DataGrid } from "@mui/x-data-grid";
The users page is not showing up
In the userList.jsx import the DataGrid from material-ui
import { DataGrid } from "@material-ui/data-grid";
The Users and Products pages etc from the sidebar are not routing when clicked but work on direct link
Have react-router-dom@5.2.0.0 installed
Add this code into your index.js
The problem is the ReactDOM component which is created by default
Wrap your component in BrowserRouter and it should work

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Netlify Deploy Fail with error
Can't resolve '@emotion/styled
Creating a process.env and adding CI=true; - meaning Continous Integration to detect which build is locally and which one is executing in a CI environment.