So this is the dashboard page that we would like to build.
So we're going to have a link that is going to take us to the schedule page.
And we're going to have our interviews with groups.
Right.
So here we have upcoming interviews completed ones succeeded as well as the failed ones.
And if it is completed, we can either mark this with pass or failed and we can add comments.
So when we click this button we're going to see this kind of a model where we can add a rating from
1 to 5 and add a comment.
Submit that.
And that comment in real time would be added into this previous comments section.
So every admin can see it or every interviewer can see it.
So let's try to build this UI.
And later in the video we're going to build this model.
Okay.
So let's go ahead and visit the dashboard page.
First I will delete this time slot.
That was just for testing purposes that I have added.
Let's delete it and close everything.
We'll go under the source.
Under the app.
We have this admin dashboard page.
Let's shrink the left hand side and try to build this file.
So once again this is going to be a client component I'll be using some hooks in this file.
First things first we would like to get all the users with a query.
Let's import the API as well as use query.
We are going under the users table and call this query that we have built.
Then we will get all the interviews right as well as a mutation that is going to allow us to update
the interview status.
So this is something that we have built really early in the video right.
This will basically update the status.
And if it is completed it will add the end time to the document.
Let's import the Usemutation.
Then I would like to have a function To handle this update status.
So let me show you the demo application.
When you click to this button or this one, we will be calling this handle Status Update.
Either it is failed or succeeded and we are going to pass the interview ID.
Let's import this ID from the convex.
So we basically say this interview id will be type of interview ID.
And we can call our mutation with the arguments.
Then we can call this toast either with a success message or with an error message.
Then I'll say if we don't have interviews or users, we can show the loader UI and what will.
What we would like to do is basically group all the interviews.
So we're going to have upcoming interviews here on the section.
In this example there is only one, but we would like to display all of them if we have more than once.
Right.
So it should look like this.
We're going to group every single one of them into their own category.
And for this we have a function in the utils file that I have provided early in the video.
So let's try to use this by passing the inner views into it.
So I'll go ahead and paste this in.
Import this function.
This is going to give us the inner views in a grouped way right.
Then we can build the return statement.
I'll just delete everything.
Have a div with class name of container.
Let's say Amex Auto so that it's being centered heading Y of ten.
Then I would like to have one more div that is going to hold the link so that we can take the user to
the schedule page.
So this is going to be coming from next link as well as the button that is coming from components folder.
Let's add some classes here.
I'll say class name flex.
Likes.
It should be items centered.
Let's say item centered and then margin bottom of eight.
Okay, so this is the very first thing that we would like to add.
Now we'll go ahead.
After this div add one more div with one class name called space.
Y of eight.
Then inside I would like to basically get the inner view category, which is a constant that we have
once again.
So we have the upcoming category with a title and then the variant.
This is going to be used for styling.
So if you can see this is type of outline I believe.
So outline secondary default and destructive.
So it is going in this order as you can tell.
This is the destructive one.
So that we can understand that this is in the failed failed category.
Okay.
So let's just speed up a up a little bit, we'll say.
Interview category dot map where we'll get each category just like this.
And for each category I would like to add a check.
I'll say group interviews category.id if let's say this is existed and if it has some length.
So if it is greater than zero we would like to return a section component.
Which is going to take the key let's say category.id.
Then we can go ahead and actually build the UI.
So I'll say category.
Title.
And we can grab this div which is going to have the H2 with a badge.
So we are displaying the category title as well as the number of uh category number of interviews that
is in this category.
So what I mean here we have just built this component, right?
The number of interviews that we have in this category.
Okay.
So after the category title, but still inside the section I will create a div with some classes, let's
say grid grid columns of one medium screens and above grid columns of two.
And then finally larger screens and above grid columns of three three.
Right.
So we had two like one, two, three.
And then we'll just say gap of four inside this div.
Once again we'll just try to map through something which is going to be grouped interviews.
Dot.
Actually let's get the ID in this way category.id and we'll say dot map grab each interview.
Which is going to be type of interview.
Just like this.
We would like to return something and I think we think we should wrap it like this so that it's happy
with us so we can create this in a new type once again.
So this is something that we have done multiple times.
Okay.
So in the return statement we will have not just these brackets.
This is going to be a function body so that we can calculate something.
So I'll just say const candidate info.
And we have a function for this get candidate info.
We're going to pass the users as well as the interview dot candidate ID.
Then we'll have the start time.
So I'll just say new date and pass the interview dot start time.
Finally we'll have our return statement which is going to be our UI.
So let's have a card component and import it from the components UI.
And let's have the class name of hover state of shadow MD and we can add transition all.
Okay.
So in this card we would like to have a couple of different fields such as candidate info.
We would like to have date and time.
Then we would like to have the pass and fail buttons.
So these are going to be our actions and let's try to build them one by one.
I will go ahead and paste this in.
We have a card header that is containing the avatar of the user.
Let's get the avatar avatar image as well as a fallback.
And the card title.
So here I think I have a typo.
This should be candidate.
Okay, so it should be like this.
There we go.
So that's going to be it for the candidate info.
After this card header we can build the date and time.
I'll give a little bit space and just grab this code from GitHub.
Once again this is UI related.
I'll just paste this in.
We have the calendar icon coming from Lucid React.
We have the format.
This should be coming from date fns.
For some reason I cannot see it.
So let's get this icon and try to import this format function.
So I'll say import.
Okay so this should be happy with us.
We will get the start time as well as.
So why do we have start time twice.
Okay.
so one of them is for the like.
One is for the day and the other one for the hour.
And below to the cart content we will have our actions.
So I would like to grab this once again for the very last time.
From the GitHub repo we will have a cart footer component check circle two icon as well as x circle
icon.
Okay, we have comment dialogue component for now.
Comment this out.
We'll be building this in the next section.
But so far we have our actions.
So if we click to the pass button we will call the handle Status update function with the succeeded
state in the failed case, we'll just say failed.
Let's try to test this out.
Hopefully it should be working out as expected.
Okay, so this interview has been completed right.
This is what we have in the database.
I'll go ahead and just say pass press interview.
Mark has succeeded.
Now it is in the succeeded state, and there we can see this is what we got.
I'll go ahead and just once again say completed so that we can try to fail it.
Um.
I'll refresh.
Okay.
So we are in the completed state and I'll just say fail.
It is in the failed state and database should be updated.
Okay.
So with this everything is working as expected.
We can format the date and the time and have our actions working.
If we click this button, this is going to take us to the schedule page where we can schedule an interview.
Okay, so I hope you guys don't mind it that I copy and paste some code that is only related to UI.
Otherwise this tutorial would be more than ten hours.
Okay, so with this in the next section we're going to build this component called comment dialog.
So I'll just save this file and I'll see you in the next section.