1
00:00:08,260 --> 00:00:11,620
Let's continue to work on the dashboard.

2
00:00:11,770 --> 00:00:19,810
So what you are going to do is we are going to display the list of account and in case a user have no

3
00:00:19,810 --> 00:00:25,690
account, we are going to display no account found, create new one.

4
00:00:25,750 --> 00:00:30,810
And this one down here is the list of account that we are going to look through.

5
00:00:30,820 --> 00:00:37,090
So let's locate where the component is inside the component that is account dashboard.

6
00:00:37,090 --> 00:00:39,070
This is where we left it.

7
00:00:39,070 --> 00:00:42,640
So here we are displaying the account list.

8
00:00:42,640 --> 00:00:48,640
So if I comment this one, I can see that there is no account list here.

9
00:00:48,640 --> 00:00:49,990
So let's bring it back.

10
00:00:49,990 --> 00:00:53,530
And now let's trace the account list component.

11
00:00:53,650 --> 00:00:55,900
Let's have a look at the structure.

12
00:00:56,080 --> 00:00:58,180
We have three components.

13
00:00:58,180 --> 00:01:00,700
The first one, let's refresh it.

14
00:01:00,700 --> 00:01:02,860
I didn't save it, which is this one.

15
00:01:04,090 --> 00:01:09,640
The first one is the heading for the account lists which start from here.

16
00:01:09,730 --> 00:01:10,360
Let me show you.

17
00:01:10,360 --> 00:01:15,760
Here is tab from here, the H3, the P tag and then the link.

18
00:01:15,760 --> 00:01:17,980
It's up to it's up to the link.

19
00:01:17,980 --> 00:01:20,850
So if I collapse it, this is ahead.

20
00:01:21,040 --> 00:01:21,520
All right.

21
00:01:21,520 --> 00:01:27,520
This one, this div, if I click on this one, you can see that it has collapsed the head one.

22
00:01:27,580 --> 00:01:32,620
And this one, this fragment is what we are going to make a condition to check.

23
00:01:32,620 --> 00:01:35,980
And down here is a list of the account.

24
00:01:35,980 --> 00:01:40,690
If you click on this one and you can see this is a component for list of accounts.

25
00:01:40,690 --> 00:01:44,020
So here we are going to make some conditions to check.

26
00:01:44,020 --> 00:01:45,490
Let's have some comments here.

27
00:01:45,490 --> 00:01:49,000
This is not going to be the account header.

28
00:01:52,720 --> 00:02:01,660
And then after that, we have the no account message, no account message.

29
00:02:01,960 --> 00:02:06,550
And then here is going to be the list of account.

30
00:02:08,850 --> 00:02:09,840
Account list.

31
00:02:11,130 --> 00:02:17,550
So the next step is that we need to pass the account layers from the file to the component and we can

32
00:02:17,550 --> 00:02:21,090
have that one on the profile dot account.

33
00:02:21,930 --> 00:02:22,980
Let's see.

34
00:02:24,750 --> 00:02:29,360
And you can see that we have empty because this user don't have any account.

35
00:02:29,370 --> 00:02:32,940
So let's pass that one as a prop to the component.

36
00:02:33,240 --> 00:02:40,200
So here we go, a count list and I'll provide us a count is equal to objects.

37
00:02:40,200 --> 00:02:41,490
And then with that.

38
00:02:42,750 --> 00:02:44,910
All right, so let's remove the console log here.

39
00:02:45,210 --> 00:02:47,340
And now back to the account list.

40
00:02:47,340 --> 00:02:49,950
I can structure the account.

41
00:02:50,550 --> 00:02:51,990
And there you go.

42
00:02:52,560 --> 00:02:56,880
So the next step is that let's display the messages accordingly.

43
00:02:57,120 --> 00:03:00,320
So this is the message for no account.

44
00:03:00,330 --> 00:03:09,700
So if I click this one, this is a message for no account, and this one is a message for list of account.

45
00:03:09,720 --> 00:03:13,230
So in between here, let's make some conditions.

46
00:03:13,260 --> 00:03:25,320
The first one is if account dot length is less than zero, then let's display something here.

