• Created the Income Page with Two components - IncomeAdder and IncomeTracker
• Created a Nested Route using React Router so that user can goto see his/her budget - then select a tab from the sub navigation bar with options of Income/Expenses/Combined
• Added some subtle animations for Income Page when IncomeAdder component gets brought in

Prettier and ESLint have been installed. I used these as reference: https://prettier.io/docs/en/install.html https://github.com/prettier/eslint-config-prettier#installation

I am going to need Jonathan to take a look at this to see if it was successful. The server side had a lot of permissions errors being thrown while installing, FYI

• changed favicon, transaction adder will not be bound to two decimal scale, changed description and app title

• income transactions message shortened and adjusted

• changed budget adder modal to show empty string on initial display

• Favicon now changed to our logo
• App Title and Description changed
• Income transaction message for user is shortened to not overlap on mobile view
• Transaction Adder amount input field will now reset to an empty string rather than two decimal places '$.00' - this will make it easier for mobile users to just type in a new amount rather than having to delete everything first

• Implemented the react-number-format package to Budget Adder and Editor components
• User will not be able to enter any amounts less than or equal to 0 and submit
• Adjusted the sizes of containers in Login, Welcome, and Signup page so that everything fits on one page without scrollbar
• Error message will no longer popup under amount input field after user successfully submits a transaction
• I noticed the edit icon was showing through the Edit modal, so I fixed that up with z-index
• Moved the CurrencyFormatter function to the utils folder since I was using it in multiple files

• Moved the message to the top of the transactions page for better visibility to user
• Fixed the currency formatting for Transaction Adder and Editor components

• Implemented useMutation from reactQuery to invalidate the 'budget' queries once a user deletes the transaction.
• It's been working smoothly without fail on my end. If we can all test this and see that it works, I can implement the useMutation hook everywhere to ensure better data fetching.
• Added a subtle scrollbar to the Transaction Items List container so that user can know if there are more items towards the bottom
• Got rid of the React Query dev tool
• Made padding at bottom smaller so that App doesn't scroll vertically

• Get all transactions method is no longer used. All the data being pulled from getBudgetByID is what is being used for transactions.
• Created a new Yup validator schema for Transaction Adder since it no longer used the React Currency Input Field
• Transaction Adder was not adding to the Budget's current amount correctly after taking off the currency formatting from transaction adder component - Should be fixed now

• Loading container has been fixed so that it's now containing all of the content
• Transaction Adder is taken off the UI once user submits a new transaction (this was done because I could not figure out how to reset the amount input field that is using React-Currency-Input-Field package. useRef hook did not work..If we can figure out how to reset this, we I can revert back this change before the presentation)
• Added a little note in transactions page - if the pagetype is 'income' then itll show: Income transactions will not affect the budget. for clarification
• Deleted the currency formatting for TransactionAdder component for now
• Made the title input field the default focus whenever user submits
• I'll need to look further into why deleting a transaction is sometimes not reflected in the UI right away.

• Added the same currency formatting for transactions adding and editing.
• Go to Current Month budget button - changed styling to match other buttons, changed the placement and took out the word 'budget' at the end. Let me know if you want to just keep that as it was, but I think it was too lengthy
• Loading component was made a bit smaller so that itll fit mobile views better

In this PR:

• I added the purple accent color to the arrows on budgets page.
• I changed the 'already have an account?' on the login.tsx page to the purple accent color.
• I edited incomes and expenses to only render categories associated with each type of transaction. So the incomes only has the option of the income category. The expenses have the option of every category except incomes.

In the ReadMe, explain how to run app (FE, BE, DB) together. How to launch each part of the app. Also add a ReadMe explaining how to connect to the API with examples.

• [ ] App navigation
• [ ] Page navigation
• [ ] Monthly income title
• [ ] Button to add income
• [ ] Income title and amount list

We need a INCOME (READ) page built. This page must include the app navigation and our page navigation. Then we need a monthly income section that includes a button to add income and the income title and amount list (clickable). They should look something like this:

• [ ] Navigation
• [ ] Logo
• [ ] Page title
• [ ] Email input
• [ ] Password input
• [ ] Confirm password input
• [ ] Button (CTA)

We need a LOGIN and SIGN UP page built. The pages must include the navigation. our logo, page title, email input field, password input field, confirm password field (Sign Up only), and a CTA (call to action) button to submit the form (Login or Sign Up). They should look something like this:

Use this repo for an example: https://github.com/Jmartimus/Diaryapp.

You will add this logic to the log-in controller file and services file that saves info in the backend until we get MongoDB connected.

Use this repo for an example if you are looking how to create the controller and service files: https://github.com/Jmartimus/Diaryapp.

You will need to create a controller file and services file that saves info in the backend until we get MongoDB connected.