All right.
And once we have restricted the access to the page, now let's work on the return.
And essentially, I just want to showcase two cards with how many users we have in the application and
how many jobs those users have created.
Of course, sky's the limit.
You can add way more logic in there, but in my case, that's what I'm going to display in the admin
page.
And essentially these cards are going to be coming from the stats page.
So eventually we'll work on the stats page.
And here notice we use them to display how many applications are pending interviews and decline.
So.
At the end of the day, the logic is pretty much the same.
Of course, we're just going to be displaying different info.
Now, why am I telling you that?
Because first I want to create that stat item.
So we're going to go here with stat item X, and since it's not our first component, I'll right away
set up the props we're going to be looking for and also we will right away set up the return.
So we're going to go here with count title icon.
We want to display a color as well as the background color.
And this is going to be interesting component where we will set up those colors using styled components.
So if you want to see how that works, you'll have to watch the video.
Now, right away I want to grab the wrapper and I'm looking for the stat item, so not the dashboard.
Let me go here with Forward Slash and I'm looking for stat item.
And then when it comes to a return, we're going to go here with rapper.
We're going to pass color and background color as props.
So let's set up over here.
Color is equal to the color prop and then background.
Same deal.
We're going to go with BG equals to BG and inside of the wrapper we're going to go with header.
Then let's add a span.
In this case, the class name will be count and this is when we want to showcase.
So essentially, again, we're referencing the prop.
Then let's copy and paste and let's just change this around to icon.
And then right outside of the header, we also want to go with heading five.
Class name will be title.
And you can probably already guess that we're going to use over here the title prop.
Let's save it.
We do want to set up import export.
So we want to navigate to index.js.
Let's select this one over here and let's call this stat item.
And now we want to navigate back to the admin and we want to pass in the data.
So essentially in here in the admin page, these are the icons we're going to use.
So this is what we're going to pass in.
And effectively we just want to grab that component.
So I think I'm going to rely on the auto import in this case.
So I'll say stat item.
So let's import that.
And then remember, we have quite a few props.
So first one title.
And in here, I'm just going to say current users, since this is where I'll pass in the users value.
After that, we're going to go with count and that one will be equal to my users.
Then as far as the color I'll provide here, hashtag E nine.
So E nine, then B nine and for nine, B nine and for nine.
And then when it comes to background color, let's go with BG.
And this one will be equal to hashtag f c.
C seven.
So again, we're just hardcoding here this value.
And then lastly, let's also pass in the icon.
And in this case, I'm looking for this one.
So let me close here the component.
Then let me close the item.
And pretty much we just want to copy and paste and now provide the jobs over here.
So this will be equal to total jobs.
Total jobs then count is going to be equal to.
Our jobs value when it comes to color.
I'm going to go with this one.
So we're going to go with six, four, seven, A, C, b.
And then when it comes to a background color.
We're going to go with E!
Zero.
E eight and F nine.
And of course, as far as the icon, we're just going to go with the second one.
The calendar check one.
Now let me navigate back to the browser and keep in mind that if we want to see stuff, of course we
need to log in as admin.
In my case that is John.
Let's log in.
Let's navigate to an admin page and if everything is correct, you'll see the amount of total users
as well as total jobs.
Now if I go to add job and add another instance for example.
Front end and Apple.
And you know what?
Let me change it to the client.
Then of course I'll see that in the all jobs and also in the admin.
I'll right away have the current value.
So now I have four users and two total jobs.
And again, only the users whose role is equal to admin can view this page.