React Dashboard App

• This is an admin dashboard application with many charts and pages created using ReactJS, TailwindCSS, MUI X (for charts), PrimeReact (for datatables and other components), and Chakra UI (for tooltips)
• It is based on this tutorial, with using MUI X instead of SyncFusion (because MUI X is free)

Technical Highlights

Tailwind CSS

• For basic installation and usage, see this repo
• The addition here is adding custom styles in TailwindCSS (e.g. background colors)
• To do this:

1. In tailwind.config.js add the needed attributes under the extend section

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

2. To use the style in the app, simply add the className (e.g. bg-main-bg)

Context

• The application state is stored using useContext hook in React. See ContextProvider.js

Components

Datatables

• See ReactPrime DataTable and the examples in Orders.jsx and Employees.jsx and Customers.jsx

1. Install it using npm

npm install primereact

2. Add its imports and CSS includes

import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import "primereact/resources/themes/lara-light-indigo/theme.css";

3. Use it

<DataTable
  value={ordersData}
  paginator
  rows={5}
  rowsPerPageOptions={[5, 10, 25, 50]}
  id="gridcomp"
>
  {ordersGrid.map((column) => (
    <Column
      key={column.headerText}
      header={column.headerText}
      body={column.template}
      align={column.textAlign}
      alignHeader={column.textAlign}
      style={{ width: 10 }}
      field={column.field}
      sortable
    ></Column>
  ))}
</DataTable>

4. Add some options (like sorting by columns in Orders.jsx or global search in Employees.jsx or editing and selecting in Customers.jsx)

Charts

• Line chart: see MUI X line chart

<LineChart
  xAxis={[{ data: SparklineAreaData.dataX }]}
  series={[
    {
      data: SparklineAreaData.dataY,
      color: "blue",
    },
  ]}
  width={300}
  height={200}
  id="line-sparkline"
/>

• Sparkline chart: see MUI X Sparkline chart and Ecommerce.jsx

<SparkLineChart
  xAxis={{ data: SparklineAreaData.dataX }}
  data={SparklineAreaData.dataY}
  width={250}
  height={120}
  colors={["blue"]}
  id="line-sparkline"
  showHighlight={true}
  showTooltip={true}
/>

• Stacked bar chart: see MUI X Bar chart and Ecommerce.jsx

<BarChart
  xAxis={[
    {
      scaleType: "band",
      data: myStackedChartData.dataX,
    },
  ]}
  series={[
    {
      data: myStackedChartData.dataY1,
      color: "#4b5563",
      stack: "A",
      label: "Expense",
    },
    {
      data: myStackedChartData.dataY2,
      color: "#4ade80",
      stack: "A",
      label: "Budget",
    },
  ]}
  width={320}
  height={360}
  id="stack-chart"
/>

Sidebar

• An elegant sidebar in React is added where the navigation is done using NavLink from react-router-dom. See Sidebar.jsx
• Responsive, closes automatically on small screens

Navbar

• An elegant navbar in React is added using icons. See Navbar.jsx

Theme Setting

• A side menu is opened for the user to choose the application theme when settings is clicked. See ThemeSettings.jsx.
• Implementation is done in the ContextProvide and stored in localStorage. See ContextProvider.js
• Usage: see the usage of currentColor and currentMode

WYSWYG Editor

• Added based on PrimeReact which uses QuiliJS. See EditorComp.jsx

Color Picker

• SwatchesPicker and SketchPicker are added based on react-color. See ColorPicker.jsx

Kanban Chart

• A Kanban chart is added in Kanban.jsx based on this repo