1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:05,120
And once we have restricted the access to the page, now let's work on the return.

3
00:00:05,270 --> 00:00:12,170
And essentially, I just want to showcase two cards with how many users we have in the application and

4
00:00:12,170 --> 00:00:14,570
how many jobs those users have created.

5
00:00:14,600 --> 00:00:16,700
Of course, sky's the limit.

6
00:00:16,730 --> 00:00:23,030
You can add way more logic in there, but in my case, that's what I'm going to display in the admin

7
00:00:23,030 --> 00:00:23,590
page.

8
00:00:23,600 --> 00:00:27,680
And essentially these cards are going to be coming from the stats page.

9
00:00:27,680 --> 00:00:29,660
So eventually we'll work on the stats page.

10
00:00:29,660 --> 00:00:35,450
And here notice we use them to display how many applications are pending interviews and decline.

11
00:00:35,480 --> 00:00:36,320
So.

12
00:00:36,960 --> 00:00:39,090
At the end of the day, the logic is pretty much the same.

13
00:00:39,120 --> 00:00:41,730
Of course, we're just going to be displaying different info.

14
00:00:41,940 --> 00:00:43,200
Now, why am I telling you that?

15
00:00:43,200 --> 00:00:46,500
Because first I want to create that stat item.

16
00:00:46,500 --> 00:00:53,880
So we're going to go here with stat item X, and since it's not our first component, I'll right away

17
00:00:53,910 --> 00:01:00,170
set up the props we're going to be looking for and also we will right away set up the return.

18
00:01:00,180 --> 00:01:03,590
So we're going to go here with count title icon.

19
00:01:03,600 --> 00:01:07,940
We want to display a color as well as the background color.

20
00:01:07,950 --> 00:01:13,620
And this is going to be interesting component where we will set up those colors using styled components.

21
00:01:13,620 --> 00:01:18,010
So if you want to see how that works, you'll have to watch the video.

22
00:01:18,030 --> 00:01:25,020
Now, right away I want to grab the wrapper and I'm looking for the stat item, so not the dashboard.

23
00:01:26,170 --> 00:01:30,190
Let me go here with Forward Slash and I'm looking for stat item.

24
00:01:30,370 --> 00:01:34,450
And then when it comes to a return, we're going to go here with rapper.

25
00:01:34,570 --> 00:01:39,040
We're going to pass color and background color as props.

26
00:01:39,910 --> 00:01:41,250
So let's set up over here.

27
00:01:41,260 --> 00:01:46,950
Color is equal to the color prop and then background.

28
00:01:46,960 --> 00:01:47,770
Same deal.

29
00:01:48,280 --> 00:01:53,650
We're going to go with BG equals to BG and inside of the wrapper we're going to go with header.

30
00:01:54,190 --> 00:01:56,290
Then let's add a span.

31
00:01:57,220 --> 00:02:01,870
In this case, the class name will be count and this is when we want to showcase.

32
00:02:02,260 --> 00:02:05,800
So essentially, again, we're referencing the prop.

33
00:02:05,850 --> 00:02:10,330
Then let's copy and paste and let's just change this around to icon.

34
00:02:11,630 --> 00:02:15,890
And then right outside of the header, we also want to go with heading five.

35
00:02:16,780 --> 00:02:18,310
Class name will be title.

36
00:02:20,300 --> 00:02:25,490
And you can probably already guess that we're going to use over here the title prop.

37
00:02:25,610 --> 00:02:26,600
Let's save it.

38
00:02:26,630 --> 00:02:29,630
We do want to set up import export.

39
00:02:29,870 --> 00:02:33,080
So we want to navigate to index.js.

40
00:02:33,110 --> 00:02:37,730
Let's select this one over here and let's call this stat item.

41
00:02:37,730 --> 00:02:43,280
And now we want to navigate back to the admin and we want to pass in the data.

42
00:02:43,310 --> 00:02:49,440
So essentially in here in the admin page, these are the icons we're going to use.