47
00:03:25,320 --> 00:03:28,050
Otherwise, let's display something here.

48
00:03:29,190 --> 00:03:32,580
So the first one is going to be this one.

49
00:03:32,760 --> 00:03:38,670
So I'll cut this one and I move this one and I will place it here.

50
00:03:39,300 --> 00:03:45,810
The next of this one is going to be this fragment account list, so I'll cut it and now I'm going to

51
00:03:45,810 --> 00:03:48,300
remove this one and place it here.

52
00:03:48,420 --> 00:03:50,160
And now let's save it.

53
00:03:50,190 --> 00:03:50,820
Great.

54
00:03:50,910 --> 00:03:54,010
So let's check it out here and better.

55
00:03:54,060 --> 00:03:56,130
So we see the message.

56
00:03:56,130 --> 00:03:57,630
So let's refresh it.

57
00:03:57,840 --> 00:04:00,180
I think our condition is done right.

58
00:04:00,180 --> 00:04:01,350
So let's see.

59
00:04:01,680 --> 00:04:02,610
Well, don't worry.

60
00:04:02,610 --> 00:04:03,690
Let's see the condition.

61
00:04:03,690 --> 00:04:04,310
Where on?

62
00:04:05,680 --> 00:04:07,440
This is where we are checking.

63
00:04:08,080 --> 00:04:10,630
It's supposed to be t h like that.

64
00:04:10,630 --> 00:04:14,950
And if the account length is less than or equal to zero.

65
00:04:15,130 --> 00:04:15,910
Yes.

66
00:04:16,029 --> 00:04:18,579
So now let's refresh it.

67
00:04:18,820 --> 00:04:20,980
You can see that no account.

68
00:04:20,980 --> 00:04:22,360
And better still to.

69
00:04:22,360 --> 00:04:30,070
We can also remove this one in case a user don't have any account so we can modify the way we are handling

70
00:04:30,070 --> 00:04:31,120
the component.

71
00:04:31,510 --> 00:04:36,100
So let's see where we are displaying that, which is the header here.

72
00:04:36,280 --> 00:04:43,720
We can also cut this one from here and then down here where we are displaying the list.

73
00:04:43,720 --> 00:04:46,180
Then our place is here before that.

74
00:04:46,360 --> 00:04:47,140
Yes.

75
00:04:48,000 --> 00:04:51,120
And now you can see that no account found.

76
00:04:51,120 --> 00:04:51,770
Create one.

77
00:04:51,770 --> 00:04:56,400
When I click on this one, they're going to display the create account for me.

78
00:04:56,640 --> 00:04:59,280
So let's go ahead and create an account for this.

79
00:04:59,280 --> 00:05:06,180
For the meantime, we are going to use the back end because there is no form on the front end to add

80
00:05:06,180 --> 00:05:07,450
a new account.

81
00:05:07,470 --> 00:05:10,260
So let's go to the back end, which is this.

82
00:05:10,410 --> 00:05:16,110
And now let's locate the account collection, which is this one and create.

83
00:05:16,380 --> 00:05:19,550
And here we are going to pass in the token.

84
00:05:19,560 --> 00:05:27,240
So let's get back to our browser because we have the token right inside look at storage and here and

85
00:05:27,240 --> 00:05:36,120
this is a token let me copy everything between the codes and now here let's remove this one and let's

86
00:05:36,120 --> 00:05:38,340
pass it and let's look at the body.

87
00:05:38,340 --> 00:05:46,260
I want to create an account with the name application with initial balance 1000 and account type and

88
00:05:46,260 --> 00:05:46,530
note.

89
00:05:46,530 --> 00:05:52,530
So let me hit send and let's see and I have the account being created.

90
00:05:52,590 --> 00:05:59,820
So now inside the front end, if I refresh the page, you can guess we are going to see this one.

91
00:06:00,000 --> 00:06:03,750
Let's see, let's refresh it and I turn here.

92
00:06:03,780 --> 00:06:09,630
We have the list of account so it's time for us to display this content.

93
00:06:09,690 --> 00:06:10,040
Great.

