/Dashy

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

Primary LanguageJavaScript

    **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


logo

    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