Let's continue to work on the dashboard.
So what you are going to do is we are going to display the list of account and in case a user have no
account, we are going to display no account found, create new one.
And this one down here is the list of account that we are going to look through.
So let's locate where the component is inside the component that is account dashboard.
This is where we left it.
So here we are displaying the account list.
So if I comment this one, I can see that there is no account list here.
So let's bring it back.
And now let's trace the account list component.
Let's have a look at the structure.
We have three components.
The first one, let's refresh it.
I didn't save it, which is this one.
The first one is the heading for the account lists which start from here.
Let me show you.
Here is tab from here, the H3, the P tag and then the link.
It's up to it's up to the link.
So if I collapse it, this is ahead.
All right.
This one, this div, if I click on this one, you can see that it has collapsed the head one.
And this one, this fragment is what we are going to make a condition to check.
And down here is a list of the account.
If you click on this one and you can see this is a component for list of accounts.
So here we are going to make some conditions to check.
Let's have some comments here.
This is not going to be the account header.
And then after that, we have the no account message, no account message.
And then here is going to be the list of account.
Account list.
So the next step is that we need to pass the account layers from the file to the component and we can
have that one on the profile dot account.
Let's see.
And you can see that we have empty because this user don't have any account.
So let's pass that one as a prop to the component.
So here we go, a count list and I'll provide us a count is equal to objects.
And then with that.
All right, so let's remove the console log here.
And now back to the account list.
I can structure the account.
And there you go.
So the next step is that let's display the messages accordingly.
So this is the message for no account.
So if I click this one, this is a message for no account, and this one is a message for list of account.
So in between here, let's make some conditions.
The first one is if account dot length is less than zero, then let's display something here.
Otherwise, let's display something here.
So the first one is going to be this one.
So I'll cut this one and I move this one and I will place it here.
The next of this one is going to be this fragment account list, so I'll cut it and now I'm going to
remove this one and place it here.
And now let's save it.
Great.
So let's check it out here and better.
So we see the message.
So let's refresh it.
I think our condition is done right.
So let's see.
Well, don't worry.
Let's see the condition.
Where on?
This is where we are checking.
It's supposed to be t h like that.
And if the account length is less than or equal to zero.
Yes.
So now let's refresh it.
You can see that no account.
And better still to.
We can also remove this one in case a user don't have any account so we can modify the way we are handling
the component.
So let's see where we are displaying that, which is the header here.
We can also cut this one from here and then down here where we are displaying the list.
Then our place is here before that.
Yes.
And now you can see that no account found.
Create one.
When I click on this one, they're going to display the create account for me.
So let's go ahead and create an account for this.
For the meantime, we are going to use the back end because there is no form on the front end to add
a new account.
So let's go to the back end, which is this.
And now let's locate the account collection, which is this one and create.
And here we are going to pass in the token.
So let's get back to our browser because we have the token right inside look at storage and here and
this is a token let me copy everything between the codes and now here let's remove this one and let's
pass it and let's look at the body.
I want to create an account with the name application with initial balance 1000 and account type and
note.
So let me hit send and let's see and I have the account being created.
So now inside the front end, if I refresh the page, you can guess we are going to see this one.
Let's see, let's refresh it and I turn here.
We have the list of account so it's time for us to display this content.
Great.
So let's go.
So inside account layers.
This is a list of account we have, which is this one.
So we are going to look through this one and display the list of account.
So let's last this one and now I can cut it.
So it's time for us to look through that.
So here account dot map and here we go.
I have access to the individual account and let's return Gsx and I will paste that one and you can see
that the SVG is taking my space.
So let me collapse the SVG.
Yes.
So now let's see.
And indeed we have one account.
If I add one more account for this one, I'll call it as my mom's.
Built in.
And I want to invest $9,000 and going to be project type.
So let me hit send and success here.
Now, let's check it out.
Let's refresh.
I'm going to see two of these ones.
So let's see.
And indeed, I have the two.
So now it's time to populate with a real name.
So here you can see that I have comment this one out.
I have access to account the name and then for the details you want to be as dollar sign category is
account and then dash underscore id dot.
All right, so now is complete.
So now let's see.
And I have the education, I have my mom building and I can add one more account.
And our car.
This one as the name of my project as personal my personal account.
And for personal.
I want to invest with less money.
Let's say 300.
Let's maintain it.
Everything's okay now.
Let's get saying now.
Success.
Let's refresh it.
And you can see I have education, mom's building and personal.
That is it.
So what has left is we want to calculate the total expenses for all of this account and the income also,
and then, let's say, the balance I have.
And for this one, I can give to you as a challenge, do the calculation to find the total expenses,
the balance, and then the total income.
So the next step is that when we click on View Accounts, I want to render a component where I'm going
to find a particular account with each transactions.
Let's get into that in the next video.