94
00:06:10,050 --> 00:06:10,890
So let's go.

95
00:06:11,310 --> 00:06:13,490
So inside account layers.

96
00:06:13,500 --> 00:06:17,490
This is a list of account we have, which is this one.

97
00:06:17,730 --> 00:06:21,540
So we are going to look through this one and display the list of account.

98
00:06:21,540 --> 00:06:25,680
So let's last this one and now I can cut it.

99
00:06:25,680 --> 00:06:28,170
So it's time for us to look through that.

100
00:06:28,170 --> 00:06:33,270
So here account dot map and here we go.

101
00:06:33,270 --> 00:06:44,730
I have access to the individual account and let's return Gsx and I will paste that one and you can see

102
00:06:44,730 --> 00:06:46,800
that the SVG is taking my space.

103
00:06:46,800 --> 00:06:48,690
So let me collapse the SVG.

104
00:06:48,720 --> 00:06:49,320
Yes.

105
00:06:49,470 --> 00:06:50,760
So now let's see.

106
00:06:50,760 --> 00:06:52,860
And indeed we have one account.

107
00:06:52,950 --> 00:06:58,350
If I add one more account for this one, I'll call it as my mom's.

108
00:07:00,550 --> 00:07:01,030
Built in.

109
00:07:03,460 --> 00:07:10,660
And I want to invest $9,000 and going to be project type.

110
00:07:11,500 --> 00:07:15,910
So let me hit send and success here.

111
00:07:16,060 --> 00:07:17,450
Now, let's check it out.

112
00:07:17,470 --> 00:07:18,250
Let's refresh.

113
00:07:18,250 --> 00:07:20,740
I'm going to see two of these ones.

114
00:07:20,740 --> 00:07:21,550
So let's see.

115
00:07:21,790 --> 00:07:23,830
And indeed, I have the two.

116
00:07:23,920 --> 00:07:27,220
So now it's time to populate with a real name.

117
00:07:27,220 --> 00:07:30,670
So here you can see that I have comment this one out.

118
00:07:30,670 --> 00:07:38,740
I have access to account the name and then for the details you want to be as dollar sign category is

119
00:07:38,740 --> 00:07:44,320
account and then dash underscore id dot.

120
00:07:45,310 --> 00:07:47,100
All right, so now is complete.

121
00:07:47,110 --> 00:07:48,480
So now let's see.

122
00:07:48,490 --> 00:07:55,390
And I have the education, I have my mom building and I can add one more account.

123
00:07:56,670 --> 00:07:57,870
And our car.

124
00:07:57,870 --> 00:08:04,410
This one as the name of my project as personal my personal account.

125
00:08:11,990 --> 00:08:12,890
And for personal.

126
00:08:12,890 --> 00:08:15,530
I want to invest with less money.

127
00:08:16,190 --> 00:08:18,200
Let's say 300.

128
00:08:19,070 --> 00:08:19,910
Let's maintain it.

129
00:08:19,910 --> 00:08:21,230
Everything's okay now.

130
00:08:21,230 --> 00:08:23,110
Let's get saying now.

131
00:08:23,120 --> 00:08:24,200
Success.

132
00:08:24,230 --> 00:08:25,550
Let's refresh it.

133
00:08:26,060 --> 00:08:31,760
And you can see I have education, mom's building and personal.

134
00:08:31,790 --> 00:08:32,990
That is it.

135
00:08:33,110 --> 00:08:43,250
So what has left is we want to calculate the total expenses for all of this account and the income also,

136
00:08:43,250 --> 00:08:45,590
and then, let's say, the balance I have.

137
00:08:45,770 --> 00:08:51,620
And for this one, I can give to you as a challenge, do the calculation to find the total expenses,

138
00:08:51,620 --> 00:08:54,190
the balance, and then the total income.

139
00:08:54,200 --> 00:09:01,370
So the next step is that when we click on View Accounts, I want to render a component where I'm going

140
00:09:01,370 --> 00:09:05,670
to find a particular account with each transactions.

141
00:09:05,690 --> 00:09:08,120
Let's get into that in the next video.