43
00:02:49,460 --> 00:02:51,590
So this is what we're going to pass in.

44
00:02:51,890 --> 00:02:55,390
And effectively we just want to grab that component.

45
00:02:55,430 --> 00:02:59,390
So I think I'm going to rely on the auto import in this case.

46
00:02:59,390 --> 00:03:02,030
So I'll say stat item.

47
00:03:02,150 --> 00:03:03,740
So let's import that.

48
00:03:03,740 --> 00:03:06,630
And then remember, we have quite a few props.

49
00:03:06,650 --> 00:03:08,450
So first one title.

50
00:03:09,130 --> 00:03:15,250
And in here, I'm just going to say current users, since this is where I'll pass in the users value.

51
00:03:15,730 --> 00:03:21,160
After that, we're going to go with count and that one will be equal to my users.

52
00:03:21,190 --> 00:03:26,980
Then as far as the color I'll provide here, hashtag E nine.

53
00:03:26,980 --> 00:03:33,520
So E nine, then B nine and for nine, B nine and for nine.

54
00:03:33,520 --> 00:03:37,810
And then when it comes to background color, let's go with BG.

55
00:03:39,020 --> 00:03:43,490
And this one will be equal to hashtag f c.

56
00:03:46,080 --> 00:03:48,120
C seven.

57
00:03:48,450 --> 00:03:51,500
So again, we're just hardcoding here this value.

58
00:03:51,510 --> 00:03:54,780
And then lastly, let's also pass in the icon.

59
00:03:54,870 --> 00:03:57,210
And in this case, I'm looking for this one.

60
00:03:58,120 --> 00:04:00,610
So let me close here the component.

61
00:04:01,460 --> 00:04:03,650
Then let me close the item.

62
00:04:03,920 --> 00:04:08,800
And pretty much we just want to copy and paste and now provide the jobs over here.

63
00:04:08,810 --> 00:04:11,930
So this will be equal to total jobs.

64
00:04:13,740 --> 00:04:17,310
Total jobs then count is going to be equal to.

65
00:04:17,940 --> 00:04:20,850
Our jobs value when it comes to color.

66
00:04:21,089 --> 00:04:22,480
I'm going to go with this one.

67
00:04:22,500 --> 00:04:27,120
So we're going to go with six, four, seven, A, C, b.

68
00:04:27,240 --> 00:04:30,030
And then when it comes to a background color.

69
00:04:30,730 --> 00:04:31,920
We're going to go with E!

70
00:04:32,320 --> 00:04:33,160
Zero.

71
00:04:34,110 --> 00:04:38,000
E eight and F nine.

72
00:04:38,010 --> 00:04:42,750
And of course, as far as the icon, we're just going to go with the second one.

73
00:04:42,780 --> 00:04:44,400
The calendar check one.

74
00:04:45,100 --> 00:04:50,590
Now let me navigate back to the browser and keep in mind that if we want to see stuff, of course we

75
00:04:50,590 --> 00:04:52,380
need to log in as admin.

76
00:04:52,390 --> 00:04:53,830
In my case that is John.

77
00:04:54,010 --> 00:04:54,760
Let's log in.

78
00:04:54,760 --> 00:05:00,580
Let's navigate to an admin page and if everything is correct, you'll see the amount of total users

79
00:05:00,610 --> 00:05:02,580
as well as total jobs.

80
00:05:02,590 --> 00:05:07,270
Now if I go to add job and add another instance for example.

81
00:05:08,130 --> 00:05:09,510
Front end and Apple.

82
00:05:09,510 --> 00:05:10,050
And you know what?

83
00:05:10,050 --> 00:05:12,480
Let me change it to the client.

84
00:05:13,440 --> 00:05:17,790
Then of course I'll see that in the all jobs and also in the admin.

85
00:05:17,820 --> 00:05:21,110
I'll right away have the current value.

86
00:05:21,120 --> 00:05:24,440
So now I have four users and two total jobs.

87
00:05:24,450 --> 00:05:30,120
And again, only the users whose role is equal to admin can view this page.