3. Add Assets - As a user, I want to be able to add a new asset and view the asset I just added in a table

[shangguanwang]

Summary

Users should be able to add a new asset. To do so, the Assets view should have a + Add Assets button.

Acceptance Criteria

UI-related tasks

• By clicking on the + Add Assets button, users are redirected to the AssetsAdd view
• The AssetsAdd view presents users with a form that allows them to enter 3 things:
  • Asset Name (string)
  • Asset Amount (number)
  • Asset Type (dropdown)
• After inputting data, users can click Save to save the data to the database and automatically redirected back to the Assets page

Data-related tasks

• User data is saved to Firebase
• User data can be retrieved from Firebase
• Display user data in table format
• Display total asset amount at the top

Notes

• You will know your is correctly implemented if you click on the label and keyboard focus moves to the related input.

[shangguanwang]

UI Approach

• use Link from react-router-dom to direct users to the AssetsAdd subpage
• use useNavigate() hook to redirect users back to the Assets page

Form After

Screen.Recording.2023-09-01.at.5.47.07.PM.mov

[shangguanwang]

Data Approach

• set up Firebase/Firestore to send data and retrieve data
• use MUI react-data-grid to display data table

Assets Data Table After

Assets.Tableview.mov