Week 10 - Dashboard Page

Hi everyone. Starlings started Week 10 by introducing the Dashboard page to our productivity application. Within this view, the user will get a quick glance at how they are doing during the day. There will be mini summaries for every page in the application, including Expense and Note. Take a look at the image below to see the Dashboard screen:

Dashboard screen

The way we implement this Dashboard page is simple, yet efficient. We utilized our code from other pages to create information specifically for the current date. While the user has the access to all information on the pages themselves, we intended to provide only a quick snapshot for that day to save the user some time browsing through all pages.

We created a separate reducer to store all the data we needed to display the Dashboard instead of using the already-existing reducers for other pages. By doing so, the Dashboard page will be independent and will not break if there are any, even minor, changes to other pages.


Card Component

We also styled the modules using the bootstrap Card components. In addition, the number in the Expense module will change its color depending on the amount (green for positive and red for negative).

For next week's blog, we are going to discuss how we are incorporating graphs to visualize what the user has. We already have graphs for expenses ready to deploy, so we will see you in a bit!

Comments

Post a Comment

Popular posts from this blog

Week 4

     For this week, we continue to work on individual projects.       We have some progress in the team project this week. We set up the Redux, Firebase, React Bootstrap, and React Material.       We choose Redux for state management. It is very helpful when we deal with a lot of different data and many features. Firebase is also good for our work. It has a real-time database, authorization, storage, and deployment.       We also assigned to making the Homepage, Header, Footer, and Navigation bar. These parts are not difficult. In the progress, we will have to import routers and links between pages.       These elements will be finished at the end of this week so we will finish all the base of the web app. We just need to build up the project. So, for next week, we can start focusing on each feature. 
Read more

Week 9

Image
This week, we worked on the functions of the todo list page and the Expenses Page, to update the items and deleting the items on the list by calling the backend functions using POST, DELETE functions, and connected with the Firebase database system. In the Expenses Page, we also added a filtering function that filters the list of Expenses/Income by date (today, most recent, one week) and type (expenses, income). We will have to add filtering function to the todo list too, where we filter by progress (i.e in progress, completed, or not started).   For next week, we are going to be working on the Reports page to show what the user's progress is by seeing how many tasks are overdue, or how much the expenses are compared to income by using the data to make graphs. We will also brush up the UIs for our functions in the Notes and Expenses page to make it look better and easier for users to navigate. The Dashboard will also show the data from todo list and expenses, which we will wor...
Read more

Week 11

Image
 This week, we updated the note function when the user can add even and update the complete state in a convenient way. Moreover, we also separate them into different tabs so people can see what they completed easier. Another thing we improved was the graph when it instantly updates about expense condition and to-do list, which you completed or in progress. With this update, people can keep track of tasks in 3 days or in the week, which makes sure that people forget tasks or overusing money.
Read more