Admin / Central Dashboard made in react

1. In the terminal run

2. Install the Material Icons
   yarn add @material-ui/icons
yarn add @material-ui/core

3. Install recharts
   yarn add recharts

4. Clean application directories by removing the files we don't need from the public directory
   

5. Clean the file from the src directory that we dont need
   

6. Clean the index.html file of some code
   

7. Install the fonts from google fonts and copy them in index.html

8. In index.js delete the imports for the file that we're deleted before

9. Your App.js file should look like this
   

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'

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>
  )
}

1. 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 ()
   

2. react-router-dom
   Please install the [email protected] instead of the latest version of react-router-dom

3. 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

4. Can't resolve '@mui/data-grid'
   Import as
   import { DataGrid } from "@mui/x-data-grid";

5. The users page is not showing up
   In the userList.jsx import the DataGrid from material-ui
   import { DataGrid } from "@material-ui/data-grid";

6. The Users and Products pages etc from the sidebar are not routing when clicked but work on direct link
   Have [email protected] 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>
);

6. 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.