1 00:00:07,570 --> 00:00:14,170 Now that we can look in, let's go ahead and work on the dashboard of the user. 2 00:00:14,500 --> 00:00:23,200 That is, as soon as a user logs in, we want to programmatically redirect the user to his or her dashboard 3 00:00:23,290 --> 00:00:27,970 and to achieve that, unless we have those components ready. 4 00:00:28,060 --> 00:00:35,650 And lucky for us, I have prepared the component and I'll provide as a part of resource to this particular 5 00:00:35,650 --> 00:00:36,270 video. 6 00:00:36,280 --> 00:00:37,770 So let's go ahead. 7 00:00:37,780 --> 00:00:42,850 So when I click on Dashboard, you want to see the dashboard of the user. 8 00:00:43,150 --> 00:00:46,510 We are going to have main components. 9 00:00:46,510 --> 00:00:52,660 So this component is going to render a component called account summary. 10 00:00:52,930 --> 00:01:01,120 And this account summary is going to provide all the total expenses or income for all your accounts. 11 00:01:01,510 --> 00:01:09,040 Let's say one account is for building, one account is for education and one account is for personal. 12 00:01:09,070 --> 00:01:16,120 We are going to give you the summary of all the total expenses for all your account, and this is what 13 00:01:16,120 --> 00:01:18,520 we call the account summary. 14 00:01:18,700 --> 00:01:25,270 And next is you are going to render all the account that a user has created down here. 15 00:01:25,570 --> 00:01:32,950 So here, if a user want to know more about a specific account, we are going to provide a link like 16 00:01:32,950 --> 00:01:34,810 Read More or view details. 17 00:01:34,960 --> 00:01:42,670 So as soon as the user click on View More, we are going to display a specific component for a specific 18 00:01:42,670 --> 00:01:47,110 account and you are going to display what is called the account details. 19 00:01:47,110 --> 00:01:51,700 So for the meantime, let's provide these three components. 20 00:01:51,700 --> 00:01:58,990 So back to the app dot G's file and inside the components you are going to create one folder called 21 00:01:58,990 --> 00:02:00,040 Dashboard. 22 00:02:00,860 --> 00:02:03,590 So let's add the account dashboard. 23 00:02:03,590 --> 00:02:07,080 And like I said, I'll provide that component for you. 24 00:02:07,100 --> 00:02:10,580 So let me drag and draw inside the dashboard. 25 00:02:10,580 --> 00:02:14,510 And this is the account dashboard component. 26 00:02:14,630 --> 00:02:19,180 So let's go ahead and then render this component inside the app. 27 00:02:19,190 --> 00:02:24,650 Let's require the account dashboard and the auto import is working. 28 00:02:24,770 --> 00:02:33,890 So next step is let's go ahead and then make a copy of this one and change this one to account dashboard. 29 00:02:33,890 --> 00:02:37,940 And then the path is going to be dashboard. 30 00:02:38,600 --> 00:02:39,470 Let's save it. 31 00:02:39,470 --> 00:02:41,480 And now let's check in the browser. 32 00:02:41,570 --> 00:02:45,130 And now we can see we have what is called Arrow. 33 00:02:45,140 --> 00:02:49,970 So we are going to display this arrow if the user token has expired. 34 00:02:50,120 --> 00:02:53,420 The next component is going to be the account summary. 35 00:02:53,420 --> 00:02:56,810 So I will drag and then paste it inside here. 36 00:02:56,810 --> 00:02:59,510 And this is the account summary. 37 00:02:59,660 --> 00:03:06,350 You can see total income or expenses of all your account and we have the HTML structure here. 38 00:03:06,560 --> 00:03:12,950 So we are going to require the component and give it to the main dashboard component. 39 00:03:12,950 --> 00:03:14,080 So here we go. 40 00:03:14,330 --> 00:03:15,890 Account summary. 41 00:03:17,410 --> 00:03:21,880 And inside the diff here, I'm going to place that one. 42 00:03:22,060 --> 00:03:23,080 So let's save it. 43 00:03:23,080 --> 00:03:29,830 And now let's look at the account summary and this is the account summary where I mistakenly placed 44 00:03:29,830 --> 00:03:32,470 it inside the error component here. 45 00:03:32,740 --> 00:03:37,830 So let's cut it and then place it after the error component or error tag. 46 00:03:37,840 --> 00:03:39,760 And this is what we have. 47 00:03:39,790 --> 00:03:44,110 Don't worry, we are going to conditionally display this one. 48 00:03:44,110 --> 00:03:47,740 So this is my total income for all my accounts. 49 00:03:47,740 --> 00:03:50,830 And we're going to change this one as you move on. 50 00:03:50,940 --> 00:03:51,210 Great. 51 00:03:51,220 --> 00:03:52,300 And this one, too. 52 00:03:52,330 --> 00:03:56,110 We remove that because I use the component from Table CSEs. 53 00:03:56,560 --> 00:03:57,460 All right. 54 00:03:57,490 --> 00:04:03,940 So the next step is we need to display all the accounts and here you go. 55 00:04:04,120 --> 00:04:06,940 Also, I will provide that component for you. 56 00:04:06,940 --> 00:04:11,170 So I'll place it inside the dashboard component. 57 00:04:11,170 --> 00:04:13,180 And this is the account list. 58 00:04:13,270 --> 00:04:20,230 So let's save it now and let's get back to the account dashboard and let's require the account lists 59 00:04:20,800 --> 00:04:24,940 and account list will come before the account summary. 60 00:04:25,180 --> 00:04:25,840 Save it. 61 00:04:25,840 --> 00:04:32,290 And now let's have a look where we got some beautiful arrows simply because we are using a link inside 62 00:04:32,290 --> 00:04:33,430 the account list. 63 00:04:33,430 --> 00:04:40,690 So let's go ahead and then require the link from act routed on and here is the link. 64 00:04:40,930 --> 00:04:49,180 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 65 00:04:49,180 --> 00:04:53,350 want to add more accounts, the user is going to click on this one. 66 00:04:53,350 --> 00:04:59,440 And in case this user has a new account, we are going to display this one for the user to click on 67 00:04:59,440 --> 00:05:01,780 this one to create an account. 68 00:05:01,810 --> 00:05:02,440 Great. 69 00:05:02,440 --> 00:05:08,800 So now that we have this component ready, it's time to fill up with the real data from the back end. 70 00:05:08,800 --> 00:05:15,100 So the next video, let's work on the dashboard by populating with the raw data.