**Project-Dahsy**

        => Admin Dashboard providing an overview of tracked data through charts, events management 
        through calendar, and contact management & invoice tracking through data grids

Project Demo

Development Enviroment

Frontend
=> React.js
=> Material UI
=> React Pro Side Bar
Plugins
=> MUI X Datagrid
=> Full Calendar
=> Nivo
=> Formik

How to use

Project Dependencies

Node.js 18.16.0
npm/npx 9.5.1

Packages

MUI 5.11.2 => 5.13.5
MUI X-Data-Grid 5.17.2 => 6.8.0
Emotion 11.10.6 => 11.11.1
Formik 2.2.9 => 2.4.2
React Pro Sidebar 0.7.1 => 1.1.0-alpha.1
Full Calendar 5.11.2 => 6.1.8
Nivo 0.80.0 => 0.83.0

Install Node Modules

npm install

Run Application

npm start

Project Stage Details

UI Element & Styling Updates

Update Color Palette

Add shadows globally

Create Yellow, Orange & Purple Accent Paletes

Wrap App in Login

Outlet

Element Styling

Make the outlet box stay in place

Widgets to Add

Favorite Contacts List

2nd line of Nivo charts

Toggle between 1 or 2 rows of Nivo charts

Sidebar

Element Styling

Scrollbar Styling

Resizing of Text

Resze Elements for better fit.

Reconnect to dark/light theme

Widgets to Add

Topbar

Element Styling

Wrap in Box

Restyle

Resize

make sticky

Widgets to Add

Contacts/Team/Clients

Invoices

Form

Encase form in a styled box

Make text input field labels larger

Remove dummy data.

Calandar

X Upcoming Events styling needs major fix

X Add more styling for a better look

Make event entry form if possible, check Full Calendar Docs

Add State Management to remember events

FAQ

Buttons dont collapse and open

Restyle to look better

Make a features page to link to.

Bar

Make resonsive screen space.

Restyle Box

Add a dummy tools box to the right side for "chart options"

Pie

Make resonsive screen space.

Restyle Box

Add a dummy tools box to the right side for "chart options"

Line

Make resonsive screen space.

Restyle Box

Add a dummy tools box to the right side for "chart options"

Geo

Add dropdown menu to change the map colors by changing the nivo theme

Add dropdown menu to change the map orientation by changing the nivo theme

Seperate the legend into its own box

Create a sliding bar to zoom the map in and out