Feature/ia tickets 26 71 user dashboard

[ialej001]

And the last big ticket!

Full featured dashboard with individual summary pages:

Dash:

• Total emissions summary based on the user's unit preference
• Circular progress indicators change color based on its respective percentage
  • 0% should be displayed when there is absolute no calculations saved
  • Otherwise, the percentage should be rendered center of the circle
  • Color changes happen at:
    • [ 0-40 ] %: green
    • ( 40-80 ] %: yellow
    • ( 80-100 ] %: red
• Each card also changes its emissions value based on the user's unit preference

Fuel, Electricity, and Flight summary pages:

• Render a responsive table, collapsing columns as the view-port shrinks
• Each page has a header
• Each page has a 'empty table' message, linking to the appropriate calculator page to start

Vehicle summary page:

• On larger screens, a tabbed UI is rendered. Each tab corresponds to a user's vehicle
• On smaller screens, an accordion UI is rendered
• In either style:
  • A table is rendered, responsive to the size of the view-port, collapsing columns as needed.
• For each vehicle, if no data exists, a message and link will appear to redirect to the proper calculator

All summary pages:

• All data is sorted recent to oldest, top to bottom.

Let me know if you find problems!

You need to run npm i to get the package I used for the circular progress indicators!

Closes tickets #26, #71

[TiciaD]

This looks amazing Ivan! The only issues I'm having is for mobile responsiveness. I don't know if you want to make a separate cleanup ticket for that or if you think they're easy fixes but here's what I've found:

Cards overlap on Tablet size screens (768px)

On mobile screens (320px) the cards are overflowing and getting cut off I think the padding for the cards needs to be smaller when on mobile

[ialej001]

Cards overlap on Tablet size screens (768px)

On mobile screens (320px) the cards are overflowing and getting cut off I think the padding for the cards needs to be smaller when on mobile

Fixed!

[TiciaD]

Thanks for fixing those responsiveness issues! Looks good now, approved!

[amandaalexandre]

Good job! Are we production ready?