Now that we can look in, let's go ahead and work on the dashboard of the user.
That is, as soon as a user logs in, we want to programmatically redirect the user to his or her dashboard
and to achieve that, unless we have those components ready.
And lucky for us, I have prepared the component and I'll provide as a part of resource to this particular
video.
So let's go ahead.
So when I click on Dashboard, you want to see the dashboard of the user.
We are going to have main components.
So this component is going to render a component called account summary.
And this account summary is going to provide all the total expenses or income for all your accounts.
Let's say one account is for building, one account is for education and one account is for personal.
We are going to give you the summary of all the total expenses for all your account, and this is what
we call the account summary.
And next is you are going to render all the account that a user has created down here.
So here, if a user want to know more about a specific account, we are going to provide a link like
Read More or view details.
So as soon as the user click on View More, we are going to display a specific component for a specific
account and you are going to display what is called the account details.
So for the meantime, let's provide these three components.
So back to the app dot G's file and inside the components you are going to create one folder called
Dashboard.
So let's add the account dashboard.
And like I said, I'll provide that component for you.
So let me drag and draw inside the dashboard.
And this is the account dashboard component.
So let's go ahead and then render this component inside the app.
Let's require the account dashboard and the auto import is working.
So next step is let's go ahead and then make a copy of this one and change this one to account dashboard.
And then the path is going to be dashboard.
Let's save it.
And now let's check in the browser.
And now we can see we have what is called Arrow.
So we are going to display this arrow if the user token has expired.
The next component is going to be the account summary.
So I will drag and then paste it inside here.
And this is the account summary.
You can see total income or expenses of all your account and we have the HTML structure here.
So we are going to require the component and give it to the main dashboard component.
So here we go.
Account summary.
And inside the diff here, I'm going to place that one.
So let's save it.
And now let's look at the account summary and this is the account summary where I mistakenly placed
it inside the error component here.
So let's cut it and then place it after the error component or error tag.
And this is what we have.
Don't worry, we are going to conditionally display this one.
So this is my total income for all my accounts.
And we're going to change this one as you move on.
Great.
And this one, too.
We remove that because I use the component from Table CSEs.
All right.
So the next step is we need to display all the accounts and here you go.
Also, I will provide that component for you.
So I'll place it inside the dashboard component.
And this is the account list.
So let's save it now and let's get back to the account dashboard and let's require the account lists
and account list will come before the account summary.
Save it.
And now let's have a look where we got some beautiful arrows simply because we are using a link inside
the account list.
So let's go ahead and then require the link from act routed on and here is the link.
Let's expand that now let's have a look and here we go, can see we have list of accounts and if a user
want to add more accounts, the user is going to click on this one.
And in case this user has a new account, we are going to display this one for the user to click on
this one to create an account.
Great.
So now that we have this component ready, it's time to fill up with the real data from the back end.
So the next video, let's work on the dashboard by populating with the raw data.