1 00:00:00,140 --> 00:00:03,320 All right, so now let's start working on the stats container. 2 00:00:03,320 --> 00:00:09,830 And effectively we just want to showcase three cards with the values of pending interview and the client. 3 00:00:09,830 --> 00:00:16,070 And this one should look very, very familiar because we already use the wrapper for stats container 4 00:00:16,070 --> 00:00:19,400 as well as the stat item in the admin page. 5 00:00:19,400 --> 00:00:22,630 So let's just navigate back to jog our memory. 6 00:00:22,640 --> 00:00:23,960 So notice here. 7 00:00:24,840 --> 00:00:33,840 We were grabbing users and jobs from use loader data and then in the wrapper, one by one we placed 8 00:00:33,870 --> 00:00:35,010 the stat item. 9 00:00:35,010 --> 00:00:41,910 And when it comes to the stat item component, it's looking for these properties and the setup in the 10 00:00:41,910 --> 00:00:43,830 stats container is going to be. 11 00:00:44,560 --> 00:00:45,420 Almost the same. 12 00:00:45,430 --> 00:00:53,350 The only difference will set up an array by the name of stat and will iterate over and for every item 13 00:00:53,350 --> 00:00:55,330 we will set up a stat item. 14 00:00:55,330 --> 00:00:58,440 And yes, it's going to be pretty much in the same wrapper. 15 00:00:58,450 --> 00:01:00,870 So now let's navigate back to the Readme. 16 00:01:01,300 --> 00:01:03,910 We want to grab the imports over here. 17 00:01:03,910 --> 00:01:09,940 So effectively since the stat item is looking for the icon, that's why I imported some icons wrapper 18 00:01:09,970 --> 00:01:13,280 the stats container as well as the stat item. 19 00:01:13,300 --> 00:01:14,710 Let's grab this. 20 00:01:14,890 --> 00:01:18,500 Then in here, let's copy and paste. 21 00:01:18,520 --> 00:01:23,380 Remember, we are grabbing the default stats prop. 22 00:01:23,380 --> 00:01:23,980 Correct. 23 00:01:23,980 --> 00:01:29,980 So let's right away the structure it default stats and like I said in here. 24 00:01:30,790 --> 00:01:32,800 Effectively all hardcode the array. 25 00:01:33,840 --> 00:01:36,450 And then we'll iterate over and then display. 26 00:01:36,480 --> 00:01:42,590 Now the only dynamic value is actually going to be the pending one, the interview or decline. 27 00:01:42,600 --> 00:01:44,160 So how is that going to look like? 28 00:01:44,160 --> 00:01:45,810 I'm going to go with stats. 29 00:01:45,810 --> 00:01:47,010 It's an array. 30 00:01:47,010 --> 00:01:49,710 It's an array of objects, to be more precise. 31 00:01:49,710 --> 00:01:51,210 And let's come up with some values. 32 00:01:51,210 --> 00:01:55,130 So first of all, in here, I'm going to say pending applications. 33 00:01:55,140 --> 00:02:02,250 Now we want to pass in that dynamic value, so I'm going to go with count and that one is equal to default 34 00:02:02,250 --> 00:02:02,610 stats. 35 00:02:02,610 --> 00:02:09,780 And remember, I said that I always like to have the checks on the server as well as the front end. 36 00:02:09,780 --> 00:02:17,520 So here I'll go with optional chaining just in case there's no value and I'll say no, I'm missing a 37 00:02:17,520 --> 00:02:18,420 dot over here. 38 00:02:18,420 --> 00:02:19,700 And then I'll say, You know what? 39 00:02:19,740 --> 00:02:23,460 If there is nothing, then just go with zero. 40 00:02:23,640 --> 00:02:28,020 That way again, we don't have any bugs then icon. 41 00:02:28,560 --> 00:02:31,530 I'll go with the rolling one over here. 42 00:02:31,680 --> 00:02:33,330 Let me close it. 43 00:02:34,140 --> 00:02:36,420 Let me add a comma here, by the way, it's missing. 44 00:02:36,570 --> 00:02:39,360 Then when it comes to color, essentially. 45 00:02:40,250 --> 00:02:42,170 I just want to provide these values. 46 00:02:42,260 --> 00:02:48,950 So notice we'll use one color for the background of the icon and then the other color of is going to 47 00:02:48,950 --> 00:02:52,790 be used for the numbers and also the border in the bottom. 48 00:02:52,790 --> 00:02:56,600 And as far as the first value, we want to set it equal to a string. 49 00:02:56,600 --> 00:02:58,910 And then I'm going to go with F59. 50 00:02:59,980 --> 00:03:07,450 An E0B, I believe, and then comma, and then let's go with BG. 51 00:03:08,140 --> 00:03:13,780 And for this one, we're going to go with hashtag and then f f. 52 00:03:14,600 --> 00:03:17,090 And 3C7. 53 00:03:18,060 --> 00:03:19,130 Let me save it. 54 00:03:19,140 --> 00:03:22,260 I'm going to set up the rest of them in a second. 55 00:03:22,860 --> 00:03:27,420 I just want to see whether everything works, and therefore I'm going to go with the wrapper. 56 00:03:28,160 --> 00:03:33,170 And then like I said, I'm going to navigate over or I'm sorry, I'm going to iterate over the stats 57 00:03:33,170 --> 00:03:33,650 one. 58 00:03:34,340 --> 00:03:36,430 The array I just created. 59 00:03:36,440 --> 00:03:41,720 I'm going to go with map and in my callback function I'm going to reference each and every object, 60 00:03:41,720 --> 00:03:44,480 which at the moment is only one item. 61 00:03:45,380 --> 00:03:49,330 And then from the map, I want to return a stat item. 62 00:03:49,340 --> 00:03:57,260 Then key is going to be equal to item dot title since I don't have the ID over here and then I just 63 00:03:57,260 --> 00:04:01,190 want to pass all of the properties so I'll spread them out. 64 00:04:01,190 --> 00:04:07,640 And if everything is correct, if we navigate here, notice now I have one value for pending applications 65 00:04:07,670 --> 00:04:09,950 and basically it's the same deal. 66 00:04:09,950 --> 00:04:14,210 I just want to navigate back over here and add rest of them. 67 00:04:14,210 --> 00:04:16,490 So let me copy and paste. 68 00:04:18,390 --> 00:04:19,709 Over here as well. 69 00:04:20,680 --> 00:04:23,250 And then we just want to change some values around. 70 00:04:23,260 --> 00:04:28,630 So second one is going to be interviews scheduled as far as the title. 71 00:04:29,900 --> 00:04:32,330 Count is going to be equal to an interview. 72 00:04:37,030 --> 00:04:40,210 Then the icon. 73 00:04:40,210 --> 00:04:42,400 I'm going to go with the calendar check. 74 00:04:43,850 --> 00:04:50,570 And as far as the color and background color, this one will be hashtag 647. 75 00:04:52,160 --> 00:04:53,180 And ACB. 76 00:04:55,990 --> 00:05:05,860 And when it comes to a background one, we want to go here with E, zero, E eight and then F nine. 77 00:05:06,620 --> 00:05:09,860 And lastly, let's work on the declined. 78 00:05:09,890 --> 00:05:12,260 So we're going to go with jobs declined. 79 00:05:13,870 --> 00:05:15,190 Instead of pending. 80 00:05:15,950 --> 00:05:17,150 We'll go with declined. 81 00:05:17,970 --> 00:05:21,030 Now this will be a bug. 82 00:05:23,400 --> 00:05:24,510 The color. 83 00:05:24,660 --> 00:05:27,960 Let's go with hashtag D66. 84 00:05:29,240 --> 00:05:39,050 A6A, I believe, and then f, f, and then for each f, f one, two, three, four. 85 00:05:39,710 --> 00:05:40,880 Let's save this. 86 00:05:40,910 --> 00:05:42,680 Let's navigate to a browser. 87 00:05:42,680 --> 00:05:47,120 And if everything is correct, this is what we should see on the screen. 88 00:05:47,120 --> 00:05:50,420 Now, one last thing before we start working on the charts container. 89 00:05:50,420 --> 00:05:55,370 I'm noticing that for the start item, I don't have the rounded edges. 90 00:05:55,370 --> 00:06:01,010 Basically there should be a border radius, but it looks like I skipped it when I was setting up the 91 00:06:01,010 --> 00:06:01,730 CSS. 92 00:06:01,730 --> 00:06:10,520 So if you're interested, you can navigate to assets, then rappers, then stat item, and then somewhere 93 00:06:10,520 --> 00:06:11,780 here at the top. 94 00:06:11,870 --> 00:06:17,540 Basically add a property by the name of border radius. 95 00:06:19,230 --> 00:06:23,580 And let's set it equal to var and then hyphen hyphen border. 96 00:06:25,020 --> 00:06:25,830 Radius. 97 00:06:25,950 --> 00:06:27,030 Let's save it. 98 00:06:27,030 --> 00:06:33,130 And if everything is correct, notice we have the nice rounded edges as well. 99 00:06:33,150 --> 00:06:36,840 And with this in place, we're done with the stats container. 100 00:06:36,840 --> 00:06:39,300 And now we can start working on the charts. 101 00:06:39,300 --> 00:06:40,020 Container.