‫So before we can start building
‫our statistics and charts
‫we first need to compute the latest bookings
‫and stays from our super base bookings table.
‫Now here it's really, really important to distinguish
‫between these two types of data.
‫So between bookings and stays.
‫So the bookings are the actual sales.
‫So for example, in the last 30 days
‫the hotel might have sold 50 bookings online,
‫but maybe 30 of these guests will only arrive
‫and check into the hotel in the far future like month
‫or even a year after they have booked the booking.
‫Now, on the other hand, we have the stays.
‫So stays are the actual check-ins
‫of guests as they arrive for their bookings
‫in our hotel that we can identify stays simply
‫by their start date together
‫with the status of either checked in or checked out.
‫So again, as a summary, a booking is an actual sale
‫while a stay is a guest actually staying in the hotel.
‫And these things are very different
‫and we need them for different parts
‫of our statistics and also these charts,
‫for example this chart here will be about stays,
‫so stay durations, and these sales
‫will really be about the bookings.
‫And so now we need to compute these two separately.
‫Now, I did already write the functions for doing that.
‫So in our services we will now go back to our bookings API.
‫And so somewhere here, yeah,
‫so here we have get bookings after date.
‫So what this does is to return to us
‫all the bookings that were created
‫after the given date and that date is important
‫so that we can factor in these last 7, 30, or 90 days.
‫And so the way that this works is that
‫as we already know how to do, it'll query all the bookings,
‫then it will select these three columns here,
‫and then here we have some filters.
‫So we're gonna get all the bookings that were created
‫after this date and before today.
‫So basically between today
‫and for example the last 30 days.
‫Now here, this date,
‫which is the date that this function receives
‫needs to be an ISO string or an ISO string.
‫Not sure how we say that.
‫So the date needs to be an ISO string.
‫So that's what super base expects here.
‫Now for the current date, so for today
‫we have this helper function here in our helpers file,
‫and so this will then get the current date
‫and return it as an ISO string.
‫Now what's important here is that we have passed
‫in this option of end to true, and the reason
‫for that is that if we just compute the current day
‫that date will change every second
‫because that date will also include the current time.
‫And so then here we use that trick where
‫if options is equal to end, then we set,
‫so we fix this date here to the last basically millisecond
‫of the day, and otherwise we fix it
‫to the very first millisecond of the day now, right?
‫So basically just fixing the date to the current day
‫so that it doesn't change after every millisecond.
‫So that's important here.
‫And then the rest is the same.
‫So this will just return then all those bookings
‫which were again created between these two dates.
‫So between today and the date that was passed in,
‫which is gonna be some date
‫either the last 7, 30, or 90 days.
‫Now if all this seems a bit too magical
‫like it appeared out of nowhere, then the reason
‫for that is that here, my main concern is not really
‫on how to get all this data and how to manipulate it
‫but what I really want is for you to learn how
‫to then use the data and display some charts with it.
‫So that's what we will do later.
‫And again, that's my main focus
‫of building this dashboard here in the first place.
‫But for that, of course, we need data.
‫And so here we have that other function
‫for getting the stays.
‫So that's very similar.
‫We again, get this data from the bookings.
‫So here we don't need this.
‫Then we will take everything and also the guest's name.
‫And then here we do exactly what we did earlier here,
‫but with the difference that we don't use
‫the created at date, which is when the booking was made,
‫but really when the booking actually starts.
‫So when the user basically is gonna check in at the hotel.
‫And so that's why here we use that start date.
‫All right, so these are the two functions
‫that we're going to use.
‫And then as always, we need to get them
‫into our application by using React Query.
‫So then we create a custom hook for that.
‫So let's call this one use recent bookings.
‫So export function, use recent bookings.
‫And so this is where we will then get these last days here.
‫So basically for how many days in the past
‫we want to get our data.
‫And so that's as always gonna come forward
‫or from the search params.
‫So use search params.
‫And then here, let's say numb days.
‫So let's say we don't have any search params yet.
‫Then in that case the default is just seven.
‫So basically this one here is gonna be our default
‫and otherwise we just convert this part here to a number.
‫So if that doesn't exist, it'll just be null,
‫and so then or number of days will become seven.
‫But now what do we actually do
‫with these seven days, or these 30, or these 90 days?
‫Because that's not what we need to pass
‫in here into these functions.
‫So here we need actually a date that is already seven,
‫or 30, or 90 days ago, right?
‫And so we need to calculate that here.
‫So let's call that query date.
‫And for that we have a very handy function
‫in the functions FNS package that we included earlier.
‫So we can just do sub days.
‫So make sure to import that from this library.
‫And so this function takes as the first argument,
‫the current date, so right now basically,
‫and then the number of days that we want to subtract.
‫So that's gonna be the number of days.
‫And then remember that that function needs an ISO string.
‫So we just convert that like this.
‫And so then we are ready to use our function.
‫And so for that we will use React Query.
‫And so then we will get is loading the data
‫which will be the bookings
‫and also an error which we can use
‫or can just ignore it as well.
‫So then use query, anterior d query function
‫is going to be a callback with, get bookings after date,
‫where we then pass in our query date.
‫All right?
‫And then we need to query key.
‫So let's call this one here,
‫bookings, but we already have a bookings key.
‫So basically this one here also has the bookings key, right?
‫And so here, let's change that
‫and let's actually add then the number
‫of days here because just like with the bookings or data
‫can actually change.
‫And whenever we change this year
‫we want the data to be re-fetched automatically.
‫And so we can just add that value that changes here
‫in this array, which is again a bit like a dependency array.
‫So let's say last and then here, just the number of days.
‫Okay.
‫And so as always, let's now return all this stuff.
‫So it's loading and bookings.
‫And then here in our dashboard, let's use that.
‫So bookings and is loading from use recent bookings.
‫Then if is loading return as always or loading spinner.
‫And then after that, let's just take a look
‫at our bookings to see if everything worked.
‫And apparently it did.
‫So it seems like we have 15 bookings
‫that were made in the last 30 days.
‫Let's change to seven, but then we only have seven bookings
‫and we can of course also check them out here
‫without logging everything to the console.
‫So seven or 30 days.
‫And finally for 90 days, we should get some more.
‫Yeah, then we have 19 bookings.
‫So that makes sense because
‫of course the longer the time span
‫the more bookings will have happened.
‫All these bookings are of course
‫also stored here inside the cache.
‫So as we move here, then there's no loading spinner again
‫and data is just retrieved
‫from the query or from the cache.
‫Now, okay, and now let's do just the exact same thing here
‫for the recent stays.
‫So let's simply duplicate this.
‫Let's close this one.
‫And all this logic here needs to be the same
‫but what changes is then here
‫that we want get stays after date.
‫Then here we remove that.
‫Here, let's call this stays in all these occurrences.
‫So the data and here also the query key.
‫Now here we will also need some additional computing
‫which is to calculate only the confirmed stays.
‫So the ones that are not unconfirmed,
‫so confirmed stays.
‫And so here we can simply do stays, if they exist,
‫and then dot filter.
‫So here for each day, we only want to keep this day
‫if the status like this is basically
‫either checked in or checked out,
‫so checked in, or let's grab this,
‫checked out.
‫And we need to know about this
‫because the guest might actually never show up at our hotel.
‫And so then that booking stays unconfirmed forever.
‫And in some situations here in our dashboard
‫we are interested only in these confirmed stays.
‫So let's return them here as well.
‫All right.
‫And with this, let's also get them in here.
‫So stays, confirmed stays, and is loading.
‫So let's rename that to like is loading one and then here
‫maybe this one here should actually be reloading two
‫and then use resend, and probably we didn't, yeah,
‫we didn't change the name here.
‫So that happens to me all the time.
‫But well now it doesn't show up anymore.
‫So use recent stays.
‫Let's bring that in.
‫And then we get some other, ah,
‫is loading one or is loading two.
‫Okay, let's then log the confirmed.
‫Or actually we don't need to log anything
‫so we can just check them out if we want right here.
‫And so here we get seven stays and seven bookings, actually.
‫Let's see, for 90.
‫So here we get 14 stays and 19 bookings.
‫So just to make sure
‫that this data is actually different.
‫Now, okay, and now in the next lecture
‫let's start to use this data to build out
‫our statistics for our dashboard.