1 00:00:00,760 --> 00:00:04,000 So this is the dashboard page that we would like to build. 2 00:00:04,320 --> 00:00:08,320 So we're going to have a link that is going to take us to the schedule page. 3 00:00:08,320 --> 00:00:11,560 And we're going to have our interviews with groups. 4 00:00:11,560 --> 00:00:12,080 Right. 5 00:00:12,120 --> 00:00:18,160 So here we have upcoming interviews completed ones succeeded as well as the failed ones. 6 00:00:18,400 --> 00:00:25,920 And if it is completed, we can either mark this with pass or failed and we can add comments. 7 00:00:26,040 --> 00:00:32,440 So when we click this button we're going to see this kind of a model where we can add a rating from 8 00:00:32,440 --> 00:00:34,720 1 to 5 and add a comment. 9 00:00:34,720 --> 00:00:35,720 Submit that. 10 00:00:35,720 --> 00:00:41,640 And that comment in real time would be added into this previous comments section. 11 00:00:41,840 --> 00:00:46,720 So every admin can see it or every interviewer can see it. 12 00:00:47,280 --> 00:00:49,400 So let's try to build this UI. 13 00:00:49,400 --> 00:00:52,480 And later in the video we're going to build this model. 14 00:00:53,520 --> 00:00:53,960 Okay. 15 00:00:54,320 --> 00:00:57,400 So let's go ahead and visit the dashboard page. 16 00:00:57,680 --> 00:00:59,760 First I will delete this time slot. 17 00:00:59,800 --> 00:01:02,720 That was just for testing purposes that I have added. 18 00:01:03,040 --> 00:01:05,440 Let's delete it and close everything. 19 00:01:06,800 --> 00:01:08,080 We'll go under the source. 20 00:01:08,080 --> 00:01:08,920 Under the app. 21 00:01:08,960 --> 00:01:11,320 We have this admin dashboard page. 22 00:01:11,520 --> 00:01:15,440 Let's shrink the left hand side and try to build this file. 23 00:01:17,160 --> 00:01:22,080 So once again this is going to be a client component I'll be using some hooks in this file. 24 00:01:22,560 --> 00:01:26,880 First things first we would like to get all the users with a query. 25 00:01:27,160 --> 00:01:30,000 Let's import the API as well as use query. 26 00:01:30,120 --> 00:01:35,360 We are going under the users table and call this query that we have built. 27 00:01:35,640 --> 00:01:42,960 Then we will get all the interviews right as well as a mutation that is going to allow us to update 28 00:01:42,960 --> 00:01:44,360 the interview status. 29 00:01:44,680 --> 00:01:49,320 So this is something that we have built really early in the video right. 30 00:01:49,600 --> 00:01:51,800 This will basically update the status. 31 00:01:51,800 --> 00:01:56,560 And if it is completed it will add the end time to the document. 32 00:01:57,200 --> 00:01:58,920 Let's import the Usemutation. 33 00:01:59,160 --> 00:02:04,730 Then I would like to have a function To handle this update status. 34 00:02:05,450 --> 00:02:07,570 So let me show you the demo application. 35 00:02:07,810 --> 00:02:13,410 When you click to this button or this one, we will be calling this handle Status Update. 36 00:02:13,610 --> 00:02:18,810 Either it is failed or succeeded and we are going to pass the interview ID. 37 00:02:19,250 --> 00:02:22,050 Let's import this ID from the convex. 38 00:02:22,330 --> 00:02:27,130 So we basically say this interview id will be type of interview ID. 39 00:02:27,490 --> 00:02:30,850 And we can call our mutation with the arguments. 40 00:02:31,290 --> 00:02:37,370 Then we can call this toast either with a success message or with an error message. 41 00:02:37,810 --> 00:02:45,850 Then I'll say if we don't have interviews or users, we can show the loader UI and what will. 42 00:02:46,130 --> 00:02:50,370 What we would like to do is basically group all the interviews. 43 00:02:50,530 --> 00:02:54,610 So we're going to have upcoming interviews here on the section. 44 00:02:54,770 --> 00:03:01,410 In this example there is only one, but we would like to display all of them if we have more than once. 45 00:03:01,450 --> 00:03:01,890 Right. 46 00:03:02,570 --> 00:03:03,690 So it should look like this. 47 00:03:03,730 --> 00:03:07,490 We're going to group every single one of them into their own category. 48 00:03:08,810 --> 00:03:14,650 And for this we have a function in the utils file that I have provided early in the video. 49 00:03:15,210 --> 00:03:18,890 So let's try to use this by passing the inner views into it. 50 00:03:19,650 --> 00:03:21,930 So I'll go ahead and paste this in. 51 00:03:22,170 --> 00:03:23,490 Import this function. 52 00:03:23,850 --> 00:03:27,690 This is going to give us the inner views in a grouped way right. 53 00:03:27,970 --> 00:03:30,050 Then we can build the return statement. 54 00:03:30,650 --> 00:03:31,970 I'll just delete everything. 55 00:03:32,010 --> 00:03:36,490 Have a div with class name of container. 56 00:03:37,410 --> 00:03:42,170 Let's say Amex Auto so that it's being centered heading Y of ten. 57 00:03:42,570 --> 00:03:49,090 Then I would like to have one more div that is going to hold the link so that we can take the user to 58 00:03:49,130 --> 00:03:50,330 the schedule page. 59 00:03:52,050 --> 00:03:59,650 So this is going to be coming from next link as well as the button that is coming from components folder. 60 00:04:00,050 --> 00:04:01,650 Let's add some classes here. 61 00:04:01,690 --> 00:04:03,530 I'll say class name flex. 62 00:04:03,530 --> 00:04:03,660 Likes. 63 00:04:04,380 --> 00:04:06,580 It should be items centered. 64 00:04:07,180 --> 00:04:12,380 Let's say item centered and then margin bottom of eight. 65 00:04:14,940 --> 00:04:18,140 Okay, so this is the very first thing that we would like to add. 66 00:04:18,340 --> 00:04:19,180 Now we'll go ahead. 67 00:04:19,180 --> 00:04:24,700 After this div add one more div with one class name called space. 68 00:04:24,740 --> 00:04:25,900 Y of eight. 69 00:04:26,220 --> 00:04:33,660 Then inside I would like to basically get the inner view category, which is a constant that we have 70 00:04:33,660 --> 00:04:34,420 once again. 71 00:04:35,260 --> 00:04:39,420 So we have the upcoming category with a title and then the variant. 72 00:04:39,460 --> 00:04:42,380 This is going to be used for styling. 73 00:04:42,900 --> 00:04:46,540 So if you can see this is type of outline I believe. 74 00:04:46,940 --> 00:04:50,100 So outline secondary default and destructive. 75 00:04:51,940 --> 00:04:54,220 So it is going in this order as you can tell. 76 00:04:54,660 --> 00:04:56,300 This is the destructive one. 77 00:04:56,300 --> 00:05:01,300 So that we can understand that this is in the failed failed category. 78 00:05:02,860 --> 00:05:03,300 Okay. 79 00:05:03,340 --> 00:05:05,860 So let's just speed up a up a little bit, we'll say. 80 00:05:05,900 --> 00:05:12,900 Interview category dot map where we'll get each category just like this. 81 00:05:13,140 --> 00:05:16,220 And for each category I would like to add a check. 82 00:05:16,340 --> 00:05:27,980 I'll say group interviews category.id if let's say this is existed and if it has some length. 83 00:05:27,980 --> 00:05:32,780 So if it is greater than zero we would like to return a section component. 84 00:05:35,140 --> 00:05:40,060 Which is going to take the key let's say category.id. 85 00:05:40,300 --> 00:05:42,740 Then we can go ahead and actually build the UI. 86 00:05:43,180 --> 00:05:45,100 So I'll say category. 87 00:05:47,660 --> 00:05:48,220 Title. 88 00:05:48,900 --> 00:05:53,820 And we can grab this div which is going to have the H2 with a badge. 89 00:05:55,700 --> 00:06:02,580 So we are displaying the category title as well as the number of uh category number of interviews that 90 00:06:02,580 --> 00:06:04,100 is in this category. 91 00:06:04,100 --> 00:06:08,870 So what I mean here we have just built this component, right? 92 00:06:08,910 --> 00:06:11,750 The number of interviews that we have in this category. 93 00:06:13,030 --> 00:06:13,350 Okay. 94 00:06:13,390 --> 00:06:20,950 So after the category title, but still inside the section I will create a div with some classes, let's 95 00:06:20,950 --> 00:06:27,070 say grid grid columns of one medium screens and above grid columns of two. 96 00:06:27,190 --> 00:06:32,910 And then finally larger screens and above grid columns of three three. 97 00:06:32,950 --> 00:06:33,270 Right. 98 00:06:33,310 --> 00:06:36,110 So we had two like one, two, three. 99 00:06:36,670 --> 00:06:41,030 And then we'll just say gap of four inside this div. 100 00:06:41,030 --> 00:06:47,430 Once again we'll just try to map through something which is going to be grouped interviews. 101 00:06:47,550 --> 00:06:48,070 Dot. 102 00:06:48,990 --> 00:06:57,030 Actually let's get the ID in this way category.id and we'll say dot map grab each interview. 103 00:06:59,310 --> 00:07:01,710 Which is going to be type of interview. 104 00:07:01,750 --> 00:07:02,710 Just like this. 105 00:07:02,870 --> 00:07:09,190 We would like to return something and I think we think we should wrap it like this so that it's happy 106 00:07:09,190 --> 00:07:12,950 with us so we can create this in a new type once again. 107 00:07:18,630 --> 00:07:21,230 So this is something that we have done multiple times. 108 00:07:25,430 --> 00:07:25,870 Okay. 109 00:07:26,070 --> 00:07:31,670 So in the return statement we will have not just these brackets. 110 00:07:31,670 --> 00:07:35,470 This is going to be a function body so that we can calculate something. 111 00:07:35,510 --> 00:07:39,110 So I'll just say const candidate info. 112 00:07:39,750 --> 00:07:43,430 And we have a function for this get candidate info. 113 00:07:43,710 --> 00:07:48,750 We're going to pass the users as well as the interview dot candidate ID. 114 00:07:49,110 --> 00:07:51,270 Then we'll have the start time. 115 00:07:53,590 --> 00:07:59,670 So I'll just say new date and pass the interview dot start time. 116 00:08:01,390 --> 00:08:04,910 Finally we'll have our return statement which is going to be our UI. 117 00:08:05,190 --> 00:08:10,950 So let's have a card component and import it from the components UI. 118 00:08:11,270 --> 00:08:21,150 And let's have the class name of hover state of shadow MD and we can add transition all. 119 00:08:22,310 --> 00:08:22,830 Okay. 120 00:08:22,910 --> 00:08:30,230 So in this card we would like to have a couple of different fields such as candidate info. 121 00:08:30,950 --> 00:08:35,270 We would like to have date and time. 122 00:08:38,790 --> 00:08:44,230 Then we would like to have the pass and fail buttons. 123 00:08:44,230 --> 00:08:48,550 So these are going to be our actions and let's try to build them one by one. 124 00:08:49,150 --> 00:08:50,950 I will go ahead and paste this in. 125 00:08:51,030 --> 00:08:56,030 We have a card header that is containing the avatar of the user. 126 00:08:56,070 --> 00:09:00,870 Let's get the avatar avatar image as well as a fallback. 127 00:09:03,270 --> 00:09:05,070 And the card title. 128 00:09:06,230 --> 00:09:08,440 So here I think I have a typo. 129 00:09:08,480 --> 00:09:10,400 This should be candidate. 130 00:09:10,640 --> 00:09:13,560 Okay, so it should be like this. 131 00:09:14,200 --> 00:09:14,800 There we go. 132 00:09:15,720 --> 00:09:18,160 So that's going to be it for the candidate info. 133 00:09:18,200 --> 00:09:21,520 After this card header we can build the date and time. 134 00:09:22,120 --> 00:09:26,680 I'll give a little bit space and just grab this code from GitHub. 135 00:09:26,840 --> 00:09:28,840 Once again this is UI related. 136 00:09:30,040 --> 00:09:31,240 I'll just paste this in. 137 00:09:31,280 --> 00:09:35,440 We have the calendar icon coming from Lucid React. 138 00:09:35,440 --> 00:09:36,680 We have the format. 139 00:09:37,400 --> 00:09:39,560 This should be coming from date fns. 140 00:09:40,320 --> 00:09:42,120 For some reason I cannot see it. 141 00:09:42,440 --> 00:09:47,680 So let's get this icon and try to import this format function. 142 00:09:48,160 --> 00:09:49,480 So I'll say import. 143 00:09:56,520 --> 00:09:58,800 Okay so this should be happy with us. 144 00:10:01,320 --> 00:10:04,000 We will get the start time as well as. 145 00:10:05,280 --> 00:10:07,600 So why do we have start time twice. 146 00:10:07,840 --> 00:10:08,040 Okay. 147 00:10:08,160 --> 00:10:11,680 so one of them is for the like. 148 00:10:11,840 --> 00:10:14,360 One is for the day and the other one for the hour. 149 00:10:14,760 --> 00:10:18,520 And below to the cart content we will have our actions. 150 00:10:18,920 --> 00:10:23,160 So I would like to grab this once again for the very last time. 151 00:10:23,200 --> 00:10:32,440 From the GitHub repo we will have a cart footer component check circle two icon as well as x circle 152 00:10:32,440 --> 00:10:33,040 icon. 153 00:10:33,600 --> 00:10:36,480 Okay, we have comment dialogue component for now. 154 00:10:36,520 --> 00:10:37,440 Comment this out. 155 00:10:37,480 --> 00:10:39,920 We'll be building this in the next section. 156 00:10:40,280 --> 00:10:43,400 But so far we have our actions. 157 00:10:43,600 --> 00:10:50,200 So if we click to the pass button we will call the handle Status update function with the succeeded 158 00:10:50,560 --> 00:10:54,080 state in the failed case, we'll just say failed. 159 00:10:54,720 --> 00:10:56,320 Let's try to test this out. 160 00:10:56,360 --> 00:10:58,880 Hopefully it should be working out as expected. 161 00:10:59,480 --> 00:11:03,200 Okay, so this interview has been completed right. 162 00:11:03,600 --> 00:11:06,600 This is what we have in the database. 163 00:11:07,000 --> 00:11:10,130 I'll go ahead and just say pass press interview. 164 00:11:10,130 --> 00:11:11,210 Mark has succeeded. 165 00:11:11,210 --> 00:11:16,450 Now it is in the succeeded state, and there we can see this is what we got. 166 00:11:16,730 --> 00:11:22,330 I'll go ahead and just once again say completed so that we can try to fail it. 167 00:11:23,010 --> 00:11:23,410 Um. 168 00:11:23,530 --> 00:11:24,450 I'll refresh. 169 00:11:26,010 --> 00:11:26,330 Okay. 170 00:11:26,370 --> 00:11:29,610 So we are in the completed state and I'll just say fail. 171 00:11:30,010 --> 00:11:33,930 It is in the failed state and database should be updated. 172 00:11:34,690 --> 00:11:34,970 Okay. 173 00:11:35,010 --> 00:11:37,490 So with this everything is working as expected. 174 00:11:37,490 --> 00:11:44,170 We can format the date and the time and have our actions working. 175 00:11:44,210 --> 00:11:49,570 If we click this button, this is going to take us to the schedule page where we can schedule an interview. 176 00:11:50,690 --> 00:11:56,850 Okay, so I hope you guys don't mind it that I copy and paste some code that is only related to UI. 177 00:11:57,650 --> 00:12:00,570 Otherwise this tutorial would be more than ten hours. 178 00:12:01,370 --> 00:12:07,210 Okay, so with this in the next section we're going to build this component called comment dialog. 179 00:12:07,930 --> 00:12:10,690 So I'll just save this file and I'll see you in the next section.