‫All right, so as the first part of our dashboard,
‫let's now calculate and display statistics
‫on recent bookings, recent sales, check-ins
‫and the total occupancy rate.
‫So let's create a new component that we're gonna call stats.
‫And so all this will do is to calculate those statistics
‫and then display one of these stat components
‫for each of them.
‫So this year we'll simply receive an icon, a title, a value
‫and a color.
‫And we'll then basically render these different components.
‫So it's just a purely presentational component.
‫So first off, here we will need to receive some data,
‫for example, the bookings and also the confirmed stays.
‫So let's pass those in.
‫So the bookings will be bookings
‫and of course the confirmed stays.
‫All right and so here, let's start calculating.
‫So number one are the number of bookings.
‫So we don't need to write that there.
‫So number of bookings is simply bookings dot length.
‫So this one is very easy.
‫And so let's now start to returning or stats.
‫Now here we will want, again, a fragment so that
‫we can then return these four stat components separately.
‫So here we need to bring that in manually.
‫So import stat from, like this.
‫And so yeah, so we will want to occupy these four columns
‫with four different set components
‫and therefore we need to return them here separately
‫and not one big component.
‫'Cause if it was just one component,
‫then that would only occupy this first column, right?
‫So we can actually already return the four
‫and then we can nicely see that, while if it was a div,
‫then this is what we would get.
‫But anyway, here,
‫let's now pass in the title, which should be bookings.
‫Then the color here will be blue.
‫And so these colors will then be taken
‫from our CSS variables.
‫The icon is gonna be HI outline briefcase.
‫And finally we need of course, our value.
‫So that's the number of bookings and there we are.
‫Nice, so looking really great with, again, this nice design.
‫And actually let's duplicate this one a few times.
‫And so with this, it is starting to look like something.
‫So here, let's already replace the titles
‫so that we know what we actually want.
‫And here we want the check ins.
‫And finally we want the occupancy rate.
‫Then here the color will be green
‫and here we will have some dollar notes.
‫So outline, bank notes.
‫Then next up the check-ins are this indigo blue.
‫And here we will have outline calendar days.
‫Yep, looking better and better.
‫And then finally, this color is gonna be yellow
‫with high outline charge bar.
‫So a nice example
‫of a small, reusable and presentational component.
‫But anyway, our next statistic is going to be
‫the total sales and so those we will get
‫from adding together all the total prices from all bookings.
‫So it could have pre-written all this code here as well.
‫But yeah, it's also nice to write some
‫of the JavaScript ourselves.
‫So here we will have an accumulator
‫which is gonna start at zero.
‫And then in each iteration we will just
‫add the current total price of each booking.
‫And again, starting at zero.
‫So let's use that here.
‫And that's looking great.
‫But actually here, let's then also format this.
‫So format currency, this function that we have been using.
‫And so that's looking a lot nicer.
‫Next up, we need the total check-ins.
‫So that's statistic number three.
‫So check-ins.
‫And so these are basically the confirmed stays dot length.
‫And so that's why we needed to compute
‫these actual confirmed stays.
‫So if it was just stays,
‫then those might include some that were actually
‫never checked in and then never checked out.
‫But like this, we really only have the ones where the users
‫or where the guest actually showed.
‫So check-ins, and those are 11 right now.
‫And then finally, we need the occupancy rate.
‫So this one is gonna be a bit more difficult
‫but we're just gonna use a nice trick here
‫that's not gonna be 100% accurate
‫but we just want to keep it simple here.
‫So let's think about this.
‫So this occupation is basically gonna be the number
‫of checked in nights divided by all available nights.
‫So that's what the occupation of the hotel
‫during the last 90 days or whatever days actually means.
‫And so all we need to do is to compute these two values.
‫So the number of checked in nights we can easily get
‫from the confirmed stays, and then just reduce that.
‫So accumulator, which again is gonna start at zero
‫plus always in each iteration the number of nights.
‫So that's a value that we have available in all bookings,
‫right and so we can use that to add together
‫how many nights guests have stayed.
‫So that's not the final value yet
‫but let's check it out here.
‫And so guests have stayed
‫in our hotel for a total of 68 nights.
‫Now the number of available nights are not these 90 nights
‫but really 90 times the number of cabins.
‫So that's the number of nights, so,
‫of stays that we could have sold, right?
‫And only if all of those 90 times eight cabins
‫would've been sold,
‫then we would have an occupancy rate of 100%.
‫So this part here, again, it's basically the number of days
‫times the number of cabins.
‫And so we need to get both these values in here.
‫So number of days, and let's call this the cabin count
‫as we have called it earlier.
‫So the number of days we can actually get
‫from any of these two hooks here.
‫So we could also compute it again in this component
‫but we already did that here, so this num days.
‫And so we can just return that here.
‫So from the recent days
‫we get num days and the number of cabins.
‫Well, for that we need to use the use cabins hook,
‫so that's no problem at all.
‫That's why we have that reusable hook.
‫So cabins and is loading
‫let's rename it to is loading three, and then use cabins.
‫And so here we have another use case,
‫why it is so great to have this kind of data encapsulated
‫into these reusable hooks.
‫So here we need to account for is loading three as well.
‫And then here now we want to pass
‫in the number of days and then also the cabin count.
‫So let's compute that here immediately.
‫So cabins dot length.
‫All right and so here,
‫all we need to do is to now divide this entire thing
‫by number of days, times the cabin count.
‫And so with this we get 0.09,
‫so that's just 9% of occupation.
‫Now here, let's then round this and also multiply it
‫by 100 so that we get an actual percentage, so round.
‫And then let's just add a percentage sign.
‫And there we go.
‫And of course, now we can calculate these
‫for all these different days very easily.
‫So if we look just at the last seven days
‫then our occupancy rate is 36%.
‫So that looks pretty good.
‫And usually our app should be a bit bigger here.
‫And so then of course,
‫these four columns would all have the same size
‫so then this layout would look even better.
‫But even while we're developing here
‫it looks pretty decent as well.
‫And so then we can easily switch between windows.
‫But anyway,
‫I hope you had fun building this really cool looking part.
‫And so let's now move on to building these charts.