MVP - READ - TIMELINE PAGE

[keanacobarde]

User Story

I, as the broke student or job juggling over-achiever, wish to have a full timeline of my expenses on paper. I would like to track, monthly, all of my expenses, which categories they fall under, and what that month's total income was. Each month will have its own dedicated monthly summary so that trends can be spotted over time.

Acceptance Criteria

WIREFRAME

MONTH-BY-MONTH

• Will either be tabs or buttons
• Toggles between monthly summaries

HERO SECTION

• Month
• A button to allow for the month to be edited
• Total monthly income.
• A button to allow for the addition of the next month's income.

EXPENSE SECTION

• Expense cards, as created within #11
• These cards and their data is filtered by month.

WHEN I select on the 'Timeline' node within the navbar, I should be met with the current month's summary page. I can toggle between months and their expense history. These expense will also include the categories the expenses fell under.

Dependencies

• ALL TESTING DATA SHOULD BE CREATED.
• ALL NECESSARY API CALLS SHOULD BE WRITTEN. A SEPERATE ISSUE TICKET WILL BE CREATED FOR THIS ONCE FULL FUNCTIONALITY IS MAPPED AND DECIDED (READ).

  11 - The completion of this page is dependent on the completion of this component.

  This page isn't fully complete without the completion of the monthly expenses form.

Dev Notes

• You'll most likely use some sort of dynamic route that's reliant on the firebaseKey of the specific month you're looking at to toggle between monthly summaries.
• The 'Timeline' link can have some sort of logic that checks for the current month utilizing the Date object or something of the like. This will automatically place users on the tab for the current month.
• Depending on the The 'Edit Month' and 'Add next month...' buttons will be dynamic routes to the monthly income form.

[keanacobarde]

The structure so far:

• Timeline.js page - takes NO PROPS and contains a monthly array. This is connected to a monthly component which is the rest of the page depicted in the wireframe.
• The timeline page calls to the FireBase for the month the user selects. Since abbreviations are used, it'll filter the API call by whether or not the name of the month contains the abbreviation.
• Once the correct month is gleaned from the API call, the month object (Income is what it's called when looking at the ERD), is passed into the monthPage component as a prop. This will govern the components that appear on the page.

[keanacobarde]

PLANNING // EXECUTION FLOW

[keanacobarde]

ALL NECESSARY CHANGES ARE IMPLEMENTED AND TESTED - CLOSING TICKET